Tabs
Tabs organise content into multiple sections and allow users to navigate between them.
Underline
The default underline variant, ideal for content-heavy pages like recipes.
A classic Italian Margherita pizza with San Marzano tomato sauce, fresh mozzarella, and fragrant basil. Simple ingredients, extraordinary flavour — ready in under 30 minutes.
Pills
The pills variant works well for filtering and category switching.
Breakfast
Greek yoghurt with granola & berries
Lunch
Grilled chicken Caesar salad
Dinner
Salmon with roasted vegetables
Boxed
The boxed variant suits settings panels and structured navigation.
Chef Kitchen
chef@cookest.io
Update your display name, bio, and avatar photo.
With Icons
Tabs support optional icons placed before the label.
Your personalised recipe feed and recent activity.
With Badges
Badges surface counts or status directly on the tab label.
Sofia M.
Loved your new pasta recipe!
Luca R.
Loved your new pasta recipe!
Aria K.
Loved your new pasta recipe!
Full Width
The fullWidth prop distributes tabs evenly across the container.
Browse the full Cookest library — thousands of chef-curated recipes at your fingertips.
Controlled
Use value and onChange for full external control of the active tab.
profileProfile settings content.
| Prop | Type | Default | Description |
|---|---|---|---|
items | TabItem[] | — | Array of tab definitions — each with an id, label, and content. |
defaultTab | string | — | The id of the tab that is selected on initial render (uncontrolled). |
value | string | — | The currently active tab id (controlled mode). |
onChange | (id: string) => void | — | Callback fired when the user selects a different tab. |
variant | "underline" | "pills" | "boxed" | "underline" | Visual style of the tab bar. |
size | "sm" | "md" | "lg" | "md" | Controls the font size and padding of the tab labels. |
fullWidth | boolean | false | When true, tabs stretch equally to fill the available width. |