콘텐츠로 건너뛰기

Vite

Vite + React 프로젝트에 Neobrutalism를 설정합니다.

1. 프로젝트 만들기

Vite로 새 React + TypeScript 프로젝트를 만듭니다.

pnpm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template react-ts
yarn create vite@latest my-app -- --template react-ts
bun create vite@latest my-app -- --template react-ts

2. Tailwind CSS 설치하기

pnpm add tailwindcss @tailwindcss/vite
npm install tailwindcss @tailwindcss/vite
yarn add tailwindcss @tailwindcss/vite
bun add tailwindcss @tailwindcss/vite

src/index.css의 내용을 모두 다음으로 교체합니다.

src/index.css
@import "tailwindcss";

3. 경로 별칭 설정하기

@/* 별칭이 해석되도록 tsconfig.jsontsconfig.app.json 양쪽에 baseUrlpaths를 추가합니다.

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

4. vite.config.ts 업데이트하기

Node 타입을 설치한 다음, Vite에 별칭 해석 방법을 알려 줍니다.

pnpm add -D @types/node
npm install -D @types/node
yarn add -D @types/node
bun add -D @types/node
vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

5. 초기화 실행하기

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

6. Neobrutalism 레지스트리와 테마 추가하기

Neobrutalism 레지스트리를 components.json에 추가한 다음, 폰트와 테마를 설정합니다.

components.json
{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

7. 컴포넌트 추가하기

pnpm dlx shadcn@latest add @neobrutalism/button
npx shadcn@latest add @neobrutalism/button
yarn dlx shadcn@latest add @neobrutalism/button
bunx --bun shadcn@latest add @neobrutalism/button

이것으로 끝입니다. 어떤 컴포넌트든 Radix 또는 Base UI 변형을 같은 방법으로 추가하면 됩니다.