Tabs

Open-code aq-ui accessible component family for Tabs.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Components render with your semantic theme tokens.

Loading interactive preview…

pnpm dlx aq-ui@alpha add tabs

Client module

Import the parts you need, then jump to an export for its contract.

"use client"

import { Tabs } from "@/components/ui/tabs"

<Tabs />

Open-code aq-ui accessible component family for Tabs.

const Tabs = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Root>, TabsPrimitive.Root.Props>(…)

Content export for composing Tabs.

const TabsContent = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Panel>, TabsPrimitive.Panel.Props>(…)

Public const export from Tabs.

const TabsList = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>>(…)

Props type: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>

Public const export from Tabs.

const tabsListVariants = cva(…)

Trigger export for composing Tabs.

const TabsTrigger = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.Tab>, TabsPrimitive.Tab.Props>(…)

utils

@base-ui/react@^1.7.0, class-variance-authority@^0.7.1