Tabs

Panel switcher with pill (header-style) and line variants.

Installation

Add this item from the registry, or import it from the package after installing Default File UI.

Registry path

itsvigneshv/default-file-ui/tabs

Package import

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@default-file/ui/components/df-tabs"

The standard tab style uses a soft track with an animated active indicator.

Underline indicators for docs and content chrome.

Small, default, and large tabs.

Panel switcher with pill and line variants. Compose Tabs, TabsList, TabsTrigger, and TabsContent.

Prop	Type	Default	Notes
variant	"pill" \| "line"	"pill"	Visual style for the tab list and triggers.
size	"sm" \| "default" \| "lg"	"default"	Trigger height and type size.
value	string	—	Controlled active tab value.
defaultValue	string	—	Uncontrolled initial tab value.
onValueChange	(value: string) => void	—	Called when the active tab changes.
className	string	—	Additional styles on the root.

Container for triggers. Inherits variant and size from Tabs.

Prop	Type	Default	Notes
className	string	—	Additional styles on the list.
children	ReactNode	—	TabsTrigger children.

Prop	Type	Default	Notes
value	string	—	Tab value this trigger activates (required).
disabled	boolean	—	Non-interactive trigger.
children	ReactNode	—	Trigger label.
…button attributes	ButtonHTMLAttributes	—	Native button props.

Prop	Type	Default	Notes
value	string	—	Shows when this value is active (required).
forceMount	boolean	false	Keep content mounted when inactive.
children	ReactNode	—	Panel content.
className	string	—	Additional styles on the panel.