shadcn/ui 호환 레지스트리 · Radix 기반 · 오픈 코드
공공 웹의 표준 KRDS를,
프로젝트 코드로.
krdscn/ui는 KRDS 디자인 가이드라인을 따르는 컴포넌트 소스를 shadcn/ui 레지스트리로 제공합니다. 설치하는 순간 소스가 프로젝트 코드가 되고, 팀은 그 코드를 기준으로 일관된 KRDS UI를 만듭니다.
npx shadcn@latest add https://krdscn-ui.smlee.info/r/krds-all.json41개 컴포넌트 · 9개 카테고리 · KRDS 가이드라인 문서 109편 · MIT 라이선스
프로그램 신청아래 컴포넌트는 실제로 동작합니다
접수 중스크린샷이 아니라 컴포넌트입니다
아래 데모는 레지스트리에서 설치되는 소스 그대로 렌더링됩니다. 직접 눌러보세요.
세 단계면 충분합니다
별도의 패키지 설치나 테마 설정 없이, shadcn CLI 워크플로 그대로 사용합니다.
01
프로젝트 준비
shadcn CLI를 초기화합니다. 이미 shadcn/ui를 쓰고 있다면 이 단계는 건너뜁니다.
pnpm dlx shadcn@latest init02
레지스트리에서 설치
필요한 컴포넌트만 골라 설치하거나, krds-all로 전체를 한 번에 가져옵니다.
pnpm dlx shadcn@latest add .../r/button.json03
프로젝트 코드로 소유
소스가 프로젝트 안으로 복사되므로, 서비스 요구사항에 맞게 직접 수정하고 확장합니다.
components/ui/button.tsxKRDS 기본값 내장
색상·타이포그래피·이중 포커스 링까지, KRDS 디자인 토큰이 컴포넌트와 함께 설치됩니다.
오픈 코드
패키지에서 import하는 대신 소스가 프로젝트로 들어옵니다. 최상위 코드를 직접 읽고 수정합니다.
Radix 기반 호환
기존 shadcn/ui·Radix primitive 생태계와 같은 구조라, 쓰던 프로젝트에 그대로 얹을 수 있습니다.
접근성 내장
레이블·오류 메시지의 ARIA 연결, 스크린리더 낭독, 건너뛰기 링크 등 KRDS 접근성 규칙이 기본입니다.