ShadCN/UI & Lucide React 사용하기

ShadCN/UI(https://ui.shadcn.com/docs/installation/next)란?

Next.js

ShadCN/UI는 Next.js와 React에서 최신 UI 컴포넌트를 쉽게 사용할 수 있도록 도와주는 Tailwind CSS 기반의 UI 라이브러리

 

• Next.js + Tailwind CSS에 최적화됨.
• Radix UI 기반 → 접근성과 모던한 디자인 제공.
• 컴포넌트가 설치형 → 필요한 컴포넌트만 직접 추가 가능.
• 완전한 커스터마이징 가능 → 코드가 내 프로젝트 내부에 포함됨.
• TypeScript 지원.

---

설치하기

npx shadcn-ui@latest init // npm을 사용 중이라면
bunx --bun shadcn@latest init // bun을 사용 중이라면 

Would you like to use TypeScript? → Yes
Which framework are you using? → Next.js
Where is your tailwind.config.js located? → ./tailwind.config.js
Where is your global CSS file? → ./src/app/globals.css (or ./styles/globals.css)
Would you like to use the import alias? → @/components (권장)

// 선택 시
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … yes

 

ShadCN은 Tailwind CSS를 기반으로 동작하므로, tailwind.config.js에 아래 설정(자동으로 추가됨)이 필요하다. 

• darkMode: ["class"] → 다크 모드 지원
• tailwindcss-animate 플러그인이 추가됨.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tailwindcss-animate")],
};

---

사용하기

ShadCN의 가장 큰 특징은 필요한 컴포넌트만 개별적으로 추가해서 사용한다는 점이다.
→ npx shadcn-ui@latest add <컴포넌트> 명령어를 사용하면 해당 UI 컴포넌트가 components/ui/ 폴더 안에 추가됨.

npx shadcn-ui@latest add button // 버튼 컴포넌트를 components/ui에 추가
npx shadcn-ui@latest add --all // 모든 컴포넌트를 추가

// bun
bunx --bun shadcn@latest add button
bunx --bun shadcn@latest add --all

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

export default function Home() {
  return (
    <div className="flex items-center justify-center h-screen">
      <Button variant="default">기본 버튼</Button>
      <Button variant="outline" className="ml-4">테두리 버튼</Button>
    </div>
  );
}

import해서 사용할 수 있고 components/ui/button.tsx에서 스타일 수정이 가능하다. (ShadCN은 기본적으로 다크 모드를 지원하므로, Tailwind dark: 프리픽스를 활용하면 쉽게 스타일 변경 가능.)

Next.js에서 ShadCN은 Client Components이므로, "use client"를 명시해야한다. 

---

Lucide React(https://lucide.dev/)

Lucide Icons

Lucide React는 React에서 사용할 수 있는 오픈소스 아이콘 라이브러리

Heroicons, FontAwesome 같은 아이콘 라이브러리와 비슷하지만, 아래의 장점을 갖는다.

• 커스텀 가능 → 크기, 색상, 스타일을 쉽게 조정할 수 있음.
• Tree Shaking 지원 → 필요한 아이콘만 불러와서 번들 크기 최소화 가능.
• ShadCN에서 기본 아이콘 라이브러리로 사용됨 → Next.js + Tailwind와 궁합이 좋음.

import { Sun, Moon } from "lucide-react";

export default function ThemeToggle() {
  return (
    <button className="p-2 bg-gray-200 rounded-lg dark:bg-gray-800">
      <Sun className="h-6 w-6 text-yellow-500 dark:hidden" />
      <Moon className="h-6 w-6 text-gray-500 hidden dark:block" />
    </button>
  );
}

---

WXT에서 shadcn/ui 사용하기 (wxt란? https://curiousweek.tistory.com/143)

크롬 확장프로그램 react로 개발하기 (WXT)

// bun add == npm install
bun add class-variance-authority tailwind-variants lucide-react

설치가 너무 오래 걸려서 WXT에서는 사용하지 않기로 했다.

// 설치 중인 시간을 알리는 메시지
warn: wxt-react-starter's postinstall has costed you 6m5.7s