# はじめに
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を使用したプロジェクトを作成します。
![img](/mosaic-code.jpg)
以下のサイトを参考にしました。

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

# TailwindCSSをインストール

以下の2つのコマンドで、TailwindCSSをインストールして、
tailwind.config.jsファイルを生成します
![img](/mosaic-code.jpg)
![img](/mosaic-code.jpg)

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

![img](/mosaic-code.jpg)
アプリがエラーなしでパスを解決できるように、次のコードを vite.config.ts に追加します。
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)
init コマンドを実行してshadcn-uiプロジェクトをセットアップします。

![img](/mosaic-code.jpg)
これで、プロジェクトへのコンポーネントの追加を開始できるようになりました。
試しに、ボタンをインストールして使ってみます。

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

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

![スクリーンショット 2024-01-27 0.06.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2e70d610-2b70-6b01-8b38-1e91568a3191.png)



# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# はじめに
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
npm create vite@latest
```
以下のサイトを参考にしました。

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

# TailwindCSSをインストール

以下の2つのコマンドで、TailwindCSSをインストールして、
tailwind.config.jsファイルを生成します
```npm
npm install -D tailwindcss postcss autoprefixer
```
```
npx tailwindcss init -p
```

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

```ts
{
  "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
```

```vite.config.ts
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
```

```App.tsx

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

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

export default App;

```

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

![スクリーンショット 2024-01-27 0.06.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2e70d610-2b70-6b01-8b38-1e91568a3191.png)



# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11


はじめに

shadcnとは

続きを読むには単価診断を受けてください（30秒）