라이브러리 - Shadcn/ui

Shadcn/ui

 

 

✅ Shadcn/ui란?

---

복붙해서 내 프로젝트 안으로 가져오는 UI 컴포넌트 모음 + 시스템

 

다른 ui 라이브러리처럼 설치하는 것이 아니라 CLI로 필요한 컴포넌트를 추가한다.

npx shadcn@latest init

 

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

 

 

 

설정으로는 일단 기본값을 선택.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "radix-nova",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/app.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "rtl": false,
  "aliases": {
    "components": "~/common/components",
    "utils": "~/lib/utils",
    "ui": "~/common/components/ui",
    "lib": "~/lib",
    "hooks": "~/hooks"
  },
  "menuColor": "default",
  "menuAccent": "subtle",
  "registries": {}
}

설정을 마치면 생성되는 components.json 파일은 shadcn에서 다운로드한 component를 어디에 넣을지 등을 설정하는 파일이다.

 

 

✅ 사용법

---

https://ui.shadcn.com/docs/components/radix/button