UI Components

대시보드를 만들 때 저장된 두 선택지와 비교해 고를 것 — Shadcn Dashboard는 Pro 75달러에 AI 빌더·MCP를 얹은 제품형이고, BoldKit은 네오브루탈리즘 톤에 차트 14종이 딸린 범용 키트이며, dashboardcn은 스타일 색채 없이 차트·KPI 조각만 전량 무료로 푼 쪽이다. 유료 없이 지금 붙일 거면 여기가 가장 깔끔하다. 의존성이 recharts와 TanStack Table 둘로 끝나는 것도 장점이다(설치할 때마다 새 라이브러리가 따라오지 않는다). 에이전트 스킬을 레지스트리 항목으로 배포하는 방식은 저장된 Niko Table·Optics와 같은 흐름이다. 주의: 2026-09-03 개설로 한 달도 안 된 프로젝트에 별 8개다. 차트 종류는 많지만 각각의 완성도는 직접 렌더해 확인할 것. GitHub API가 라이선스를 표준 인식하지 못하는데 LICENSE 파일은 MIT였다.

아이콘에 동작을 주고 싶은데 세트 전체를 갈아끼우기는 싫을 때. 저장된 아이콘 모션 두 개와 성격이 다르다 — lucide-animated(467여 종)와 Hugeicons Animated(165종)는 기존 아이콘 세트의 이름 체계를 그대로 따르는 대체재인 반면, CraftUI는 아이콘 수는 적지만 하나당 여러 동작 변형을 제공해 "이 버튼에 어떤 반응을 줄까"를 고르는 쪽이다. 쓰던 세트를 유지한 채 몇 개만 이걸로 바꾸는 구성이 자연스럽다. 블록 42종은 덤으로 보는 게 맞고 품질 편차가 있으니 개별로 확인할 것. 주의 둘 — 저장소에 라이선스 파일이 없어 사용 조건이 명시돼 있지 않고, netflix-sign-in처럼 특정 서비스 화면을 그대로 본뜬 블록이 섞여 있어 상업 제품에 그대로 쓰면 곤란할 수 있다.

개발자 도구나 인프라 제품처럼 터미널 정서가 맞는 화면을 통째로 그 톤으로 만들 때. 스타일 테마 계열 저장물과 자리가 갈린다 — The Gridcn은 SF HUD, 8bit/cnlibs는 픽셀, BRUT/UI는 네오브루탈리즘 강도 조절이고, Afterglow는 CRT 모니터 재현이 축이다. 프리미티브 45종으로 표준을 덮으므로 부분 장식이 아니라 전면 적용이 가능하다는 점이 단품 터미널 컴포넌트들과 다르다. reduced-motion 훅과 스캔라인·글리치를 같이 내놓은 건 실무적으로 맞는 판단이다 — CRT 효과는 접근성 부담이 크므로 이 훅을 반드시 연결해 쓸 것. 주의: 2026-08 개설에 별 8개로 아주 어리고, Base UI 기반이라 Radix 계열 shadcn 프로젝트에 섞으면 프리미티브가 두 벌이 된다. GitHub API는 라이선스를 표준으로 인식하지 못하지만 LICENSE 파일은 MIT였다.

지금 단계에서는 라이브러리가 아니라 컴포넌트 6개짜리 참고 목록으로 봐야 한다. 그중 쓸 만한 건 skeuomorphic-buttons와 stamp 정도로, 둘 다 다른 저장 항목에서 잘 안 보이는 결이다. 나머지(애니메이션 카드·후기·스크롤바)는 저장된 마이크로 인터랙션 계열(MicroKit UI, Spark UI, Skecher UI)과 겹치므로 굳이 여기서 가져올 이유가 없다. 주의: 마지막 푸시가 2026-04-25로 다섯 달 멈춰 있는데 사이트에는 "COOKING MORE COMPONENTS"와 블록·템플릿 예고가 그대로 걸려 있다 — 예고를 근거로 기다리지 말 것. 라이선스가 Apache-2.0이라 저장된 대부분(MIT)과 달리 특허 조항과 고지 의무가 따라붙는다는 점도 기억해 둘 만하다.

한 화면에 한두 개 넣어 인상을 만드는 단품 모음이다. 저장된 Spark UI(18종)와 성격이 거의 같아 둘을 같이 훑고 고르면 된다 — Spark UI가 다이내믹 아일랜드·위젯 스택 쪽이라면 Skecher는 애플 메일 탭, 구이 툴바, 매거진 스크롤러처럼 편집·앱 UI 흉내가 많다. Gamma UI(30종)는 여기에 3D까지 섞은 중간 크기다. 실무 주의는 의존성이다 — motion 외에 three, @paper-design/shaders-react, @number-flow/react, 그리고 Nucleo 아이콘 패키지 여러 개가 항목별로 흩어져 있어 하나 설치할 때마다 무엇이 따라오는지 확인해야 한다(셋 다 npm에 공개돼 있는 것은 확인함). 그리고 저장소에 라이선스 파일이 없어 사용 조건이 명시돼 있지 않다. 애플 메일 탭처럼 특정 제품 UI를 본뜬 항목은 상업 제품에 그대로 쓰기 전에 한 번 생각해 볼 것.

Neon을 쓰는 제품의 대시보드를 만들 때가 1순위지만, 그 밖에도 읽을 거리가 있다. 저장된 Supabase Library·Supabase Design System과 같은 "DB 회사가 자사 콘솔 UI를 공개한" 부류이고, 브랜치·오토스케일·리전처럼 Neon 특유의 개념이 화면에서 어떻게 표현되는지가 핵심이라 Neon을 안 쓰면 그 절반은 쓸 데가 없다. 반대로 AI 대화 UI 묶음(reasoning, chain-of-thought, inline-citation, tool-call-chip)은 DB와 무관하게 떼어 쓸 수 있고 저장된 GAIA UI·Kobra의 같은 계열과 비교해 볼 만하다. 사용량·비용 표시 컴포넌트 묶음은 사용량 기반 과금 제품을 만들 때 참고 구현으로 값이 있다. 주의: 공식 레지스트리이지만 2026-07 개설에 별 10개로 아직 초기이고, Neon 제품이 바뀌면 컴포넌트도 따라 바뀔 성격이라 그대로 고정해 쓰기보다 소스를 가져와 소유하는 편이 맞다. MIT.

지역별 수치를 칠하는 지도(코로플레스)나 국가 선택 UI가 필요할 때. 보통 이런 화면은 react-simple-maps에 TopoJSON을 물리거나 Mapbox·Leaflet을 붙이는데, 여기는 SVG 경로와 데이터가 컴포넌트 파일로 같이 설치돼서 런타임 의존성도 타일 서버 비용도 없다. 대신 그 구조상 지도를 실제로 움직이는 지도(확대·팬·실제 좌표계)로 쓸 수는 없고, 고정된 도형에 색과 툴팁을 얹는 용도에 한정된다. 그 차이를 먼저 확인하고 고를 것. 실무 주의 둘 — 저장소에 라이선스 파일이 없어 사용 조건이 명시돼 있지 않고, 국경·영토 표기는 각 SVG 데이터가 정한 대로 그려지므로 서비스 대상 국가에 민감한 경계가 있다면 해당 지도 데이터를 직접 확인한 뒤 써야 한다. 별 10개의 1인 프로젝트다.

네오브루탈리즘을 쓰고 싶은데 기본형이 너무 강해서 망설일 때 고른다 — Soft/Paper 조합이면 실무 제품에도 얹을 만한 수준까지 내려온다. 같은 스타일 저장물 셋과 자리가 갈린다: Neobrutalism components(64종)는 React 전용 정통파, BoldKit(96항목)은 React+Vue에 차트·데이터테이블까지 갖춘 대시보드용, 8bit/cnlibs는 픽셀 톤이고, BRUT/UI는 강도 조절이 유일한 축이다. 프리미티브 58종으로 shadcn 표준을 덮으므로 스타일 교체 용도로는 충분하지만 블록이나 차트는 없으니 그건 다른 데서 가져와야 한다. 주의: 2026-08 개설에 별 10개, 마지막 푸시 2026-08-21로 아직 검증되지 않은 신생 프로젝트다. MIT.

문서를 읽고 구조화하는 제품의 화면을 만들 때 — 계약서 파싱, 인보이스 추출, RAG 근거 표시 같은 것. 저장된 Extend UI(extend.ai/ui)와 정면으로 겹치니 기준을 잡아두면 좋다: Extend UI는 PDF 인용 좌표 표시가 강점인 소규모 세트이고, Retab UI는 뷰어 포맷 범위(PDF뿐 아니라 DOCX·PPTX·XLSX·이메일까지)와 파이프라인 단계별 블록(OCR→분할→파싱→추출)이 강점이다. 문서 종류가 여럿이면 이쪽이 낫다. 가상화를 전제로 만들어져 큰 파일에서 유리하다는 점도 기록해 둘 만하다. 주의: 2026-06 개설에 별 11개이고 자사 제품(retab.com)에서 떼어낸 성격이라 로드맵이 그 제품 사정을 따라갈 수 있다. xlsx 뷰어가 워커·SheetJS 경로를 쓰므로 번들과 라이선스(SheetJS 배포판 조건)를 설치 전에 확인할 것.

같은 컴포넌트의 디자인 안을 여러 개 놓고 고르고 싶을 때 쓰는 구조다. 저장된 Base UI 계열 중 다섯 번째인데 경쟁 축이 다르다 — Cubby UI 68종, basecn 61종, Lumi UI 52종+조합, fab ui 43종이 커버리지와 조합 예시로 갈렸다면, Cnippet은 한 컴포넌트당 변형 수로 승부한다. 버튼 하나에 30가지 안이 있으니 디자인 결정을 빨리 끝내야 할 때 유용하다. 반대로 말하면 실제 커버리지는 97종으로 Cubby UI보다 조금 넓은 수준이니, 레지스트리 크기 숫자(1,130)를 다른 항목과 직접 비교하면 안 된다. 주의: 별 12개의 소규모 프로젝트이고, 변형이 많다는 건 관리 대상도 그만큼 많다는 뜻이라 Base UI 업스트림 변경 시 전부 따라오는지는 확인이 필요하다. MIT, 전량 무료.

배경이나 텍스트 연출, 차트처럼 "느낌"이 필요한 조각을 폭넓게 뒤질 때. 규모로는 저장된 것 중 Beste UI(블록 2,095)·Zyeon UI(1,014) 다음이고, 그 둘과 달리 전량 MIT 무료다. ASCII 배경 계열(caustics, dither, domain-walls, voronoi-walls, truchet-weave)처럼 다른 레지스트리에 없는 것들이 실제 차별점이다. 다만 규모를 액면가로 받지 말 것 — 2026-07-20 개설에 두 달 만에 542개이고 사이트가 Claude Code로 만들었다고 밝히고 있어, 대량 생성된 결과물로 보는 게 정확하다. 골라 쓰기 전 해당 컴포넌트 소스를 직접 읽고 렌더해 확인하는 단계를 빼면 안 된다. 이름이 auxin-canal, bombe-drum-halt, bobbin-lace-pricking처럼 은유적이라 이름으로는 뭔지 짐작할 수 없는 것도 실사용상 걸림돌인데, 카테고리 브라우징이나 MCP 검색으로 우회하는 게 낫다. 별 16개의 1인 프로젝트라는 점도 감안할 것. MIT.

Abstract 체인 위에서 앱을 만들 때만 의미가 있는 도메인 레지스트리다 — 저장된 Lens Blocks(Lens 소셜 프로토콜 전용)와 같은 성격이고, 다른 체인이나 일반 웹 프로젝트에는 쓸 데가 없다. 값이 있는 건 지갑 연결 버튼 자체가 아니라 그 주변의 귀찮은 흐름들이다: SIWE 인증, 세션 키로 매번 뜨는 서명 팝업 없애기, 다단계 온보딩 다이얼로그, 낙관적 컨트랙트 쓰기 훅. 직접 만들면 시간이 꽤 드는 부분이라 참고 구현으로도 볼 만하다. cursor-ai-config와 claude-config를 레지스트리 항목으로 배포하는 방식은 저장된 Optics·Elements와 같은 흐름이다. 주의 둘 — 공식 저장소(Abstract-Foundation)는 마지막 푸시가 2025-12로 아홉 달 멈춰 있고, 사이트가 먼저 링크하는 jarrodwatts 포크(별 29개)도 2026-03이 마지막이다. 웹3 의존성은 버전이 빠르게 움직이므로 설치 후 wagmi·viem 버전 충돌을 먼저 확인할 것. 그리고 두 저장소 모두 라이선스 파일이 없어 사용 조건이 명시돼 있지 않다.

섹션 몇 개만 빠르게 채우면 될 때 훑어보는 소규모 목록. 규모로 보면 저장된 블록 모음 중 가장 작다 — Beste UI는 2,095개지만 92%가 유료이고, Hex UI는 33개 전부 무료라 "무료로 지금 쓸 수 있는 섹션"만 놓고 보면 격차가 생각보다 크지 않다. 히어로·푸터·소셜 프루프처럼 어느 랜딩에나 들어가는 것 위주라 커버리지는 좁지만 구멍은 적다. MCP 등록을 전제로 문서를 쓴 점은 에이전트에게 섹션 교체를 맡기는 요즘 방식과 잘 맞는다. 주의: 사이트가 "Open Source. Open Code."라고 적어 두었지만 공개 저장소 링크도 라이선스 표기도 어디에도 없고(제작자 X 계정만 연결), GitHub 검색으로도 해당 저장소를 찾지 못했다. 소스가 레지스트리로 내려오니 읽고 고칠 수는 있으나 상업 프로젝트에 넣기 전 제작자에게 사용 조건을 확인하는 편이 안전하다.

랜딩 한 페이지의 시선 끄는 요소를 고를 때 후보 목록으로. 저장된 비슷한 성격과 이렇게 갈린다 — Tween UI(39항목)는 GSAP 타임라인 중심, Spark UI(18종)는 다이내믹 아일랜드류 한 방짜리 조각, Gamma UI는 그 중간에서 가벼운 모션과 3D를 한 곳에 모아 놓았다. 실무상 가장 중요한 주의점은 의존성이 항목마다 크게 다르다는 것이다 — 버튼류는 motion만 쓰지만 voxel-wall·plasma·cpu-architecture는 three, @react-three/fiber, postprocessing까지 끌고 오므로 하나 설치했다가 번들이 크게 불어날 수 있다. 3D 조각을 쓸 거면 저장된 uvcanvas나 Plasma UI처럼 그쪽 전문 항목과 함께 비교하고, 안 쓸 거면 설치 전에 각 항목의 dependencies를 확인할 것. 별 18개에 마지막 푸시 2026-08의 1인 프로젝트. MIT.

웹에서 오디오를 보여 주고 만지게 하는 화면이 필요할 때 — 팟캐스트 플레이어, 음성 녹음, 구간 편집, 자막 타이밍 맞추기 같은 것. 저장된 영상 계열과 담당이 다르다: RemotionUI의 audiogram-scene은 결과물을 영상 파일로 렌더하는 쪽이고, waves-cn은 브라우저에서 실시간으로 재생·조작하는 쪽이다. 구간(regions)·미니맵·엔벨로프·스펙트로그램까지 있어 단순 재생기를 넘어 간단한 편집 UI까지 커버한다. 주의: 전부 wavesurfer.js 래퍼라 세부 동작과 성능은 그 라이브러리에 달려 있고, 긴 오디오에서 스펙트로그램은 무겁다. 별 20개의 소규모 프로젝트지만 의존성이 하나뿐이라 방치돼도 직접 고치기 쉽다. MIT.

범용 라이브러리로 채택할 대상이 아니라, 광고성·인터랙티브 사이트를 만드는 스튜디오가 실제로 뭘 만들어 쓰는지 보는 창구다. 저장된 STARCK UI가 SaaS 제품 한 벌의 랜딩 조각이라면, 여긴 캔버스·시퀀스·디버그 도구까지 포함한 작업 도구함에 가깝다. 실무에서 값이 큰 건 흔치 않은 조각들 — 스프라이트시트 시퀀서와 image-sequence는 스크롤 연동 프레임 애니메이션에, hls-video-player는 스트리밍 재생에, debug-canvas 계열은 캔버스 작업 디버깅에 바로 쓴다. 게임 3종은 저장된 GameKit UI(12종, 의존성 0)와 겹치니 그쪽이 먼저다. 주의: 저장소에 라이선스 파일이 없어 사용 조건이 명시돼 있지 않다 — 내부 공유 목적의 공개라 상업 사용 전 확인이 필요하다. 별 23개, 2026-09까지 관리 중.

컴포넌트 라이브러리로 채택할 대상이 아니라 필요한 파일 하나를 가져오는 곳이다. 네 개 중에서는 copy-button의 방향 인식 아이콘 전환과 blur-shimmer-text가 바로 쓸 만하고, stars-travel은 저장된 배경 계열과, perspective-tilt는 마이크로 인터랙션 계열(MicroKit UI, Spark UI)과 역할이 겹치므로 이미 그쪽을 쓰고 있으면 굳이 추가할 필요는 없다. 개인 사이트의 부속이라 로드맵이나 유지보수 약속이 없고 "More coming soon" 표기도 그대로 믿을 근거는 없다. 다만 MIT에 파일 단위 복사라 리스크는 사실상 없다. 참고로 이 도메인은 레지스트리 URL이 /r/ 아래라 설치 경로와 문서 경로가 다르다.

Base UI 계열 네 번째 선택지이고 차별점이 분명하다. 저장된 셋은 프리미티브 커버리지 경쟁이었다면(Cubby UI 68종+훅4, basecn 61종, fab ui 43종+연출), Lumi UI는 "프리미티브를 어떻게 조합해 실제 패턴을 만드는가"를 따로 보여 준다 — 모핑 다이얼로그나 접히는 파일 트리, 모델 선택기 같은 건 프리미티브만 있으면 결국 직접 조립해야 하는 것들이다. 커버리지는 중간이지만 조합 예시를 참고 자료로 쓰기 좋다. 별도 저장소로 에이전트 스킬(lumi-ui-skill)도 있는데 별 1개에 마지막 푸시가 2026-02라 사실상 방치 상태이니 기대하지 말 것. 본체는 2026-09까지 관리되고 있다. 주의: 별 26개 1인 프로젝트, Base UI 버전 변화 추종 여부 확인 필요. MIT.

업로드 UI를 직접 그리되 큐·재시도·진행률 같은 상태 관리는 넘기고 싶을 때. 저장된 Better Upload와 담당 지점이 다르다 — Better Upload는 S3 호환 스토리지로 바로 올리는 서버·클라이언트 연결이 중심이고, MediaDrop은 클라이언트 쪽 업로드 상태 기계가 중심이라 백엔드를 가리지 않는다. s3-direct-upload 블록이 있긴 하지만 그게 본체는 아니다. 둘을 비교할 때는 "스토리지 연동까지 대신해 주길 원하는가, 상태만 관리해 주길 원하는가"로 갈라서 보면 된다. 주의: 버전이 0.1.6으로 아직 초기라 API가 바뀔 수 있고, 2026-07 개설에 별 27개다. 헤드리스라 디자인은 전부 직접 만들어야 하므로 빠른 화면이 필요하면 블록 4종부터 볼 것. MIT.

디자인 툴이나 테마 편집기처럼 사용자가 직접 색을 고르는 화면을 만들 때. 대부분의 컬러 피커가 HEX·HSL에 머무는 반면 이건 OKLCH와 P3를 전제로 만들어져서, Tailwind v4나 최신 디자인 토큰처럼 OKLCH로 색을 정의하는 프로젝트와 결이 맞는다. 대비 등급(AA/AAA)을 고르는 중에 바로 보여주는 것도 접근성을 지켜야 하는 편집기에서 실질적인 값이다. 저장된 arikko ui도 컬러 피커 프리미티브를 제공하지만 0.0.1의 헤드리스 2종짜리라 완성도 차이가 크고, Amplo는 Base UI/Radix 양쪽 판과 엔진 분리까지 되어 있어 기존 스택에 맞춰 고를 수 있다. 주의: 별 29개의 1인 프로젝트이고, P3·OKLCH를 제대로 보려면 광색역 디스플레이가 필요해 개발자 화면에서 본 것과 사용자 화면이 다를 수 있다. MIT.

에이전트나 AI 제품에서 "생각 중" 자리를 브랜드 것으로 바꾸고 싶을 때. 그 자리는 보통 셔머 텍스트나 점 세 개, 오브로 채워지는데 전부 어느 제품에서나 똑같아 보인다는 게 이 컴포넌트의 전제다. 저장된 AI UI 계열(GAIA UI의 대화 컴포넌트, Kobra의 Reasoning Steps, Elements)이 대화 흐름 자체를 다룬다면, 이건 그 안의 한 칸만 교체하는 조각이라 함께 써도 충돌하지 않는다. 의존성 0에 dotMap 사전 생성 옵션이 있어 성능 부담을 통제할 수 있는 것도 실무에서 크다. 주의: 로고가 단순하고 대비가 분명할수록 결과가 좋고, 얇은 선이나 그라디언트가 많은 마크는 점으로 분해하면 알아보기 어려워진다. 도입 전 실제 로고로 플레이그라운드에서 확인할 것. 2026-08 개설의 1인 프로젝트. MIT.

접근성을 라이브러리에 맡기고 싶은데 패키지 의존은 피하고 싶을 때. 저장된 HeroUI v3도 React Aria 기반이지만 그쪽은 설치형 라이브러리라 업그레이드가 패키지 단위로 오고, Kanpeki는 소스를 내 저장소에 두는 방식이라 고치기 쉬운 대신 업스트림 수정은 직접 따라가야 한다. 이름이 비슷한 다른 선택지와의 구분도 분명하다 — shadcn/ui는 Radix, basecn·Cubby UI·fab ui는 Base UI, Kanpeki는 React Aria가 뿌리다. 키보드·스크린 리더 동작이 중요한 폼 화면이면 React Aria 계열을 우선 검토할 만하다. 주의: 베타 표기에 별 33개, 마지막 푸시 2026-08이라 아직 자리잡는 단계다. 실측 260 중 대부분이 예제라는 점도 규모를 볼 때 감안할 것. MIT.

404 페이지, 빈 상태, 대기 화면, 랜딩 이스터에그처럼 "아무것도 보여줄 게 없는 자리"를 채울 때. 게임 자체를 서비스로 만들려는 용도가 아니고, 의존성 0에 6KB라 그 자리에 넣어도 번들에 거의 영향이 없다는 게 핵심이다. 테마 변수를 따라가므로 사이트 색과 따로 놀지 않는다. 주의 두 가지 — 첫째, 2048·Flappy·Fruit Ninja·Dino Runner처럼 원작이 분명한 게임의 클론이라 상업 제품에서 이름을 그대로 노출하는 건 피하고 동작만 쓰는 편이 안전하다. 둘째, 마지막 푸시가 2026-06-10이라 석 달 넘게 멈춰 있다. 코드가 작고 의존성이 없어 방치돼도 직접 고치기 쉽다는 점이 이 경우엔 위안이다. MIT.

Payload CMS를 쓰는 프로젝트에서만 의미가 있다 — 그 외에는 저장된 일반 블록 모음(Beste UI, Shadcnblocks 등)을 보는 게 맞다. 대신 Payload를 쓴다면 이 레지스트리의 값은 블록 디자인이 아니라 배선 자동화에 있다. Payload 블록을 하나 추가할 때 보통 컴포넌트 작성 + 컬렉션 config 등록 + 렌더 맵 연결 + 타입 재생성 + admin import map 갱신을 손으로 해야 하는데, 그 반복을 한 명령으로 줄이고 diff로 확인시켜 준다. 붙여넣기가 아니라 배선이라는 표현이 마케팅이 아니라 실제 동작 설명이다. 주의: 별 35개에 2026-04 개설, 마지막 푸시 2026-09-08인 1인 프로젝트라 Payload 메이저 버전이 올라갈 때 따라오는지 확인이 필요하다. 블록 디자인 자체는 평범한 SaaS 랜딩 톤이다. MIT.

카드 레이아웃을 새로 그리기 전에 훑어보는 참고용 목록. 이름이 card-1~27뿐이라 무엇이 어떤 디자인인지는 사이트에서 직접 봐야 하고, 검색으로 고를 수는 없다는 게 실사용상의 한계다. 저장된 큰 레지스트리들(Beste UI, Zyeon UI 등)에도 카드가 들어 있지만 그쪽은 섹션 단위라 통째로 가져오게 되는 반면, 여긴 카드 한 장만 필요할 때 파일 하나로 끝난다. ALPHA 표기에 마지막 푸시가 2026-08이므로 계속 늘어날 프로젝트로 기대하지는 말 것. MIT라 소스를 복사해 고쳐 쓰는 데는 제약이 없다.

Base UI로 갈아타는 프로젝트의 기본 세트를 고를 때 후보 셋 중 하나. 저장된 같은 계열과 크기·성격이 이렇게 갈린다 — basecn(61종)은 shadcn/ui 목록을 Base UI로 그대로 옮긴 이식판이라 이름이 익숙하고, Cubby UI(68종 + 훅 4)가 가장 넓으며, fab ui(43종)는 가장 작지만 리퀴드 메탈·메시 그라디언트 같은 눈에 띄는 조각을 기본 세트에 섞어 놓은 게 차이다. 범용 커버리지가 우선이면 Cubby UI나 basecn, 랜딩에 쓸 연출까지 한 레지스트리에서 끝내고 싶으면 여기다. 주의: 별 54개의 1인 프로젝트이고 Base UI 자체가 아직 버전이 자주 올라가는 단계라 업스트림 변경을 따라가는지 확인이 필요하다. MIT.

랜딩이나 포트폴리오에서 "한 번 보게 만드는" 요소가 하나 필요할 때 목록을 훑어볼 곳. 저장된 마이크로 인터랙션 계열(MicroKit UI 48종, Amicro, Evil Buttons)이 버튼·토글 같은 반복 요소를 다듬는 쪽이라면, 여긴 다이내믹 아일랜드나 위젯 스택처럼 그 자체가 주목을 가져가는 큰 조각이라 한 페이지에 두세 개 이상 쓰면 산만해진다. 애플 UI를 본뜬 조각(dynamic-island, widget-stack)과 스포티파이 카드처럼 특정 제품 외형을 참고한 것이 섞여 있으니, 상업 제품에 그대로 쓸 때는 해당 브랜드의 외형을 복제하는 모양이 되지 않는지 한 번 볼 것. 주의: 사이트는 v2.4.0에 신규 컴포넌트를 알리는데 연결된 GitHub 저장소의 마지막 푸시는 2026-07-20이라 두 달 가까이 차이가 난다 — 공개 저장소가 최신이 아닐 수 있으니 소스는 레지스트리에서 받은 것을 기준으로 볼 것. MIT.

제품 데모나 소셜 클립을 코드로 만들 때. 저장된 snapcn과 정면으로 겹치므로 기준을 잡아두면 좋다 — snapcn은 무료 42종에 Pro 연 129달러의 제품형이고 제품 데모 정형(기기 목업·자막·로고 스팅)에 특화된 반면, RemotionUI는 210종 전체가 MIT 무료이고 자막·오디오그램·터미널 시뮬레이터·트랜지션까지 범위가 넓다. 돈을 안 쓸 거라면 여기가 압도적이다. 다만 컴포넌트 수가 곧 완성도는 아니라 쓸 것 몇 개만 실제로 렌더해 보고 판단할 것. ★중요★ 이건 둘 다 해당되는 함정인데, Remotion 본체가 오픈소스가 아니다 — 개인과 직원 3명 이하 영리 조직, 비영리는 무료지만 그보다 큰 영리 조직은 Company License(유료)를 사야 한다. 컴포넌트가 MIT라는 것과 Remotion을 쓸 수 있느냐는 별개다. 회사 규모부터 확인하고 시작하는 게 맞다.

표 기능을 처음부터 다 켜지 않고 필요한 것만 하나씩 붙이고 싶을 때. 저장된 데이터 테이블 4종이 이제 자리가 갈린다 — LyteNyte Grid는 피벗·엑셀까지 가는 엔터프라이즈 제품(상위 유료), gridcn은 셀 편집·클립보드 중심의 스프레드시트형, emstein ui는 TanStack 래퍼 한 파일, Niko Table은 TanStack 위에 얹는 조립식 부품 세트다. 어차피 TanStack을 쓸 거라면 여기가 가장 손해가 적다 — 안 쓰는 필터나 DnD를 설치하지 않으면 코드에 남지도 않는다. 에이전트 스킬을 배포하는 점도 실무에서 크다: 테이블 코드를 에이전트에게 맡길 때 조합 방식과 import 규칙을 모델이 따라가게 만든다. 주의: GitHub API에 표준 라이선스로 인식되지 않지만 문서에는 MIT로 명시돼 있으니 저장소 LICENSE를 한 번 확인하고 쓰는 게 안전하다. 조각이 많은 만큼 어떤 조합이 필요한지 먼저 정하지 않으면 설치가 산만해진다.

driver.js나 Shepherd 같은 별도 투어 라이브러리를 붙이기 전에 먼저 볼 것. 이미 프로젝트에 있는 Radix popover를 그대로 쓰기 때문에 스타일이 따로 놀지 않고 번들도 거의 늘지 않는다는 게 유일하고 분명한 장점이다. 대신 기능은 딱 기본 투어 수준이므로 분기 있는 다단계 온보딩, 진행률 저장, 사용자별 노출 제어 같은 건 직접 붙여야 한다. 참고로 저장된 BoldKit과 Zyeon UI 안에도 tour 컴포넌트가 들어 있으니 그 레지스트리를 이미 쓰고 있다면 따로 설치할 필요는 없다. 주의: 마지막 푸시가 2026-08이고 항목이 하나뿐인 개인 프로젝트다. MIT.