Tabs
Tabs organize content into distinct sections, allowing users to switch between them without leaving the page.
Underline
The default tab style. Use for primary navigation within a page or content area.
Monstera Deliciosa
A tropical plant native to southern Mexico and Panama. Known for its dramatic, glossy leaves with natural holes and splits.
Care schedule
Water every 7–10 days in spring and summer. Reduce to every 14 days in autumn and winter.
Thrives in bright, indirect light. Avoid direct sunlight which can scorch the leaves.
Growth history
Added to your greenhouse on 12 March 2024. Has produced 4 new leaves since tracking began.
First aerial root spotted June 2024. Repotted into a larger container August 2024.
Pill
Use the pill variant for secondary navigation or filtering within a section.
All plants
You have 12 plants across 3 growing zones in your greenhouse.
Tropical
5 tropical plants currently in your collection. Next watering due in 2 days.
Succulents
4 succulents in your collection. All healthy — last watered 3 days ago.
Herbs
3 herbs currently growing. Basil is ready for harvesting.
Usage
Pass a tabs array where each item has an id, label, and content. Use variant to switch between underline and pill styles. The first tab is active by default, or pass defaultTab with a tab id to set a different starting tab.
Explore the Tabs component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Content for the first tab.
Content for the second tab.
Content for the third tab.
Properties
<Tabs
tabs={[
{ id: "first", label: "First", content: <div>...</div> },
{ id: "second", label: "Second", content: <div>...</div> },
{ id: "third", label: "Third", content: <div>...</div> }
]}
/>