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-lg text-center">
<Tabs.ListContainer>
<Tabs.List
aria-label="Options"
className="*:data-[selected=true]:text-accent-foreground w-fit *:h-6 *:w-fit *:px-3 *:text-sm *:font-normal"
>
<Tabs.Tab id="daily">
Daily
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="weekly">
Weekly
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="bi-weekly">
Bi-Weekly
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="monthly">
Monthly
<Tabs.Indicator />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
<Tabs.Panel className="px-4" id="daily">
<h3 className="mb-2 font-semibold">Daily</h3>
<p className="text-sm text-gray-600">Manage your daily tasks and goals.</p>
</Tabs.Panel>
<Tabs.Panel className="px-4" id="weekly">
<h3 className="mb-2 font-semibold">Weekly</h3>
<p className="text-sm text-gray-600">Manage your weekly tasks and goals.</p>
</Tabs.Panel>
<Tabs.Panel className="px-4" id="bi-weekly">
<h3 className="mb-2 font-semibold">Bi-Weekly</h3>
<p className="text-sm text-gray-600">Manage your bi-weekly tasks and goals.</p>
</Tabs.Panel>
<Tabs.Panel className="px-4" id="monthly">
<h3 className="mb-2 font-semibold">Monthly</h3>
<p className="text-sm text-gray-600">Manage your monthly tasks and goals.</p>
</Tabs.Panel>
</Tabs>
)
}