🌸 v0.5.2 · Vue, React & Svelte

A cute design system for Vue, React & Svelte

Rounded components, shared design tokens, and optional liquid glass. Build with Vue, React or Svelte, and make it yours.

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

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

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

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

Change a couple of brand colors and the whole palette — including an auto-derived dark theme — recomputes through HCT color science.

shadcn-style registry

Install headlessly via the shadcn CLI with one command per framework, stylesheet wiring included.

Import on demand

Tree-shakable entrypoints and an unplugin resolver keep your bundle as small as your component usage.

Use it from any framework

Shared styles and design tokens, with an entrypoint for each framework.

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

app.use(AnyUI);

import { Button } from '@any-design/anyui/react';
import '@any-design/anyui/styles/index.css';

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

<script>
  import { Button } from '@any-design/anyui/svelte';
  import '@any-design/anyui/styles/index.css';
</script>

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