FX · Components

Rad UI Tabs with an indicator that slides between triggers and content that fades in.

Arrow keys move between tabs. The indicator just follows.

bash
npx shadcn@latest add https://www.rad-ui.com/r/sliding-tabs.json
React
import SlidingTabs from "@/components/fx/sliding-tabs"

<SlidingTabs tabs={[
    { value: "overview", label: "Overview", content: <Overview /> },
    { value: "activity", label: "Activity", content: <Activity /> }
]} />
  • Built on Rad UI Tabs: tablist/tab/tabpanel roles, arrow-key navigation and focus management come from the library.
  • The indicator is aria-hidden decoration.
  • Focus-visible outline is kept on triggers.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) snaps the indicator and skips the fade.
PropTypeDefaultDescription
tabs
{ value, label, content }[]
—

The tabs.

defaultValue
string
first tab

Initially selected tab.

value
string
—

Controlled selected tab.

onValueChange
(value: string) => void
—

Called when the selection changes.

Edit this page on GitHub →