Light
Solid
🌸 v0.5.0 — now with liquid glass

A cute design system for Vue, React & Svelte

AnyUI brings one fresh, modern, adorable visual language to all three frameworks — same tokens, same classes, same API. Toggle 🌙 and 🧊 in the header to see it adapt live.

Get Started
Open Testground
pnpm add @any-design/anyui
Copy
Get Started
Read Docs
Cute ✨
Send
Stay cute
Vue
React
Svelte
🧁 cute
🌊 fresh
🧊 glassy

Why AnyUI

One coherent visual language — cute, fresh and modern — delivered to every major framework through a single token system.

Cute by default
Cute by default
Generous radii, springy press feedback and soft tinted shadows — a friendly visual language baked into every component through design tokens.
One design system, three frameworks
One design system, three frameworks
Vue, React and Svelte packages share the same styles, class names and component API, generated from a single source of truth.
Liquid glass, opt-in
Liquid glass, opt-in
Flip one attribute and every surface becomes translucent with backdrop blur and a specular highlight — light and dark, no per-component work.
HCT-powered theming
HCT-powered theming
Change a couple of brand colors and the whole palette — including an auto-derived dark theme — recomputes through HCT color science.
shadcn-style registry
shadcn-style registry
Install headlessly via the shadcn CLI with one command per framework, stylesheet wiring included.
Import on demand
Import on demand
Tree-shakable entrypoints and an unplugin resolver keep your bundle as small as your component usage.

Use it from any framework

Same components, same class names, same props — pick your framework and keep the design.

Vue
import AnyUI from '@any-design/anyui/vue';
import '@any-design/anyui/styles/index.css';

app.use(AnyUI);
React
import { Button } from '@any-design/anyui/react';
import '@any-design/anyui/styles/index.css';

<Button type="primary" round>Hi!</Button>
Svelte
<script>
  import { Button } from '@any-design/anyui/svelte';
  import '@any-design/anyui/styles/index.css';
</script>

<Button type="primary" round>Hi!</Button>