Kidow

542 bookmarks
Newest
Astryx — Meta가 공개한 오픈소스 디자인 시스템 (React 19 + StyleX, MIT)
Astryx — Meta가 공개한 오픈소스 디자인 시스템 (React 19 + StyleX, MIT)
출처가 가장 무거운 항목이다 — Vercel의 Geist와 같은 갈래로, 회사가 자사 제품을 만드는 데 실제로 쓰는 시스템이라 장기 의존성으로 삼기에 부담이 적다. 저장된 foundation 중 스타일 방식이 갈리는 유일한 항목이라는 점이 실무 판단의 핵심이다. 나머지가 전부 Tailwind 전제인 반면 여기는 StyleX 기반이며, 다만 소비자 쪽에서는 Tailwind로 덮어쓸 수 있다고 밝히고 있으므로 도입 전 그 경계를 실제로 확인해볼 것 — 빌드 파이프라인에 StyleX가 들어온다는 사실 자체는 변하지 않는다. React 19 이상을 요구한다. MCP를 제공하는 점은 저장된 SmoothUI·Solace UI·The UI Factory와 같은 흐름인데, 그중 규모와 출처가 가장 크다. 아직 베타이므로 API 변경 가능성을 감안할 것. 컴포넌트 수가 사이트와 저장소에서 다르게 적혀 있어 실제 목록은 직접 확인이 필요하다.
·astryx.atmeta.com·
Astryx — Meta가 공개한 오픈소스 디자인 시스템 (React 19 + StyleX, MIT)
ABUI — 개발용 유틸리티까지 함께 주는 소규모 shadcn 레지스트리 20종
ABUI — 개발용 유틸리티까지 함께 주는 소규모 shadcn 레지스트리 20종
규모는 작지만 다른 레지스트리에 없는 갈래가 하나 있다 — 화면에 그리는 컴포넌트가 아니라 개발 중에 쓰는 유틸리티를 함께 배포한다는 점이다. Breakpoint Display(현재 브레이크포인트를 화면에 표시), Debug Utils, 방향 미디어 쿼리, 추가 브레이크포인트는 반응형 작업을 할 때 직접 만들어 쓰던 것들이라 그대로 가져다 쓸 만하다. Vercel의 components.build 규격을 따른다고 밝히는데, 레지스트리 표준이 자리를 잡는지 지켜볼 겸 참고 대상으로 둔다. 컴포넌트 쪽은 Color Swatch Selector, Radio Tabs/Rows, Accordion Multiselect처럼 선택 UI에 몰려 있어 폼을 만들 때 Hirael을 먼저 보고 없는 것을 여기서 찾는 순서가 맞다. Calendar Year와 Availability는 예약·일정 화면에 대응되는 드문 블록이다. 라이선스 미표기라 상업 투입 전 확인이 필요하다.
·abui.io·
ABUI — 개발용 유틸리티까지 함께 주는 소규모 shadcn 레지스트리 20종
GAIA UI — 실제 AI 어시스턴트에서 떼어낸 대화형 UI 컴포넌트 (MIT)
GAIA UI — 실제 AI 어시스턴트에서 떼어낸 대화형 UI 컴포넌트 (MIT)
실제로 운영되는 AI 어시스턴트에서 떼어낸 것이라는 점이 신뢰 근거다 — 데모용으로 만든 컴포넌트와 달리 실사용에서 다듬어진 형태다. 저장된 AI 항목 중 자리가 구분된다. SmoothUI(AI 20종)와 Motiq는 범용 에이전트 조각을, Agent Elements는 코딩 에이전트 스타일을, simple-ai는 골격만 준다. 여기서 눈에 띄는 것은 어시스턴트가 답변으로 돌려주는 위젯 쪽이다 — Weather Card, Email Compose Card, Search Results Tabs, Knowledge Graph는 "모델이 도구를 써서 만든 결과를 카드로 보여주는" 패턴이고 다른 곳에 거의 없다. Slash Command Dropdown도 마찬가지다. 차트 7종이 같은 톤으로 함께 오는 것도 실용적인데, 어시스턴트가 데이터를 그려 보여줘야 할 때 별도 차트 라이브러리와 톤을 맞출 필요가 없다. MIT라 상업 사용에 제약이 없다. 29종뿐이니 화면 전체를 세우는 용도가 아니라 대화형 부분에 골라 쓰는 곳이다.
·ui.heygaia.io·
GAIA UI — 실제 AI 어시스턴트에서 떼어낸 대화형 UI 컴포넌트 (MIT)
Hirael — shadcn에 없는 폼 입력과 SaaS·인프라 블록까지 채운 279종
Hirael — shadcn에 없는 폼 입력과 SaaS·인프라 블록까지 채운 279종
shadcn/ui로 실무를 하다 보면 반드시 막히는 지점을 정면으로 채운 곳이라 저장된 것 중 실용성이 가장 높은 축이다 — Multi Select, Phone Input, Currency Input, Color Picker, Time Picker, Tag Input은 shadcn 본체에 없어서 매번 직접 만들거나 외부 패키지를 붙이던 것들이다. 폼이 많은 화면을 만들 때 여기부터 볼 것. 블록 쪽도 성격이 특이하다. 랜딩 블록은 Efferd·Ruixen과 겹치지만, SaaS 운영 화면(빌링·구독 플랜·API 키·사용량·테넌트·감사 로그)과 인프라 화면(k8s 파드 테이블, 네트워크 토폴로지, 로그 뷰어)까지 있는 곳은 드물다 — 저장된 Motiq가 흐름 단위로, Geist가 부품 단위로 같은 영역을 덮는데 여기는 블록 단위다. RTL 정식 지원은 저장된 라이브러리 중 사실상 유일하니 아랍어·히브리어 대응이 필요해지면 여기가 기준이 된다. Base UI를 쓰므로 9ui·Space UI·PaceUI·UIAble과 프리미티브를 공유한다. 라이선스는 사이트에 종류가 적혀 있지 않아 저장소 확인이 필요하다.
·hirael.com·
Hirael — shadcn에 없는 폼 입력과 SaaS·인프라 블록까지 채운 279종
Extend UI — shadcn 컴포넌트에 로딩·툴팁·변형을 얹어 확장한 모음
Extend UI — shadcn 컴포넌트에 로딩·툴팁·변형을 얹어 확장한 모음

⚠️ 2026-10-03 확인: 저장소가 extendlabs/ui로 옮겨졌고 마지막 커밋이 2025-10-05로 1년 가까이 멈춰 있다. 최신 shadcn·Tailwind 버전과의 호환은 직접 확인할 것.

shadcn/ui를 이미 쓰고 있고 매번 직접 붙이던 것들을 내장한 버전이 필요할 때 본다 — 버튼 로딩 스피너와 툴팁은 거의 모든 프로젝트에서 손으로 감싸게 되는 부분인데 여기는 props로 들어가 있다. 기존 variant를 유지하므로 import 경로만 바꿔도 기존 코드가 깨지지 않는다는 점이 저장된 다른 shadcn 확장·대체 라이브러리(SmoothUI는 대체, 8bit/cnlibs는 양식 변경)와 다른 지점이다. 규모는 작으니 화면 전체를 세우는 용도는 아니고 자주 쓰는 폼 요소만 바꿔 끼우는 식이 맞다. 사이트의 가격표는 컴포넌트 값이 아니라 제작자들의 외주 요금이다(커스텀 컴포넌트 월 199달러, 페이지 월 1,299달러) — 라이브러리 자체는 무료이며 Lukacho UI와 같은 구조다. 구체 라이선스는 명시돼 있지 않아 저장소 확인이 필요하다.

·extend-ui.com·
Extend UI — shadcn 컴포넌트에 로딩·툴팁·변형을 얹어 확장한 모음
Faisal Amir — 디자인 엔지니어 포트폴리오 (무료 컴포넌트 2벌 공개)
Faisal Amir — 디자인 엔지니어 포트폴리오 (무료 컴포넌트 2벌 공개)
컴포넌트 라이브러리가 아니라 포트폴리오이므로 규모를 기대할 곳은 아니고, 디테일을 어디까지 다듬는지 보는 레퍼런스로 본다 — 저장된 Learn UI, Design Spells와 같은 갈래다. 다만 File card collections는 실용적이다. 26개 파일 포맷에 각각 대응하는 카드를 만들어둔 경우는 드물어서 파일 업로드·문서 목록 화면을 만들 때 그대로 가져다 쓸 만하다. Jan.ai 같은 AI 제품 경험이 있어 AI 인터페이스 쪽 작업을 참고할 때도 유효하다. 라이선스는 명시돼 있지 않으니 컴포넌트를 쓸 거면 GitHub 확인이 필요하다.
·urmauur.com·
Faisal Amir — 디자인 엔지니어 포트폴리오 (무료 컴포넌트 2벌 공개)
Lina — 기기에 따라 달라지는 스크롤 영역 (shadcn ScrollArea 대체)
Lina — 기기에 따라 달라지는 스크롤 영역 (shadcn ScrollArea 대체)
커스텀 스크롤바를 직접 만들 때 늘 걸리는 문제를 해결해 둔 컴포넌트다 — 데스크톱에서 예쁘게 만들면 모바일에서 관성 스크롤과 고무줄 효과가 깨지는 지점을 기기 감지로 우회한다. shadcn ScrollArea를 쓰는 프로젝트라면 import 경로만 바꾸면 되므로 도입 비용이 거의 없다. 가장자리 마스크는 저장된 Scroll Mask, pete.design의 tw-fade와 같은 효과인데 그쪽은 마스크만 주고 여기는 스크롤 영역 자체에 통합돼 있다. 긴 목록이나 사이드바, 시간대·옵션 선택기처럼 스크롤이 UI의 일부로 보이는 곳에 쓴다. 단일 컴포넌트이므로 라이브러리로 기대하지 말 것. 라이선스 미표기라 상업 투입 전 저장소 확인이 필요하다.
·lina.sameer.sh·
Lina — 기기에 따라 달라지는 스크롤 영역 (shadcn ScrollArea 대체)
simple-ai — 에이전트 화면 예제 6종 (고쳐 쓰라고 만든 출발점)
simple-ai — 에이전트 화면 예제 6종 (고쳐 쓰라고 만든 출발점)
6종뿐이라 라이브러리로 볼 것이 아니라 에이전트 UI를 처음 세울 때의 출발점으로 본다. 저장된 AI·에이전트 항목들과 층위가 다르다 — SmoothUI는 AI 컴포넌트 20종을 조각 단위로, Agent Elements는 메시지·도구 카드 등 부품을, Motiq는 에이전트 워크스페이스 전체를 준다. 여기는 그 중간으로 Chat Page와 Shell 수준의 골격을 주고 안을 직접 채우게 한다. 따라서 완성품을 원하면 다른 곳이 낫고, 구조만 참고해 직접 만들 거라면 코드가 적어 읽기 쉽다는 게 장점이다. Reasoning과 Tool은 모델의 추론 과정과 도구 호출을 화면에 드러내는 부분이라 에이전트를 만들 때 자주 필요한 지점이다. 라이선스 미표기.
·simple-ai.dev·
simple-ai — 에이전트 화면 예제 6종 (고쳐 쓰라고 만든 출발점)
8bit/cnlibs — shadcn 전 목록을 8비트로 옮긴 컴포넌트 58종 (8bitcn과 다른 프로젝트)
8bit/cnlibs — shadcn 전 목록을 8비트로 옮긴 컴포넌트 58종 (8bitcn과 다른 프로젝트)
저장된 8bitcn/ui(제작자 OrcDev)와 이름이 비슷하지만 제작자도 프로젝트도 다르므로 혼동하지 말 것. 갈리는 지점이 분명하다 — 8bitcn은 블록 35종처럼 페이지 조립용 덩어리에 무게를 두고, 여기는 shadcn 전 목록을 8비트로 옮기는 데 무게를 둔다. 따라서 Data Table, Sidebar, Command 팔레트, Resizable처럼 앱 내부 화면에 필요한 것까지 같은 양식으로 맞추려면 여기가 맞고, 랜딩을 빨리 세우려면 8bitcn이 맞다. 같은 제작자의 Neobrutalism components와 자매 프로젝트라 두 양식을 같은 구조로 바꿔 끼울 수 있다. 픽셀 유틸리티와 테마 문서를 따로 둔 점이 실용적이다. 주간 활성 사용자가 공개돼 있어 실사용 규모를 가늠할 수 있다. 8비트 폰트와 테두리는 가독성·접근성에 불리하므로 정보 밀도 높은 업무용 화면에는 여전히 부적합하다는 점은 8bitcn과 같다.
·8bit.cnlibs.com·
8bit/cnlibs — shadcn 전 목록을 8비트로 옮긴 컴포넌트 58종 (8bitcn과 다른 프로젝트)
Neobrutalism components — 네오브루탈리즘 스타일 전용 컴포넌트 64종
Neobrutalism components — 네오브루탈리즘 스타일 전용 컴포넌트 64종
톤이 확실히 정해진 프로젝트를 위한 곳이다. 저장된 kit 대부분이 무난한 모던 톤이라 네오브루탈리즘을 제대로 다루는 항목은 여기가 사실상 유일하다 — 저장된 8bitcn(픽셀), Evil Buttons, industrial 계열과 같은 "양식 선택" 갈래에 들어간다. 5.4k 스타로 이 갈래에서는 규모가 크고 관리도 이어지는 편이라 실제로 쓸 만하다. shadcn/ui와 Base UI 위에 얹혀 있으므로 이미 그 프리미티브를 쓰는 프로젝트라면 스타일만 갈아끼우는 식으로 도입할 수 있고, 저장된 Base UI 계열(9ui, Space UI, PaceUI, UIAble)과 프리미티브를 공유한다. 차트와 별 모양까지 같은 양식으로 맞춰둔 점이 실용적 — 스타일 통일에서 보통 차트가 가장 먼저 깨진다. Tailwind v4를 요구하고 라이선스는 저장소 확인이 필요하다.
·neobrutalism.dev·
Neobrutalism components — 네오브루탈리즘 스타일 전용 컴포넌트 64종
Motoko UI — 기본형과 연출 조각이 섞인 초기 단계 라이브러리 18종
Motoko UI — 기본형과 연출 조각이 섞인 초기 단계 라이브러리 18종
현재로서는 저장할 만한 차별점이 약하다 — 18종 중 기본형 8종은 shadcn/ui 원본이 낫고, 연출형과 AI 입력도 저장된 SmoothUI(AI 20종)나 Motiq에 더 두껍게 있다. 표방하는 블록·템플릿·스타터 킷이 아직 없으므로 나중에 채워지면 다시 볼 대상으로 남겨둔다. Waves Shader와 Notch 정도가 눈에 띄는 개별 항목이다. 라이선스 미표기.
·motokoui.com·
Motoko UI — 기본형과 연출 조각이 섞인 초기 단계 라이브러리 18종
UIAble — 컴포넌트 790종·블록 390종 (무료분 MIT, 유료는 SaaS 여부로 갈림)
UIAble — 컴포넌트 790종·블록 390종 (무료분 MIT, 유료는 SaaS 여부로 갈림)
유료 티어를 고를 때 가격이 아니라 라이선스를 먼저 봐야 하는 곳이다 — Standard(69달러)는 SaaS 형태의 최종 제품에 사용할 수 없고, SaaS를 만들려면 Enterprise(199달러)가 필요하다. Feedle처럼 서비스형 제품에 넣을 생각이면 실질 가격은 199달러다. 클라이언트 웹사이트나 사내 도구까지는 Standard로 충분하다. 무료 Community만으로도 MIT에 상업 사용이 가능하니 먼저 그 범위를 확인해볼 것. 규모는 저장된 것 중 최상위이고(PrebuiltUI 435종, SmoothUI 201종과 비교해도 790종) shadcn과 Base UI 양쪽을 쓰므로 저장된 Base UI 계열(9ui, Space UI, Balsa UI, PaceUI)과 섞어 쓰기 좋다. 대시보드 앱 2종은 CodedThemes의 본업(Able Pro, Berry)에서 온 것이라 그 영역의 완성도는 기대해볼 만하다. Standard에 Figma가 포함되는 점은 Launch UI와 같은 강점이다.
·uiable.com·
UIAble — 컴포넌트 790종·블록 390종 (무료분 MIT, 유료는 SaaS 여부로 갈림)
components.work — shadcn 기반 랜딩 블록 32종 (브라우저에서 바로 복사)
components.work — shadcn 기반 랜딩 블록 32종 (브라우저에서 바로 복사)

규모로는 저장된 랜딩 블록 계열 중 가장 작다(PrebuiltUI 435종, Ruixen 240종, Efferd 183종, Launch UI 74종, Solace UI 39종). 따라서 여기를 주력으로 쓸 이유는 없고, 순수 shadcn/ui 위에 군더더기 없이 얹힌 기본형 블록이 필요할 때 훑어보는 정도다 — 애니메이션이나 특정 디자인 톤이 얹혀 있지 않아 그대로 프로젝트 톤에 맞추기 쉽다는 것이 유일한 장점이다. 기능 소개 9종이 한 범주로는 제일 두껍다. 구체 라이선스는 사이트에 없고 GitHub brijr/components를 확인해야 한다. 주의(2026-10-03 확인): GitHub brijr/components 마지막 커밋이 2025-08-21로 1년 넘게 멈춰 있다.

·components.work·
components.work — shadcn 기반 랜딩 블록 32종 (브라우저에서 바로 복사)
AnimBits — 애니메이션을 훅으로 제공하는 컴포넌트 99종 (MIT)
AnimBits — 애니메이션을 훅으로 제공하는 컴포넌트 99종 (MIT)
애니메이션을 컴포넌트가 아니라 훅으로 받는다는 점이 저장된 다른 kit들과 갈리는 지점이다 — 이미 만들어둔 컴포넌트에 동작만 얹고 싶을 때, 즉 남의 컴포넌트로 갈아끼우기 싫을 때 쓴다. 저장된 kit 대부분은 완성된 컴포넌트만 주므로 이 용도로는 여기가 거의 유일하다. 아이콘 애니메이션 13종도 같은 방식이라 쓰던 아이콘 세트(Lucide 등)를 유지한 채 동작만 입힐 수 있고, 이건 아이콘 자체를 교체해야 하는 Morphicons·Chamaac과 다르다. 페이지·테마 전환은 저장된 Great UI(페이지 전환 11종)와 겹치니 그쪽이 선택지가 넓다. MIT라 상업 사용은 자유롭다. 다만 GitHub 스타 36으로 아직 매우 초기이고 유지가 이어질지 알 수 없으니, 훅을 프로젝트 전반에 깔기보다 코드를 복사해 직접 들고 있는 편이 안전하다.
·animbits.dev·
AnimBits — 애니메이션을 훅으로 제공하는 컴포넌트 99종 (MIT)
visx — Airbnb의 저수준 시각화 프리미티브 (d3 계산 + React 렌더링, MIT)
visx — Airbnb의 저수준 시각화 프리미티브 (d3 계산 + React 렌더링, MIT)
저장된 차트 항목들과 층위가 다르다 — Bklit, chartcn, Rosen Charts, Evil Charts, Liveline, ssych ui는 완성된 차트를 주고, visx는 차트를 직접 조립하는 재료를 준다. 따라서 기성 차트로 표현되지 않는 형태가 필요할 때, 혹은 차트 동작과 디자인을 완전히 통제해야 할 때 내려가는 곳이다. 반대로 막대·선·파이 정도면 여기까지 올 필요 없이 shadcn Chart나 chartcn이 빠르다. 필요한 패키지만 골라 설치하므로 번들이 가볍다는 점이 저수준 선택의 실질적 이점이다. Airbnb가 유지하고 MIT이며 스타 2.1만에 관리가 이어지고 있어, 최근 저장한 개인 프로젝트 차트 라이브러리들과 달리 장기 의존성으로 삼아도 부담이 적다. 주식 앱처럼 캔들·드로다운 등 금융 차트를 직접 만들어야 하면 ssych ui에서 완성품을 보고 안 맞을 때 여기서 조립하는 순서가 좋다.
·visx.airbnb.tech·
visx — Airbnb의 저수준 시각화 프리미티브 (d3 계산 + React 렌더링, MIT)
UICapsule — 실제 앱의 특이한 인터랙션을 구현한 컴포넌트 52종 (MIT)
UICapsule — 실제 앱의 특이한 인터랙션을 구현한 컴포넌트 52종 (MIT)
저장된 Design Spells가 실제 앱의 인상적인 디테일을 수집만 하는 사이트라면 여기는 그것을 실제로 구현해 설치 가능한 코드로 준다 — 두 곳을 짝으로 보면 좋다. Circle to Search, Predictive Back, Material You, Dynamic Island, iOS Volume Slider처럼 모바일 OS 고유 동작을 웹으로 옮긴 것은 다른 라이브러리에 거의 없다. 범용 라이브러리가 아니므로 화면을 세우는 데는 쓸 수 없고, 한두 군데에 강한 인상을 심을 때 골라 쓰는 용도다. MIT에 출처 표기도 필요 없다고 명시해 상업 투입이 자유롭다는 점이 실무적으로 크다. 스타일 축에 픽셀아트·사이버펑크·스큐어모피즘이 따로 있어 톤이 확실한 프로젝트라면 그 기준으로 훑어보면 된다.
·uicapsule.com·
UICapsule — 실제 앱의 특이한 인터랙션을 구현한 컴포넌트 52종 (MIT)
Hover.dev — 섹션 10갈래·컴포넌트 20갈래 (Pro 49달러 평생)
Hover.dev — 섹션 10갈래·컴포넌트 20갈래 (Pro 49달러 평생)
가격 대비 범위가 넓은 편이다 — 49달러 1회로 저장된 유료 kit 중 The UI Factory(25유로) 다음으로 싸고 Ruixen·Cue+·Launch UI(99달러)의 절반이다. 다른 곳에 드문 것은 칸반 보드와 3D 섹션을 섹션 범주로 따로 둔 점으로, 칸반은 저장된 Motiq의 Kanban Card Movement 정도가 비교 대상이다. 컬러 생성기는 Design 쪽 tool 항목들과 성격이 같은 부록이다. 주의할 점 두 가지 — 저작권이 명시돼 재배포가 금지되므로 오픈소스 프로젝트나 자체 라이브러리에 넣을 수 없고(MIT인 Motiq·SmoothUI와 갈리는 지점), 푸터 저작권 표기가 2024년에 머물러 있어 갱신이 활발한지 확인이 필요하다. shadcn 레지스트리가 아니라 코드 복사 방식이라 CLI 워크플로에는 맞지 않는다.
·hover.dev·
Hover.dev — 섹션 10갈래·컴포넌트 20갈래 (Pro 49달러 평생)
ssych ui — 트레이딩·금융 화면 전용 다크 컴포넌트 116종 + 블록 18종
ssych ui — 트레이딩·금융 화면 전용 다크 컴포넌트 116종 + 블록 18종
토스증권 API 기반 주식 데스크탑 앱을 만들 때 바로 대응되는 항목이다 — Holdings Table, Trade Journal Table, Equity Drawdown, Returns Calendar, Portfolio Allocation, Market Watchlist, Historical EPS, Analyst Radar는 그 앱의 화면 목록과 거의 그대로 겹친다. 주식 분석 MCP의 결과를 화면으로 보여줄 때도 같은 조각들이 쓰인다. 금융 UI는 직접 만들면 시간이 많이 드는 영역이라(캔들차트, 블로터, 드로다운) 이만큼 모여 있는 곳은 저장된 것 중 여기가 유일하다. 차트만 따로 보면 Bklit·chartcn과 겹치지만 그쪽은 범용 차트이고 여기는 금융 의미가 들어간 컴포넌트다. 제약 — 다크 테마 전제로 디자인돼 있어 라이트 모드가 필요하면 손봐야 하고, 라이선스가 명시돼 있지 않아 상업 투입 전 확인이 필요하다. Feedle 같은 커머스 화면에는 맞지 않는다.
·ssych.com·
ssych ui — 트레이딩·금융 화면 전용 다크 컴포넌트 116종 + 블록 18종
MVPBlocks — BSD 라이선스로 상업 사용이 명확한 블록 100종+ · 전체 템플릿 7종
MVPBlocks — BSD 라이선스로 상업 사용이 명확한 블록 100종+ · 전체 템플릿 7종
라이선스가 BSD 3-Clause로 명시돼 있어 상업 사용이 분명하다는 점이 가장 큰 장점이다 — 최근 저장한 무료 라이브러리 상당수가 라이선스 미표기여서 상업 투입 전 확인이 필요한 것과 대비된다. 클라이언트 작업이나 제품에 부담 없이 넣을 수 있는 무료 선택지로는 여기와 MIT인 Motiq, SmoothUI가 우선이다. 완성 템플릿 7종을 무료로 여는 것도 드물어서(Launch UI는 무료 1종, PaceUI는 2종) 포트폴리오나 SaaS 랜딩을 통째로 시작할 때 실질적이다. 텍스트 애니메이션 16종은 저장된 text 역할 항목들과 겹치니 굳이 여기를 먼저 볼 필요는 없다. v0 호환이라 블록을 v0에서 열어 변형해볼 수 있는데 이건 저장된 Nur UI와 같은 방식이다.
·blocks.mvp-subha.me·
MVPBlocks — BSD 라이선스로 상업 사용이 명확한 블록 100종+ · 전체 템플릿 7종
Lukacho UI — 무료 오픈소스 컴포넌트 21종 (본업은 프론트엔드 외주)
Lukacho UI — 무료 오픈소스 컴포넌트 21종 (본업은 프론트엔드 외주)
가격표를 오해하기 쉬운 곳이다 — 컴포넌트에는 유료 티어가 없고 표에 있는 금액은 제작자의 프론트엔드 외주 요금이다. 즉 무료로 다 쓸 수 있다. 21종으로 규모가 작아 주력으로 삼을 곳은 아니고, 저장된 큰 kit(SmoothUI 201종, Motiq 98종) 위에 몇 개 얹는 용도다. 눈여겨볼 조각은 Figma Cursor(피그마식 협업 커서), Mock Browser(브라우저 프레임 목업), Maxed SEO 정도로 다른 곳에 잘 없다. 배경 3종과 커서 2종은 이미 저장된 background·micro 항목들과 겹친다. 라이선스가 명시돼 있지 않으니 상업 투입 전 저장소 확인이 필요하다.
·ui.lukacho.com·
Lukacho UI — 무료 오픈소스 컴포넌트 21종 (본업은 프론트엔드 외주)
Plasma UI — Apple Liquid Glass를 WebGL로 구현한 React 패널 (MIT)
Plasma UI — Apple Liquid Glass를 WebGL로 구현한 React 패널 (MIT)
다른 liquid glass 구현과 달리 CSS 흉내가 아니라 실제 굴절과 융합을 WebGL로 계산한다는 점이 다르다. 대시보드나 도구 화면의 패널·독·다이얼로그처럼 컨테이너 용도로 쓰라고 문서가 명시한다. 쓰기 전에 알아야 할 제약이 분명하다 — GPU 부담이 커서 모바일에는 적합하지 않다고 제작자가 직접 밝히고 있고(모든 패스가 전체 화면 기준), 동시에 그릴 수 있는 패널이 기본 16개이며 이 값을 바꾸면 셰이더가 다시 컴파일된다. 0.3.0이라 API가 바뀔 수 있다. 반대로 안심할 부분도 있다 — 미지원 브라우저 CSS 폴백, SSR, prefers-reduced-motion 대응이 이미 들어 있고 MIT다. 저장된 배경 셰이더 항목들(Vanta.js, Solaris Sky, 23rd, Chamaac)은 배경을 그리는 것이고 이건 UI 컨테이너 자체가 재질을 갖는 것이라 자리가 다르다. Liquid Glass 톤을 진짜로 구현해야 할 때 사실상 유일한 후보.
·cruxgarden.github.io·
Plasma UI — Apple Liquid Glass를 WebGL로 구현한 React 패널 (MIT)
Great UI — 페이지 전환 11종이 핵심인 컴포넌트 50종
Great UI — 페이지 전환 11종이 핵심인 컴포넌트 50종
페이지 전환 효과가 필요할 때 첫 번째로 본다. 한 곳에서 11종을 성격별로 고를 수 있는 경우는 드물고, 저장된 Transition Kit과 직접 비교할 대상이다. 테마 전환을 따로 4종 둔 것도 특이한데, 다크모드 토글 자체는 저장된 Theme Toggles(14종)가 전문이므로 토글 모양이 아니라 전환 연출이 필요할 때 여기를 본다. 소셜 카드 5종은 블로그나 포트폴리오에서 외부 프로필을 카드로 박아 넣을 때 바로 쓰이고, Scrambled Install Command와 Terminal Loader는 개발자 도구 랜딩에 어울린다. Pixel to ASCII Image, Multilingual Quote, Vinyl Album Card처럼 용도가 유별난 것도 섞여 있다. 라이선스 미표기이므로 상업 투입 전 저장소 확인이 필요하다.
·great-ui.com·
Great UI — 페이지 전환 11종이 핵심인 컴포넌트 50종
SatoriUI — 텍스트 등장 효과가 중심인 소규모 컴포넌트 15종 (MIT)
SatoriUI — 텍스트 등장 효과가 중심인 소규모 컴포넌트 15종 (MIT)
랜딩의 "50종 이상"은 실제와 맞지 않는다 — 레지스트리와 목록 모두 15종이니 규모를 기대하고 가면 안 된다. 쓸 자리는 텍스트 등장 효과로, Encoded Reveal(문자가 해독되듯 나타나는 효과)과 Typewriter Loop 정도가 눈에 띈다. 다만 저장된 text 역할 항목들과 Cue Kit·SmoothUI 같은 큰 kit이 이미 같은 범주를 덮고 있어 굳이 여기를 먼저 볼 이유는 약하다. 실질적 장점은 MIT로 라이선스가 분명하다는 점이다 — 최근 저장한 소규모 라이브러리 상당수가 라이선스 미표기인 것과 대비된다. Flip Clock, Keyboard UI, Security Card처럼 용도가 좁은 조각은 다른 곳에 잘 없으니 그게 필요할 때만 꺼내 본다.
·satoriui.site·
SatoriUI — 텍스트 등장 효과가 중심인 소규모 컴포넌트 15종 (MIT)
crafterui — 실험적 캐러셀 5종이 중심인 소규모 컴포넌트 18종
crafterui — 실험적 캐러셀 5종이 중심인 소규모 컴포넌트 18종
범용 라이브러리가 아니라 특정 연출이 필요할 때 꺼내 보는 곳이다. 실질적인 이유는 캐러셀 5종으로, Glass Lens·Dither Helix·Molten Ring·Corridor처럼 성격이 뚜렷이 다른 캐러셀을 한자리에 모아둔 경우는 저장된 것 중 드물다 — 포트폴리오나 제품 소개에서 이미지 전환에 힘을 줄 때 먼저 본다. Dynamic Island는 저장된 Design Spells에서 사례로 언급되는 패턴의 구현본이라 함께 보면 된다. 18종뿐이라 여기 하나로 화면을 세울 수는 없고, SmoothUI나 Motiq 같은 큰 kit을 깔아둔 위에 한두 개를 얹는 식이 맞다. 라이선스 미표기이므로 상업 투입 전 저장소 확인이 필요하다.
·crafterui.com·
crafterui — 실험적 캐러셀 5종이 중심인 소규모 컴포넌트 18종
PaceUI — 무료 티어가 넉넉한 Base UI 기반 블록·템플릿 (Pro 149달러)
PaceUI — 무료 티어가 넉넉한 Base UI 기반 블록·템플릿 (Pro 149달러)
무료 티어만으로도 쓸 만한 드문 유료 라이브러리다 — 컴포넌트 200종 이상과 블록 60종을 그냥 열어주므로 돈을 내기 전에 실제로 검증해볼 수 있다. 저장된 유료 kit 상당수가 무료분을 맛보기 수준으로만 여는 것과 대비되는 지점이다(Launch UI는 블록 9종, Hyperiux는 56종). TanStack Start를 명시적으로 지원하는 몇 안 되는 곳이라 Next.js가 아닌 React 라우팅을 쓸 때 후보가 된다. 토대가 Radix가 아니라 Base UI라는 점도 확인할 것 — 저장된 Base UI 계열(9ui, Space UI, Balsa UI)과 프리미티브를 공유하므로 섞어 쓰기 좋다. 인증·결제·DB가 붙은 스타터 킷은 UI 라이브러리 범위를 넘는 부분이라 제품을 처음부터 세울 때 따로 볼 것. 가격은 Pro 149달러로 저장된 것 중 비싼 축이니(Ruixen·Cue+ 99달러, Launch UI 99달러) 무료로 먼저 써보고 판단하면 된다.
·paceui.com·
PaceUI — 무료 티어가 넉넉한 Base UI 기반 블록·템플릿 (Pro 149달러)
Launch UI — Figma 파일까지 짝지어 주는 랜딩 블록 74종 + 템플릿 9종
Launch UI — Figma 파일까지 짝지어 주는 랜딩 블록 74종 + 템플릿 9종
랜딩 페이지를 디자인 단계부터 같이 만들 때 본다. 저장된 랜딩 블록 계열(Efferd 183종, Ruixen 240종, PrebuiltUI 435종, Solace UI 39종) 중 유일하게 Figma 파일을 함께 주므로, 코드만 필요하면 수량 많은 쪽이 낫고 디자인 시안과 코드를 일치시켜야 할 때 여기가 유일한 선택지다. 일러스트 23종과 컬러 테마 6종이 함께 오는 것도 이 범주에서는 드물다. Figma 페어링이라는 점에서 저장된 Untitled UI·Reshaped·MynaUI와 성격이 같지만 그쪽이 디자인 시스템 전체인 데 비해 여기는 랜딩에 한정된다. 무료 티어가 블록 9종으로 꽤 좁으니 맛보기 이상은 99달러를 전제할 것 — 다만 1회 결제에 상업 사용 무제한이라 Ruixen Pro와 같은 조건이고 구독인 Hyperiux보다 낫다. React 19와 Tailwind v4를 요구한다.
·launchuicomponents.com·
Launch UI — Figma 파일까지 짝지어 주는 랜딩 블록 74종 + 템플릿 9종
Motiq — 제품 화면 단위로 만든 애니메이션 컴포넌트 98종 (MIT)
Motiq — 제품 화면 단위로 만든 애니메이션 컴포넌트 98종 (MIT)
저장된 kit 대부분이 랜딩 페이지나 위젯 단위인 데 비해 여기는 로그인한 뒤에 보는 화면, 즉 애플리케이션 내부를 다룬다는 점에서 자리가 다르다. 만들려는 게 대시보드·관리 화면·에이전트 도구라면 조각을 모아 조립하는 대신 흐름 하나를 통째로 가져올 수 있다. 성격이 겹치는 저장 항목들과의 구분 — Geist는 같은 콘솔 영역이지만 File Tree·JSON View 같은 부품 단위이고, SmoothUI는 AI 컴포넌트가 더 세분돼 있으며, Systaliko는 이커머스 위젯 단위다. Motiq는 그보다 큰 단위(체크아웃 진행, 패스키 설정, 승인 워크플로)를 준다. MIT라 상업 투입에 제약이 없고 이 점이 라이선스 미표기가 흔한 이 범주에서 드문 장점이다. 다만 컴포넌트가 특정 화면을 전제하고 만들어져 추상화가 덜 돼 있을 수 있으니 실제 데이터 구조에 맞추는 수정 작업을 예상할 것.
·motiq.dev·
Motiq — 제품 화면 단위로 만든 애니메이션 컴포넌트 98종 (MIT)
SmoothUI — shadcn/ui를 대체하는 무료 애니메이션 컴포넌트 201종 (AI 전용 20종)
SmoothUI — shadcn/ui를 대체하는 무료 애니메이션 컴포넌트 201종 (AI 전용 20종)
저장된 무료 kit 중 규모가 가장 크고 성격이 가장 광범위해서 새 프로젝트에서 한 곳만 고른다면 우선 후보다. shadcn/ui 위에 얹는 게 아니라 대체를 표방하므로 기본형까지 다 들어 있다. 가장 큰 실용 가치는 AI·에이전트 컴포넌트 20종으로, Tool Call·Reasoning·Citation·Diff·Approval·Context Meter까지 세분돼 있어 저장된 Agent Elements(21st.dev)나 Odyssey UI의 AI 8종보다 훨씬 두껍다. 챗봇이나 에이전트 UI를 만든다면 여기를 먼저 본다. MCP 서버를 제공하는 세 번째 항목(Solace UI, The UI Factory와 함께)이고 무료·오픈소스라는 점에서 그중 시험해보기 가장 부담 없다. 제약은 React 19와 Tailwind v4를 요구한다는 것이라 구버전 프로젝트에는 바로 못 들어간다. Motion과 GSAP을 모두 쓰므로 어떤 컴포넌트가 어느 쪽 의존성을 끌어오는지 설치 시 확인할 것.
·smoothui.dev·
SmoothUI — shadcn/ui를 대체하는 무료 애니메이션 컴포넌트 201종 (AI 전용 20종)
Geist — Vercel이 자사 제품에 쓰는 디자인 시스템 (개발자 도구용 컴포넌트 70종)
Geist — Vercel이 자사 제품에 쓰는 디자인 시스템 (개발자 도구용 컴포넌트 70종)
대시보드나 개발자 도구 화면을 만들 때 본다. 저장된 foundation 대부분이 범용 프리미티브(Radix, Base UI, React Aria)이거나 마케팅 톤인 데 비해, 여기는 배포 로그·프로젝트 목록·설정 화면 같은 콘솔형 UI를 전제로 설계돼 있다. File Tree, JSON View, Snippet, Status Dot, Relative Time Card, Entity는 다른 라이브러리에 거의 없는 조각이라 이 용도면 우선 후보다. 참고 가치도 커서 Vercel 콘솔의 실제 구현을 그대로 열람하는 셈이니 컴포넌트를 직접 만들 때 레퍼런스로도 쓴다. 다만 Vercel 브랜드 톤이 강하게 배어 있어 그대로 쓰면 Vercel처럼 보이고, 라이선스가 명시돼 있지 않아 자사 제품 투입 전 패키지 라이선스 확인이 필요하다. 문서에 .md를 붙여 마크다운으로 받을 수 있는 점은 Claude Code로 참조시킬 때 유용하다.
·vercel.com·
Geist — Vercel이 자사 제품에 쓰는 디자인 시스템 (개발자 도구용 컴포넌트 70종)
Systaliko UI — 이커머스·스크롤 애니메이션까지 다루는 무료 블록 96종 + UI 60종
Systaliko UI — 이커머스·스크롤 애니메이션까지 다루는 무료 블록 96종 + UI 60종
저장된 kit 중 이커머스 조각을 제대로 갖춘 드문 항목이라 상거래 화면 작업에 바로 쓸 만하다 — Product Carousel, Quantity 셀렉터, Price/Pricing 표시, Image Zoom, Infinite Scroll은 상품 목록·상세 화면에 그대로 대응된다. 다른 랜딩 위주 kit(Efferd, Ruixen, Solace)에는 이 범주가 아예 없다. 스크롤 애니메이션도 6종 이상으로 두꺼워서 Hyperiux Vault(GSAP·Lenis)와 달리 Framer Motion만으로 해결하고 싶을 때 대안이 된다. 반대로 shadcn 기본형(Avatar·Dialog·Input 등)이 섞여 있는데 이건 shadcn/ui 원본을 그대로 쓰는 게 낫고 여기서 가져올 이유는 없다. 라이선스 미표기이므로 상업 투입 전 저장소 확인이 필요하다.
·systaliko-ui.vercel.app·
Systaliko UI — 이커머스·스크롤 애니메이션까지 다루는 무료 블록 96종 + UI 60종