Tabs

A simplified wrapper for Shadcn Tabs with flexible option handling and automatic type conversion

Welcome

This is the overview tab content.

Installation

npx shadcn@latest add @glrk-ui/tabs

If you haven't set up the prerequisites yet, check out Prerequest section.

Copy and paste the following code into shadcn tabs component.

ui/tabs.tsx

type tabItemT = {
  value: string
  trigger: React.ReactNode
  content: React.ReactNode
  disabled?: boolean
  triggerCls?: string
  contentCls?: string
}

type tabItemsT = tabItemT[]
type tabsWrapperProps = {
  tabs: tabItemsT
  listCls?: string
  triggerCls?: string
  contentCls?: string
}

function TabsWrapper({
  tabs,
  listCls,
  triggerCls,
  contentCls,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root> & tabsWrapperProps) {
  return (
    <Tabs {...props}>
      <TabsList className={listCls}>
        {tabs.map(tab => (
          <TabsTrigger
            key={tab.value}
            value={tab.value}
            disabled={tab.disabled}
            className={cn(triggerCls, tab.triggerCls)}
          >
            {tab.trigger}
          </TabsTrigger>
        ))}
      </TabsList>

      {tabs.map(tab => (
        <TabsContent
          key={tab.value}
          value={tab.value}
          className={cn(contentCls, tab.contentCls)}
        >
          {tab.content}
        </TabsContent>
      ))}
    </Tabs>
  )
}

Updated TabsWrapper in the export block.

export {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsWrapper,
  type tabItemT,
  type tabItemsT,
}

Installation

npm install @radix-ui/react-tabs

tabs.tsx

Copy and paste the following code into your project.

ui/tabs.tsx

"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 outline-none", className)}
      {...props}
    />
  )
}

type tabItemT = {
  value: string
  trigger: React.ReactNode
  content: React.ReactNode
  disabled?: boolean
  triggerCls?: string
  contentCls?: string
}

type tabItemsT = tabItemT[]
type tabsWrapperProps = {
  tabs: tabItemsT
  listCls?: string
  triggerCls?: string
  contentCls?: string
}

function TabsWrapper({
  tabs,
  listCls,
  triggerCls,
  contentCls,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root> & tabsWrapperProps) {
  return (
    <Tabs {...props}>
      <TabsList className={listCls}>
        {tabs.map(tab => (
          <TabsTrigger
            key={tab.value}
            value={tab.value}
            disabled={tab.disabled}
            className={cn(triggerCls, tab.triggerCls)}
          >
            {tab.trigger}
          </TabsTrigger>
        ))}
      </TabsList>

      {tabs.map(tab => (
        <TabsContent
          key={tab.value}
          value={tab.value}
          className={cn(contentCls, tab.contentCls)}
        >
          {tab.content}
        </TabsContent>
      ))}
    </Tabs>
  )
}

export {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsWrapper,
  type tabItemT,
  type tabItemsT,
}

Done

You can now use TabsWrapper

Usage

Basic

import { TabsWrapper } from "@/components/ui/tabs";

export function Basic() {
  return (
     <TabsWrapper
      tabs={[
        {
          value: "overview",
          trigger: "Overview",
          content: "Over content",
        },
        {
          value: "details",
          trigger: <><User /> Details</>,
          content: (
            <div>
              <h3 className="text-lg font-semibold mb-2">Details</h3>
              <p>More detailed information here.</p>
            </div>
          ),
        },
      ]}
    />
  )
}

Controlled

import { useState } from "react"
import { TabsWrapper } from "@/components/tabs-wrapper"

function ControlledTabs() {
  const [activeTab, setActiveTab] = useState("profile")

  const tabs = [
    {
      value: "profile",
      trigger: "Profile",
      content: <ProfileForm />,
    },
    {
      value: "account",
      trigger: "Account",
      content: <AccountSettings />,
    },
    {
      value: "security",
      trigger: "Security",
      content: <SecuritySettings />,
    },
  ]

  return (
    <div>
      <div className="mb-4 text-sm text-gray-600">
        Current tab: {activeTab}
      </div>
      
      <TabsWrapper
        tabs={tabs}
        value={activeTab}
        onValueChange={setActiveTab}
      />
    </div>
  )
}

Custom Styling

import { TabsWrapper } from "@/components/tabs-wrapper"

function StyledTabs() {
  const tabs = [
    {
      value: "code",
      trigger: "Code",
      content: (
        <pre className="bg-gray-900 text-gray-100 p-4 rounded-md">
          <code>function hello() {`{\n  console.log("Hello")\n}`}</code>
        </pre>
      ),
      contentCls: "mt-0",
    },
    {
      value: "preview",
      trigger: "Preview",
      content: (
        <div className="border rounded-md p-4">
          <button className="bg-blue-500 text-white px-4 py-2 rounded">
            Hello Button
          </button>
        </div>
      ),
      contentCls: "mt-0",
    },
  ]

  return (
    <TabsWrapper
      tabs={tabs}
      defaultValue="code"
      listCls="bg-gray-100 p-1 rounded-t-lg"
      triggerCls="data-[state=active]:bg-white data-[state=active]:shadow-sm"
      contentCls="border border-t-0 rounded-b-lg p-4"
    />
  )
}

Reference

tabItemT

Prop

Type

TabsWrapper

Prop

Type

Tabs

Welcome

On this page