Tabs

Layered sections of content.

Source
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci deserunt hic, iste maxime nihil numquam officia optio, qui quis quo reprehenderit tempore vel. Ab at deleniti nihil perspiciatis velit.

Installation

npx @rahimstack@latest add tabs

API Reference

const TabsAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Tabs__root",
    ]),
    list: cva([
        "UI-Tabs__list",
        "inline-flex h-12 items-center justify-center w-full",
    ]),
    trigger: cva([
        "UI-Tabs__trigger appearance-none shadow-none",
        "inline-flex h-full items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm text-[--muted] font-medium ring-offset-[--background]",
        "transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        "disabled:pointer-events-none disabled:opacity-50",
        "border-transparent border-b-2 -mb-px",
        "data-[state=active]:border-[--brand] data-[state=active]:text-[--foreground]",
    ]),
    content: cva([
        "UI-Tabs__content",
        "ring-offset-[--background]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--ring] focus-visible:ring-offset-2",
    ]),
})