liquidcn

Liquid Glass for shadcn/ui. Glass components that swell under your finger, lift a magnifying lens across tabs, and grow menus out of their buttons, inspired by Apple's Liquid Glass. Each one extends a shadcn/ui component instead of rebuilding it, and installs from a shadcn registry.

Docs and live examples →

Early stage. APIs may still change, so add liquidcn to existing projects with care.

Components

Component	Item	What it does
Button	liquid-button	Swells when pressed, stretches on drag, morphs its width and content. prominent variant.
Tab bar	liquid-tab-bar	Floating tab bar with a search button: the tabs fold into a circle as search stretches into a field.
Tabs	liquid-tabs	A lens that lifts, magnifies, and tints the labels beneath it. Drag it across tabs to choose.
Dropdown menu	liquid-dropdown-menu	Grows out of and over its trigger as a droplet, folds back into it through a teardrop neck.
Toolbar	liquid-toolbar	Groups of swelling actions with a selection lens, and round buttons that fuse with them.
Toast	liquid-sonner	Top-center glass pills that form and fold away (Sonner).

Install

In a React project set up for shadcn/ui with Tailwind CSS v4:

npx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-button.json

Each item brings its source, liquid.css, and the motion modules it needs. There is no animation library to install. Liquid components never replace your base shadcn components: each one imports the base component it extends (button, tabs, …), whichever primitive library yours is built on. If your project doesn't have it yet, the CLI adds it from shadcn's registry.

Use

The components keep the shadcn API: same props, refs, and events.

import { Button } from "@/components/ui/liquid/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/liquid/tabs";

<Button onClick={save}>Save</Button>
<Button variant="prominent" size="icon-lg" aria-label="Done"><Check /></Button>

<Tabs defaultValue="photos">
  <TabsList aria-label="Library">
    <TabsTrigger value="photos">Photos</TabsTrigger>
    <TabsTrigger value="albums">Albums</TabsTrigger>
  </TabsList>
  <TabsContent value="photos">…</TabsContent>
  <TabsContent value="albums">…</TabsContent>
</Tabs>

Menus open over their trigger by default, as on iOS. Pass overlap={false} to DropdownMenuContent to open beside it. For toasts, mount Toaster from liquid-sonner once and call its re-exported toast.

Theming

Set these custom properties on any ancestor (including document.documentElement, so portaled menus and toasts follow):

Property	Default	Effect
--liquid-blur	20px	Backdrop blur.
--liquid-tint	.22	Glass opacity.
--liquid-fill	255 255 255	Glass color as RGB channels.
--liquid-ink	#172323	Text and icons on glass.
--liquid-accent	#155dfc	Prominent buttons and labels under a lens.
--liquid-lens-ink	accent	Lens tint only, e.g. var(--liquid-ink) for a neutral segmented control.
--liquid-viscosity	.5	0 is firm and bouncy, 1 is slow and soft.
--liquid-morph-duration	520ms	Menu formation.

Use .dark or data-liquid-theme="dark" for dark material, and data-reduced-transparency="true" for opaque surfaces.

Accessibility

• The base shadcn components keep their focus management, keyboard navigation, and ARIA semantics; the toolbar adds one tab stop with arrow keys. The lens is decorative and hidden from assistive technology.
• prefers-reduced-motion (or data-reduced-motion="true" on an ancestor) removes all movement; every interaction still works.
• Reduced transparency, increased contrast, and forced colors are supported.
• Every page of the site is checked against WCAG 2.1 A/AA in CI.

How it works

DOM and CSS glass with spring-driven motion; no WebGL, and no runtime dependency beyond the primitives. Springs write CSS custom properties directly and never re-render React per frame. The motion layer owns the translate and scale properties of interactive elements, so transform stays yours.

• Design language: the motion rules and the numbers behind them.
• Architecture: the spring, the lens, menu morphs, and the registry.
• Deployment: Vercel and the custom domain.

Browser support: current Chrome, Edge, Safari, and Firefox. Chrome and Edge also bend the page behind bars and toolbars at their rim. The lens magnifies a copy of the control's own labels, not the page behind it.

For AI agents, llms.txt indexes the docs and llms-full.txt has every component's usage, props, and accessibility notes.

Status

Shipped in 0.1.0, the first public release: six components (button, tabs, tab bar, dropdown menu, toolbar, toast), the shadcn registry, theming tokens, and the docs site. CHANGELOG.md lists everything.

Next:

• More components. Extend more shadcn/ui components with glass, starting with switch, slider, popover, dialog, and sheet.
• Blocks. Ready-made compositions of liquid components that install from the registry, like shadcn blocks: an app header with a tab bar and search, a media toolbar, a settings panel.
• A lens that magnifies the page, not only the control's own labels.
• A stable API on the way to 1.0.

Ideas and requests are welcome as issues.

Contributing

Contributions are welcome. See CONTRIBUTING.md for setup, scripts, the quality gates, and how to add a component. Please follow the Code of Conduct, and report security issues as described in SECURITY.md.

corepack enable && pnpm install
pnpm dev     # http://localhost:3000
pnpm check   # lint, format, types, tests

License

MIT. Base components from shadcn/ui (MIT); see third-party notices.

liquidcn is an independent project, not affiliated with Apple or shadcn/ui. Inspired by Plasma UI.