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 WithSeparator() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<Tabs className="w-full max-w-md">
<Tabs.ListContainer>
<Tabs.List aria-label="Options">
<Tabs.Tab id="overview">
Overview
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="analytics">
<Tabs.Separator />
Analytics
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="reports">
<Tabs.Separator />
Reports
<Tabs.Indicator />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
<Tabs.Panel className="pt-4" id="overview">
<p>View your project overview and recent activity.</p>
</Tabs.Panel>
<Tabs.Panel className="pt-4" id="analytics">
<p>Track your metrics and analyze performance data.</p>
</Tabs.Panel>
<Tabs.Panel className="pt-4" id="reports">
<p>Generate and download detailed reports.</p>
</Tabs.Panel>
</Tabs>
</div>
)
}