Components
Loading preview...
Tabs organize content into multiple sections and allow users to navigate between them.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/tabsimport { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs"
export function TabDemo() {
return (
<Tabs>
<TabList aria-label="History of Ancient Rome">
<Tab id="FoR">Founding of Rome</Tab>
<Tab id="MaR">Monarchy and Republic</Tab>
<Tab id="Emp">Empire</Tab>
</TabList>
<TabPanel id="FoR">
Arma virumque cano, Troiae qui primus ab oris.
</TabPanel>
<TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel>
<TabPanel id="Emp">Alea jacta est.</TabPanel>
</Tabs>
)
}