Light
Solid
EN
中文

shadcn Registry Install

AnyUI provides a shadcn-compatible GitHub registry for teams that want a CLI-driven setup. The registry installs the package dependencies, injects the shared AnyUI stylesheet into the CSS file managed by shadcn, and creates a small app-local adapter under@/lib.

Before You Start

Run the command from the root of an existing Vue, React, or Svelte app. If the project has not been initialized for shadcn yet, initialize it first so the CLI knows your CSS file and path aliases.

pnpm dlx shadcn@latest init

Choose One Adapter

Pick the command that matches the framework used by the current app. You only need to install multiple adapters when one project intentionally runs multiple frameworks.

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

What It Adds

The registry item writes one framework adapter and keeps your app imports stable:

  • @/lib/anyui-vue.ts re-exports @any-design/anyui/vue and the Vue resolver.
  • @/lib/anyui-react.ts re-exports @any-design/anyui/react.
  • @/lib/anyui-svelte.ts re-exports @any-design/anyui/svelte.

It also adds @any-design/anyui and the framework peer dependencies needed by that adapter. The stylesheet is added to the CSS entry configured in your shadcn project:

@import "@any-design/anyui/styles/index.css";

Use The Adapter

Import components from the generated adapter instead of reaching into the package directly. If your app uses a custom alias, follow the actual file path generated by the CLI.

// Vue
import AnyUI, { Button, Card } from '@/lib/anyui-vue';

// React
import { Button, Card } from '@/lib/anyui-react';

// Svelte
import { Button, Card } from '@/lib/anyui-svelte';

Vue Registration

Vue apps can register the full plugin from the generated adapter, or use named imports when you prefer local component registration.

import { createApp } from 'vue';
import AnyUI from '@/lib/anyui-vue';

const app = createApp(App);
app.use(AnyUI);
app.mount('#app');

Verification

Start the app and render one simple component. If the component renders without AnyUI styles, confirm that your app imports the CSS file configured in components.json.

import { Button } from '@/lib/anyui-react';

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

Troubleshooting

  • If @/lib/... cannot be resolved, check the alias settings generated byshadcn init and import from the actual adapter file path.
  • If styles are missing, make sure the shadcn CSS entry is loaded by your app and contains the AnyUI stylesheet import.
  • If you want the package workflow instead, use pnpm add @any-design/anyui and import from @any-design/anyui/vue, @any-design/anyui/react, or@any-design/anyui/svelte.

shadcn Registry 安装

AnyUI 提供了兼容 shadcn 的 GitHub registry，适合希望通过 CLI 完成安装和项目内入口生成的团队。registry 会安装依赖，把 AnyUI 的共享样式写入 shadcn 管理的 CSS 文件，并在 @/lib 下创建一个很薄的框架 adapter。

开始之前

请在已有的 Vue、React 或 Svelte 应用根目录执行命令。如果项目还没有初始化过 shadcn，需要先初始化一次，让 CLI 知道你的 CSS 入口文件和路径别名。

pnpm dlx shadcn@latest init

选择一个 Adapter

按当前项目使用的框架选择对应命令即可。只有当同一个项目里确实同时运行多个框架时，才需要安装多个 adapter。

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

会添加什么

registry 会写入一个框架 adapter，让应用内的导入路径保持稳定：

  • @/lib/anyui-vue.ts 会重新导出 @any-design/anyui/vue 和 Vue resolver。
  • @/lib/anyui-react.ts 会重新导出 @any-design/anyui/react。
  • @/lib/anyui-svelte.ts 会重新导出 @any-design/anyui/svelte。

它还会安装 @any-design/anyui 以及当前 adapter 需要的框架依赖。共享样式会被写入 shadcn 项目配置的 CSS 入口：

@import "@any-design/anyui/styles/index.css";

使用 Adapter

组件建议从生成的 adapter 导入，而不是直接从包内部路径导入。如果你的项目使用了自定义别名，请以 CLI 实际生成的文件路径为准。

// Vue
import AnyUI, { Button, Card } from '@/lib/anyui-vue';

// React
import { Button, Card } from '@/lib/anyui-react';

// Svelte
import { Button, Card } from '@/lib/anyui-svelte';

Vue 注册

Vue 应用可以从生成的 adapter 注册完整插件；如果你更偏向局部注册，也可以直接使用具名导入。

import { createApp } from 'vue';
import AnyUI from '@/lib/anyui-vue';

const app = createApp(App);
app.use(AnyUI);
app.mount('#app');

验证安装

启动应用并渲染一个简单组件。如果组件能渲染但没有 AnyUI 样式，请确认应用已经加载了 components.json中配置的 CSS 入口文件。

import { Button } from '@/lib/anyui-react';

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

常见问题

  • 如果 @/lib/... 无法解析，请检查 shadcn init 生成的别名配置，并从实际生成的 adapter 文件路径导入。
  • 如果样式缺失，请确认应用已经加载 shadcn 的 CSS 入口，并且这个 CSS 文件里包含 AnyUI 的样式 import。
  • 如果你更希望走普通 npm 包安装方式，可以使用 pnpm add @any-design/anyui，然后从@any-design/anyui/vue、@any-design/anyui/react 或@any-design/anyui/svelte 导入。