Morphing Pill
A wide bar that gathers into a floating pill on scroll.
Features
- Wide, open bar at the top of the page
- Gathers into a floating pill as soon as you scroll
- Spreads back out at the top
- One element morphing with layout animation
Best for: Landing pages that want a spacious top and a compact bar while reading.
Installation
npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | Links: label, href, optional icon and children. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Morphing Pill navbar free to use?
Yes. Morphing Pill is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Morphing Pill work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Morphing Pill in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Morphing Pill need installed?
motion, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Morphing Pill accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.