AnyUI is a cute multi-framework design system and UI component library for Vue, React, and Svelte.
IMPORTANT: This project is still a work in progress.
pnpm add @any-design/anyuiAnyUI also ships a shadcn-compatible GitHub registry for no-prompt installation:
pnpm dlx shadcn@latest add any-design/anyui/vue --yes --silent
pnpm dlx shadcn@latest add any-design/anyui/react --yes --silent
pnpm dlx shadcn@latest add any-design/anyui/svelte --yes --silentThese commands install the required packages, add AnyUI's stylesheet to your shadcn CSS
file, and create a framework entry file under @/lib/anyui-vue, @/lib/anyui-react,
or @/lib/anyui-svelte.
AnyUI publishes one package with framework-scoped entrypoints:
import AnyUI from '@any-design/anyui/vue';
import { Button as ReactButton } from '@any-design/anyui/react';
import { Button as SvelteButton } from '@any-design/anyui/svelte';
import '@any-design/anyui/styles/index.css';The default package entry remains the Vue build for compatibility, but new Vue code should prefer @any-design/anyui/vue.
import { createApp } from 'vue';
import AnyUI from '@any-design/anyui/vue';
import '@any-design/anyui/styles/index.css';
const app = createApp(App);
app.use(AnyUI);
app.mount('#app');pnpm add -D unplugin-vue-components unplugin-auto-importimport { AnyUIResolver } from '@any-design/anyui/vue/resolver';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [AnyUIResolver()],
}),
Components({
resolvers: [AnyUIResolver()],
}),
],
});import { Button } from '@any-design/anyui/react';
import '@any-design/anyui/styles/index.css';
export function Example() {
return <Button type="primary">Button</Button>;
}<script lang="ts">
import { Button } from '@any-design/anyui/svelte';
import '@any-design/anyui/styles/index.css';
</script>
<Button type="primary">Button</Button>AnyUI uses pnpm workspaces and Turbo.
pnpm install
pnpm run dev
pnpm run generate
pnpm run dist
pnpm run typecheckWorkspace packages live under packages/vue, packages/react, and packages/svelte. React and Svelte sources are generated from the shared component manifest in scripts/generate-framework-packages.mjs, so regenerate them after changing the manifest or shared component API.
pnpm run dev starts the website and mounts the multi-framework testground at /testground/, so docs and component previews run as one local site. The testground renders every component with Vue, React, and Svelte side by side against the library sources — see its README.
See Theme Customization and the Design Tokens reference for more details.
AnyUI ships an optional liquid glass style. Surface components (buttons, cards, inputs, dropdowns, messages, drawers, etc.) become translucent with a backdrop blur and a specular highlight, in both light and dark themes.
Enable it globally:
<html data-anyui-style="glass">Or scope it to a subtree:
<div class="a-glass">
<a-card>...</a-card>
</div>Note: floating elements teleported to <body> (popper, message, select dropdown) only pick the style up in global mode.
We've deployed a testground where you can explore the UI components: