Skip to content
Pinky UI

Fluid Tabs

Tabs whose indicator flows from one item to the next.

  • navigation
  • morph
  • tabs
  • indicator
  • layout

Twelve components, twelve primitives.

Quick usage

usage
import { FluidTabs } from "@pinky-ui/components";

<FluidTabs
  aria-label="Views"
  items={[
    { id: "preview", label: "Preview", content: <Preview /> },
    { id: "code", label: "Code", content: <Code /> },
  ]}
/>

Presets

Solid

On a soft track. The default.

variant={"solid"}

Bare

Floating directly on the page.

variant={"bare"}

Compact

For toolbars and card headers.

size={"sm"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
itemsFluidTabItem[]—Each item needs an id and a label; content is optional.
valuestring—Controlled selection. Omit to let the component own it.
defaultValuestring—Initial selection when uncontrolled.
onValueChange(value: string) => void—Selection callback.
variant"solid" | "bare""solid"Whether the tabs sit on a visible track.
size"sm" | "md""md"Control height and type size.
fillbooleanfalseStretches tabs to fill the available width.
aria-labelstring"Tabs"Names the tablist for assistive technology.

Accessibility

  • Implements the ARIA tabs pattern: role=tablist, role=tab, role=tabpanel.
  • Roving tab stop — one Tab press enters the set, arrows move within it.
  • Arrow Left/Right/Up/Down cycle, Home and End jump to the ends.
  • Panels are labelled by their tab and are focusable, so keyboard users reach the content.
  • Disabled tabs are skipped by keyboard navigation.
  • Selection is conveyed by aria-selected, never by the indicator alone.

Reduced motion

With prefers-reduced-motion: reduce, the indicator jumps directly to the selected tab and panels swap without a transition.

When to use

  • Switching between a handful of peer views
  • Preview / code toggles
  • Filtering a gallery

When not to use

  • Sequential steps — use a stepper
  • More than about seven items, where a select is kinder
  • Navigation between pages — use links