Tween UITween UI
7

Components

Sliding Tabs

A pill nav whose lime indicator scales in, then slides to the hovered or focused tab.

A navigation strip with a sliding hover indicator: on hover or keyboard focus the lime pill scales in under the first tab, then slides to follow the pointer. Leave the nav and it returns to the active tab. Driven by GSAP (CustomEase for the reveal).

New tab

Installation

pnpm dlx shadcn@latest add @tween-ui/sliding-tabs

Usage

app/page.tsx
app/page.tsx
import SlidingTabs from '@/components/tweenui/navigation/sliding-tabs';
 
const items = [
  { value: 'home', label: 'Home' },
  { value: 'about', label: 'About' },
  { value: 'services', label: 'Service' },
  { value: 'projects', label: 'Projects' },
  { value: 'team', label: 'Team' },
  { value: 'blog', label: 'Blog' },
];
 
export default function Page() {
  return <SlidingTabs items={items} defaultValue="home" />;
}

Props

PropTypeDefaultDescription
itemsSlidingTabsItem[]—Tabs to render. Each has value, label, and optional href.
defaultValuestring—Uncontrolled active tab. Indicator rests here on leave.
valuestring—Controlled active tab.
onValueChange(value: string) => void—Fires when a tab is clicked.
classNamestring—Extra classes for the <nav> element.

Pass href on an item to render an <a>; otherwise it renders a <button type="button">. All native <nav> attributes are forwarded.

Accessibility

The indicator animation is skipped under prefers-reduced-motion: reduce — the pill snaps to the target tab with no scale or slide. Keyboard focus (focusin) drives the same indicator as hover, and the active tab is marked with aria-current.