Components
Loading preview...
Accessible tabs built on React Aria, from HeroUI v3. Primary (filled blue indicator) and secondary (blue underline) variants, horizontal and vertical orientation, disabled tabs, optional separators, and fully custom Tailwind styling. Compound API: Tabs / Tabs.ListContainer / Tabs.List / Tabs.Tab / Tabs.Indicator / Tabs.Separator / Tabs.Panel.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-tabs"use client"
import { Tabs } from "@/components/ui/heroui-tabs"
export default function CustomStyles() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<Tabs className="w-full max-w-lg text-center">
<Tabs.ListContainer>
<Tabs.List
aria-label="Options"
className="w-fit *:h-6 *:w-fit *:px-3 *:text-sm *:font-normal *:data-[selected=true]:text-accent-foreground"
>
<Tabs.Tab id="daily">
Daily
<Tabs.Indicator className="bg-accent" />
</Tabs.Tab>
<Tabs.Tab id="weekly">
Weekly
<Tabs.Indicator className="bg-accent" />
</Tabs.Tab>
<Tabs.Tab id="bi-weekly">
Bi-Weekly
<Tabs.Indicator className="bg-accent" />
</Tabs.Tab>
<Tabs.Tab id="monthly">
Monthly
<Tabs.Indicator className="bg-accent" />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
</Tabs>
</div>
)
}