[Tailwind CSS] shadcn/ui

shadcn/ui

들어가며

• 간단하게 복사 & 붙여넣기로 사용할 수 있는 shadcn/ui에 대해 정리해본다.

 

shadcn/ui

개념

• 다양한 웹 애플리케이션 개발에 사용할 수 있는 접근 가능하고 커스터마이즈 가능한 UI 컴포넌트 모음
• 일반적인 라이브러리와는 다르게 npm 패키지로 설치하는 대신, 사용자가 필요한 컴포넌트를 복사해서 직접 프로젝트에 붙여넣는 방식으로 사용한다.
  • 불필요한 의존성을 피할 수 있고, 자신만의 커스텀 컴포넌트 라이브러리를 구축할 수 있다.
• 리액트(React.js)를 기반으로 작성되었고, Tailwind CSS 및 Radix UI와 같은 오픈 소스 기술들을 적극적으로 활용하여 만들어졌다.
• Next.js와 같은 프레임워크와 잘 통합되도록 설계되었다.
• MIT 라이센스로 공개되어 있어 누구나 자유롭게 수정하고 활용할 수 있다.

 

 

"This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps."
- shadcn/ui Docs

 

 

설치하기 (초기화하기)

• shadcn-ui는 기본적으로 컴포넌트 라이브러리가 아니기 때문에, @yarn@ 또는 @npm@ 등의 패키지 관리자를 이용하여 설치할 수 없다.
• 따라서 자신이 사용하는 패키지 관리자에 따라 @npx@, @pnpm@, @bunx@ 등의 명령을 실행하여 설치(초기화) 해준다.
• 아래의 사이트에서 자신에게 맞는 프레임워크를 선택하여 설치(초기화)를 진행한다.

Installation

 

Next.js 프레임워크에서 설치하기

• 자신에게 맞는 패키지 관리자에 맞게 명령을 실행하여 초기화 작업을 해준다.
• 초기화 작업이 끝나면 프로젝트 최상단 경로에 @components.json@ 파일이 생성된다.

$ npx shadcn@latest init           # npm
$ npx shadcn@latest init           # yarn
$ pnpm dlx shadcn@latest init      # pnpm
$ bunx --bun shadcn@latest init    # bun

초기화 명령을 실행한 후, 스타일 및 기타 설정을 해주는 모습

components.json 파일이 생성된 모습

 

사용하기

• 사용하고자 하는 스타일이 적용된 컴포넌트를 아래의 명령을 실행하여 추가해준다.

사용 예 : @button@ 컴포넌트를 추가하고자 할 경우

$ npx shadcn-ui@latest add button       # npm
$ npx shadcn@latest add button          # yarn
$ pnpm dlx shadcn@latest add button     # pnpm
$ bunx --bun shadcn@latest add button   # bun

 

패키지 관리자 별로 실행 명령어가 다르므로 주의한다.

 

• 컴포넌트를 추가하면, 프로젝트 최상단 경로에 @components@ 라는 폴더가 생기고, 해당 폴더 안의 @ui@ 폴더에 컴포넌트가 추가된다.

button 컴포넌트가 추가된 모습

 

• 코드에서 해당 컴포넌트를 사용하려면 다음과 같이 @import@ 해준다.

import { Button } from '@/components/ui/button';

function HomePage() {
  return (
    <div>
      <h1 className='text-3xl'>HomePage</h1>
      <Button variant='outline' size='lg' className='capitalize m-8'>
        Click me
      </Button>
    </div>
  );
}
export default HomePage;

 

⇒ @variant@ : 스타일 (기본값은 테마에 따라 다르다.)

⇒ @size@ : 크기 (@small@, @large@, @default@)

⇒ @className@을 이용하여 추가적으로 CSS 수정이 가능하다.

 

공식 문서

Introduction

 

참고 사이트

Introduction

GitHub - shadcn-ui/ui: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Ope