shadcn/ui 란 무엇일까?

ㅇㅖㅈㅣ·2024년 5월 22일

Today I Learned

목록 보기

91/93

👩🏻‍🏫 shadcn/ui

shadcn/ui란 컴포넌트 라이브러리가 아닌 Radix UI 및 Tailwind CSS를 사용하여 구축된 복사하여 붙여넣을 수 있는 재사용 가능한 컴포넌트의 모음이다.
컴포넌트 라이브러리가 아니라는 말은 별도의 종속성 설치없이 코드를 복사하여 프로젝트에 붙여넣고 필요에 맞게 사용자 지정할 수 있다는 것이다!

Radix UI란?
고품질의 접근성 높은 디자인 시스템과 웹 앱을 구축하기 위한 오픈 소스 UI 컴포넌트 라이브러리이다.
공식문서

사용하는 이유는?

그렇다면 이 shadcn/ui는 왜 사용하는 걸까?

컴포넌트 기반

다양한 UI 컴포넌트(버튼, 모달, 폼 요소 등)를 제공하여 사용자가 신속하게 애플리케이션을 개발할 수 있도록 해준다.

커스터마이징 가능

스타일링과 동작을 쉽게 커스터마이징할 수 있어, 디자인 시스템에 맞춰 컴포넌트를 조정할 수 있다.

접근성

접근성을 고려하여 설계되어, 다양한 사용자들이 문제없이 사용할 수 있도록 지원한다.

React 통합

React와 긴밀하게 통합되어, React의 생태계를 활용한 개발이 가능하다.

모던 디자인

최신 디자인 트렌드와 모범 사례를 반영하여, 현대적인 사용자 경험을 제공한다.

shadcn/ui는 특히 React 개발자들에게 유용하며, 개발 속도를 높이고 일관된 UI를 유지하는 데 도움이 된다!

또한 Tailwind CSS를 사용하여 스타일을 정의하며, TypeScript 지원도 포함되어 있어 더욱 안정적으로 코드를 작성할 수 있도록 도와준다.

Next.js에서 사용해보기

공식문서 참고

먼저 프로젝트를 생성해준다

npx create-next-app@latest my-app --typescript --tailwind --eslint

이렇게 생성하면 typescript와 tailwindcss가 함께 설치된다.

프로젝트에 설정해준다

npx shadcn-ui@latest init

이 과정에서 몇 가지 질문을 받은 후 components.json 파일이 생성되는데 질문은 아래와 같다.

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › no / yes
Copy

파일구조 디렉토리는 아래와 같아진다.

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

lib 폴더에 utils.ts 라는 파일도 생성된 것을 볼 수 있고 components/ui 안에 shadcn/ui 기본 공유 컴포넌트가 들어갈 예정이다.

추가로 global.css 와 tailwind.config.ts 도 변화가 생긴것을 확인할 수 있다.

// global.css
@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;

     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;

     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;

     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;

     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;

     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;

     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;

     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;

     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;

     --radius: 0.5rem;
   }

   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;

     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;

     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;

     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;

     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;

     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;

     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;

     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;

     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }

// tailwind.config.ts
extend: {
     colors: {
       border: "hsl(var(--border))",
       input: "hsl(var(--input))",
       ring: "hsl(var(--ring))",
       background: "hsl(var(--background))",
       foreground: "hsl(var(--foreground))",
       primary: {
         DEFAULT: "hsl(var(--primary))",
         foreground: "hsl(var(--primary-foreground))",
       },
       secondary: {
         DEFAULT: "hsl(var(--secondary))",
         foreground: "hsl(var(--secondary-foreground))",
       },
       destructive: {
         DEFAULT: "hsl(var(--destructive))",
         foreground: "hsl(var(--destructive-foreground))",
       },
       muted: {
         DEFAULT: "hsl(var(--muted))",
         foreground: "hsl(var(--muted-foreground))",
       },      
...

이런식으로 global.css 에 기본 컬러값이 설정되어있고 tailwind.config.ts 에서 사용하고 있는 것을 볼 수 있다.

사용 예시

그렇다면 사용예 시로 Button 컴포넌트를 생성해보자
직접 코드를 복사 붙여넣기 할 수도 있지만 CLI 사용으로 해보려고 한다.

npx shadcn-ui@latest add button

// yarn 사용시(yarn add shadcn-ui 가 설치되어 있다는 가정)
yarn shadcn-ui add button

컴포넌트에서 사용하기

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}