Components
- Accordion
- Alert Dialog
- Alert
- Autocomplete
- Avatar
- Badge
- Button Group
- Button
- Card
- Carousel
- Chart
- Checkbox
- Clipboard
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Editable
- Field
- File Upload
- Floating Panel
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- QR Code
- Radio Group
- Rating Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Splitter
- Steps
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- Toggle
- Tooltip
- Tour
- Tree View
Profile
Manage your profile information
Installation
pnpm dlx shadcn@latest add @shark-ui/tabs
Usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs> <TabsList> <TabsTrigger value="1">Tab 1</TabsTrigger> <TabsTrigger value="2">Tab 2</TabsTrigger> </TabsList> <TabsContent value="1">Tab 1 content</TabsContent> <TabsContent value="2">Tab 2 content</TabsContent> </Tabs>
Variants
You can change the variant of the tabs using the variant prop on TabsList.
Default
Content 1
Underline
Content 1
Orientation
You can change the orientation of the tabs using the orientation prop on Tabs.
Horizontal
Content 1
Vertical
Content 1
Vertical with Underline variant
Content 1