Components
Loading preview...
HeroUI tabs to organize content into sections with primary and secondary variants.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-tabs"use client"
import { Tabs } from "@/components/ui/heroui-tabs"
export default function Demo() {
return (
<Tabs className="w-full max-w-md" orientation="vertical">
<Tabs.ListContainer>
<Tabs.List aria-label="Options">
<Tabs.Tab id="overview">
Overview
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="analytics">
Analytics
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="reports">
Reports
<Tabs.Indicator />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
<Tabs.Panel className="px-4" id="overview">
<p>View your project overview and recent activity.</p>
</Tabs.Panel>
<Tabs.Panel className="px-4" id="analytics">
<p>Track your metrics and analyze performance data.</p>
</Tabs.Panel>
<Tabs.Panel className="px-4" id="reports">
<p>Generate and download detailed reports.</p>
</Tabs.Panel>
</Tabs>
)
}