Getting Started

AnyUI ships a single package with framework-scoped entrypoints for Vue, React and Svelte, plus a shared stylesheet that carries the design tokens, themes and the optional liquid glass style.

Install

pnpm add @any-design/anyui

Or install headlessly through the shadcn-compatible registry. For the full adapter workflow, see the shadcn Registry guide.

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

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

For on-demand imports, use the bundled resolver with unplugin-vue-components — see the README for the full Vite setup.

React

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

export default function App() {
  return (
    <Card title="Hello">
      <Input placeholder="Type something cute..." round />
      <Button type="primary" round onClick={() => message.success('Hi! 🎉')}>
        Greet
      </Button>
    </Card>
  );
}

Svelte

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

<Card title="Hello">
  <Input placeholder="Type something cute..." round />
  <Button type="primary" round onClick={() => message.success('Hi! 🎉')}>Greet</Button>
</Card>

Enable liquid glass

Add one attribute on <html> (or scope it with .a-glass):

<html data-anyui-style="glass">

Every surface component turns translucent with a backdrop blur and specular highlight, in both light and dark themes. Try the Glass toggle in this site's header.

Dark theme

The dark palette is derived automatically from your theme colors. Activate it manually with<html theme="dark">, or let the user's system preference apply it via the built-in prefers-color-scheme media query.

Next steps

Components — browse every component, with props, events and slots.
shadcn Registry — install with an app-local adapter.
Design Tokens — radii, motion, elevation and surfaces.
Theme Customization — re-color the system via SCSS.
Testground — every component, all three frameworks, side by side.

快速开始

AnyUI 通过一个包提供 Vue、React 和 Svelte 的框架入口，并附带一份共享样式表。设计令牌、主题、暗色模式和可选的 liquid glass 风格都由这份样式承载。

安装

pnpm add @any-design/anyui

也可以通过兼容 shadcn 的 registry 以无头方式安装。完整 adapter 流程见shadcn Registry 安装指南。

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

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

如果需要按需导入，可以配合内置 resolver 和 unplugin-vue-components 使用；完整 Vite 配置见 README。

React

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

export default function App() {
  return (
    <Card title="Hello">
      <Input placeholder="Type something cute..." round />
      <Button type="primary" round onClick={() => message.success('Hi! 🎉')}>
        Greet
      </Button>
    </Card>
  );
}

Svelte

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

<Card title="Hello">
  <Input placeholder="Type something cute..." round />
  <Button type="primary" round onClick={() => message.success('Hi! 🎉')}>Greet</Button>
</Card>

启用 liquid glass

在 <html> 上添加一个属性即可全局启用，也可以用 .a-glass 局部启用：

<html data-anyui-style="glass">

启用后，表面组件会变成带 backdrop blur 与内侧高光的半透明形态，并同时适配浅色和暗色主题。你可以直接试用站点导航里的 Glass 开关。

暗色主题

暗色调色盘会从主题色自动推导。你可以通过 <html theme="dark"> 手动启用，也可以让内置的prefers-color-scheme 媒体查询跟随系统偏好。

下一步

组件：浏览所有组件以及 props、events、slots。
shadcn Registry：通过应用内 adapter 安装。
设计令牌：了解圆角、动效、阴影和表面抽象层。
主题定制：通过 SCSS 重新定义系统颜色。
Testground：并排查看三个框架里的所有组件。