LiquiKit
Liquid glass components
with physically based refraction
Every control, in glass
Built from the LiquiKit registry and fully interactive. Drag the sliders, flip the switches, open the menus.
Afterglow
LiquiKit Sessions
Now playing
A player floating over its own album art. The panel bends the cover behind it, and the menu pours out of its button.
- @liquikit/slider
- @liquikit/button
- @liquikit/menu
Focus
Airplane
Control center
Switches you can drag, toggles that light up and a slider that stretches as you pull it, over a sunset they refract.
- @liquikit/switch
- @liquikit/toggle
- @liquikit/slider
- @liquikit/segmented-control
Library
Photos
A tab bar and a menu over a scrolling library. The lens bends every tile it passes.
- @liquikit/tabs
- @liquikit/menu
- @liquikit/button
Saturday, 26 September
9:41
Notifications
Toasts from the registry, stacking over a lock screen. Swipe one up to dismiss it.
- @liquikit/toast
- @liquikit/button
18 min
4.2 km · via Harbour Street
Maps
A search field that opens into a list, and a route card over the streets and river it bends.
- @liquikit/combobox
- @liquikit/button
Design with light.
Text
Design tool
A formatting toolbar and an inspector made of selects, sliders and switches, floating over the page they edit.
- @liquikit/toolbar
- @liquikit/select
- @liquikit/slider
- @liquikit/segmented-control
- @liquikit/switch
Install in one command
Add the @liquikit registry to your components.json, then install any component with the shadcn CLI. The code lands in your project, yours to change.