@any-design/anyui

v0.5.1

Published

a month ago

A cute multi-framework UI component library

Downloads

365

0High
0Medium
0Low

backrunner

vue react svelte ui library design-system cute

AnyUI

English | 中文

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.

Install

pnpm add @any-design/anyui

Headless shadcn Install

AnyUI 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 --silent

These 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.

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');

Import On Demand

pnpm add -D unplugin-vue-components unplugin-auto-import

import { 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()],
    }),
  ],
});

React

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

export function Example() {
  return <Button type="primary">Button</Button>;
}

Svelte

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

<Button type="primary">Button</Button>

Monorepo Development

AnyUI uses pnpm workspaces and Turbo.

pnpm install
pnpm run dev
pnpm run generate
pnpm run dist
pnpm run typecheck

Workspace 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.

Custom Theme

See Theme Customization and the Design Tokens reference for more details.

Liquid Glass Style

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.

Testground

We've deployed a testground where you can explore the UI components:

https://anyui.pwp.sh/testground/

License

MIT