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 CustomRenderFunction() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<Tabs className="w-full max-w-md" render={(props) => <div {...props} data-custom="foo" />}>
<Tabs.ListContainer>
<Tabs.List aria-label="Options">
<Tabs.Tab
href="#getting-started"
id="getting-started"
render={(domProps: any) => <a {...domProps} />}
>
Getting Started
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab
href="#components"
id="components"
render={(domProps: any) => <a {...domProps} />}
>
Components
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab
href="#releases"
id="releases"
render={(domProps: any) => <a {...domProps} />}
>
Releases
<Tabs.Indicator />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
<Tabs.Panel className="pt-4" id="getting-started">
<p>View your project overview and recent activity.</p>
</Tabs.Panel>
<Tabs.Panel className="pt-4" id="components">
<p>Track your metrics and analyze performance data.</p>
</Tabs.Panel>
<Tabs.Panel className="pt-4" id="releases">
<p>Generate and download detailed reports.</p>
</Tabs.Panel>
</Tabs>
</div>
)
}