# liquidcn

> Liquid Glass components for shadcn/ui: spring-driven glass on top of the shadcn components you already use, installed from a registry.

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

Each liquid component extends the shadcn/ui component of the same name and keeps its API: the same props, refs, and events. Install one with the shadcn CLI, then import it from `@/components/ui/liquid/<name>` instead of `@/components/ui/<name>`. It needs React 19, Tailwind CSS v4, and a shadcn `components.json`.

## Docs

- [Introduction](https://liquidcn.snmandela.com/docs): What liquidcn is, how each component extends its shadcn/ui base, and its limits.
- [Installation](https://liquidcn.snmandela.com/docs/installation): Requirements (React 19, Tailwind CSS v4, components.json), the shadcn CLI command, the `@liquidcn` namespace, and where files land.
- [Components](https://liquidcn.snmandela.com/docs/components): Every component, with a live preview.
- [Theming](https://liquidcn.snmandela.com/docs/theming): The `--liquid-*` CSS custom properties, accent and lens ink, dark material, and opaque glass.
- [Motion](https://liquidcn.snmandela.com/docs/motion): Motion principles, the spring and its viscosity token, and the numbers behind each interaction.
- [Accessibility](https://liquidcn.snmandela.com/docs/accessibility): Semantics and focus, reduced motion and transparency, contrast, forced colors, touch, and what your code must provide.

## Components

- [Button](https://liquidcn.snmandela.com/docs/components/button): Glass button that swells under the finger, stretches on drag, and morphs its width and content. Includes a prominent tinted variant. Install: `npx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-button.json`
- [Dropdown Menu](https://liquidcn.snmandela.com/docs/components/dropdown-menu): Glass menus that grow out of their trigger as a droplet and fold back into it through a teardrop neck, keeping the focus management of the shadcn dropdown menu. Install: `npx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-dropdown-menu.json`
- [Tab Bar](https://liquidcn.snmandela.com/docs/components/tab-bar): Floating glass tab bar with a search button: search collapses the tabs into a circle and stretches the button into a field, and the two glass surfaces fuse when pressed. Install: `npx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-tab-bar.json`
- [Tabs](https://liquidcn.snmandela.com/docs/components/tabs): Glass tabs with a lifting, magnifying lens you can drag across tabs, keeping the keyboard navigation of shadcn Tabs. Install: `npx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-tabs.json`
- [Toast](https://liquidcn.snmandela.com/docs/components/sonner): Top-center glass notifications with pill formation, soft stacking, and Sonner accessibility. Install: `npx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-sonner.json`
- [Toolbar](https://liquidcn.snmandela.com/docs/components/toolbar): Floating glass toolbar: groups of swelling buttons on one capsule with a lifting selection lens, and round buttons beside them that fuse with it when pressed. Install: `npx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-toolbar.json`

## Registry

- [Registry index](https://liquidcn.snmandela.com/r/registry.json): every item in the shadcn registry format, with its files and dependencies.
- [Full component reference](https://liquidcn.snmandela.com/llms-full.txt): usage, props, and accessibility for every component.

## Optional

- [Source code](https://github.com/nelsonmandeladev/liquidcn)
- [Changelog](https://github.com/nelsonmandeladev/liquidcn/blob/HEAD/CHANGELOG.md)