Ravox KitBasics
Expanding Tabs
Icon-only tabs: the active one becomes a pill with icon and label, opening slowly while the neighbors move apart. With steps, each tab gets a progress bar on top, for wizards and multi-step forms.
Settings
Toggles
Examples
Step wizard
Small toolbar
Installation
The command creates components/ui/expanding-tabs.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add expanding-tabsProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | — | The active tab (controlled or not). |
| onValueChange | (value: string) => void | — | Called when the tab changes (click, arrows, Home and End). |
| size | "sm" | "md" | "md" | Tab height. |
| steps | boolean | false | A progress bar above each tab, filled up to the active one; the tabs share the width. |
| order | string[] | — | The order of the values, for the step bars. Without it, the order the tabs render counts. |
| ExpandingTabsItem | componente | — | One tab: value, icon (always visible) and the label as children (only shows on the active one; stays in the DOM for screen readers). |