Vite

安装并配置 Vite 版的 shadcn/ui。

全新开始？ 使用 shadcn/create 来配置带有自定义主题、Base UI 或 Radix 以及图标库的 Vite 项目。

创建项目

运行 init 命令来创建新的 Vite 项目或配置现有项目


pnpm dlx shadcn@latest init -t vite

对于 monorepo（单体多仓库）项目，请使用 --monorepo 参数


pnpm dlx shadcn@latest init -t vite --monorepo

添加组件

现在你可以开始向项目添加组件了。


pnpm dlx shadcn@latest add button

上述命令会将 Button 组件添加到你的项目中。然后你可以像这样导入它

src/App.tsx

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Next.js Laravel

本页内容

创建项目添加组件

在 Vercel 上部署你的 shadcn/ui 应用

OpenAI、Sonos、Adobe 等公司的信任之选。

Vercel 提供工具和基础设施，以规模化部署应用和功能。