21st
shadcn/ui 기반으로 제작된 수천 개의 UI 컴포넌트를 검색하고 복사해 바로 사용할 수 있는 개발자 플랫폼
부분 무료WebAPI오픈소스
웹사이트 방문하기21st.dev
네임릭스와(과) 비교하기소개
활용 워크플로우
풀스택 개발자가 Cursor IDE에서 프로젝트를 진행하며 복잡한 UI 섹션을 즉시 생성해야 할 때할 때
Magic MCP 명령어 입력
Cursor 채팅창에서 '/ui' 명령어와 함께 '반응형 가격 책정표'와 같은 구체적 요구사항을 자연어로 입력
AI 기반 컴포넌트 생성
Magic MCP가 21st.dev의 대규모 라이브러리 데이터를 참조하여 shadcn/ui 기반의 고품질 React 코드를 즉시 작성
코드 자동 삽입 및 커스텀
생성된 컴포넌트가 프로젝트 폴더에 자동으로 추가되며, 실시간 미리보기를 통해 스타일을 수정하고 즉시 배포
연동Cursorshadcn/uiTailwind CSSReact
핵심 차별점: shadcn/ui 기반의 방대한 라이브러리를 Magic MCP를 통해 IDE 내에서 자연어로 즉시 호출하고 편집할 수 있는 디자인 엔지니어링 전용 AI 워크플로우
주요 기능
- Magic MCP를 통한 IDE 내 자연어 UI 생성
- 21st Agents SDK를 활용한 AI 에이전트 구축 지원
- 3D/셰이더 기반의 프리미엄 인터랙티브 컴포넌트
- shadcn/ui 및 Tailwind CSS 완벽 호환
장점 & 단점
웹검색을 통해 수집된 사용자 피드백 정보입니다
장점
단점
- 무료 티어는 5개 요청만 제공, 이후 월 20달러 구독 필요
- React와 Tailwind CSS만 지원해 Vue/Svelte 사용 불가
- 성숙한 유료 라이브러리 대비 틈새/전문 컴포넌트 부족
- 커뮤니티 기반이라 컴포넌트 품질 편차가 큼
- Magic Agent가 복잡한 프롬프트 해석 시 정확도 이슈 발생
- GitHub에 100개 이상의 미해결 이슈가 존재
가격 정보
부분 무료시작 가격: 월 $29
무료 플랜은 월 5개의 토큰을 제공하여 기본적인 컴포넌트 활용이 가능합니다. Pro 플랜은 월 $20(연간 결제 시 월 $16)로 월 50개의 토큰을 제공하며, AI 컴포넌트 생성(1토큰) 및 프리미엄 라이브러리 잠금 해제(5토큰)에 사용할 수 있습니다. 리액트 및 테일윈드 기반의 디자인 엔지니어를 위한 컴포넌트 마켓플레이스입니다.
활용 사례
- Cursor/Windsurf 내에서의 초고속 UI 프로토타이핑
- 고급 애니메이션이 포함된 AI 채팅 인터페이스 구축
- 3D 요소가 포함된 프리미엄 웹 페이지 제작
대상 사용자
개발자UI 디자이너
연동 서비스
ReactTailwind CSSshadcn/uiFramer MotionGitHubCursorClaudeLucide
태그
개발자 도구디자인노코드/로우코드API
사용자 리뷰
리뷰를 불러오는 중...
대안 도구
이 도구 대신 사용할 수 있는 대안
