Tabs

Switch between related content in the same context.

npx shadcn@latest add @silicon-ui/tabs
navigationlayout
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/tabs

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-tabs lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/tabs/tabs.tsx
    • components/silicon-ui/tabs/tabs.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Tabs } from "@/components/silicon-ui/tabs/tabs";

API reference

Tabs

Accepts the props of TabsProps.

TabsList

Accepts the props of TabsListProps.

TabsTrigger

PropTypeDefault
icon

An icon before the label, such as a 16px Lucide icon. It is sized, coloured with the label (muted, then the active colour when selected) and hidden from screen readers. For an icon-only tab, leave out the label and pass `aria-label`.

ReactNode—

Also accepts the props of ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>.

TabsContent

Accepts the props of TabsContentProps.

Dependencies

npm
@radix-ui/react-tabslucide-reactmotion
Registry
silicon-motion-tokens