Frontend

389 bookmarks
Newest
ai2 — 변형 매트릭스와 MCP 설치를 내세운 에이전트 중심 디자인 시스템 (코어 51종 MIT)
ai2 — 변형 매트릭스와 MCP 설치를 내세운 에이전트 중심 디자인 시스템 (코어 51종 MIT)
"우리 디자인 시스템을 새로 정의하지 않고 토큰·변형 체계를 통째로 가져오고 싶을 때"가 쓰임새다. 저장된 것 중 변형 수로 승부하는 Cnippet UI(97종 + 변형 1,021)와 구조가 닮았지만, Cnippet이 전량 무료인 반면 ai2는 코어만 무료이고 체계(토큰·매트릭스·MCP 메타데이터)를 앞세운다. 실제로 값이 있는 부분은 컴포넌트 개수가 아니라 변형을 일관된 축(variant/tone/size)으로 정리한 점이므로, 도입 전에 그 축이 우리 디자인 언어와 맞는지부터 볼 것 — 맞지 않으면 307개 변형은 부담일 뿐이다. 주의: 414라는 숫자를 다른 레지스트리와 직접 비교하면 안 된다(실질 51종). 가격이 "런칭 시 인상" 문구와 함께 표시되는 파운딩 방식이므로 서두를 이유가 있는지는 별개로 판단할 것.
·ai2.design·
ai2 — 변형 매트릭스와 MCP 설치를 내세운 에이전트 중심 디자인 시스템 (코어 51종 MIT)
Verno Studio — 팔레트 테마 하나와 컴포넌트 4종만 공개한 스튜디오 레지스트리
Verno Studio — 팔레트 테마 하나와 컴포넌트 4종만 공개한 스튜디오 레지스트리
컴포넌트를 얻으러 갈 곳이 아니라 구현 방식을 읽으러 갈 곳이다. file-tree를 tree role이 아니라 중첩 disclosure로 짠 선택과 json-view에 ARIA 트리 키보드 모델을 제대로 넣은 부분은 접근성 구현 참고로 값이 있다 — 저장된 대형 레지스트리들이 이 부분을 대충 넘기는 경우가 많다. theme만 설치해 팔레트를 빌려 오는 용법도 가능한데, 이건 저장된 Token UI(토큰 문서화)나 Optics(시스템 공개)와는 또 다른 최소 단위 배포 방식이라 참고할 만하다. 주의: 항목이 5개뿐이고 제작자가 나머지는 공개하지 않겠다고 밝혔으므로 늘어날 것을 기대하지 말 것. 라이선스 표기를 찾지 못했다.
·verno-studio.vercel.app·
Verno Studio — 팔레트 테마 하나와 컴포넌트 4종만 공개한 스튜디오 레지스트리
Mischief UI — 문서 뷰어·에이전트 UI·셰이더 배경까지 한 레지스트리에 담은 117종 (MIT)
Mischief UI — 문서 뷰어·에이전트 UI·셰이더 배경까지 한 레지스트리에 담은 117종 (MIT)
넓다는 게 장점이자 성격이다 — 저장된 것 중 문서 처리는 Retab UI·Extend UI, 에이전트 UI는 Scrim UI·seamui, 셰이더 배경은 uvcanvas·ns-ui가 각각 전문인데 Mischief UI는 그 셋을 한 레지스트리에서 적당히 다 한다. 문서 파이프라인이나 에이전트 콘솔을 본격적으로 만든다면 전문 레지스트리가 낫고, 여러 성격이 섞인 제품에서 소스를 한 곳에서 가져오고 싶을 때 이쪽이 편하다. 레닥션과 바운딩박스는 문서 검수 화면에서 자주 필요하면서 저장된 항목 중 몇 안 되는 구현이다. 주의: 개별 항목의 완성도 편차를 직접 확인할 것. skill.md를 제공하므로 에이전트에게 맡길 때는 그것부터 물릴 것.
·ui.tinkererslabs.com·
Mischief UI — 문서 뷰어·에이전트 UI·셰이더 배경까지 한 레지스트리에 담은 117종 (MIT)
SevenUI — Base UI 프리미티브 65종 무료, 완성 블록 113종은 일시불 99달러
SevenUI — Base UI 프리미티브 65종 무료, 완성 블록 113종은 일시불 99달러
Base UI 계열이 저장된 것만 일곱 개가 됐는데 SevenUI의 위치는 "무료 커버리지는 충분하고 완성 페이지는 유료"다. 프리미티브 65종만 놓고 보면 Cubby UI(68)·Cnippet(97)·Blode UI(92)와 비슷한 수준이고 특별한 색채는 없다 — 대신 같은 레지스트리에서 완성 블록까지 한 번에 살 수 있다는 점이 차이다. 블록이 필요 없다면 무료분만 쓰면 되고, 그 경우 굳이 이걸 고를 이유도 크지 않다. 주의: 블록 113종의 실물은 Pro 구매 전에는 확인 범위가 제한되므로 가격 대비 판단이 어렵고, 저장소를 찾지 못해 소스 이력과 라이선스 원문을 확인하지 못했다(사이트는 프리미티브를 MIT로 표기).
·sevenui.dev·
SevenUI — Base UI 프리미티브 65종 무료, 완성 블록 113종은 일시불 99달러
seamui — 누르면 들어가고 진동하는 촉각 레이어를 깐 Base UI 컴포넌트 77종 (MIT)
seamui — 누르면 들어가고 진동하는 촉각 레이어를 깐 Base UI 컴포넌트 77종 (MIT)
모션을 개별 컴포넌트에 붙이는 게 아니라 시스템 차원의 레이어로 깔았다는 점이 이 레지스트리의 선택이다 — lib/motion.ts 한 줄로 전체 스프링을 재조정하고 프로바이더 하나로 햅틱을 켠다. 저장된 모션 계열(Tween UI는 GSAP 단품, ericts/ui는 모션 훅 묶음, Spark UI·Skecher UI는 눈길용 단품)과 층이 다르고, 오히려 Base UI 기본 세트(Cubby·basecn·Blode·fab·Lumi·Cnippet)의 대안으로 놓고 비교하는 게 맞다 — 커버리지는 비슷한데 촉감이 더해진 쪽이다. 에이전트 콘솔 계열(permission-card, plan-card, checks-panel, terminal-block)이 함께 있어 저장된 Scrim UI·easeUI와도 겹치니 둘 다 설치하지 말 것. 주의: 햅틱은 지원 기기에서만 동작하고, 모든 컨트롤이 움직이는 구성은 prefers-reduced-motion 대응을 반드시 확인해야 한다. MIT.
·seamui.dev·
seamui — 누르면 들어가고 진동하는 촉각 레이어를 깐 Base UI 컴포넌트 77종 (MIT)
Vora UI — 무료 공개 API로 도는 크립토 시장 지표 컴포넌트 4종 (MIT)
Vora UI — 무료 공개 API로 도는 크립토 시장 지표 컴포넌트 4종 (MIT)
크립토 대시보드 화면을 만들 때 쓰는 UI 부품이다. 저장된 AGW Reusables(Abstract 체인 지갑·온체인 UI)와 층이 다르다 — 그쪽이 지갑 연결과 트랜잭션이라면 여긴 시장 지표 시각화이고, 둘은 겹치지 않는다. 실무상 장점은 무료 공개 API에 이미 배선돼 있어 설치 직후 실데이터가 나온다는 점, 단점도 같은 이유다 — alternative.me와 CoinPaprika의 무료 엔드포인트에 의존하므로 호출 제한·가용성·약관을 직접 확인해야 하고, 프로덕션에서는 props로 자체 데이터 소스를 넣는 구성이 맞다. 그리고 레인보우 차트나 알트시즌 지수 같은 것은 특정 모델에 기반한 시각화일 뿐 가격 예측이나 투자 판단 근거가 아니며, 제품에 넣을 때는 그 성격이 사용자에게 오해되지 않도록 표기하는 편이 안전하다. 항목이 4개뿐인 소규모 프로젝트다.
·voraui.vercel.app·
Vora UI — 무료 공개 API로 도는 크립토 시장 지표 컴포넌트 4종 (MIT)
usva — 컴포넌트보다 디자인 언어가 먼저인 시스템 83항목 (주의: Commons Clause)
usva — 컴포넌트보다 디자인 언어가 먼저인 시스템 83항목 (주의: Commons Clause)
토큰·타이포·모션이 이미 결정된 상태로 오기 때문에 "우리 디자인 시스템을 새로 만들 여력이 없을 때" 통째로 빌려 오는 용도다. 저장된 foundation 계열과 성격 비교: HeroUI v3는 접근성 중심의 완성형, Supabase Design System·Optics는 실제 제품의 시스템 공개, tetra ui는 React Native 전용이고, usva는 미감과 분위기까지 포함해 가장 의견이 강하다 — 그 말은 우리 브랜드가 있으면 충돌한다는 뜻이기도 하다. ★라이선스 주의★ MIT가 아니라 MIT + Commons Clause다. 내 애플리케이션·웹사이트·제품에 넣어 상업적으로 쓰는 것은 허용되지만, 컴포넌트 자체를 단독으로든 묶음으로든 이식판으로든 판매·재라이선스·재배포하는 것은 금지된다. 사내 공용 디자인 시스템으로 다른 팀에 배포하는 형태라면 조건을 먼저 확인할 것.
·usva.build·
usva — 컴포넌트보다 디자인 언어가 먼저인 시스템 83항목 (주의: Commons Clause)
Pipecat UI — 음성 AI 프레임워크 Pipecat 공식 컴포넌트 21종 (BSD-2)
Pipecat UI — 음성 AI 프레임워크 Pipecat 공식 컴포넌트 21종 (BSD-2)
Pipecat으로 음성 에이전트를 만들 때만 의미가 있다 — 다른 음성 스택에는 그대로 안 붙는다. 값은 비주얼라이저보다 운영 쪽에 있다: 마이크·카메라·화면공유 권한 토글, 장치 선택, 연결 상태, 세션 정보, 실시간 지표와 이벤트 스트림 콘솔은 음성 앱에서 반드시 필요하면서 직접 만들면 지저분해지는 부분이다. 저장된 Scrim UI에도 voice-input·voice-waveform·voice-call-controls가 있지만 그쪽은 스택 중립적인 UI이고, 여긴 Pipecat 클라이언트에 배선까지 된 것이라 층이 다르다. 주의: 라이선스가 BSD 2-Clause로 저장된 대부분(MIT)과 다르며 고지 의무 방식이 조금 다르다. 의존성 버전이 Pipecat 클라이언트에 고정돼 있어 프레임워크 업그레이드와 함께 움직인다는 점도 감안할 것.
·ui.pipecat.ai·
Pipecat UI — 음성 AI 프레임워크 Pipecat 공식 컴포넌트 21종 (BSD-2)
uiception — 같은 섹션을 버전별로 모아 둔 랜딩 블록 132종 (MIT)
uiception — 같은 섹션을 버전별로 모아 둔 랜딩 블록 132종 (MIT)
섹션을 고를 때 "같은 자리의 다른 안"을 나란히 보고 싶을 때. 저장된 블록 모음 중 Hex UI(33)는 종류별 한두 개, Beste UI는 대부분 유료, NavUI는 일러스트가 강점인데, uiception은 한 종류를 10개 안팎으로 쌓아 둔 구조라 Cnippet UI가 컴포넌트에서 한 일을 섹션에서 한 셈이다. 전량 무료 MIT라 고르는 비용이 없다. 주의: 설치 한 번에 페이지 라우트와 이미지 폴더까지 같이 생성되는 구조라(사이트 예시에 33개 파일 생성) 기존 프로젝트에 넣을 때 무엇이 어디에 깔리는지 먼저 확인할 것. 개인 프로젝트이고 이번 조사에서 GitHub API 한도로 별 수·최근 푸시는 확인하지 못했다.
·uiception.com·
uiception — 같은 섹션을 버전별로 모아 둔 랜딩 블록 132종 (MIT)
Token UI — 디자인 토큰 문서를 그리는 전용 컴포넌트 17종 (Storybook·MDX)
Token UI — 디자인 토큰 문서를 그리는 전용 컴포넌트 17종 (Storybook·MDX)
컴포넌트를 만드는 도구가 아니라 디자인 시스템 문서를 만드는 도구다. 저장된 것 중에는 Supabase Design System이나 Optics처럼 "잘 만든 문서"를 참고하는 항목은 있었지만, 그 문서 페이지를 구성하는 부품을 파는 항목은 이게 처음이다. 사내 디자인 시스템 문서를 Storybook이나 MDX로 운영한다면 토큰 표를 매번 표 태그로 짜는 대신 이걸 쓰는 구성이 가능하고, 특히 color-contrast로 대비비를 문서에 박아 두는 건 접근성 기준을 팀에 강제하는 실질적 방법이다. 주의: 17개뿐이라 문서 사이트의 나머지(내비게이션, 예제 렌더러)는 직접 만들어야 하고, 저장소에 라이선스 파일을 찾지 못해 사용 조건이 불명확하다.
·tokenui.dev·
Token UI — 디자인 토큰 문서를 그리는 전용 컴포넌트 17종 (Storybook·MDX)
Scrim UI — AI 제품 UI를 가장 넓게 덮는 컴포넌트 55종 + 완성 패턴 12종 (무료분 MIT)
Scrim UI — AI 제품 UI를 가장 넓게 덮는 컴포넌트 55종 + 완성 패턴 12종 (무료분 MIT)
AI UI 계열 저장물이 이미 여럿인데 범위로 보면 이게 가장 넓다 — assistant-ui는 런타임까지 포함한 프리미티브, Tool UI(현 assistant-ui Elements)는 툴 호출 결과 표시, GAIA UI는 실제 어시스턴트에서 떼어낸 대화 UI, Kobra·Neon UI·easeUI는 각자 키트 안의 AI 묶음인데, Scrim UI는 승인 게이트·핸드오프·평가 결과·거절 메시지·모더레이션 플래그·비용 미터처럼 에이전트를 실제로 운영할 때 필요한 화면까지 항목으로 갖고 있다. 만들려는 것이 챗 UI가 아니라 에이전트 콘솔이라면 여기부터 볼 것. 블록 12종이 앱 한 벌 단위라 구조 참고용으로도 값이 있다. 주의: 가격 페이지가 404라 Pro 조건이 확인되지 않고, 무료분이 MIT라는 것은 사이트 푸터 표기에 따른 것이다. 저장소 링크가 사이트에 없어 소스 이력을 확인하기 어렵다는 점도 감안할 것.
·scrimui.dev·
Scrim UI — AI 제품 UI를 가장 넓게 덮는 컴포넌트 55종 + 완성 패턴 12종 (무료분 MIT)
nostalgia-ui — Mac OS 9를 이미지 없이 CSS로 재현한 컴포넌트 78종 + 화면 12종
nostalgia-ui — Mac OS 9를 이미지 없이 CSS로 재현한 컴포넌트 78종 + 화면 12종
레트로 테마 계열에서 가장 완성도 높은 축이다 — 저장된 The Gridcn(SF HUD), 8bit/cnlibs(픽셀), Afterglow(CRT 터미널)와 나란히 두면 이건 특정 OS의 외형을 정밀하게 재현한 쪽이고, 78종으로 표준을 덮으므로 부분 장식이 아니라 사이트 전체를 그 시절로 만들 수 있다. sad-mac-404나 unexpectedly-quit 같은 블록은 404·에러 페이지에 그대로 쓰기 좋다. 이미지 없이 CSS만으로 구현한 점은 번들과 해상도 양쪽에서 이득이다. 주의 둘 — 애플의 실제 OS 외형을 재현한 것이므로 상업 제품, 특히 애플과 인접한 제품에서 쓸 때는 한 번 생각해 볼 것. 그리고 저장소에 라이선스 파일을 찾지 못했다.
·nostalgia-ui.com·
nostalgia-ui — Mac OS 9를 이미지 없이 CSS로 재현한 컴포넌트 78종 + 화면 12종
AtroUI — 개인 사이트용 블록에 서버 API 라우트까지 같이 설치하는 레지스트리 (MIT)
AtroUI — 개인 사이트용 블록에 서버 API 라우트까지 같이 설치하는 레지스트리 (MIT)
개인 사이트나 1인 제품 랜딩을 빨리 세울 때. 저장된 다른 블록 모음과 구분되는 지점은 UI가 아니라 라우트다 — 문의 폼이나 대기자 명단은 화면보다 서버 처리와 스팸 방어가 일인데, 그 라우트를 소스로 같이 설치하고 키는 내 환경에 두는 구성은 이 목록에서 드물다. 폼 UI만 필요하면 nekode/ui나 Better Auth UI가 낫고, 여긴 "폼 + 받는 쪽"이 한 세트라는 게 이유다. 블록 자체는 개인 사이트 톤이라 B2B SaaS 랜딩에는 결이 안 맞을 수 있다. 주의: api-generate·api-scope처럼 AI 호출을 전제한 라우트가 있으므로 설치 전 어떤 외부 서비스와 어떤 키를 요구하는지 소스에서 확인할 것. MIT.
·atroui.com·
AtroUI — 개인 사이트용 블록에 서버 API 라우트까지 같이 설치하는 레지스트리 (MIT)
AtomLoader — 점 행렬 로딩 인디케이터 591종, 의존성 0 순수 CSS (라이선스 미표기)
AtomLoader — 점 행렬 로딩 인디케이터 591종, 의존성 0 순수 CSS (라이선스 미표기)
스피너를 하나 고르면 되는 상황에 591개는 과하지만, 브랜드 톤에 맞는 로딩 모양을 찾을 때 후보 폭으로는 압도적이다. 저장된 loading.dev(27종)가 흔한 스피너를 정리한 쪽이라면 여긴 점 행렬이라는 한 가지 문법으로 변주만 뽑은 구조다 — 즉 591개가 서로 다른 아이디어가 아니라 같은 재료의 조합이라는 점을 감안할 것. 의존성 0에 순수 CSS라 번들 부담이 없고 파일 하나만 가져오면 되는 것이 실질적 장점이다. 주의: 저장소에 라이선스 파일이 없어 사용 조건이 명시돼 있지 않다. 이번 조사에서 GitHub API 한도로 별 수와 최근 푸시를 확인하지 못했으니 도입 전 저장소 상태를 직접 볼 것.
·atomloader.roothq.tech·
AtomLoader — 점 행렬 로딩 인디케이터 591종, 의존성 0 순수 CSS (라이선스 미표기)
ilinxa pro-ui — 칸반·간트·PDF 뷰어급 완성 컴포넌트 모음 (알파 v0.1.0)
ilinxa pro-ui — 칸반·간트·PDF 뷰어급 완성 컴포넌트 모음 (알파 v0.1.0)
프리미티브가 아니라 화면 한 덩어리를 통째로 가져오는 성격이라 저장된 대부분과 층이 다르다 — 칸반 보드나 간트 타임라인, 파일 매니저를 직접 만들면 며칠이 걸리는 것들이다. 각 컴포넌트에 -fixtures를 붙여 예제 데이터까지 같이 설치할 수 있는 것도 이 규모의 컴포넌트에서는 실용적이다. 다만 덩어리가 클수록 우리 데이터 모델과 안 맞을 위험도 커지므로, 설치 전에 fixtures 버전으로 먼저 돌려 보고 구조가 맞는지 확인하는 순서가 맞다. 주의: 스스로 v0.1.0 ALPHA라고 밝히고 있고 사이트에 저장소 링크나 라이선스 표기가 없어 사용 조건이 불명확하다 — 앱 핵심 화면을 이걸로 채우기 전에 반드시 확인할 것.
·ui.ilinxa.com·
ilinxa pro-ui — 칸반·간트·PDF 뷰어급 완성 컴포넌트 모음 (알파 v0.1.0)
D2 Studio UI — 스피너 10종과 벤토·AI 블록이 섞인 SaaS 랜딩용 모음 (Pro 별도)
D2 Studio UI — 스피너 10종과 벤토·AI 블록이 섞인 SaaS 랜딩용 모음 (Pro 별도)
스피너 10종처럼 한 종류를 여러 안으로 모아 둔 부분이 이 모음의 실제 쓸모다. 벤토·히어로·가격 블록은 저장된 Hex UI, NavUI, Beste UI 무료분과 겹치므로 굳이 여기서 가져올 이유는 적다. 실무 주의는 의존성 — gsap와 cobe, nucleo-glass까지 항목마다 다른 라이브러리가 붙으므로 하나 설치할 때마다 무엇이 따라오는지 확인해야 한다(저장된 Gamma UI, Skecher UI와 같은 문제다). 사이트 표기(50+)와 실측(40)이 다르다는 점, 그리고 GitHub 저장소는 있으나 이번 조사에서 API 한도로 라이선스를 확인하지 못했다는 점을 기록해 둔다 — 상업 사용 전 저장소의 LICENSE를 직접 확인할 것.
·ui.d2studio.dev·
D2 Studio UI — 스피너 10종과 벤토·AI 블록이 섞인 SaaS 랜딩용 모음 (Pro 별도)
liquefy-ui — WebGL 굴절과 스프링 물리를 넣은 리퀴드 글래스 34종 (MIT, v0.1)
liquefy-ui — WebGL 굴절과 스프링 물리를 넣은 리퀴드 글래스 34종 (MIT, v0.1)
글래스 계열 여섯 번째인데 무게로 줄을 세우면 맨 위쪽이다 — Plasma UI가 WebGL 패널 몇 개라면 liquefy-ui는 WebGL 굴절을 재질로 깔고 표준 컴포넌트 34종을 그 위에 올린 구조라 전면 적용을 전제한다. glasscn(CSS+SVG)·Ein UI(44, 부분 추가)·Glass UI(49, shadcn 1:1 교체)·washiveil(58, 종이 톤)과 비교하면 시각적 완성도는 가장 높지만 GPU 비용도 가장 크다. 저사양 기기와 모바일에서 프레임을 먼저 확인하고, 접근성 측면에서 굴절·모션을 끌 수 있는 경로를 마련할 것. 주의: 사이트가 v0.1이라 API가 굳지 않았고 별 4개의 신생 프로젝트다(2026-07 개설, 2026-09까지 활발). 패키지 의존(@liquefy-ui/core)이 있어 완전한 소스 소유형은 아니다. MIT.
·liquefy-ui.com·
liquefy-ui — WebGL 굴절과 스프링 물리를 넣은 리퀴드 글래스 34종 (MIT, v0.1)
KaUI — 비동기 상태 처리와 폼 입력을 다루는 소형 애드온 10항목 (라이선스 미표기)
KaUI — 비동기 상태 처리와 폼 입력을 다루는 소형 애드온 10항목 (라이선스 미표기)
열 개짜리 참고 목록이지만 초점이 분명하다 — 다른 레지스트리가 잘 안 다루는 "비동기 상태"를 묶어 놓았다. async-button과 use-async, async-scope는 저장·삭제 버튼의 로딩·성공·실패 표현을 매번 다시 짜는 문제를 겨냥한 것이라 코드를 읽어볼 값이 있다. 반면 combobox·multi-select·input-group·password-input은 저장된 nekode/ui나 Blode UI 쪽이 더 정돈돼 있으니 그쪽을 먼저 볼 것. 주의 둘 — 저장소에 라이선스 파일이 없어 사용 조건이 명시돼 있지 않고, password-input이 zxcvbn 사전(영어·독일어)을 의존성으로 끌고 와 번들이 꽤 커진다. 한국어 서비스라면 사전이 맞지 않는다는 점도 감안할 것.
·kaui-shadcn-registry.vercel.app·
KaUI — 비동기 상태 처리와 폼 입력을 다루는 소형 애드온 10항목 (라이선스 미표기)
easeUI — 이징·스프링을 미리 맞춰 둔 컴포넌트 53종, AI 에이전트 UI 포함 (무료 MIT + Pro)
easeUI — 이징·스프링을 미리 맞춰 둔 컴포넌트 53종, AI 에이전트 UI 포함 (무료 MIT + Pro)
에이전트 UI를 만들 때 특히 볼 만하다 — tool-approval(도구 실행 승인)과 agent-loading-states처럼 저장된 다른 AI 컴포넌트 모음(GAIA UI, Kobra, Neon UI, Elements)에서도 잘 안 보이는 조각이 있다. 나머지 연출 컴포넌트는 Spark UI·Skecher UI와 겹치므로 중복 설치를 피할 것. 의존성이 가벼운 것도 장점이다. 주의: 2026-09-14 개설에 별 4개로 아주 어린 프로젝트이고, 무료 50종과 유료 Pro가 별도 사이트로 갈려 있어 문서를 오가야 한다. 유료 조건은 구독이 아니라 연 99달러/라이프타임 159달러의 소스 소유 방식이다.
·easeui.dev·
easeUI — 이징·스프링을 미리 맞춰 둔 컴포넌트 53종, AI 에이전트 UI 포함 (무료 MIT + Pro)
washiveil — 화지 바탕에 유리 막을 얹은 글래스 세트 58종, 중·일 타이포 고려 (MIT)
washiveil — 화지 바탕에 유리 막을 얹은 글래스 세트 58종, 중·일 타이포 고려 (MIT)
글래스 계열이 이미 여럿인데 이건 미감이 다른 축이다 — Glass UI(49종)는 애플식 차가운 유리로 shadcn을 1:1 교체하는 쪽, Ein UI(44)는 부분 추가용, glasscn(65)은 CSS+SVG 필터, Plasma UI는 WebGL 실굴절이고, washiveil은 차가운 유리 대신 따뜻한 종이 바탕에 막을 얹어 색온도 자체가 다르다. 전면 교체가 가능한 규모(58종)라 톤을 통째로 바꿀 때 후보가 된다. 실무에서 눈여겨볼 지점은 CJK 타이포그래피를 나중에 덧붙이지 않고 처음부터 넣었다는 점이다 — 다만 명시된 대상은 중국어 번체와 일본어이고 한국어는 언급이 없으므로, 한글 조판(자간·줄간격·폰트 폴백)은 직접 확인하고 조정해야 한다. 주의: 2026-08 개설에 별 5개인 신생 1인 프로젝트다. MIT.
·washiveil.alexchih.com·
washiveil — 화지 바탕에 유리 막을 얹은 글래스 세트 58종, 중·일 타이포 고려 (MIT)
slidecn — reveal.js로 슬라이드를 코드로 만드는 컴포넌트 26항목 (MIT)
slidecn — reveal.js로 슬라이드를 코드로 만드는 컴포넌트 26항목 (MIT)
발표 자료를 슬라이드 도구 대신 코드로 관리하고 싶을 때 — 버전 관리가 되고 수치나 차트를 실제 데이터에 연결할 수 있다는 게 이 방식의 이유다. 저장된 영상 계열(RemotionUI·snapcn)이 "결과물을 렌더"한다면 이건 브라우저에서 바로 발표하는 쪽이고, 둘 다 코드로 만든다는 점만 같다. auto-animate-pair와 fragment 래퍼가 있어 reveal.js 기능을 직접 배우지 않고도 전환을 줄 수 있다. 주의 둘 — GitHub 조직명이 shadcn-labs이지만 shadcn 공식(shadcn-ui)과 무관한 개인 프로젝트다(제작자 Aniket Pawar). 그리고 마지막 푸시가 2026-06-17로 석 달 넘게 멈춰 있다. MIT.
·slidecn.vercel.app·
slidecn — reveal.js로 슬라이드를 코드로 만드는 컴포넌트 26항목 (MIT)
GamifyKit — 연속 출석·업적·리더보드 3종뿐인 게임화 키트 (MIT)
GamifyKit — 연속 출석·업적·리더보드 3종뿐인 게임화 키트 (MIT)
학습 앱이나 커뮤니티에 출석·업적·랭킹을 붙일 때 화면을 처음부터 그리지 않으려는 용도. 세 개뿐이라 라이브러리가 아니라 참고 구현 세 개로 봐야 하고, 실제로 필요한 것의 대부분(포인트 적립 규칙, 뱃지 지급 조건, 기간별 랭킹 집계)은 서버 쪽 일이라 여기서 얻을 수 있는 건 UI 형태뿐이다. 그 점을 감안하면 값이 분명한 건 leaderboard와 daily-streak 정도다. 주의: 2025-11 개설인데 항목이 3개에 머물러 있고 마지막 푸시가 2026-07이라 성장 중인 프로젝트로 기대하지 말 것. MIT에 의존성이 없어 파일을 복사해 고쳐 쓰는 부담은 없다.
·gamifykit.com·
GamifyKit — 연속 출석·업적·리더보드 3종뿐인 게임화 키트 (MIT)
NavUI — 랜딩 섹션 블록 41종에 일러스트까지 넣은 개인 레지스트리 (MIT)
NavUI — 랜딩 섹션 블록 41종에 일러스트까지 넣은 개인 레지스트리 (MIT)
랜딩을 빨리 세울 때 훑는 목록 중 하나인데, 같은 섹션 계열 저장물 사이에서 고를 이유는 일러스트와 개발자용 조각이다 — 모션 들어간 SaaS 일러스트를 코드로 제공하는 레지스트리는 드물고, contribution-graph나 package-manager-command는 개발자 도구 랜딩에서 자주 필요하면서 매번 새로 만드는 것들이다. 섹션 자체의 수와 다양성만 보면 Hex UI(33 블록)나 Beste UI 무료분과 비슷한 수준이다. 주의: 개인 포트폴리오 저장소 안에 함께 들어 있는 형태라 독립 프로젝트로서의 유지보수 약속이 없고(마지막 푸시 2026-08-24), 별 6개다. MIT라 파일 단위로 가져다 쓰는 데는 제약이 없다.
·ui.navdeepsingh.dev·
NavUI — 랜딩 섹션 블록 41종에 일러스트까지 넣은 개인 레지스트리 (MIT)
Honest UI — 복사형 컴포넌트와 npm 패키지(차트·아이콘·이펙트)를 나눠 담은 라이브러리 (MIT)
Honest UI — 복사형 컴포넌트와 npm 패키지(차트·아이콘·이펙트)를 나눠 담은 라이브러리 (MIT)
컴포넌트는 소유하고 차트·아이콘은 패키지로 받는 혼합 방식이 이 라이브러리의 선택이다. 소스 복사형 일색인 다른 저장 항목들과 달라서, 차트를 버전업으로 관리하고 싶다면 이 구조가 오히려 편하다 — 반대로 차트를 뜯어고칠 생각이면 복사형인 dashboardcn 쪽이 맞다. 비주얼 이펙트 묶음(dither, grainient, light-rays, chromatic-*)은 저장된 uvcanvas·Gamma UI 계열과 겹치지만 여기 것은 패키지 import라 설치가 가볍다. 주의: 2026-07-27 개설에 별 6개이고 npm 패키지가 0.2.0이라 API가 굳지 않았다. 컴포넌트와 패키지 두 갈래를 동시에 유지해야 하는 구조라 소규모 프로젝트에서 부담이 될 수 있다는 점도 지켜볼 것. MIT.
·honestui.com·
Honest UI — 복사형 컴포넌트와 npm 패키지(차트·아이콘·이펙트)를 나눠 담은 라이브러리 (MIT)
Blode UI — Tailwind v4 전용 Base UI 컴포넌트 92종에 실무 입력기를 더한 세트 (MIT)
Blode UI — Tailwind v4 전용 Base UI 컴포넌트 92종에 실무 입력기를 더한 세트 (MIT)
Base UI 계열 여섯 번째인데 고르는 기준은 "무엇이 들어 있나"다 — Cubby UI(68+훅4)와 basecn(61)은 표준 커버리지, Lumi UI는 조합 예시, fab ui는 연출 섞기, Cnippet은 변형 수, Blode UI는 전화번호·통화·시간대·폰트 선택기처럼 실제 폼에서 매번 걸리는 입력기를 갖춘 쪽이다. 그 항목들만 떼어 써도 값이 있다. AI 대화 묶음이 함께 있는 것도 요즘 흐름이고 저장된 Neon UI·GAIA UI와 비교 가능하다. 주의: Tailwind v4 전용이라 v3 프로젝트에는 그대로 들어가지 않고, 별 6개의 1인 프로젝트다(2026-09까지 활발). MIT.
·blode.co·
Blode UI — Tailwind v4 전용 Base UI 컴포넌트 92종에 실무 입력기를 더한 세트 (MIT)
ericts/ui — 동작으로 상태를 알리는 모션 컴포넌트 42종 + 훅 7종 (MIT)
ericts/ui — 동작으로 상태를 알리는 모션 컴포넌트 42종 + 훅 7종 (MIT)
저장된 마이크로 인터랙션 계열이 이미 여럿이라 이걸 볼 이유는 컴포넌트가 아니라 훅에 가깝다 — reduced-motion, 스크롤 진행률, 스와이프 내비게이션, 시퀀스 재생, 요소 높이 측정은 모션 작업에서 매번 다시 쓰는 것들이고 이렇게 묶어 배포하는 레지스트리는 드물다. 컴포넌트 쪽은 MicroKit UI(48종)·Spark UI·Skecher UI와 상당히 겹치므로 중복 설치를 피할 것. smooth-height와 expandable-* 묶음처럼 "펼쳐지는 동작"을 일관되게 다룬 점은 이 레지스트리만의 정리다. 주의: 별 7개의 1인 프로젝트이지만 2026-09-25까지 활발히 푸시되고 있다. mermaid-diagram 항목은 mermaid 라이브러리를 통째로 끌고 오니 설치 전 확인할 것. MIT.
·ui.ericts.com·
ericts/ui — 동작으로 상태를 알리는 모션 컴포넌트 42종 + 훅 7종 (MIT)
Kinetic — 피그마처럼 드래그로 값을 조절하는 숫자 입력 단일 컴포넌트 (MIT)
Kinetic — 피그마처럼 드래그로 값을 조절하는 숫자 입력 단일 컴포넌트 (MIT)
디자인 툴이나 설정 패널처럼 숫자를 자주 미세 조정하는 화면에서 입력창 하나를 교체할 때. 같은 자리의 저장 항목과 겹치지 않는다 — arikko ui의 number-input은 헤드리스 프리미티브(0.0.1)이고 shadcn의 number-field는 증감 버튼 방식인데, Kinetic은 드래그 스크럽이라는 상호작용 자체가 목적이다. 키보드 단축키를 처음부터 설계해 넣은 점도 이런 컴포넌트에서는 드물다. 색까지 다루는 편집기를 만든다면 저장된 Amplo Picker와 같이 놓고 볼 만하다. 주의: 항목이 하나뿐이고 마지막 푸시가 2026-07-30, 별 7개다. 자릿수 애니메이션이 calligraph 의존이라 그 라이브러리까지 함께 들어온다는 점을 감안할 것(둘 다 MIT).
·kinetic.itsjay.in·
Kinetic — 피그마처럼 드래그로 값을 조절하는 숫자 입력 단일 컴포넌트 (MIT)
tetra ui — React Native 전용으로 만든 프리미티브 44종 (MIT)
tetra ui — React Native 전용으로 만든 프리미티브 44종 (MIT)
지금까지 모은 것 중 React Native를 정면으로 겨냥한 첫 레지스트리다 — 이름 때문에 헷갈리기 쉬운 Flexnative UI는 실제로는 Next.js 웹용이고, HeroUI v3는 React Native를 지원 목록에 올려 둔 정도다. 모바일 앱을 만든다면 웹 레지스트리에서 코드를 가져올 수 없으므로 이 자리를 따로 관리할 필요가 있고, 그 후보로 기록해 둔다. bottom-sheet·swipeable·keyboard-controller 연동처럼 직접 만들면 까다로운 것들이 들어 있는 게 값이다. 주의: Expo 생태계 의존성이 열 개 넘게 붙으므로 bare React Native 프로젝트에서는 설치 전에 호환을 확인해야 한다. 2025-07 개설이지만 별 8개로 알려지지 않았고, 모바일은 OS 업데이트를 따라가야 하는 영역이라 유지보수 속도를 특히 봐야 한다. MIT.
·tetra-ui.com·
tetra ui — React Native 전용으로 만든 프리미티브 44종 (MIT)
FlowUI — 매일 쓰는 소품 10종만 담은 레지스트리 (MIT)
FlowUI — 매일 쓰는 소품 10종만 담은 레지스트리 (MIT)
라이브러리로 채택할 대상이 아니라 필요한 파일 하나를 가져오는 곳이다. 열 개 중 다른 저장 항목에서 잘 안 보이는 건 slider-captcha 정도이고, debounced-input·password-input·copy-button은 저장된 nekode/ui(폼 필드 전문)나 iandefined/ui 쪽이 더 정돈돼 있다. auth-buttons도 인증 화면 전체가 필요하면 Better Auth UI가 낫다. 즉 이 레지스트리는 "이미 다른 데 다 있는 것"이 대부분이라, 위 항목들을 이미 쓰고 있다면 굳이 볼 이유가 없다. 주의: 마지막 푸시가 2026-07-21로 두 달 멈춰 있고 별 8개다. MIT라 파일 단위로 복사해 쓰는 리스크는 없다.
·flowui-registry.vercel.app·
FlowUI — 매일 쓰는 소품 10종만 담은 레지스트리 (MIT)
dashboardcn — 대시보드 차트·KPI 조각 54항목 전량 무료 (Pro 없음, MIT)
dashboardcn — 대시보드 차트·KPI 조각 54항목 전량 무료 (Pro 없음, MIT)
대시보드를 만들 때 저장된 두 선택지와 비교해 고를 것 — Shadcn Dashboard는 Pro 75달러에 AI 빌더·MCP를 얹은 제품형이고, BoldKit은 네오브루탈리즘 톤에 차트 14종이 딸린 범용 키트이며, dashboardcn은 스타일 색채 없이 차트·KPI 조각만 전량 무료로 푼 쪽이다. 유료 없이 지금 붙일 거면 여기가 가장 깔끔하다. 의존성이 recharts와 TanStack Table 둘로 끝나는 것도 장점이다(설치할 때마다 새 라이브러리가 따라오지 않는다). 에이전트 스킬을 레지스트리 항목으로 배포하는 방식은 저장된 Niko Table·Optics와 같은 흐름이다. 주의: 2026-09-03 개설로 한 달도 안 된 프로젝트에 별 8개다. 차트 종류는 많지만 각각의 완성도는 직접 렌더해 확인할 것. GitHub API가 라이선스를 표준 인식하지 못하는데 LICENSE 파일은 MIT였다.
·dashboardcn.com·
dashboardcn — 대시보드 차트·KPI 조각 54항목 전량 무료 (Pro 없음, MIT)