Components
- AccordionDone
- AlertDone
- Alert DialogDone
- Aspect RatioNo Change
- AvatarDone
- BadgeDone
- BreadcrumbDone
- ButtonDone
- Button GroupDone
- CalendarNo Change
- CardDone
- CarouselDone
- ChartNo Change
- CheckboxDone
- CollapsibleNo Change
- ComboboxDone
- CommandDone
- Context MenuDone
- Data TableDone
- Date PickerDone
- DialogDone
- DrawerDone
- Dropdown MenuDone
- EmptyNo Change
- FieldNo Change
- React Hook FormNo Change
- Hover CardDone
- InputDone
- Input GroupDone
- Input OTPDone
- ItemDone
- KbdDone
- LabelDone
- MenubarDone
- Navigation MenuDone
- PaginationDone
- PopoverDone
- ProgressDone
- Radio GroupDone
- ResizableNo Change
- Scroll AreaNo Change
- SelectDone
- SeparatorDone
- SheetDone
- SidebarNo Change
- SkeletonDone
- SliderDone
- SonnerDone
- SpinnerDone
- SwitchDone
- TableNo Change
- TabsDone
- TextareaDone
- ToastDone
- ToggleDone
- Toggle GroupDone
- TooltipDone
- TypographyDone
Tabs
Uppercase tab triggers using the flat, glass border system. Great for switching between sections inside cards or dashboards.
Tabs component
Overview Tabs
Tabs sit directly on the same surface as cards for a seamless look.
Requests over the last 24 hours peaked at 1.2M/min.
Installation
pnpm dlx shadcn@latest add @omni/tabs
Usage
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="metrics">Metrics</TabsTrigger>
</TabsList>
<TabsContent value="overview">Overview panel</TabsContent>
</Tabs>