shadcnを触ってみた

はじめに

shadcnを触ってみたので、備忘録として書いていきます。

shadcnとは

shadcn/ui はReact の UI コンポーネントライブラリ Radix UI とTailwind CSS をベースに利用した再利用可能なコンポーネントのコレクションです。

ライブラリではなくツールなので、使いたいUIをインストールして、カスタマイズすることで使用することができます。

サポートしているフレームワーク

以下のReact をサポートする任意のフレームワークを使用できます。
Next.js、Astro、Remix、Gatsbyなど

参考

https://ui.shadcn.com/docs/installation/vite

https://ui.shadcn.com/docs

Viteでプロジェクトを作成

今回はViteを使用したプロジェクトを作成します。

npm create vite@latest

以下のサイトを参考にしました。

https://ja.vitejs.dev/guide/

TailwindCSSをインストール

以下の2つのコマンドで、TailwindCSSをインストールして、
tailwind.config.jsファイルを生成します

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

パスを解決するために、tsconfig.jsonを以下のように編集します。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

アプリがエラーなしでパスを解決できるように、次のコードを vite.config.ts に追加します。

npm i -D @types/node

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

init コマンドを実行してshadcn-uiプロジェクトをセットアップします。

npx shadcn-ui@latest init

? Would you like to use TypeScript (recommended)? > yes
? Which style would you like to use? > Default
? Which color would you like to use as base color? > Slate
? Where is your global CSS file? > src/index.css
? Would you like to use CSS variables for colors > yes
? Where is your tailwind.config.js located? > tailwind.config.js
? Configure the import alias for components: > @/components
? Configure the import alias for utils: > @/lib/utils
? Are you using React Server Components? > no
? Write cofiguration to components.json. Procced? > Yesを選択

これで、プロジェクトへのコンポーネントの追加を開始できるようになりました。
試しに、ボタンをインストールして使ってみます。

npx shadcn-ui@latest add button!

import "./App.css";
import { Button } from "@/components/ui/button";

function App() {
  return (
    <>
      <div>
        <Button>Click me</Button>
      </div>
    </>
  );
}

export default App;

以下のようにボタンが表示されるはずです！