Tabs

An accessible tab component with keyboard navigation (Arrow keys, Home, End), three visual variants, and both controlled and uncontrolled modes.

Import

tsx

import { Tabs } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

This is the overview tab content. It provides a summary of the feature.

Analytics data and charts will appear here.

Props

Prop	Type	Default	Description
items	`TabItem[]`	—	Array of { value, label, children, disabled? } tab definitions.
defaultValue	`string`	—	Initial active tab for uncontrolled mode.
value	`string`	—	Controlled active tab value.
onChange	`(value: string) => void`	—	Callback when a tab is selected.
variant	`'underline' \| 'pills' \| 'boxed'`	`'underline'`	Visual style of the tab list.

Examples

Variants

tsx

import { Tabs } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

const items = [
  { value: 'overview', label: 'Overview', children: <p>Overview content</p> },
  { value: 'analytics', label: 'Analytics', children: <p>Analytics content</p> },
  { value: 'settings', label: 'Settings', children: <p>Settings content</p> },
]

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
      <Tabs items={items} defaultValue="overview" variant="underline" />
      <Tabs items={items} defaultValue="overview" variant="pills" />
      <Tabs items={items} defaultValue="overview" variant="boxed" />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */