1

Tabs SubtleNew

A pill-style tab list where the selected indicator springs between tabs, built on the WAI-ARIA tabs pattern with full roving-focus keyboard support.

Dependencies

motion

Interaction Type

Click a tab or use Arrow/Home/End keys while a tab is focused to move the selection. The indicator springs to the new tab.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
string

Controlled selected tab value.

defaultValue
string

Initial selected tab for uncontrolled usage.

onValueChange
(value: string) => void

Called with the new value when the selection changes.

idPrefix
string

Prefix used to build stable ids for ARIA wiring across SSR/CSR.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/tabs-subtle.json

How to use

import { TabsSubtle, TabsSubtleItem, TabsSubtlePanel } from "@/components/ui/tabs-subtle"

export function Demo() {
  return (
    <>
      <TabsSubtle defaultValue="overview">
        <TabsSubtleItem value="overview" label="Overview" />
        <TabsSubtleItem value="activity" label="Activity" />
        <TabsSubtleItem value="settings" label="Settings" />
      </TabsSubtle>
      <TabsSubtlePanel value="overview">Overview content</TabsSubtlePanel>
      <TabsSubtlePanel value="activity">Activity content</TabsSubtlePanel>
      <TabsSubtlePanel value="settings">Settings content</TabsSubtlePanel>
    </>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
Overview content
npx shadcn@latest addhttps://ui.nexvyn.dev/r/tabs-subtle.json