Navigation

Tabs

Underline tabs to switch between views of the same context. The underline slides to the active tab.

Radix Tabs
Goals, owners and dates.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/TabsExample.tsx
import { Tabs } from '@krackedui/motion';

export function ProjectTabs() {
  return (
    <Tabs.Root defaultValue="overview" className="w-full max-w-md">
      <Tabs.List aria-label="Project">
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
        <Tabs.Trigger value="archived" disabled>Archived</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="overview" className="p-3 text-[14px] text-n-text-secondary">Goals, owners and dates.</Tabs.Content>
      <Tabs.Content value="activity" className="p-3 text-[14px] text-n-text-secondary">Recent edits and comments.</Tabs.Content>
      <Tabs.Content value="settings" className="p-3 text-[14px] text-n-text-secondary">Permissions and notifications.</Tabs.Content>
      <Tabs.Content value="archived" className="p-3 text-[14px] text-n-text-secondary">Nothing archived.</Tabs.Content>
    </Tabs.Root>
  );
}

Examples

Uncontrolled

Goals, owners and dates.

Controlled, inset underline

Selected: emoji

Composition

anatomy.tsx
<Tabs.Root defaultValue="a">
  <Tabs.List aria-label="…">
    <Tabs.Trigger value="a" />
  </Tabs.List>
  <Tabs.Content value="a" />
</Tabs.Root>

API Reference

Tabs.Root

PropTypeDefault
value
string
defaultValue
string
onValueChange
(value: string) => void
activationMode
"automatic""manual"
"automatic"
orientation
"horizontal""vertical"
"horizontal"

Tabs.List

The 40px bar with the sliding indicator.

PropTypeDefault
loop
boolean
true

Tabs.Trigger

PropTypeDefault
value
string
disabled
boolean
false
tone
"tertiary""secondary"
"tertiary"
weight
"medium""regular"
"medium"
underline
"full""inset"
"full"

Tabs.Content

PropTypeDefault
value
string
forceMount
true

Accessibility

  • Follows the WAI-ARIA tabs pattern: tablist, tab (aria-selected, aria-controls) and tabpanel (aria-labelledby).
  • Tab moves focus to the active tab, then into the panel. ←/→ move to the previous/next tab and activate it (automatic activation), wrapping at the ends; Home/End jump to the first/last tab. Disabled tabs are skipped.
  • Give the list an aria-label when there is no visible heading for it.
  • Lists wider than the screen scroll horizontally; the indicator slides with a transform transition (none with reduced motion).

Usage

  • Use to switch between views of the same object (Overview / Activity / Settings).
  • Don't use tabs for navigation between pages (use links or Sidebar) or for a compact option toggle (use SegmentedControl).
  • Keep labels short, one or two words; avoid more than about six tabs.
© 2026 Motion. Internal documentation.