설치

shadcn CLI 명령어 하나로 네오브루탈리즘 React 컴포넌트를 설치하세요 — 패키지도, 설정도 필요 없습니다. 시그니처 룩을 만드는 폰트와 Tailwind v4 토큰도 함께 제공됩니다.

Neobrutalism.com shadcn(CLI)의 레지스트리입니다. 설치해야 할 패키지도 없고, 앱을 감싸야 할 프로바이더도 없습니다. CLI는 각 컴포넌트의 소스 코드를 neobrutalism.com에서 여러분의 프로젝트로 복사해 주며, 그 시점부터는 여러분의 코드가 됩니다.

설정은 세 단계로 이루어져 있으며, 약 5분이 소요됩니다:

컴포넌트 설치 — 명령어 하나면 충분, 별도의 설정은 필요 없습니다.
글꼴을 추가하세요. 제목용은 Archivo Black, 본문용은 Space Grotesk입니다.
테마 토큰, 즉 네오브루탈리즘의 특징을 만들어내는 테두리, 그림자, 색상 팔레트를 추가하세요.

컴포넌트 설치하기

모든 구성 요소는 ‘Base UI’와 ‘Radix UI’ 두 가지 버전으로 제공됩니다. 설치 URL에 따라 어떤 버전을 받게 될지가 결정됩니다:


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json


pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

이것이 설치 과정의 전부입니다. button을 원하는 구성 요소로 바꿔보세요. 패턴은 항상 https://neobrutalism.com/r/<base|radix>/<component>.json이며, 각 구성 요소 페이지에는 두 가지 변형에 대한 정확한 명령어가 모두 표시되어 있습니다.

글꼴 추가하기

제목은 Archivo Black에, 본문 텍스트는 Space Grotesk에 설정되어 있습니다. Next.js를 사용하면 next/font/google에서 이를 불러올 수 있습니다:

app/layout.tsx

import { Archivo_Black, Space_Grotesk } from "next/font/google"
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
})
 
const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

테마 추가하기

이 토큰들을 globals.css 파일에 넣어주세요. 딱딱한 오프셋 그림자와 --radius: 0가 대부분의 역할을 담당하고 있으며, 나머지는 색상 팔레트 관련 설정입니다. 이 모든 것은 나중에 변경할 수 있는 일반적인 Tailwind v4 테마 설정입니다:

globals.css

@import "tailwindcss";
 
@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0;
  --background: #fff7e8;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #efe7d6;
  --muted-foreground: #6b6355;
  --accent: #ffe7a3;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --input: #fff;
  --ring: #000;
}
 
.dark {
  --background: #1a1815;
  --foreground: #f5f0e6;
  --card: #262320;
  --card-foreground: #f5f0e6;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #3a352f;
  --secondary-foreground: #f5f0e6;
  --muted: #2e2a24;
  --muted-foreground: #b3ac9e;
  --accent: #38342b;
  --accent-foreground: #f5f0e6;
  --destructive: #ff6b6b;
  --destructive-foreground: #1a1815;
  --border: #000;
  --input: #262320;
  --ring: #ffdc58;
}

새로운 프로젝트를 시작하시나요?

이 프레임워크 가이드에서는 첫 번째 명령어부터 모든 과정을 단계별로 안내합니다:

Next.js — create-next-app, 초기 설정, 폰트, 테마, 첫 번째 컴포넌트.
Vite — Tailwind, 경로 별칭, 초기화, 첫 번째 컴포넌트.

설치하기 전에 미리 보기

터미널에서 모든 구성 요소의 소스 코드를 확인하려면:


pnpm dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
npx shadcn@latest view https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest view https://neobrutalism.com/r/base/button.json

레지스트리 네임스페이스 (선택 사항)

전체 URL만 있으면 충분합니다. 하지만 명명된 레지스트리를 통해 구성 요소를 확인하는 MCP서버를 설정 중이거나, CLI의 search 및 list 명령어를 사용하려는 경우, components.json 파일에 레지스트리 별칭을 설정하세요:

components.json

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

별칭이 설정되면, CLI 명령을 통해 레지스트리 전체를 탐색할 수 있습니다:


pnpm dlx shadcn@latest search @neobrutalism
npx shadcn@latest search @neobrutalism
yarn dlx shadcn@latest search @neobrutalism
bunx --bun shadcn@latest search @neobrutalism


pnpm dlx shadcn@latest list @neobrutalism
npx shadcn@latest list @neobrutalism
yarn dlx shadcn@latest list @neobrutalism
bunx --bun shadcn@latest list @neobrutalism

모노리포

-c 또는 --cwd을 통해 CLI을 올바른 작업 공간으로 설정하십시오:


pnpm dlx shadcn@latest init -c ./apps/web
npx shadcn@latest init -c ./apps/web
yarn dlx shadcn@latest init -c ./apps/web
bunx --bun shadcn@latest init -c ./apps/web


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
npx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web

도움이 필요하신가요?

무언가 막히셨나요? 디스코드가 활발하게 운영 중이니, 한번 들러서 인사해 보세요.

→ 디스코드 커뮤니티