21st.dev는 무엇인가

21st.dev는 커뮤니티가 만든 React·Tailwind 컴포넌트, 테마와 웹사이트 템플릿을 찾고 설치할 수 있는 마켓플레이스입니다. 원하는 자료가 없으면 21st AI에서 설명을 입력해 여러 UI 시안을 생성하고 수정할 수도 있습니다.

웹에서 가장 쉽게 사용하기

  1. 21st.dev에서 필요한 UI 종류를 검색합니다.
  2. 미리보기와 모바일 동작을 확인합니다.
  3. 설치 명령, 코드와 필요한 패키지를 확인합니다.
  4. 새 브랜치에서 컴포넌트를 설치합니다.
  5. 프로젝트 색상과 접근성 규칙에 맞게 수정합니다.

개별 컴포넌트는 shadcn 호환 명령을 제공하는 경우가 많습니다.

npx shadcn@latest add https://21st.dev/r/사용자/컴포넌트

실제 주소는 선택한 컴포넌트 페이지의 설치 명령을 그대로 사용합니다.

공식 CLI 설치

npm i -g @21st-dev/cli
21st login

전역 설치 없이 검색만 해보려면 다음처럼 실행합니다.

npx @21st-dev/cli search "pricing table"

이전 @21st-dev/registry나 @21st-dev/magic 대신 현재 공식 문서는 통합 CLI인 @21st-dev/cli 사용을 안내합니다.

CLI로 검색하고 설치하기

21st search "hero section" --type component --limit 5
21st search "dark dashboard" --type theme
21st search "saas starter" --type template --free
21st add 사용자/슬러그

search는 무료·유료 필터, 작성자, 색상과 항목 종류를 지원합니다. add는 shadcn 호환 레지스트리를 통해 코드와 의존성을 프로젝트에 설치합니다.

21st AI와 MCP

21st AI는 프롬프트로 여러 디자인 초안을 만들고 선택한 안을 자연어로 수정하는 기능입니다. CLI와 MCP를 사용하면 편집기나 AI 에이전트 안에서 검색, 생성과 설치 흐름을 연결할 수 있습니다. 로그인과 생성 크레딧 정책은 바뀔 수 있으므로 사용 전 21st usage와 공식 요금 안내를 확인합니다.

설치 후 반드시 확인할 것

  • 새 의존성이 과도하게 추가되지 않았는가
  • 컴포넌트가 프로젝트의 React와 Tailwind 버전에 맞는가
  • 키보드 조작과 포커스 표시가 작동하는가
  • 모바일에서 긴 텍스트와 버튼이 잘리지 않는가
  • 복사한 컴포넌트의 라이선스를 지켰는가
  • 기존 디자인 시스템과 색상·간격이 충돌하지 않는가

추천 활용 방식

21st.dev는 전체 사이트를 한 번에 교체하기보다 히어로, 가격표, 로그인 폼처럼 경계가 분명한 컴포넌트에 먼저 적용하는 것이 좋습니다. 설치 후 코드를 직접 소유하고 수정해야 하므로 구조를 이해한 뒤 공통 디자인 토큰과 테스트에 연결해야 유지보수가 쉬워집니다.