---
name: "@liquefy-ui"
slug: "liquefy-ui"
description: "Liquid Glass components for React: WebGL edge refraction and pointer-driven springs over accessible Base UI primitives. TypeScript, RSC-ready, with an MCP server."
category: "Icons/logos"
tags: ["3d", "accessibility", "animation", "buttons", "cards", "design-system", "forms", "glassmorphism", "hooks", "icons", "loaders", "media", "navigation", "overlays", "tables"]
framework: "react"
license: null
author: null
website: "https://liquefy-ui.com"
github: null
registry: "https://liquefy-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 37
generated_at: "2026-09-05T09:50:59.044Z"
---

# @liquefy-ui

Liquid Glass components for React: WebGL edge refraction and pointer-driven springs over accessible Base UI primitives. TypeScript, RSC-ready, with an MCP server.

## Links

- Website: https://liquefy-ui.com
- Registry JSON: https://liquefy-ui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/liquefy-ui
- This file: https://sh4dcn.vercel.app/md/liquefy-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://liquefy-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://liquefy-ui.com/r/registry.json
bunx shadcn@latest add https://liquefy-ui.com/r/registry.json
# fetch the raw registry index
curl -s https://liquefy-ui.com/r/registry.json
```

## Components (37)

| name | type | description | install |
| --- | --- | --- | --- |
| liquefy-ui | registry:style | Design tokens, the glass stylesheet and the Tailwind v4 bridge. Every other item depends on this. Import the installed stylesheet before Tailwind so utilities … | `npx shadcn@latest add https://liquefy-ui.com/r/liquefy-ui.json` |
| glass-card | registry:ui | A content card with eyebrow, title, description, body and footer slots on the liquid surface. | `npx shadcn@latest add https://liquefy-ui.com/r/glass-card.json` |
| glass-dock | registry:ui | A macOS-style dock: a glass rail of icon buttons that magnify under the pointer. | `npx shadcn@latest add https://liquefy-ui.com/r/glass-dock.json` |
| internal-glyphs | registry:lib | The small inline SVG glyphs the components draw for chevrons, checks and status icons. | `npx shadcn@latest add https://liquefy-ui.com/r/internal-glyphs.json` |
| liquid-accordion | registry:ui | Stacked disclosure panels with real headings and a height-measured open animation. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-accordion.json` |
| liquid-alert | registry:ui | An inline status message in four severities, with an optional dismiss button. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-alert.json` |
| liquid-avatar | registry:ui | A circular avatar with image, initials and status dot, plus an overlapping group. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-avatar.json` |
| liquid-badge | registry:ui | A small count or status pill for hanging off icons and labels. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-badge.json` |
| liquid-breadcrumbs | registry:ui | A trail of links with glyph separators and a current-page marker. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-breadcrumbs.json` |
| liquid-button | registry:ui | The primary action control: WebGL rim light, jelly press spring and a loading state. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-button.json` |
| liquid-checkbox | registry:ui | A checkbox with a springy tick, indeterminate state and label support. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-checkbox.json` |
| liquid-chip | registry:ui | A compact tag that can be selected, tinted and dismissed. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-chip.json` |
| liquid-dialog | registry:ui | A modal on Base UI: trapped focus, inert background and wired-up title and description. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-dialog.json` |
| liquid-divider | registry:ui | A hairline rule, horizontal or vertical, with optional inline content. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-divider.json` |
| liquid-drawer | registry:ui | A side panel that slides from the left, right or bottom edge, on Base UI Dialog. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-drawer.json` |
| liquid-icon-button | registry:ui | A square icon-only button that takes its accessible name from a label prop. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-icon-button.json` |
| liquid-list | registry:ui | A glass list with items, descriptions, leading icons, trailing slots and subheaders. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-list.json` |
| liquid-menu | registry:ui | A dropdown action menu on Base UI: arrow keys, typeahead and collision-aware placement. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-menu.json` |
| liquid-pagination | registry:ui | A page strip with ellipsis truncation and previous/next controls. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-pagination.json` |
| liquid-progress | registry:ui | A determinate progress bar and an indeterminate spinner sharing one accent. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-progress.json` |
| liquid-radio | registry:ui | A radio group with a springy dot and keyboard-driven selection. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-radio.json` |
| liquid-rating | registry:ui | A star rating that reads and writes a numeric value. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-rating.json` |
| liquid-segmented | registry:ui | A segmented control whose glass indicator slides between options. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-segmented.json` |
| liquid-select | registry:ui | A listbox dropdown on Base UI: typeahead, focus return and a glass popover. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-select.json` |
| liquid-skeleton | registry:ui | A shimmering placeholder block for content that has not arrived. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-skeleton.json` |
| liquid-slider | registry:ui | A range input with a luminous track and a dimensional thumb. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-slider.json` |
| liquid-surface | registry:ui | The base material every glass component is built on: rim light, refraction and springs. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-surface.json` |
| liquid-switch | registry:ui | A toggle whose thumb squashes as it travels. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-switch.json` |
| liquid-table | registry:ui | A composable data table on a glass container, with row hover and selection. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-table.json` |
| liquid-tabs | registry:ui | Composable tabs on Base UI, with a glowing underline that springs between them. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-tabs.json` |
| liquid-text-field | registry:ui | A single-line text input with label, hint and invalid state. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-text-field.json` |
| liquid-textarea | registry:ui | A multi-line text input that keeps the field styling of LiquidTextField. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-textarea.json` |
| liquid-toast | registry:ui | A toast provider and a useLiquidToast hook for transient messages. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-toast.json` |
| liquid-tooltip | registry:ui | A glass bubble on hover and focus, positioned by Base UI so it stays on screen. | `npx shadcn@latest add https://liquefy-ui.com/r/liquid-tooltip.json` |
| provider | registry:lib | LiquefyProvider and the config hooks every component reads its tokens from. | `npx shadcn@latest add https://liquefy-ui.com/r/provider.json` |
| styles-prop | registry:lib | The `styles` prop engine: shorthands, token references, breakpoints and state selectors. | `npx shadcn@latest add https://liquefy-ui.com/r/styles-prop.json` |
| use-liquid-glass | registry:hook | The hook that wires an element to the WebGL renderer and the motion springs. | `npx shadcn@latest add https://liquefy-ui.com/r/use-liquid-glass.json` |

## For AI agents

```text
You are adding components from @liquefy-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/liquefy-ui.md) for the component list.
2. Fetch the machine-readable index: https://liquefy-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: liquefy-ui).
```