개발하는데 다 이유가 있겠지

최근에 포트폴리오를 작성하면서 shadcn-ui를 처음 접해보게 됐는데 사용하기 무척 쉽고 좋았었다.

shadcn/ui

---

shadcn/ui는 Vercel의 shadcn이 만든 UI 도구로, Radix UI(Primitives)와 Tailwind CSS라는 상당히 최신 기술을 기반으로 하는 Component Collection이다.

shadcn/ui 소개

전통적인 컴포넌트 라이브러리들을 번들된 소스 코드를 패키지 매니저를 통해 프로젝트 의존성(dependencies)에 추가해서 사용한다.

shadcn/ui는 번들되지 않는 컴포넌트 소스 코드를 프로젝트 의존성에 추가하지 않고, 복사해서 붙여넣은 컴포넌트 코드를 사용할 수 있다.

라이브러리와 shadcn/ui 차이

 

설치 방식

---

npx shadcn-ui@latest init

- Would you like to use TypeScript (recommended)? › no / yes
- Which style would you like to use? › Default
- Which color would you like to use as base color? › Slate
- Where is your global CSS file? › src/index.css
- Do you want to use CSS variables for colors? › no / yes
- Are you using a custom tailwind prefix eg. tw-?
- Where is your tailwind.config.js located? › tailwind.config.js Leave blank if not) ›
- Configure the import alias for components: › @/components
- Configure the import alias for utils: › @/lib/utils
- Are you using React Server Components? › no / yes

위와 같은 명령어를 입력하면 질문에 대해 프로젝트 환경에 맞게 적절하게 선택한다.

• TypeScript 사용 여부
• component style (default와 new-work이 존재함)
• 기반 color pallete
• tailwind import 등이 들어갈 global css file
• CSS variable 사용 여부
• 사용하는 tailwind prefix
• tailwind config 위치
• component가 저장될 path
• utils 파일이 저장될 path
• RSC 사용 여부

init 과정에서 tailwindcss-animate, class-variance-authority, clsx 같은 필수 라이브러리들이 자동으로 설치된다.

설치가 끝나면 원하는 컴포넌트를 아래의 명령어로 설치하면 자동으로 컴포넌트가 init에 설정한 컴포넌트 경로에 생성된다.

npx shadcn-ui@latest add '설치하고 싶은 컴포넌트(button, badge, table 등등)'

// src/components/ui/button.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center ...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        ...
      },
      size: {
        default: "h-10 px-4 py-2",
        ...
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

설치된 컴포넌트를 확인해보면 다음과 같고, 사용도 어렵지 않다.

// Home.tsx
import { Button } from "@/components/ui/button";
  
export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Button onClick={() => setCount(count + 1)}>Counter</Button>
    </div>
  );
}

 

Reference
shadcn ui 자세히 알아보기