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 Disabled() {
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="Tabs with disabled">
<Tabs.Tab id="active">
Active
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab isDisabled id="disabled">
Disabled
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="available">
Available
<Tabs.Indicator />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
<Tabs.Panel className="pt-4" id="active">
<p>This tab is active and can be selected.</p>
</Tabs.Panel>
<Tabs.Panel className="pt-4" id="disabled">
<p>This content cannot be accessed.</p>
</Tabs.Panel>
<Tabs.Panel className="pt-4" id="available">
<p>This tab is also available for selection.</p>
</Tabs.Panel>
</Tabs>
</div>
)
}