Surfaces

Tabs

Reka-UI-backed tab compound with accessible tab list and panels.

Overview

Tabs is the Reka-UI-backed tab compound: a tab list with matching panels, ARIA semantics handled out of the box. Auto-imports as <LTabs>.

Key Business & UX Benefits

A single tab pattern covers PDP content sections, account dashboards, and admin views, so shoppers and operators never have to relearn the navigation.
ARIA roles, roving tabindex, and arrow-key navigation are wired in, satisfying WCAG criteria that procurement and B2B buyers routinely check.
Default-value support makes deep-linking tabs straightforward, so marketing can drive traffic to a specific section (reviews, shipping) from email and ads.
Lazy panel content keeps initial render light, protecting Core Web Vitals on PDP and other tab-heavy pages.

Usage

Tabs Default

<Tabs default-value="overview">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="reviews">Reviews</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Overview content</TabsContent>
    <TabsContent value="reviews">Reviews content</TabsContent>
  </Tabs>

Feature List

Two `orientation` values ('horizontal', 'vertical', default 'horizontal') cover top-tabs and side-rail patterns from one component
Two `activationMode` values ('automatic', 'manual', default 'automatic') control whether arrow keys activate the focused tab or just move focus
`defaultValue` for uncontrolled use plus `modelValue` and `update:modelValue` for controlled binding, so deep-linked tabs work out of the box
Built on reka-ui's tabs primitives, so ARIA roles, roving tabindex, and arrow-key navigation ship without per-use wiring
Four-part composition (`Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`) keeps the structure explicit and lazy-renders inactive panels

API Reference

Prop	Default	Type
`defaultValue`		`string`
`modelValue`		`string`
`orientation`	`horizontal`	`"vertical" \| "horizontal"`
`activationMode`	`automatic`	`"automatic" \| "manual"`

Slot	Type
`default`	`{}`

Event	Type
`select`	`(event: "select", value: string): void`
`update:modelValue`	`(event: "update:modelValue", value: string): void`

Edit this pageorReport an issue

Sheet

Slide-in panel surface for overlaying content such as carts, filters, or detail views without leaving the page.

Toast

Non-intrusive notification component for transient messages with auto-dismiss and queue management.