Velocity X Components

Core UI

Vertical Tabs

Side-stacked tab list with a content pane, for settings-style layouts, with up/down arrow keyboard navigation.

Subscription Included with the Velocity Components subscription.
bash 
$ velocityx add vertical-tabs

Built for react. Needs react already installed as a peer dependency. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Vertical Tabs →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.0 react
Vertical Tabs
Name, email, avatar and account basics live here.

Props

NameTypeRequiredDefaultDescription
tabs{ id, label, icon?: ReactNode, content: ReactNode }[]No[]
defaultIdstring?Yes

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text 
components/velocity/vertical-tabs/VerticalTabs.jsx

Using the Vertical Tabs component

Install it with velocityx add vertical-tabs. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Related components

More from Core UI.

Accordion / FAQ ListFree

Expand/collapse FAQ list with measured-height animation, single or multi-open modes, and arrow-key navigation between headers.

react
Back to Top ButtonPro

Floating button that fades in past a scroll threshold and scrolls to top, instantly under reduced motion.

react
Cookie / Consent BarPro

Bottom consent bar with accept-all, reject-all, and an inline expandable preferences checklist, persisted to localStorage.

react
Data Table — Sticky Header, SortablePro

Scrollable data table with a sticky header row and client-side column sorting that cycles ascending, descending, and unsorted.

react