Source

Command Palette

Search for a command to run...

Tabs

Displays content in separate panels that users can switch between

About Tabs

A set of layered sections of content displayed one at a time. Users navigate between panels using interactive triggers, with one panel visible at any time. Supports different sizes and full-width layout options.

Installation

Import the Tabs component from LSD:
import { Tabs } from '@nipsys/lsd'

export default function MyComponent() {
  return <Tabs />
}

Usage

The simplest form of the component with default styling.
Basic

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Bordered

Controlled

Disabled

Full Width

With Icons

Composition

Tabs
├── TabsList
│ └── TabsTrigger
└── TabsContent

API Reference

Tabs

bordered
Adds border styling to tab content panels. When true, content panels display with border styling.
Type: boolean
size
Size of tabs and their contents. Controls the spacing and text size for tabs and content panels.
Type: "sm" | "md" | "lg"
fullWidth
Whether tabs and content span full width. When true, tabs and content stretch to fill available width.
Type: boolean

TabsList

fullWidth
Whether list spans full width. Overrides the fullWidth prop from the Tabs context.
Type: boolean

TabsTrigger

fullWidth
Whether trigger spans full width. Overrides the fullWidth prop from the Tabs context.
Type: boolean

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to tabs component or move focus to active content• ArrowLeft/ArrowRight - Move focus to previous/next trigger (horizontal)• ArrowUp/ArrowDown - Move focus to previous/next trigger (vertical)• Home - Move focus to first trigger• End - Move focus to last trigger
ARIA Attributes
Proper ARIA attributes for screen readers
• role="tablist" is added to TabsList• role="tab" is added to each TabsTrigger• role="tabpanel" is added to each TabsContent• aria-selected indicates active state on triggers• aria-controls links triggers to their content panels• aria-labelledby links content panels to their triggers
Focus States
Visible focus indicators for keyboard users
• Focus moves between triggers using arrow keys in the list orientation.• ArrowLeft/Right for horizontal orientation, ArrowUp/Down for vertical.• Home/End jump to first/last trigger. When a trigger is focused, Tab moves• to the active content panel.
Alert