캐러셀이 필요할 때의 표준에 가까운 선택지. shadcn/ui의 Carousel 컴포넌트가 내부적으로 이걸 쓴다. 이 컬렉션의 연출 계열이 주는 캐러셀과 성격이 다르다. 저들은 특정 연출이 입혀진 완성품이고, 이건 동작만 제공하는 기반 라이브러리다. 겉모습은 직접 입힌다. 플러그인 시스템이 있어 자동 재생·휠 제어·클래스 토글 등을 필요한 것만 붙인다. 번들이 불필요하게 커지지 않는다. 프레임워크 6종을 지원하고 SSR도 된다. Next.js App Router에서 문제없이 쓰인다. 라이선스가 사이트에 없다. npm과 GitHub에서 확인할 것(일반적으로 MIT).

연출 계열의 전형이다. 스택과 방식이 이미 저장된 여러 곳과 같다. UI Components의 BProgress와 같은 제작자(imskyleen)다. 저쪽은 진행 표시줄 하나에 집중한 프로젝트다. 새로 도입하기보다 특정 컴포넌트를 찾다 여기 있을 때 가져오는 용도. React Bits·Animata를 먼저 볼 것. 컴포넌트 수와 라이선스가 공개돼 있지 않다. 목록을 훑고 GitHub에서 라이선스를 확인할 것.

코드와 Figma를 같이 맞춰야 하는데 예산이 없을 때. UI Components의 Reshaped·Untitled UI가 같은 구조인데 저 둘은 유료이거나 가격이 불투명하고, 이건 무료로 보인다. shadcn/ui와 Radix 기반이다. Reshaped(자체)·Untitled UI(React Aria)와 달리 기존 shadcn 프로젝트에 그대로 얹힌다. 이 점이 실질적인 차이다. 아이콘 라이브러리를 따로 제공한다. Design의 아이콘 항목들과 비교해볼 것. 컴포넌트 50종은 적은 편이다. Marketing 섹션까지 포함한 수치이므로 실제 기본 컴포넌트는 더 적다. 가격과 라이선스가 명시돼 있지 않다. 상업 사용 전 확인할 것.

쓰던 유료 서비스를 자체 호스팅으로 바꿀지 검토할 때. "이거 대신 쓸 오픈소스 없나"에 바로 답이 나온다. Tools의 다른 directory와 축이 다르다 — Toolfolio는 일반 SaaS, Dev Resources는 개발자 도구, everywhere.tools는 크리에이티브 오픈소스, Public APIs는 API. 이건 "상용의 대안"이라는 축이다. 오픈소스 대안은 기능이 덜하거나 운영 부담이 따르는 경우가 많다. 목록에서 후보만 얻고 실제 도입 비용(호스팅·유지보수)을 따로 계산할 것. 스폰서 기반으로 운영된다. 상단 노출이 반드시 품질 순은 아니다.

AI 기능을 붙일 때의 기본 선택지. 제공자를 바꿔도 코드를 거의 안 고쳐도 되는 게 핵심이고, 모델 값이 자주 바뀌는 지금 상황에서 그 값어치가 크다. UI Components의 AI Elements가 이 SDK를 전제로 만들어졌다. 둘을 함께 쓰면 백엔드 연동과 화면이 한 세트로 맞는다. assistant-ui도 AI SDK 어댑터를 지원한다. 챗 UI를 어느 쪽으로 가든 이 SDK가 아래에 깔린다. Vercel AI Gateway를 쓰면 모델 접근이 편해지지만 Vercel에 한 겹 더 묶인다. 게이트웨이 없이 제공자를 직접 붙이는 것도 가능하니 구분해서 볼 것. 이 컬렉션에서 채택 규모가 가장 크다(주간 1,830만 다운로드). 유지보수 위험이 사실상 없는 축.

컴포넌트를 가져다 쓰는 게 아니라 우리 것으로 만들어 내보낼 때. 색·타이포·모양을 조정한 결과를 shadcn CLI로 설치 가능한 형태로 뽑는다. UI Components의 다른 항목과 방향이 다르다. 저들은 완성된 컴포넌트를 주고, 이건 내 디자인 시스템을 생성하는 도구다. 그래서 domain보다는 foundation 쪽에 가깝다 — 기반을 만드는 자리다. React Aria 기반이다. Untitled UI와 같은 계열이고 shadcn/ui(Radix)와는 다르다. 기존 프로젝트와 섞을 때 확인할 것. Design의 Design.dev와 목적이 겹친다. 저쪽은 에이전트용 설정 파일을 만들고, 이건 실제 컴포넌트 코드를 만든다. 베타다. 만든 디자인 시스템을 내보낸 뒤 서비스와 무관하게 유지되는지 확인할 것.

모바일에서 날짜·시간·수량처럼 정해진 값 중 하나를 고르게 할 때. 드롭다운보다 엄지로 다루기 편하다. UI Components의 "shadcn 빈자리 채우기" 갈래다 — cascader-shadcn, Shadcn Phone Input, ui-x, Kibo UI와 같은 자리. 이건 휠 피커 하나에 집중한다. 스타일이 없는 상태로 온다. 동작만 주고 겉모습은 직접 입히는 방식이라 디자인 시스템에 맞추기 쉽다. 키보드 내비게이션과 타입어헤드가 들어 있다. 휠 UI는 접근성이 취약해지기 쉬운데 그 부분을 챙긴 편이다. 데스크탑에서는 어색할 수 있다. 모바일 위주 화면에 쓰고 데스크탑은 다른 입력을 둘지 검토할 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

차트 관련이 넷이 됐다. 이건 RSC에서 도는 게 핵심 — 클라이언트 번들에 차트 라이브러리를 넣지 않아도 된다. 갈리는 지점 — · Rosen Charts: RSC 대응, D3 기반, 30종+. 정적 데이터를 서버에서 그릴 때 · Evil Charts: Recharts·ECharts 기반, 애니메이션 위주. 연출이 필요할 때 · ChartCN(Tools): CSV를 넣으면 Recharts 코드 생성. 시작할 때 · Liveline: 실시간으로 흐르는 차트. 시세·센서값 Next.js App Router를 쓴다면 RSC 대응이 실질적인 이점이다. Recharts 계열은 전부 클라이언트 컴포넌트가 된다. D3 기반이라 커스터마이징 폭이 넓지만 손댈 때 D3 지식이 필요하다. 라이선스가 명시돼 있지 않다. 상업 사용 전 확인할 것.

목록에서 상세로 넘어갈 때 카드가 그대로 확대되는 연출 같은 것. 직접 만들면 위치 계산과 상태 관리가 번거로운데 그 부분을 덜어준다. UI Components의 SSGOI와 목적이 겹치지만 층위가 다르다. 저쪽은 페이지 전환 전체, 이건 요소 단위 공유 애니메이션과 팝업이다. Base UI 기반이다. shadcn/ui(Radix)와 다른 계열이므로 섞어 쓸 때 확인할 것. mcpcn도 Base UI 계열이다. prefers-reduced-motion을 존중하고 reduced 프리셋을 따로 둔 점이 실무적이다. Calligraph와 같은 제작자(Raphael Salaja)다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

알고리즘 동작이 머리에 안 그려질 때. 글로 읽는 것보다 한 단계씩 움직이는 걸 보는 편이 빠르다. Tools의 research 역할로 두었다. 코드를 만들거나 검사하는 도구가 아니라 읽고 배우는 자료다. 코드 예시가 5개 언어로 제공된다. 개념을 이해한 뒤 쓰는 언어로 바로 옮겨볼 수 있다. midudev의 프로젝트가 이 컬렉션에서 넷째다 — autoskills, CanIRun.ai, Tailwind Animations, 그리고 이것. 학습용이다. 실무에서 바로 쓰는 물건은 아니고 면접 준비나 개념 복습 때 여는 쪽.

에이전트에게 코드를 맡길 때 따를 디자인 기준을 물릴 것. 특정 제품의 색·타이포·여백 체계를 그대로 참조하게 한다. Design의 같은 갈래 셋과 규모·방식이 갈린다 — · getdesign.md: 550곳, DESIGN.md 파일을 직접 넘김 · Inspo: 832곳, DESIGN.md + 캡처 2,320장, MCP 연동 · Refero Styles: 2,000곳 이상, MCP 연동. 규모가 가장 크다 셋 다 "남의 디자인 시스템을 가져오는 것"이라는 한계가 같다. 자기 브랜드가 있으면 출발점으로만 쓰고 토큰은 바꿀 것. Design.dev와는 방향이 반대다. 저쪽은 내 기준을 파일로 만들어내고, 이건 남의 기준을 가져온다. 베타이고 가격이 명시돼 있지 않다. 무료 범위를 확인할 것.

버튼 라벨이나 상태 표시처럼 짧은 텍스트가 바뀔 때. 슬롯머신처럼 굴러가는 연출이다. UI Components에 텍스트 전환이 셋이 됐다. 갈리는 지점은 — · Torph: 의존성 없음, 4개 프레임워크, 일반 텍스트 모핑, v0.1.3 · Calligraph: Motion 필요, React 전용, 숫자·통화 강점, v1.4.1 · slot-text: 의존성 없음, 5개 프레임워크, CSS 1KB, 슬롯 롤 연출 특화, MIT 명확 가장 가볍고 라이선스가 확실한 것은 이쪽이다. 다만 연출이 "롤" 하나로 좁다. CSS 애니메이션 기반이라 JS 번들이 늘지 않는다. 연속 호출 안전 처리를 명시한 점이 실무적이다. 값이 빠르게 바뀌는 곳에서 깨지지 않는다.

연출 계열에서 라이선스가 명확한 몇 안 되는 곳이다. MIT이고 "free forever"를 명시한다. 접근성(키보드 포커스·스크린리더)을 언급하는 것도 이 계열에서 드물다. 대부분은 겉모습만 다룬다. Next.js 외에 Remix·Vite·Astro 등에서도 동작한다고 밝힌다. Next.js 전용이 많은 계열에서 선택지가 넓다. React Bits와 규모가 비슷하다(156 vs 165). 저쪽은 네 가지 변형과 47k 스타, 이쪽은 MIT와 접근성·프레임워크 폭. 라이선스가 걸리는 프로젝트면 이쪽을 먼저 볼 것.

연출 계열의 전형이다. 규모(150종)는 중상위권이지만 스택과 성격이 이미 저장된 여러 곳과 겹친다. React Bits(약 213종, 47k 스타)와 직접 비교되는 위치다. 저쪽이 규모·안정성·변형 제공에서 앞서므로 먼저 볼 것. 전부 무료라는 점은 장점이다. Skiper UI나 ForgeUI처럼 유료 비중이 높은 곳과 다르다. 라이선스 종류는 명시돼 있지 않다. GitHub에서 확인할 것.

Tiptap으로 에디터를 만들다 툴바와 확장을 직접 짜기 번거로울 때. 찾기·바꾸기처럼 직접 구현하면 성가신 것이 들어 있다. UI Components의 editorcn과 같은 영역이다. 저쪽은 완성된 에디터(툴바형·블록형)를 주고, 이건 Tiptap을 이미 쓰는 프로젝트에 부품을 더하는 쪽이다. 이미 Tiptap 위에 직접 만들고 있다면 이쪽. shadcn/ui 스타일에 맞춰져 있어 기존 UI와 이질감이 적다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

제품 내부 화면을 만들 때. 대시보드·폼·인증처럼 마케팅이 아니라 애플리케이션 쪽 블록이 모여 있다. UI Components의 Shadcn UI Blocks와 갈린다 — 저쪽은 200종에 마케팅 섹션(히어로·요금제)까지 폭넓고, 이건 60종에 애플리케이션 화면에 집중한다. 랜딩이면 저쪽, 제품 내부면 이쪽. CuiCui의 Application UI와도 자리가 겹친다. 둘 다 규모가 작으니 필요한 것이 어느 쪽에 있는지 확인하고 고를 것. 전부 무료이고 소스가 공개돼 있다. 라이선스 종류가 명시돼 있지 않다. GitHub에서 확인할 것.

에이전트에게 컴포넌트 설치를 맡길 때. 호스팅 MCP 서버를 제공해 설정 부담이 적다. MCP를 지원하는 곳이 이 컬렉션에 여럿이다(KokonutUI·Componentry·AI Canvas·Aceternity·Originkit). 그중 호스팅 MCP를 명시한 것은 이쪽이다. 앞서 cascader-shadcn을 찾을 때 검색 결과에 ReUI의 Cascader가 함께 나왔다. 개별 컴포넌트를 찾다 보면 자주 마주치는 레지스트리다. 무료와 유료(프로 블록)가 섞여 있다. 경계와 가격을 확인할 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 확인할 것.

shadcn/ui에 얹을 조각을 찾을 때 훑어보는 곳 중 하나. 이 컬렉션에 같은 성격이 이미 여럿이다(Shadcn UI Blocks, blocks.so, WigggleUI 등). 규모(500 스타)도 작은 편이라 먼저 볼 이유는 약하다. "foundation 컴포넌트"를 표방하지만 실제로는 shadcn/ui 위의 확장이다. 기반은 shadcn/ui 쪽이다. 정보가 적다. 컴포넌트 수·설치 방법·라이선스가 모두 페이지에 없으니 GitHub에서 확인할 것.

수는 적지만(12종) 하나하나가 독특하다. Canvas·WebGL을 쓰는 컴포넌트를 복붙으로 가져올 수 있는 곳은 드물다. UI Components의 ThreeUI·Ripple Shader와 갈린다 — 저들은 배경·장면 위주이고, 이건 버튼이나 캐러셀 같은 UI 요소 자체를 Canvas로 만든 것이다. Canvas·WebGL이라 성능 부담이 있다. 제작자는 문제없다고 밝히지만 실제 기기에서 확인할 것. 12종뿐이다. 목록을 훑고 쓸 게 있으면 가져오는 정도. 세트로 깔 물건은 아니다. 라이선스가 명시돼 있지 않다. 상업 사용 전 확인할 것.

랜딩·마케팅 페이지를 섹션 단위로 채울 때. 일러스트까지 함께 주는 곳은 드물다. UI Components의 Shadcn UI Blocks와 정면으로 겹친다. 저쪽은 전부 무료이고 장식이 없으며, 이건 디자인 스타일이 여럿이고 일부가 유료다. 무료로 해결되면 저쪽이 먼저다. Radix UI와 Base UI 양쪽 호환을 명시한 점은 드물다. Base UI 기반 프로젝트(mcpcn 등)와 섞을 때 유리하다. 정보가 적다. 블록 수·가격·라이선스가 모두 페이지에 없으니 가격 페이지와 저장소를 확인한 뒤 판단할 것. "Figma가 사용" 같은 표기는 사이트 자체 주장이다. 판단 근거로 삼지 말 것.

흔한 컴포넌트 말고 눈에 띄는 연출을 찾을 때. 이름부터 "un-common"을 내세운다. 디테일에 신경 쓴 편이다. Rauno Freiberg의 작업을 참고했다고 밝히는데 그쪽은 인터랙션 완성도로 알려진 쪽이다. 유료 비중이 높다. 106종 중 무료는 24종 정도이고 나머지는 $129부터다. 무료분으로 품질을 확인한 뒤 판단할 것. UI Components의 Spell UI·Fancy Components와 성격이 같다(단품 연출 위주). 저 둘은 무료이니 먼저 훑고 없을 때 이쪽을 검토할 것. 번호로 이름을 붙인다(skiper40 등). 어떤 컴포넌트인지 이름만으로는 알 수 없으니 목록을 직접 볼 것.

규모가 작다(17종 이상). 이 컬렉션의 연출 계열 대부분보다 한참 작아 먼저 볼 이유가 약하다. UI Components의 Kaif UI와 같은 제작자(Muhammad Kaif Nazeer)다. 두 프로젝트를 병행하는 셈이라 어느 쪽에 힘이 실리는지 확인할 것. "10배 빠르게"류의 홍보 문구가 앞에 있다. 실제 컴포넌트 목록을 보고 판단할 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

연출 계열의 전형이다. 스택도 규모도 방식도 이미 저장된 여러 곳과 비슷하다. 새로 도입할 이유를 찾기보다, 다른 곳에서 못 찾은 컴포넌트가 여기 있을 때 가져오는 용도로 둘 것. React Bits를 먼저 볼 것. 컴포넌트 수가 공개돼 있지 않다. 목록을 훑고 판단할 것. Pro가 따로 있고 라이선스도 명시돼 있지 않다. 상업 사용 전 확인할 것.

간단한 편집을 설치 없이 끝낼 때. 브라우저에서 돌아가므로 맥이든 윈도든 상관없다. Design의 영상 편집기 둘과 갈린다 — Daydream은 로컬 데스크탑 앱에 트랜스크립트 편집, Palmier는 macOS 전용에 반복 작업 자동화. 이건 가장 가볍고 아무 데서나 열린다. 얼리 베타다. 중요한 작업을 맡기지 말고 원본을 따로 보관할 것. GitHub 70k 스타는 이 컬렉션에서 가장 큰 수치다. 다만 스타 수가 완성도를 뜻하지는 않는다 — 베타라는 점을 함께 볼 것. 브라우저 편집이라 긴 영상이나 고해상도에서는 메모리 한계에 부딪힐 수 있다.

상용 디자인 도구의 오픈소스 대안을 찾을 때. 제너러티브 아트나 실험적인 이미지 처리처럼 상용 도구에 없는 것들이 섞여 있다. Tools의 다른 directory와 대상이 갈린다 — Toolfolio는 일반 SaaS, Dev Resources는 개발자 도구, Public APIs는 API, 이건 크리에이티브·디자인 쪽 오픈소스다. 큐레이션이라 규모는 작다. 대신 전부 오픈소스라 라이선스 부담이 적다. 마지막 갱신일이 표시된다. 오래된 목록인지 확인하고 볼 것.

Claude Code로 UI를 만들 때. MCP 연동 한 줄로 에이전트가 컴포넌트 목록을 읽고 직접 설치한다. UI Components에서 MCP를 지원하는 것이 여럿(Componentry·AI Canvas·Aceternity·Originkit)이지만, Claude 클라이언트용 설치 명령을 명시한 곳은 드물다. 연출 계열과 규모·스택이 비슷하다. 차별점은 MCP 연동의 완성도다. 에이전트에게 맡기지 않을 거면 React Bits 쪽이 낫다. Pro가 따로 있다. 무료 범위를 먼저 확인할 것.

대시보드 위젯 순서나 카드 배치를 사용자가 바꾸게 할 때. dnd-kit 같은 범용 드래그앤드롭 라이브러리는 설정이 많은데, 이건 "자리 맞바꾸기" 하나에 집중해 붙이기 쉽다. 정렬(sortable)이 아니라 교환(swap)이다. 목록 순서를 밀어내며 재배열하는 동작이 필요하면 다른 라이브러리를 볼 것. 프레임워크를 가리지 않고 CDN으로도 쓸 수 있다. 라이선스가 사이트 본문에 없고 별도 페이지에 있다. 상업 사용 전 확인할 것.

디자이너와 개발자가 같은 체계로 작업해야 하고 예산이 있을 때. Figma 키트와 React 라이브러리가 짝으로 관리된다. UI Components의 Reshaped와 같은 구조다. 갈리는 지점은 가격 공개 여부와 규모 — 이쪽은 1회 결제로 가격이 명확하고 규모가 훨씬 크며, Reshaped는 가격이 공개돼 있지 않다. React Aria 기반이라 접근성 처리가 라이브러리 수준에서 들어가 있다. shadcn/ui(Radix)와는 다른 계열이므로 기존 프로젝트에 섞을 때 확인할 것. 무료 버전이 있다. 유료 결제 전에 범위를 확인할 것. 라이선스 제한이 명확하다 — 이걸로 또 다른 UI 라이브러리를 만들어 파는 것은 금지된다. 일반적인 제품 개발에는 문제없다. 가격이 합산되면 적지 않다(Figma + React + 아이콘 = $537). 필요한 것만 살 것.

입체감 있는 아이콘이 필요할 때. 마케팅 페이지나 온보딩 화면처럼 시선을 끌어야 하는 곳에 쓴다. Design의 다른 아이콘 항목과 용도가 다르다 — Central Icon System·Yesicon은 UI용 선 아이콘, AnimateIcons·lucide-animated는 움직이는 선 아이콘, 이건 장식용 3D 오브젝트다. 제품 UI에 3D 아이콘을 쓰면 무겁고 일관성을 잡기 어렵다. Iconly Pro에도 3D 계열이 있다. 그쪽과 비교해볼 것. 라이선스 구조를 확인할 것 — 개인 무료, 상업은 유료다. 클라이언트 작업이나 서비스에 쓰려면 라이선스를 사야 한다. AI 생성물이다. 세부가 어색한 것이 섞여 있을 수 있으니 확대해서 확인하고 고를 것.