Liquidify turns a responsive CSS and SVG material engine into accessible React controls—with explicit state, composition, and keyboard contracts.
Experimental release line · Pin the version you evaluate
CSS + SVGBackdroplow volatilityInputpointer + keyboardOnly priority notifications can interrupt this session.
Generated from the public package catalog. No adoption metrics or unsupported claims.
Component catalog
Each component connects its public import, states, accessibility behavior, tokens, source, and exhaustive stories.
View all 34 components →A user-invokable control that performs an immediate action.
@liquidify/react/buttonA blocking, centered modal surface that interrupts the flow to present a title, an optional description or arbitrary body children, an optional accessory well (one small nested control), and a row of action buttons.
@liquidify/react/dialogA control that presents several mutually-exclusive views and lets the user switch between them by tapping a labelled tab — the canonical glass tab bar.
@liquidify/react/tabsA single control for choosing one colour — the canonical glass colour well.
@liquidify/react/color-pickerOne source of truth
Source exports, TypeScript declarations, specifications, documentation, and Storybook metadata feed one generated catalog.
Read the composition model →import { Button } from "@liquidify/react"
import "@liquidify/react/styles.css"
export function SaveAction() {
return (
<Button
variant="glassProminent"
tint="blue"
onPress={save}
>
Save changes
</Button>
)
}Package architecture
Most applications install one package. Design-system teams can use the same material, token, and motion layers independently.
@liquidify/glassProviders, refraction layers, and low-level surfaces.
↗02@liquidify/motionSprings and deterministic frame scheduling.
↗03@liquidify/reactAccessible React controls and the aggregate stylesheet.
↗04@liquidify/tokensCSS variables, JSON values, and Tailwind integration.
↗Application examples
Focused recipes cover controlled state, composition, and custom material surfaces with editable source.
Explore examplesVite · Next.js · React Router · Astro
Install the primary package, import one stylesheet, and begin with the control your application already needs.
pnpm add @liquidify/react