Docs·Discrete Tabs

Discrete Tabs

Accessible icon tabs that expand the active label with spring layout and blur-fade motion.

Installation

$pnpm dlx shadcn@latest add @spiderui/discrete-tabs

Usage

API Reference

PropTypeDefault
itemsTab values, labels, icons, optional panels, and states.
readonly DiscreteTabItem[]—
valueControlled active tab value.
string—
defaultValueInitial value for uncontrolled tabs.
string—
onValueChangeCalled whenever the selected tab changes.
(value: string) => void—
sizeControls tab height, icon scale, and spacing.
"sm" | "md" | "lg""md"
orientationSets layout and arrow-key direction.
"horizontal" | "vertical""horizontal"
listLabelAccessible name for the tab list.
string"Sections"
listClassNameClasses applied to the tab list.
string—
triggerClassNameClasses applied to every tab trigger.
string—
contentClassNameClasses applied to every rendered tab panel.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Alerts
import { DiscreteTabs } from "@/components/ui/discrete-tabs"
const items = [
  { value: "inbox", label: "Inbox", icon: Mail, content: <p>Inbox messages</p> },
  { value: "planner", label: "Planner", icon: CalendarDays, content: <p>Upcoming events</p> },
  { value: "alerts", label: "Alerts", icon: Bell, content: <p>Recent alerts</p> },
]

export function NavigationTabs() {
  return <DiscreteTabs items={items} defaultValue="alerts" />
}