캐러셀이 필요할 때의 표준에 가까운 선택지. 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 섹션까지 포함한 수치이므로 실제 기본 컴포넌트는 더 적다. 가격과 라이선스가 명시돼 있지 않다. 상업 사용 전 확인할 것.
컴포넌트를 가져다 쓰는 게 아니라 우리 것으로 만들어 내보낼 때. 색·타이포·모양을 조정한 결과를 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에서 확인할 것.
버튼 라벨이나 상태 표시처럼 짧은 텍스트가 바뀔 때. 슬롯머신처럼 굴러가는 연출이다. 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가 따로 있고 라이선스도 명시돼 있지 않다. 상업 사용 전 확인할 것.
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). 필요한 것만 살 것.
제품 내부 화면에 쓸 조각을 찾을 때. 마케팅용 연출이 아니라 인증 흐름·트리·목차처럼 애플리케이션에 필요한 것들이 Application UI에 모여 있다. 훅과 유틸리티까지 함께 제공하는 게 조금 다르다. 컴포넌트만 주는 곳이 대부분이다. 규모는 크지 않다(966 스타). Kibo UI와 자리가 겹치는데 저쪽이 더 깊고 제작자 이력도 확실하다. 이쪽은 없는 것을 찾을 때 보는 보조. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
shadcn/ui에 없는 복잡한 컴포넌트가 필요할 때. 간트 차트, 칸반 보드, 에디터처럼 직접 만들면 며칠씩 걸리는 것들이 들어 있다. UI Components의 "shadcn 빈자리 채우기" 셋 중 가장 무게가 있다 — ui-x는 폼 입력 위주, cascader·Phone Input은 단일 컴포넌트, 이건 간트·칸반 같은 큰 것까지 다룬다. Tools의 Ultracite, Design의 components.build와 같은 제작자(Hayden Bleasel)다. 이 컬렉션에 그의 프로젝트가 셋이다. 간트·칸반은 프로젝트 관리 화면에 바로 쓰인다. 직접 구현하기 전에 여기부터 볼 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 확인할 것.
다른 곳에 없는 연출이 필요할 때. 중력 효과나 SVG 경로 마퀴처럼 범용 라이브러리가 다루지 않는 것들이 있다. 연출 계열에서 Spell UI와 성격이 가장 가깝다 — 둘 다 범용 세트가 아니라 개성 있는 단품 위주다. 프로젝트에 맞는 게 없을 확률도 그만큼 높다. React Bits를 먼저 훑고 없을 때 오는 순서가 합리적이다. 저쪽이 규모와 안정성에서 앞선다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
연출 계열에서 먼저 볼 곳. 규모(165종)와 채택 규모(47.1k 스타)가 이 컬렉션에서 가장 크고, 유지보수 지속성도 가장 안정적인 축이다. 네 가지 변형을 주는 게 실질적인 강점이다. Tailwind를 안 쓰거나 TypeScript를 안 쓰는 프로젝트에도 그대로 들어간다. 이 컬렉션의 다른 라이브러리는 대개 TS+Tailwind 하나만 준다. Nur UI의 TS→JS 변환 기능이 여기서는 처음부터 변형으로 제공된다. 같은 필요라면 이쪽이 낫다. 라이선스가 MIT + Commons Clause다. 개인·상업 사용은 되지만 Commons Clause는 "이 소프트웨어를 판매하는 것"을 금지한다. 컴포넌트를 모아 유료 템플릿으로 되파는 식의 사용은 안 된다. 일반적인 제품 개발에는 문제없다. 설치 경로가 셋(shadcn CLI·jsrepo·복사)이라 프로젝트 상황에 맞춰 고를 수 있다.
TypeScript를 쓰지 않는 프로젝트에서 값어치가 있다. 이 컬렉션의 컴포넌트 라이브러리 대부분이 TS 코드를 주는데, 여기는 JS로 변환해 받을 수 있다. 그 점을 빼면 연출 계열의 다른 항목과 차별점이 약하다. 스택(React·Tailwind·motion·GSAP)도 규모가 비슷한 곳들과 같다. v0 프리뷰 연동이 있어 컴포넌트를 v0에서 바로 열어 변형해볼 수 있다. 컴포넌트 수가 공개돼 있지 않다. 목록을 훑어 쓸 만한 게 있는지 먼저 볼 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
대시보드 차트가 밋밋할 때. 기본 Recharts는 정적인데 여기는 등장·전환 애니메이션이 들어가 있다. 차트 관련이 셋이 됐다. 갈리는 지점은 — · Evil Charts: 완성된 차트 컴포넌트를 복사해 씀. 연출이 있는 정적 데이터용 · ChartCN(Tools): CSV를 넣으면 Recharts 코드를 만들어줌. 내 데이터로 시작할 때 · Liveline(UI Components): 실시간으로 흐르는 차트. 시세·센서값용 Recharts와 ECharts를 함께 쓴다. 어느 컴포넌트가 어느 쪽인지 확인할 것 — 둘 다 번들에 들어가면 무겁다. shadcn/ui 차트 프리미티브와 스타일이 맞으므로 기존 대시보드에 섞어 쓰기 좋다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
연출 계열 중 규모가 중간쯤(140종)이다. Lightswind(304+)보다 작고 Componentry(50)보다 크다. 이 컬렉션에 같은 성격이 이미 많다. 새로 도입할 이유를 찾기보다, 특정 컴포넌트를 검색하다 여기에만 있을 때 가져오는 용도로 둘 것. 복사·붙여넣기와 CLI를 모두 지원한다. 한두 개만 쓸 거면 복사, 여러 개면 CLI. 이름과 달리 스크롤 전용은 아니다. 일반 애니메이션 컴포넌트 전반을 다룬다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
셰이더로 물결 효과를 만드는 방법을 코드로 확인할 때. 패키지가 아니라 클론해서 보는 예제 프로젝트다. UI Components의 Pokémon Cards CSS와 같은 성격이다 — 가져다 쓰는 라이브러리가 아니라 기법 참고용. 다만 저쪽은 순수 CSS, 이건 WebGL 셰이더다. ThreeUI나 UI-Layouts처럼 완성된 3D 컴포넌트를 주는 곳과 다르다. 셰이더 코드를 직접 이해하고 고칠 생각일 때 본다. 규모가 작다(35 스타, 커밋 18회). 유지보수를 기대할 프로젝트가 아니라 한 번 읽고 가져오는 쪽이다. 라이선스가 명시돼 있지 않다. 코드를 그대로 가져다 쓸 거면 제작자에게 확인하거나 직접 다시 작성할 것. 셰이더는 GPU 부담이 있다. 전체 화면에 상시로 돌리면 배터리와 발열에 영향이 간다. 2026-10-03 확인: 마지막 커밋 2024-08-10, 2년 넘게 갱신 없음.