LiquiKit

Overview

LiquiKit is a set of liquid glass components for React with physically based refraction that works in Chrome, Safari and Firefox. Components are built on Base UI and Motion and installed with the shadcn CLI, so the code lands in the project and stays editable.

The registry contains 32 UI components plus shared libraries for the refraction engine, press feedback, popups and segmented controls. A single command (npx shadcn@latest add https://liquikit.dev/r/all.json) adds everything at once. The homepage demonstrates the set in interface scenes, including a music player, a control center, a photo library, lock-screen notifications, a maps search and a design-tool inspector.

Features

• Refraction engine: The glass library provides lens maps, an SVG filter and glass surfaces that bend the content behind them.
• Morphing popups: Menus, popovers and selects pour out of their trigger through a shared glass panel.
• Controls: Button, checkbox, radio, switch, toggle, toggle group, slider, meter, number field, OTP field and segmented control.
• Fields: Autocomplete, combobox, search field and select, with lists that bud off the field as the user types.
• Overlays: Dialog, sheet, alert, tooltip, preview card and swipe-to-dismiss toasts.
• Navigation: Tabs, menubar, navigation menu, context menu and toolbar.
• Examples: Finished example pages show the components in context.

Tech stack

• React, Base UI 1.8, Motion 13, shadcn CLI registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @liquikit/component-name