Tabs

Tabs whose underline is forty pixels that stream from the old tab to the new one, with panels that slide in from the side.

View as Markdown

<PxTabs />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxTabs />

Props

defaultValueremounts

React

<PxTabs
  items={[
    {
      label: "Overview",
      content: "Usage is steady this week. Most runs come from the Research project."
    },
    {
      label: "Activity",
      count: 12,
      content: "12 events since Monday, including 3 deploys and 2 new members."
    },
    {
      label: "Settings",
      content: "Default model, retention and notification settings live here."
    }
  ]}
  defaultValue="Overview"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-tabs

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-tabs.json

Usage

px-tabs-example.tsx

import { PxTabs } from "@/components/lumesec/px-tabs";

export function Example() {
  return (
    <PxTabs
      items={[
        { label: "Overview", content: "Usage is steady this week." },
        { label: "Activity", count: 12, content: "12 events since Monday." },
        { label: "Settings", content: "Default model, retention and notifications." },
      ]}
    />
  );
}

Behaviour

The underline is forty pixels that stream from the old tab to the new one. Each item brings its own panel content.

API reference

Props

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

valueTypestring

Controlled selected tab (an item's value, or its label). Use with onValueChange.

defaultValueTypestringDefaultfirst tab

Initially selected tab when uncontrolled.

itemsTypereadonly PxTabsItem[]

The tabs: { value?: string; label: string; count?: string | number; content: React.ReactNode }. value defaults to label; count adds a small badge after the label.

onValueChangeType(value: string) => void

Called when the user selects another tab by click or key.

Ref

ref points at the root HTMLDivElement.

Keyboard

Keys	Action
ArrowRight / ArrowLeft	Select and focus the next / previous tab, wrapping.
Home / End	Select and focus the first / last tab.

Accessibility

Tabs are native buttons with role="tab" and aria-selected in a role="tablist", with roving tabindex: only the selected tab is in the tab order.
Each tab points to its panel with aria-controls. Panels have role="tabpanel", an aria-label with the tab name and tabindex="0"; inactive panels are hidden.
The underline canvas is aria-hidden.
Reduced motion: the underline jumps to the new tab and the panel appears without sliding in.