Liquid Glass
A frosted glass pill with a glass lens under the hovered link.
Features
- Frosted glass pill that blurs what scrolls beneath
- A glass lens glides under the hovered link
- Lit rim on the edge
- Mobile menu included
Best for: Modern product sites that want the liquid glass look from Apple's latest design.
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 Liquid Glass navbar free to use?
Yes. Liquid Glass is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Liquid Glass 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 Liquid Glass in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Liquid Glass need installed?
motion, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Liquid Glass 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.