---
name: "@liquikit"
slug: "liquikit"
description: "Liquid glass components for React with physically based refraction that works in Chrome, Safari and Firefox. Built on Base UI."
category: "Component library (general)"
tags: ["auth", "buttons", "cards", "forms", "glassmorphism", "media", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "aggarwal-h"
website: "https://liquikit.dev"
github: "https://github.com/aggarwal-h/liquikit"
registry: "https://liquikit.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 3
component_count: 38
generated_at: "2026-10-17T06:30:14.294Z"
---

# @liquikit

Liquid glass components for React with physically based refraction that works in Chrome, Safari and Firefox. Built on Base UI.

## Links

- Website: https://liquikit.dev
- GitHub: https://github.com/aggarwal-h/liquikit
- Registry JSON: https://liquikit.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/liquikit
- This file: https://sh4dcn.vercel.app/md/liquikit.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://liquikit.dev/r/registry.json
pnpm dlx shadcn@latest add https://liquikit.dev/r/registry.json
bunx shadcn@latest add https://liquikit.dev/r/registry.json
# clone the source repo
git clone https://github.com/aggarwal-h/liquikit.git
# fetch the raw registry index
curl -s https://liquikit.dev/r/registry.json
```

## Components (38)

| name | type | description | install |
| --- | --- | --- | --- |
| glass | registry:lib | The refraction engine: lens maps, the SVG filter and the glass surfaces. | `npx shadcn@latest add https://liquikit.dev/r/glass.json` |
| core | registry:lib | Shared types and the component styles. | `npx shadcn@latest add https://liquikit.dev/r/core.json` |
| press | registry:lib | Press feedback shared by the controls. | `npx shadcn@latest add https://liquikit.dev/r/press.json` |
| popup | registry:lib | The morphing glass panel behind every popup. | `npx shadcn@latest add https://liquikit.dev/r/popup.json` |
| segments | registry:lib | Helpers shared by the segmented controls. | `npx shadcn@latest add https://liquikit.dev/r/segments.json` |
| accordion | registry:ui | Sections that open on a spring inside one slab of glass, and a collapsible. | `npx shadcn@latest add https://liquikit.dev/r/accordion.json` |
| alert | registry:ui | An alert dialog that grows out of a droplet in its own middle. | `npx shadcn@latest add https://liquikit.dev/r/alert.json` |
| autocomplete | registry:ui | A glass field that suggests as you type. | `npx shadcn@latest add https://liquikit.dev/r/autocomplete.json` |
| avatar | registry:ui | A picture or initials in a disc of glass. | `npx shadcn@latest add https://liquikit.dev/r/avatar.json` |
| button | registry:ui | A glass button that swells and lights up under a press. | `npx shadcn@latest add https://liquikit.dev/r/button.json` |
| checkbox | registry:ui | A small drop of glass that fills with the accent, and a checkbox group. | `npx shadcn@latest add https://liquikit.dev/r/checkbox.json` |
| combobox | registry:ui | A glass field with a list that buds off it and reshapes as you type. | `npx shadcn@latest add https://liquikit.dev/r/combobox.json` |
| context-menu | registry:ui | A menu that grows from where the pointer was. | `npx shadcn@latest add https://liquikit.dev/r/context-menu.json` |
| dialog | registry:ui | A panel that grows out of its button and flies home into it. | `npx shadcn@latest add https://liquikit.dev/r/dialog.json` |
| field | registry:ui | Glass text inputs, fields, fieldsets and forms. | `npx shadcn@latest add https://liquikit.dev/r/field.json` |
| menu | registry:ui | A menu that pours out of its button like liquid. | `npx shadcn@latest add https://liquikit.dev/r/menu.json` |
| menubar | registry:ui | A capsule of menu titles whose menus share one panel of glass. | `npx shadcn@latest add https://liquikit.dev/r/menubar.json` |
| meter | registry:ui | Frosted meter and progress bars. | `npx shadcn@latest add https://liquikit.dev/r/meter.json` |
| navigation-menu | registry:ui | A navigation bar whose one panel reshapes between titles. | `npx shadcn@latest add https://liquikit.dev/r/navigation-menu.json` |
| number-field | registry:ui | A glass stepper with a scrub area. | `npx shadcn@latest add https://liquikit.dev/r/number-field.json` |
| otp-field | registry:ui | A one-time code input in slots of glass. | `npx shadcn@latest add https://liquikit.dev/r/otp-field.json` |
| popover | registry:ui | A glass popover that grows out of its trigger. | `npx shadcn@latest add https://liquikit.dev/r/popover.json` |
| preview-card | registry:ui | A preview that buds off a link. | `npx shadcn@latest add https://liquikit.dev/r/preview-card.json` |
| radio | registry:ui | Glass radio buttons in a radio group. | `npx shadcn@latest add https://liquikit.dev/r/radio.json` |
| scroll-area | registry:ui | A scrolling area with an overlay scrollbar, and a separator. | `npx shadcn@latest add https://liquikit.dev/r/scroll-area.json` |
| search-field | registry:ui | A capsule of glass with a magnifying glass and a clear button. | `npx shadcn@latest add https://liquikit.dev/r/search-field.json` |
| segmented-control | registry:ui | A pill of liquid glass you can drag between options. | `npx shadcn@latest add https://liquikit.dev/r/segmented-control.json` |
| select | registry:ui | A select whose list grows out of its button. | `npx shadcn@latest add https://liquikit.dev/r/select.json` |
| sheet | registry:ui | A sheet of glass that floats up and can be pulled back down. | `npx shadcn@latest add https://liquikit.dev/r/sheet.json` |
| slider | registry:ui | A glass knob that turns to liquid as you drag it. | `npx shadcn@latest add https://liquikit.dev/r/slider.json` |
| switch | registry:ui | A switch whose knob lifts into a lens as it slides. | `npx shadcn@latest add https://liquikit.dev/r/switch.json` |
| tabs | registry:ui | Tabs and a floating tab bar with a lens you can drag. | `npx shadcn@latest add https://liquikit.dev/r/tabs.json` |
| toast | registry:ui | Notifications that unfold out of a capsule at the top edge. | `npx shadcn@latest add https://liquikit.dev/r/toast.json` |
| toggle | registry:ui | A glass toggle button. | `npx shadcn@latest add https://liquikit.dev/r/toggle.json` |
| toggle-group | registry:ui | Toggles that merge into one capsule of glass. | `npx shadcn@latest add https://liquikit.dev/r/toggle-group.json` |
| toolbar | registry:ui | A capsule of glass holding buttons and separators. | `npx shadcn@latest add https://liquikit.dev/r/toolbar.json` |
| tooltip | registry:ui | A tooltip that swells out of nothing. | `npx shadcn@latest add https://liquikit.dev/r/tooltip.json` |
| all | registry:item | Every LiquiKit component. | `npx shadcn@latest add https://liquikit.dev/r/all.json` |

## For AI agents

```text
You are adding components from @liquikit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/liquikit.md) for the component list.
2. Fetch the machine-readable index: https://liquikit.dev/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: liquikit).
```