Pill Morph Tabs

Overview

This is the overview section of your app.

Installation

Usage

import PillMorphTabs from "@/components/ruixen/pill-morph-tabs";
 
const tabItems = [
  { value: "overview", label: "Overview", panel: <div>Overview content</div> },
  { value: "features", label: "Features", panel: <div>Feature list</div> },
  { value: "pricing", label: "Pricing", panel: <div>Pricing & plans</div> },
  { value: "faq", label: "FAQ", panel: <div>FAQ content</div> },
];
 
export default function App() {
  return (
    <PillMorphTabs
      items={tabItems}
      defaultValue="overview"
      onValueChange={(value) => console.log(value)}
    />
  );
}

Props

Prop	Type	Default	Description
`items`	`PillTab[]`	Default items	Array of tab items
`defaultValue`	`string`	First item	Default active tab value
`onValueChange`	`function`	`undefined`	Callback when tab changes
`className`	`string`	`""`	Additional CSS classes

Features

Morphing Pill: Animated pill indicator that morphs between tabs
Glassmorphism: Semi-transparent background with backdrop blur
Expand Effect: Slight vertical expansion animation on tab change
Accessibility: Built on shadcn Tabs primitives for full keyboard support
Responsive: Automatically measures and adjusts to tab sizes

Types

interface PillTab {
  value: string;
  label: React.ReactNode;
  panel?: React.ReactNode;
}