shadcn/ui + lucide-react 소개 & 사용법

 

 

React로 프로젝트를 시작하면 공통 버튼, 모달, 드롭다운 같은 UI를 직접 만들기 번거롭습니다.  
또한 아이콘도 일일이 디자인하거나 찾는 데 시간이 걸리죠.

📌  이런 반복 작업을 줄이기 위해 `shadcn/ui`와 `lucide-react`를 사용하면 효율이 크게 올라갑니다.

 

1. shadcn/ui란?

shadcn/ui는 Tailwind 기반의 UI 컴포넌트 라이브러리입니다.

 

• Headless UI + Tailwind CSS 조합
• 유연하면서도 빠르게 컴포넌트를 추가 가능
• 버튼, 드롭다운, 모달, 다이얼로그 등 실무에서 바로 쓸 수 있음
• 컴포넌트를 직접 코드로 복사해와서 사용하는 방식 (의존성 설치형 아님)

   ✅ 특징

• 디자인 시스템 없이도 일관된 UI 구성
• Next.js, Tailwind CSS 3 이상과 잘 호환

 

2. lucide-react란?

lucide-react는 깔끔하고 현대적인 React용 아이콘 라이브러리입니다.

 

• Feather Icons를 개선한 오픈소스 프로젝트
• SVG 기반 아이콘으로 선명하고 가볍다
• import { Search, Menu } from 'lucide-react'처럼 간단하게 사용

 

3. 설치 방법

# shadcn 설치 (Next.js 기준)
npx shadcn-ui@latest init

# 또는 특정 컴포넌트만 추가
npx shadcn-ui@latest add button

# lucide-react 설치
npm install lucide-react

 

 

 

 

4. 사용 예시

4-1.  shadcn 버튼 사용

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

export default function Example() {
  return <Button className="bg-blue-500 hover:bg-blue-600">Click me</Button>;
}

 

4-2.  lucide-react 아이콘 사용

import { Search, Menu } from "lucide-react";

export default function Header() {
  return (
    <div className="flex items-center gap-4">
      <Search size={20} />
      <Menu />
    </div>
  );
}

 

5. 커스터마이징은 어떻게?

 

• shadcn/ui는 Tailwind 클래스 수정만으로 쉽게 커스터마이징 가능
• 예: 버튼 스타일 변경

<Button className="rounded-xl bg-red-500 text-white hover:bg-red-600">
  삭제
</Button>

 

• lucide-react도 props로 color, size, strokeWidth 조절 가능

<Search size={24} color="gray" strokeWidth={1.5} />