Tabs

Pro

shadcn's tabs (Radix) in Candor's theme.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/tabs

Brings in: utils · npm: class-variance-authority@^0.7.1, radix-ui@^1.8.1

Usage

TSX · The example above

"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function Example() {
  return (
    <Tabs defaultValue="plan" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="plan">Plan</TabsTrigger>
        <TabsTrigger value="tests">Tests</TabsTrigger>
      </TabsList>
      <TabsContent value="plan" className="rounded-lg border p-3 text-sm">
        Add a nullable region column to customers, backfill it from billing addresses, then add an index.
      </TabsContent>
      <TabsContent value="tests" className="rounded-lg border p-3 text-sm">
        42 passed on Staging, none failed. The backfill took 38 seconds.
      </TabsContent>
    </Tabs>
  )
}

<Tabs>

No props.

Also takes the props of React.ComponentProps<typeof TabsPrimitive.Root>.

<TabsList>

No props.

Also takes the props of React.ComponentProps<typeof TabsPrimitive.List>VariantProps<typeof tabsListVariants>.

<TabsTrigger>

No props.

Also takes the props of React.ComponentProps<typeof TabsPrimitive.Trigger>.

<TabsContent>

No props.

Also takes the props of React.ComponentProps<typeof TabsPrimitive.Content>.