The Pill Morphing Tabs component is a modern take on tab navigation, styled as smooth rounded pills that provide a sleek and minimal interface. When switching between tabs, the active pill expands with a spring-based animation before settling back into its natural shape, creating an engaging and fluid user experience. Built with shadcn UI Tabs and enhanced by motion effects, this component supports customizable labels, panels, and default values while remaining responsive to both light and dark themes. Its subtle gradient or glassmorphism background adds depth and elegance, making it ideal for dashboards, profile sections, or multi-view layouts where clarity and aesthetics are equally important.
import PillMorphTabs from "@/components/ui/pill-morph-tabs";
export default function DemoOne() {
return (
<div className="flex h-screen w-full items-center justify-center bg-background">
<PillMorphTabs
defaultValue="overview"
className="max-w-md"
items={[
{
value: "overview",
label: "Overview",
panel: (
<div className="p-4 text-left">
<h2 className="text-lg font-semibold">Overview</h2>
<p className="text-sm text-muted-foreground">
This is the overview section of your app.
</p>
</div>
),
},
{
value: "features",
label: "Features",
panel: (
<div className="p-4 text-left">
<h2 className="text-lg font-semibold">Features</h2>
<p className="text-sm text-muted-foreground">
Cool features listed here.
</p>
</div>
),
},
{
value: "pricing",
label: "Pricing",
panel: (
<div className="p-4 text-left">
<h2 className="text-lg font-semibold">Pricing</h2>
<p className="text-sm text-muted-foreground">
Choose the best plan for you.
</p>
</div>
),
},
{
value: "faq",
label: "FAQ",
panel: (
<div className="p-4 text-left">
<h2 className="text-lg font-semibold">FAQ</h2>
<p className="text-sm text-muted-foreground">
Find answers to common questions here.
</p>
</div>
),
},
]}
/>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.