shadcn/ui 테마 커스터마이징하기

중급약 20분3단계

v0에서 생성한 컴포넌트의 shadcn/ui 테마를 수정해 브랜드에 맞는 디자인 시스템을 만듭니다.

따라 하기

1단계 / 3

CSS 변수로 색상 테마 변경

  1. 1globals.css의 :root에서 shadcn 색상 변수를 수정합니다.
  2. 2--primary, --secondary, --accent 등을 브랜드 색상으로 변경합니다.
v0 열기

이해를 돕는 예시 그림이에요. 실제 화면과 다를 수 있어요.

v0.dev
v0
v0
+ 새 채팅
최근
랜딩페이지 컴포넌트
데이터 테이블 UI
대시보드 레이아웃
v0
무엇을 만들어볼까요?
UI 컴포넌트나 페이지를 설명하세요...
↑

누를 위치 globals.css›:root›CSS 변수 수정›브라우저 확인

팁 shadcn.ui에서 테마 생성기를 사용하면 원하는 색상의 CSS 변수를 자동 생성할 수 있어요.