edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Tabs

Tabbed interface with accessible panel switching.

Componentsdocsbase-ui/tabs

Installation

npx shadcn@latest add https://ui.edbn.me/r/tabs.json

Manual

API Reference

Root

Groups all parts of the tabs component. Renders a div element.

defaultValueany

Initially active tab

valueany

Controlled active tab

onValueChangefunction

Called when active tab changes

orientation'horizontal' | 'vertical'
='horizontal'

Tabs orientation

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-orientationTabs orientation
data-activation-directionDirection of tab activation (left, right, up, down, none)

List

Contains the tab triggers. Renders a div element (role=tablist).

activateOnFocusboolean
=true

Activate tab on focus

loopFocusboolean
=true

Loop keyboard focus

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

List data attributes
AttributeDescription
data-orientationTabs orientation

Tab

A tab trigger button. Renders a button element.

valueanyRequired

Tab identifier

disabledboolean
=false

Disable tab

nativeButtonboolean
=true

Render as native button

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Tab data attributes
AttributeDescription
data-selectedPresent when tab is active
data-disabledPresent when tab is disabled

Indicator

An indicator that highlights the active tab. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Indicator CSS variables
VariableDescription
--active-tab-topTop position of active tab
--active-tab-leftLeft position of active tab
--active-tab-widthWidth of active tab
--active-tab-heightHeight of active tab

Panel

The content panel for a tab. Renders a div element.

valueanyRequired

Tab identifier

keepMountedboolean
=false

Keep in DOM when inactive

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Panel data attributes
AttributeDescription
data-hiddenPresent when panel is hidden