NavigationAvailable

Tabs

Related content panels with a roving keyboard tab list.

Build with character

Move focus with arrow keys, then select with Enter or Space.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/tabs.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

export default function Demo() {
  return (
    <Tabs defaultValue="preview" className="w-full max-w-lg">
      <TabsList aria-label="Component information">
        <TabsTrigger value="preview">Preview</TabsTrigger>
        <TabsTrigger value="details">Details</TabsTrigger>
        <TabsTrigger value="history" disabled>
          History
        </TabsTrigger>
      </TabsList>
      <TabsContent
        value="preview"
        className="rounded-lg border-2 border-ink bg-card p-5"
      >
        <h3 className="bl-type-card-title">Build with character</h3>
        <p className="mt-2 bl-type-body">Move focus with arrow keys, then select with Enter or Space.</p>
      </TabsContent>
      <TabsContent
        value="details"
        className="rounded-lg border-2 border-ink bg-card p-5"
      >
        <p className="bl-type-body">
          Tabs group related panels while keeping one panel visible.
        </p>
      </TabsContent>
    </Tabs>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Check rest, hover, focus and selection/expansion. Current links and open content must be identified semantically.
Hover is not selection. Keep the active state when the pointer leaves.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
defaultValue	string	—	Initially selected tab.
orientation	horizontal / vertical	horizontal	Tab list direction.

Accessibility

Rules that should remain intact when adapting the component to a product.

Name the tab list and give every trigger/panel pair the same unique value.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.

Arrow keys move focus. Enter or Space selects the focused tab with default manual activation.