shadcn/ui

Shadcn UI는 Tailwind CSS를 기반으로 한 현대적이고 아름다운 컴포넌트 모음으로, Next.js, React와 같은 현대 프레임워크와 함께 사용할 수 있는 오픈소스 UI 시스템입니다.

주요 특징:

• Tailwind CSS의 유틸리티 기반 스타일링
• 접근성(a11y) 중심 설계
• 복사-붙여넣기로 코드 소유 가능
• 현대적인 디자인 시스템
• OpenAI, Sonos 등 주요 기업들이 신뢰

설치

• https://ui.shadcn.com/docs/installation
• https://ui.shadcn.com/docs/tailwind-v4
• 설치
• 설명

실습: shadcn/ui 설치 변경 사항

• package.json - 추가된 패키지
• app/globals.css - CSS 변수 추가
• lib/utils.ts - cn() 유틸 함수 추가
• components.json

실습