この記事ではviteで環境したシンプルな環境にshadcn/uiを導入する手順を紹介します。

動機

こんにちは。シニアエンジニアのKoshiishiです。

以前の記事 でViteで構築した環境にDuckDB Wasmを引いてきて簡単なクエリ実行環境を作ってみました。
クエリ結果をshadcn/uiのBeautiful Charts で可視化したら面白いのではと思い、その準備のためshadcn/uiの導入を行ってみた記事です。
クエリ結果をチャートで可視化する手順は別記事にて。
インストール手順は基本的に公式のインストール手順 通りで問題ありません。
shadcn/ui導入のPRはこちら にありますが、手順はコードに残っていないため手順を紹介させていただきます。

tailwindの追加とその設定の追加

bun add -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

src/index.cssに追記

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.jsのcontentに追記

content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],

tsconfig.jsonの編集

tsconfig.jsonに追記

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }

tsconfig.app.jsonの編集

compilerOptionsの項目に追記

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }

viteの設定

bun add -D @types/node

をしたのち、vite.config.jsを編集

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

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

shadcn/uiの初期化

※ 私はこだわりがないためすべてデフォルトで答えてしまいました
後からの変更は大変そうですので、公式のtheming 等をご覧になることをお勧めします。

bunx shadcn@latest init
Which style would you like to use? › New York
Which color would you like to use as base color? › Neutral
Do you want to use CSS variables for colors? › yes

こちらでインストールは完了です。

使い方

ボタンを追加したい場合はこちらのコマンドで

bunx --bun shadcn@latest add button

ボタンコンポーネントが引かれてきて、プロジェクト内で参照できるようになります

import { Button } from "@/components/ui/button"

使用感

画像のRun Queryやフォントサイズを上下させるボタンはshadcnのButton を、左下の通知はshadcnのToast を使ってみました。

Toastはデフォルトでは右下から出現しますが、今回CSVインポート後にユーザーの視点は左下にあると考えられるため、左下に移動しました。
CSVのインポートプレビューではTable を使ってみました。
ソート等が可能なDataTable があるようなので、クエリ結果の表示にこちらを活用してみようと思います。

使いたいコンポーネントだけ個別に追加、カスタムが手軽にできる点が非常に快適で、一旦このアプリはshadcn/uiを使っていくことにしました。
今後はDataTableの深堀や、チャート機能等を追加してより充実したクエリ実行環境を目指します。

お問合せはお気軽に

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

PHOTO：UnsplashのAman Pal