Components
- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Tabs
A component for toggling between related panels on the same page.
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "mako-ui/components/tabs";
export default function Particle() {
return (
<Tabs defaultValue="tab-1">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}
Usage
import { Tabs, TabsList, TabsPanel, TabsTab } from "mako-ui/components/tabs"<Tabs defaultValue="tab-1">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">Tab 1 content</TabsPanel>
<TabsPanel value="tab-2">Tab 2 content</TabsPanel>
<TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>API Reference
Tabs
Root component.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "underline" | "default" | Controls the tabs styling |
TabsList
Container for tab triggers.
TabsTab
Individual tab trigger.
TabsPanel
Content panel for each tab.
TabsIndicator
Visual indicator for the active tab.
Examples
Underline Variant
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "mako-ui/components/tabs";
export default function Particle() {
return (
<Tabs defaultValue="tab-1">
<div className="border-b">
<TabsList variant="underline">
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
</div>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}
Vertical Orientation
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "mako-ui/components/tabs";
export default function Particle() {
return (
<Tabs className="w-full" defaultValue="tab-1" orientation="vertical">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}
Underline with Vertical Orientation
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from "mako-ui/components/tabs";
export default function Particle() {
return (
<Tabs
className="w-full flex-row"
defaultValue="tab-1"
orientation="vertical"
>
<div className="border-s">
<TabsList variant="underline">
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
</div>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
}