Frontend

389 bookmarks
Newest
Tween UI — GSAP으로 움직이는 컴포넌트 19종 + 풀 섹션 24종 (MIT)
Tween UI — GSAP으로 움직이는 컴포넌트 19종 + 풀 섹션 24종 (MIT)
저장된 연출 계열 대부분이 Framer Motion(motion) 기반인데 이건 GSAP이라는 점이 선택 기준이다 — 이미 GSAP을 쓰고 있거나 ScrollTrigger류 타임라인 제어가 필요한 프로젝트면 결이 맞고, 아니면 GSAP 의존성이 하나 늘어난다. GSAP은 2025년 이후 플러그인 포함 전면 무료라 라이선스 부담은 없다. 22개 블록이 단순 레이아웃이 아니라 스크롤 연출을 전제로 만들어져 있어 랜딩 한 페이지의 리듬을 잡는 데 바로 쓸 만하다. 주의: 2026-09 개설에 별 7개로 아주 어린 프로젝트이고, GSAP 애니메이션은 저사양 기기와 prefers-reduced-motion 대응을 각 파일에서 직접 확인해야 한다. MIT.
·tween-ui.vercel.app·
Tween UI — GSAP으로 움직이는 컴포넌트 19종 + 풀 섹션 24종 (MIT)
STARCK UI — 스튜디오가 실제 제품에 쓰는 랜딩 컴포넌트 16종
STARCK UI — 스튜디오가 실제 제품에 쓰는 랜딩 컴포넌트 16종
개발자 도구나 SaaS 랜딩을 만들 때 "실제 판매 중인 제품이 쓰는" 섹션을 참고하려는 용도. 범용 키트가 아니라 한 제품의 랜딩을 뜯어 놓은 것에 가까워서, terminal-command·release-history-dialog·whats-new-card·founder-note처럼 개발자 제품 특유의 조각이 강점이고 일반 마케팅 페이지엔 과하다. 16개뿐이라 이걸로 페이지를 채울 수는 없고, 저장된 랜딩 블록 모음(Ruixen·Efferd 등)과 섞어 쓰는 편이 맞다. 주의: "오픈소스"라고 적혀 있지만 사이트에 공개 저장소 링크나 라이선스 표기가 없어(제작자 GitHub 프로필 링크만 있음) 사용 조건이 불명확하다. 상업 프로젝트에 넣기 전 확인이 필요하다.
·ui.starck.studio·
STARCK UI — 스튜디오가 실제 제품에 쓰는 랜딩 컴포넌트 16종
nekode/ui — 폼 필드에 특화된 shadcn 레지스트리 (실측 23항목, MIT)
nekode/ui — 폼 필드에 특화된 shadcn 레지스트리 (실측 23항목, MIT)
날짜 범위·다중 선택 콤보박스처럼 shadcn 기본에 없는 입력을 그때그때 만들지 않으려 할 때. 폼 한 벌을 통째로 갈아엎는 라이브러리가 아니라 필요한 필드만 뽑아 쓰는 성격이고, 기존 shadcn Field/Form 위에 얹히므로 도입 비용이 낮다. 인증 화면 전체가 필요하면 저장된 Better Auth UI(54종 + 메일 템플릿)가 범위가 훨씬 넓고, 여긴 로그인·회원가입 폼 4종만 있다. 주의: 별 0개, 2026-08 개설의 1인 프로젝트라 접근성 테스트 주장도 직접 확인하는 게 맞다. 그래도 MIT에 소스 복사 방식이라 필드 단위로 가져다 쓰는 리스크는 작다.
·ui.nekode.id·
nekode/ui — 폼 필드에 특화된 shadcn 레지스트리 (실측 23항목, MIT)
iandefined/ui — 에이전트가 읽도록 설계된 컴포넌트 53종 레지스트리 (MIT)
iandefined/ui — 에이전트가 읽도록 설계된 컴포넌트 53종 레지스트리 (MIT)
코딩 에이전트에게 레지스트리를 통째로 물려 쓰는 구성을 참고할 때 실물 예시로 볼 것. 컴포넌트 53종 자체는 규모가 작아 주력 라이브러리감은 아니지만, llms.txt + 페이지별 .md + well-known 에이전트 스킬을 함께 내놓는 방식은 우리 레지스트리나 디자인 시스템 문서를 만들 때 그대로 흉내 낼 만하다. 컴포넌트 중에서는 backlight(뒤광), text-morph, icon-swap, transition-panel, noise-texture처럼 마이크로 인터랙션 쪽이 골라 쓰기 좋고, 나머지는 shadcn 기본과 겹친다. 주의: 별 3개, 2026-08 개설의 1인 프로젝트라 의존하지 말고 필요한 소스만 복사하는 편이 맞다. MIT.
·ui.iandefined.com·
iandefined/ui — 에이전트가 읽도록 설계된 컴포넌트 53종 레지스트리 (MIT)
gridcn — 10만 행급 스프레드시트형 데이터 그리드 (소스 공개 라이선스, thegridcn과 무관)
gridcn — 10만 행급 스프레드시트형 데이터 그리드 (소스 공개 라이선스, thegridcn과 무관)
표가 아니라 "엑셀 같은 편집 화면"이 필요할 때. 저장된 데이터 그리드 3종 중 자리가 분명히 다르다 — LyteNyte Grid는 피벗·엑셀 내보내기를 갖춘 엔터프라이즈용(Core Apache 2.0, 상위 유료), emstein ui는 TanStack 래퍼 한 파일짜리 읽기용 표, gridcn은 셀 편집·범위 선택·클립보드 같은 스프레드시트 상호작용이 중심이다. 사이트에 AG Grid·MUI X·TanStack과의 기능·요금 비교표가 있는데 제작자 본인의 정리이고 09/2026 기준이라 그대로 믿지 말고 확인이 필요하다. 라이선스는 자체 Source Available 1.0 — 내 제품(SaaS 포함)에 넣어 상업적으로 파는 것은 무료로 허용되고, 금지되는 건 이걸 다시 컴포넌트 라이브러리·레지스트리·마켓플레이스 형태로 제3자에게 재배포하는 경우다. 주의: 2026-09-18 개설에 별 2개로 아직 일주일 남짓한 프로젝트라 실서비스 투입 전 직접 부하 테스트가 필요하다.
·gridcn.vercel.app·
gridcn — 10만 행급 스프레드시트형 데이터 그리드 (소스 공개 라이선스, thegridcn과 무관)
herocn — HeroUI 디자인을 shadcn 방식으로 옮긴 레지스트리 (컴포넌트 64·블록 97)
herocn — HeroUI 디자인을 shadcn 방식으로 옮긴 레지스트리 (컴포넌트 64·블록 97)
HeroUI 룩을 원하는데 런타임 의존성은 shadcn 방식(소스를 내 프로젝트에 복사)으로 가져가고 싶을 때. 저장된 HeroUI v3 본체와는 관계가 이렇게 갈린다 — HeroUI는 React Aria 기반의 설치형 라이브러리라 접근성 동작까지 패키지가 책임지고, herocn은 그 외형만 shadcn 컴포넌트로 옮긴 것이라 동작 보증은 각 소스에 달려 있다. 접근성이 중요한 화면이면 본체 쪽이 안전하다. 실측 항목 559 중 대부분이 예제라는 점을 기준으로 규모를 봐야 한다 — 실제로는 64종짜리 중형 레지스트리다. 주의: 별 9개의 개인 프로젝트이고 2026-03 개설로 아직 어리다. MIT라 사용 제약은 없다.
·herocn.dev·
herocn — HeroUI 디자인을 shadcn 방식으로 옮긴 레지스트리 (컴포넌트 64·블록 97)
emstein ui — 가상 스크롤 데이터 테이블 1종짜리 초기 레지스트리
emstein ui — 가상 스크롤 데이터 테이블 1종짜리 초기 레지스트리
수천 행짜리 표를 shadcn 톤으로 빠르게 붙여야 할 때 소스 한 파일만 가져오는 용도. 그 이상 기대할 건 없다 — 컴포넌트가 하나뿐이라 라이브러리로 채택하는 대상이 아니라 파일 하나를 참고·복사하는 대상이다. 같은 자리의 대안 비교: 표 기능이 본격적으로 필요하면 저장된 LyteNyte Grid(무료 Core가 Apache 2.0인 엔터프라이즈 그리드)가 낫고, 가상화 없이 평범한 표면 되면 shadcn 기본 table로 충분하다. 어차피 TanStack Table·Virtual 조합이라 직접 붙여도 되는 수준이므로, 이 소스는 구현 레퍼런스로 보는 게 맞다. 주의: 라이선스 표기가 없어 상업적 사용 조건이 불명확하고, 항목이 하나라 프로젝트 지속 여부도 확인되지 않는다.
·ui.emstein.com·
emstein ui — 가상 스크롤 데이터 테이블 1종짜리 초기 레지스트리
Beste UI — 블록 2,095개를 의미 검색으로 꺼내 쓰는 MCP 우선 라이브러리 (대부분 유료)
Beste UI — 블록 2,095개를 의미 검색으로 꺼내 쓰는 MCP 우선 라이브러리 (대부분 유료)
"이 화면에 들어갈 섹션 하나"를 찾을 때, 특히 에디터의 에이전트에게 맡길 때. 이 레지스트리의 설계 중심은 CLI가 아니라 MCP 서버다 — 빌드 시점에 모든 항목을 작은 오픈 모델로 임베딩해 두어서 "대기자 명단 폼이 있는 히어로" 같은 문장으로 찾히고, 한 문장의 의도에서 페이지 전체를 조립한다. 외부 AI 서비스를 거치지 않고 검색·미리보기·설치 명령·무료 소스는 키 없이 열려 있어서, 사 보기 전에 MCP만 붙여 탐색해 볼 수 있다. 규모가 비슷한 Zyeon UI(1,014항목)와 성격이 갈린다 — Zyeon은 컴포넌트 단위에 생성 프롬프트를 동봉하고, Beste는 완성된 섹션 단위를 검색으로 꺼내는 쪽이다. 주의: 블록 2,095개 중 무료는 168개뿐이라 사실상 유료 제품이고, 무료로 쓰는 1,076 조각과 158 컴포넌트만으로는 섹션이 완성되지 않는다. 9월 한정 37% 할인 표기는 상시 할인일 수 있으니 정가 기준으로 판단하는 게 안전하다.
·ui.beste.co·
Beste UI — 블록 2,095개를 의미 검색으로 꺼내 쓰는 MCP 우선 라이브러리 (대부분 유료)
Zyeon UI — 실측 1,014항목의 최대 규모 shadcn 레지스트리 (생성 프롬프트·개념도 동봉)
Zyeon UI — 실측 1,014항목의 최대 규모 shadcn 레지스트리 (생성 프롬프트·개념도 동봉)
폭이 필요할 때 첫 번째로 열어볼 곳. 규모가 압도적이라 다른 레지스트리에서 못 찾은 컴포넌트를 여기서 찾을 확률이 높다 — 참고로 저장된 것 중 다음으로 큰 게 Elements 360항목, The Gridcn 139종이다. 다만 크기가 곧 품질은 아니므로 고른 컴포넌트는 소스를 직접 보고 판단하는 편이 안전하다. 진짜 차별점은 개수가 아니라 동봉된 생성 프롬프트다 — 컴포넌트를 그대로 쓰지 않고 프롬프트만 가져다 에이전트에게 우리 디자인 토큰으로 다시 만들게 시킬 수 있어서, 레지스트리를 레퍼런스가 아니라 재료로 쓰는 구성이 가능하다. 개념도는 그 컴포넌트가 어떤 프런트엔드 개념 위에 서 있는지 보여주므로 학습용으로도 쓸 만하다. 주의: 1,014개 중 80개가 Pro라 블록과 데이터 차트 상당수는 유료이고, 무료분만 MIT다. 한 번에 다 설치하지 말고 필요한 것만 골라 넣어야 토큰과 의존성이 불어나지 않는다.
·ui.zyeon.ai·
Zyeon UI — 실측 1,014항목의 최대 규모 shadcn 레지스트리 (생성 프롬프트·개념도 동봉)
CommerCN — 장바구니·결제·상품 카드 등 이커머스 블록 17종 (shadcn)
CommerCN — 장바구니·결제·상품 카드 등 이커머스 블록 17종 (shadcn)
쇼핑몰 화면을 처음부터 그리지 않고 뼈대를 빠르게 세울 때. 결제 흐름 중에서도 담당 구간이 다르다 — CommerCN은 장바구니~체크아웃~주문 확인 같은 구매 화면이고, 저장된 Billing SDK는 구독·요금제·인보이스 화면이라 SaaS 쪽이다. 둘은 겹치지 않고 오히려 같이 쓸 수 있다. 주의: 17개뿐이라 상품 목록 필터, 검색, 배송지 관리, 마이페이지 같은 나머지는 직접 만들어야 하고, 블록은 UI만 제공하므로 Stripe 결제 로직은 포함돼 있지 않다. 저장소에 라이선스 파일이 없어 상업적 사용 조건이 명시돼 있지 않은 점도 확인이 필요하다.
·commercn.com·
CommerCN — 장바구니·결제·상품 카드 등 이커머스 블록 17종 (shadcn)
Glass UI — shadcn 컴포넌트를 그대로 대체하는 글래스 버전 49종 (4가지 변형)
Glass UI — shadcn 컴포넌트를 그대로 대체하는 글래스 버전 49종 (4가지 변형)
이미 shadcn/ui로 만든 화면 전체를 글래스 톤으로 바꿀 때 가장 손이 덜 간다 — 이름이 같아 import만 교체하면 된다. 같은 계열 중 성격 구분: Ein UI(44종)는 glass-* 별도 이름이라 부분 추가용, glasscn(65종)은 CSS+SVG 필터 중심, Plasma UI는 WebGL 실굴절로 무겁고, Glass UI는 "전면 교체"에 초점이 있다. 주의: 마지막 푸시가 2026-04로 다섯 달 넘게 멈춰 있어 shadcn 최신 변경(예: 신규 프리미티브)을 따라가지 못할 수 있고, 라이선스 파일이 없어 사용 조건이 명시돼 있지 않다. blur를 화면 전체에 깔면 저사양 기기에서 스크롤이 무거워지므로 변형은 카드·모달 단위로 제한하는 게 좋다.
·glass-ui.crenspire.com·
Glass UI — shadcn 컴포넌트를 그대로 대체하는 글래스 버전 49종 (4가지 변형)
BoldKit — React와 Vue 3를 함께 지원하는 네오브루탈리즘 키트 (실측 96항목)
BoldKit — React와 Vue 3를 함께 지원하는 네오브루탈리즘 키트 (실측 96항목)
네오브루탈리즘 톤을 골랐는데 프로젝트가 React가 아니거나 React/Vue를 함께 써야 할 때 고른다. 같은 스타일로 저장된 Neobrutalism components(64종)는 React 전용이고 순수 스타일 교체에 가깝다면, BoldKit은 차트·데이터 테이블·투어까지 들어간 대시보드용 구성이라 범위가 더 넓다. 8bit/cnlibs는 픽셀 톤이라 결이 다르다. MCP 서버가 있어 에이전트에 레지스트리를 물려 쓰기 좋다. 주의: 별 117개 규모의 개인 프로젝트라 장기 유지보수는 보장되지 않고, 차트가 14종이나 되지만 Recharts 기반 래퍼 수준인지 직접 구현인지는 도입 전 확인이 필요하다. MIT.
·boldkit.dev·
BoldKit — React와 Vue 3를 함께 지원하는 네오브루탈리즘 키트 (실측 96항목)
Ein UI — 리퀴드 글래스 스타일 React 컴포넌트 44종 (MIT)
Ein UI — 리퀴드 글래스 스타일 React 컴포넌트 44종 (MIT)
글래스 톤을 화면 일부(모달, 대시보드 위젯, 커맨드 팔레트)에 얹고 싶을 때. 같은 계열 중 무게가 다르다 — Plasma UI는 WebGL 실굴절이라 데스크톱 전용에 GPU 부담이 크고, glascn은 CSS+SVG 필터로 65개 규모, Ein UI는 그보다 작은 44개짜리 CSS 기반이라 가장 가볍게 시작할 수 있다. 컴포넌트만 필요 없이 CSS 값만 뽑고 싶으면 Aether CSS 쪽이 빠르다. 주의: 44개 중 실제 UI 프리미티브는 39개라 화면 전체를 이것만으로 채우기는 어렵고, shadcn/ui 위에 부분적으로 얹는 구성이 맞다. MIT라 상업적 사용 제약은 없다. .ir 도메인이지만 RTL·페르시아어 지원은 문서에 명시돼 있지 않으므로 RTL 프로젝트라면 직접 확인 필요.
·ui.eindev.ir·
Ein UI — 리퀴드 글래스 스타일 React 컴포넌트 44종 (MIT)
Kobra — 인터페이스 사운드와 MCP까지 묶은 컴포넌트 90종+ (개인 199달러)
Kobra — 인터페이스 사운드와 MCP까지 묶은 컴포넌트 90종+ (개인 199달러)
무료 티어의 조건을 먼저 볼 것 — 10종뿐이고 개인 용도로만 허용되므로 상업 프로젝트에는 사실상 유료 전제다. 값을 치를 이유가 될 만한 것은 다른 곳에 드문 두 가지다. 첫째, 인터페이스 사운드를 합성음 레이어로 제공하는데 저장된 것 중 사운드를 다루는 컴포넌트 라이브러리는 여기가 유일하다(Elements가 효과음 20종을 파일로 주는 정도). 둘째, MCP 서버와 함께 모션·사운드·마이그레이션 AI 스킬을 제공해 저장된 Sona UI(스킬)·Elements(훅)·Astryx(MCP)의 방식을 한꺼번에 갖췄다. AI·에이전트 컴포넌트는 SmoothUI(20종)·GAIA UI와 겹치지만 Plan Card와 Question Card처럼 에이전트가 계획을 제시하고 되묻는 화면까지 있는 것은 드물다. Base UI 기반이라 저장된 9ui·Cubby UI·Hirael·basecn과 프리미티브를 공유한다. 사이트에 Magic UI·shadcn.io·Tailwind Plus와의 비교표가 있으나 제작자 본인의 주장이므로 참고만 할 것. 199달러는 저장된 유료 kit 중 상위권이다.
·kobra.systems·
Kobra — 인터페이스 사운드와 MCP까지 묶은 컴포넌트 90종+ (개인 199달러)
moumenlab — 만드는 과정과 실패까지 공개하는 인터랙션 컴포넌트 13종
moumenlab — 만드는 과정과 실패까지 공개하는 인터랙션 컴포넌트 13종
13종뿐이지만 고른 항목이 하나같이 직접 만들면 까다로운 것들이라 목록 자체가 쓸모 있다 — 무한 중첩 메뉴, 드래그 재정렬, 커서 위치에 붙는 @멘션 팝오버, 관성이 붙는 휠 리스트는 구현 난이도가 높은 축이다. Feedle 맥락에서는 Morphing Checkout(결제 흐름 전환), Caret Mention Popover(커뮤니티 댓글의 멘션), File Upload Staging, Share Permissions Popover가 바로 대응된다. 진짜 가치는 코드보다 설명 쪽이다 — 왜 그렇게 만들었고 어떤 접근이 실패했는지를 함께 적어두므로 저장된 Learn UI나 Emil Kowalski 계열처럼 읽고 배우는 자료로 본다. 주의 — 랜딩에 유명 기업들이 채용 제안을 보내는 듯한 메시지 화면이 있는데 이는 연출된 구성이지 실제 후원이나 추천이 아니다. 라이선스는 저장소 확인이 필요하다.
·lab.moumen.dev·
moumenlab — 만드는 과정과 실패까지 공개하는 인터랙션 컴포넌트 13종
nteract elements — Jupyter 노트북 UI를 만드는 React 컴포넌트 35종
nteract elements — Jupyter 노트북 UI를 만드는 React 컴포넌트 35종
용도가 아주 좁지만 그 안에서는 대체재가 사실상 없다 — 노트북 UI는 셀 실행 상태, 출력 렌더링, 위젯 프로토콜처럼 직접 만들면 품이 많이 드는 부분이 많은데 그걸 통째로 덜어준다. 데이터 분석 도구나 코드 실행 결과를 보여주는 화면, AI가 코드를 실행하고 결과를 보여주는 인터페이스를 만들 때 후보가 된다. 저장된 AI·에이전트 계열(SmoothUI, GAIA UI, Motiq)이 채팅과 도구 호출을 다룬다면 여기는 "코드를 실행하고 출력을 렌더링하는" 쪽이라 층위가 다르다. 출력 렌더러와 Isolated Frame은 외부 콘텐츠를 안전하게 격리해 보여주는 구현이라 노트북이 아니어도 참고할 만하다. 실제 제품(Runt)에서 쓰이고 있다는 점이 검증 근거다. 주피터 생태계를 쓰지 않는다면 지금 쓸 일은 없다.
·nteract-elements.vercel.app·
nteract elements — Jupyter 노트북 UI를 만드는 React 컴포넌트 35종
snapcn — 제품 데모 영상을 코드로 만드는 Remotion 컴포넌트 (무료 42종 MIT)
snapcn — 제품 데모 영상을 코드로 만드는 Remotion 컴포넌트 (무료 42종 MIT)
저장된 것 중 영상 제작용 컴포넌트는 이게 처음이다 — Auto-Editor와 Daydream은 영상을 편집하는 도구이고, 이건 코드로 영상을 조립하는 재료다. 제품 소개 영상이나 랜딩 히어로에 넣을 짧은 데모를 만들 때, 영상 편집기 없이 React로 만들고 CI에서 렌더링할 수 있다는 것이 Remotion 방식의 이점이다. 구성이 실제 제품 데모의 필요를 그대로 따라간다 — 기기 목업으로 화면을 감싸고, 자막을 얹고, 로고 스팅으로 끝맺고, 팔로워 수 카운터로 사회적 증거를 넣는 식이다. AI 채팅 입력 6종(프롬프트 전송, 답변 스트리밍, 에이전트 단계)이 따로 있는 것은 요즘 AI 제품 소개 영상의 정형을 반영한 것이다. 저장된 Supahero(히어로 섹션 레퍼런스 900종+)가 정지 화면 참고라면 이건 움직이는 쪽을 직접 만드는 도구다. 무료분이 MIT이고 코드를 소유하므로 부담이 적고, Pro는 연 구독(129달러)이라 1회 결제 위주인 다른 저장 항목들과 과금 방식이 다르다. Remotion 본체가 오픈소스가 아니라는 점을 먼저 확인할 것 — 개인과 직원 3명 이하 영리 조직, 비영리는 무료지만 그보다 큰 영리 조직은 Company License(유료)가 필요하다. 컴포넌트가 MIT인 것과는 별개 문제다. 같은 Remotion 기반으로 저장된 RemotionUI(210종 전량 MIT 무료)와 비교해 보고 고를 것.
·snapcn.dev·
snapcn — 제품 데모 영상을 코드로 만드는 Remotion 컴포넌트 (무료 42종 MIT)
BaseLayer — React Aria 기반 컴포넌트 26종 (MIT, 갱신 느림)
BaseLayer — React Aria 기반 컴포넌트 26종 (MIT, 갱신 느림)
저장된 React Aria 계열이 이제 여섯이다 — React Aria 본체, Intent UI(87종), HeroUI(100종+), BoardUI, Oui(47종), 그리고 이것(26종). 수량으로는 가장 작으므로 먼저 볼 이유는 약하다. 있는 것 중 Tag Group, Meter, Time Field, Date Field는 React Aria의 특기 영역이라 이 조각만 필요하면 가져올 만하다. 주의할 점은 갱신 속도다 — 사이트는 v2를 알리는데 저장소 마지막 커밋이 2025년 12월로 9개월가량 지났고 스타도 205개다. 저장된 Oui와 같은 상황이니 둘 다 "코드를 복사해 직접 관리할 생각이면 괜찮고, 유지되는 라이브러리로 기대하지 말 것"이라는 기준이 적용된다. 규모와 지속성을 함께 보려면 Intent UI나 HeroUI가 낫다. MIT.
·baselayer.dev·
BaseLayer — React Aria 기반 컴포넌트 26종 (MIT, 갱신 느림)
Optics — Cursor 규칙까지 레지스트리로 배포하는 디자인 시스템 (실측 79항목)
Optics — Cursor 규칙까지 레지스트리로 배포하는 디자인 시스템 (실측 79항목)
컴포넌트 라이브러리와 에이전트용 설정을 같은 레지스트리로 배포하는 세 번째 사례다 — 저장된 Sona UI는 에이전트 스킬, Elements는 Claude Code 훅, 여기는 Cursor 규칙이다. shadcn 레지스트리가 UI를 넘어 개발 환경 설정까지 나르는 통로가 되고 있다는 흐름으로 묶어둘 것. 컴포넌트 쪽에서 눈여겨볼 것은 Guided Tour와 Timezone, Star Rating이다 — 온보딩 투어는 보통 별도 패키지(driver.js 등)를 붙이게 되는데 같은 톤으로 들어 있고, 타임존 선택기와 별점은 커머스·커뮤니티 화면에 바로 쓰인다. Multi Select는 저장된 Hirael·Cubby UI와 겹친다. 접근성·성능·보안 문서를 별도로 둔 점은 저장된 Supabase Design System이나 02UI처럼 판단 기준을 다루는 쪽에 가깝다. 라이선스는 저장소 확인이 필요하다.
·optics.agusmayol.com.ar·
Optics — Cursor 규칙까지 레지스트리로 배포하는 디자인 시스템 (실측 79항목)
basecn — shadcn/ui를 Base UI로 옮긴 컴포넌트 61종 (MIT)
basecn — shadcn/ui를 Base UI로 옮긴 컴포넌트 61종 (MIT)
저장된 9ui와 정면으로 같은 자리다 — 둘 다 "Base UI로 만든 shadcn 컴포넌트"를 표방하므로 둘 중 하나를 고르면 된다. 여기의 강점은 목록 충실도로, shadcn/ui 전 목록을 덮으면서 Autocomplete와 Data Table까지 포함한다. 폼 연동을 React Hook Form과 TanStack Form 두 갈래로 문서화한 점도 실용적인데, 저장된 Base UI 계열에서 폼 라이브러리 선택을 명시적으로 다루는 곳은 드물다. 주의 — 마지막 커밋이 2026년 3월로 6개월가량 지났고 스타가 285개다. 코드를 복사해 소유하는 방식이니 그대로 가져와 직접 관리할 생각이면 괜찮지만, 활발히 유지되는 라이브러리를 원하면 Base UI 본체나 규모가 큰 Cubby UI·Hirael 쪽이 낫다. MIT라 상업 사용에는 제약이 없다.
·basecn.dev·
basecn — shadcn/ui를 Base UI로 옮긴 컴포넌트 61종 (MIT)
Shadcnblocks — 블록 2,028종·컴포넌트 2,104종의 최대 규모 유료 모음
Shadcnblocks — 블록 2,028종·컴포넌트 2,104종의 최대 규모 유료 모음
저장된 블록·kit 계열 중 규모가 압도적으로 크다 — PrebuiltUI 435종, Ruixen 240종, UIAble 790종과 비교해도 자릿수가 다르다. 랜딩이든 앱 화면이든 "이런 블록 없나" 싶을 때 가장 먼저 검색해볼 곳이다. 프리미티브를 Radix·Base UI·React Aria 셋 다 지원하는 점은 저장된 것 중 유일하므로 어떤 토대를 쓰든 맞물린다. 설치 경로에 shadcn MCP와 IDE 확장이 있어 Claude Code나 Cursor에서 바로 꺼내 쓰는 흐름이 된다. 판단 기준 — 무료로는 맛보기 수준이니 사실상 유료 전제이고, 가격이 149~399달러로 저장된 것 중 최상위다(UIAble Enterprise 199달러, TailGrids 199달러보다 위). 다만 2023년부터 운영하며 유료 고객 5천 명대라는 점에서 지속성은 개인 프로젝트들과 비교가 안 된다. Figma 키트는 Premium(299달러)부터이니 디자인 파일이 필요하면 저장된 Launch UI(99달러)와 비교할 것. 라이선스 조문은 확인하지 못했다.
·shadcnblocks.com·
Shadcnblocks — 블록 2,028종·컴포넌트 2,104종의 최대 규모 유료 모음
Shadcn UI Kit — 변형 532종 중 527종 무료 (템플릿·대시보드는 유료)
Shadcn UI Kit — 변형 532종 중 527종 무료 (템플릿·대시보드는 유료)
무료 범위를 오해하지 말 것 — "532종 중 527종 무료"는 컴포넌트 변형 이야기이고, 실제로 돈이 되는 템플릿과 블록은 무료 티어에서 블록 9종·템플릿 1종뿐이다. 즉 개별 컴포넌트의 생김새 변형을 고르는 용도로는 무료로 충분하고, 대시보드나 완성 템플릿이 필요하면 유료다. 컴포넌트 변형이 많다는 점이 이 항목의 성격이다 — 버튼 27종, 입력 25종처럼 한 컴포넌트의 여러 모양을 늘어놓아 고르게 하는 방식이라, 새 라이브러리를 들이는 게 아니라 이미 쓰는 shadcn 컴포넌트의 변형을 찾을 때 맞다. Radix와 Base UI를 모두 지원해 저장된 Base UI 계열과도 맞물린다. MCP와 테마 생성기, 페이지 빌더가 함께 온다. 같은 날 저장한 Shadcn Dashboard와 이름·영역이 비슷하나 별개 프로젝트다 — 그쪽은 대시보드 특화에 AI 빌더 중심이고 여기는 컴포넌트 변형과 템플릿 수량이 중심이다. 라이선스 조문은 확인하지 못했다.
·shadcnuikit.com·
Shadcn UI Kit — 변형 532종 중 527종 무료 (템플릿·대시보드는 유료)
Shadcn Dashboard — 대시보드 특화 블록·AI 빌더·MCP (Pro 75달러)
Shadcn Dashboard — 대시보드 특화 블록·AI 빌더·MCP (Pro 75달러)
대시보드 한 갈래에 집중한 항목이라 범용 kit과는 자리가 다르다. 실질적으로 눈에 띄는 것은 부가 도구 쪽이다 — MCP 서버와 CLI를 제공하고 AI 대시보드 빌더로 화면을 생성하며, Supabase 보일러플레이트까지 따라온다. Feedle이 Supabase 스택이므로 그 보일러플레이트가 어떤 형태인지는 확인해볼 가치가 있다. 대시보드 블록만 놓고 비교하면 저장된 Hirael(SaaS·인프라 블록), Motiq(운영 화면 흐름), UIAble(대시보드 앱 2종)과 겹치는데, 이쪽은 차트와 관리자 화면에 더 몰려 있고 AI 생성이 붙는다는 점이 다르다. 가격은 Pro 75달러로 중간대이고 AI 크레딧이 티어에 묶여 있다는 점은 1회 결제라도 사실상 사용량 제한이 있다는 뜻이니 감안할 것. 라이선스 조문은 확인하지 못했다.
·shadcndashboard.dev·
Shadcn Dashboard — 대시보드 특화 블록·AI 빌더·MCP (Pro 75달러)
Billing SDK — 결제·구독 화면 전용 컴포넌트 35종 (주의: GPL-3.0)
Billing SDK — 결제·구독 화면 전용 컴포넌트 35종 (주의: GPL-3.0)
결제 화면은 항목이 많고 예외 상황이 까다로운데(비례 배분, 결제 실패, 체험 만료, 해지 만류) 그 목록을 통째로 갖고 있어 무엇을 만들어야 하는지 체크리스트로도 쓸 만하다. 저장된 것 중 청구 관련 조각이 있는 곳은 Hirael(빌링 카드·구독 플랜), UIAble, Motiq 정도인데 이만큼 전용으로 깊은 곳은 없다. 다만 라이선스를 반드시 확인할 것 — 사이트는 "어떤 프로젝트에도 자유롭게 쓰고 수정할 수 있다"고 적었지만 저장소(dodopayments/billingsdk)의 실제 라이선스는 GPL-3.0이다. GPL은 카피레프트라 상용 제품에 코드를 넣을 때 조건이 따르므로, 사이트 문구만 믿지 말고 저장소 라이선스 파일과 예외 조항을 직접 확인해야 한다. 이 점이 MIT인 다른 저장 항목들과 결정적으로 갈리는 지점이다. 또 제작사가 결제 서비스 업체이므로 Dodo Payments 연동을 전제한 부분이 있는지도 함께 볼 것 — Stripe 등 다른 결제사 언급은 랜딩에서 확인되지 않았다.
·billingsdk.com·
Billing SDK — 결제·구독 화면 전용 컴포넌트 35종 (주의: GPL-3.0)
Elements — Claude Code 훅까지 레지스트리로 배포하는 풀스택 블록 (실측 360항목)
Elements — Claude Code 훅까지 레지스트리로 배포하는 풀스택 블록 (실측 360항목)
저장된 것 중 성격이 가장 특이하다 — UI 컴포넌트와 Claude Code 훅을 같은 레지스트리로 배포한다. 훅 12종은 화면 요소가 아니라 에이전트 작업을 감싸는 자동화다. 파괴적 명령 가드, 시크릿 유출 가드, 브랜치 보호, 컨텍스트 사용량 모니터, 작업 끝났을 때 Slack·Discord·Telegram 알림, 세션 요약 — Claude Code를 상시로 쓴다면 UI보다 이쪽을 먼저 볼 만하다. shadcn CLI로 설치한다는 점에서 저장된 Sona UI(에이전트 스킬 배포)와 같은 흐름이지만, 그쪽이 "컴포넌트를 어떻게 쓸지" 알려주는 문서라면 이건 "에이전트 동작 자체를 바꾸는" 스크립트다. 컴포넌트 쪽에서는 AI·에이전트 계열이 두껍고(SmoothUI·GAIA UI와 비교), 개발 도구 뷰어들(JSON·Diff·API 응답·CLI 출력)은 ui.corr.sh·Geist와 겹친다. 브랜드 로고 207종과 AWS 아이콘이 포함된 점은 기술 스택 소개 섹션을 만들 때 유용하다. 라이선스 미표기라 상업 투입 전 확인 필요.
·tryelements.dev·
Elements — Claude Code 훅까지 레지스트리로 배포하는 풀스택 블록 (실측 360항목)
LyteNyte Grid — 무료 Core가 Apache 2.0인 엔터프라이즈 데이터 그리드
LyteNyte Grid — 무료 Core가 Apache 2.0인 엔터프라이즈 데이터 그리드
무료 Core가 Apache 2.0인데 범위가 상당히 넓다는 점이 핵심이다 — 가상화, 행 그룹화, 집계, 마스터-디테일, 셀 편집, Excel·Parquet 내보내기까지 무료에 들어 있어 상용 그리드의 유료 영역에 해당하는 것들이 열려 있다. 상품 목록이나 주문 관리처럼 행이 많고 편집·내보내기가 필요한 화면이면 먼저 검토할 만하다. 유료가 갈리는 지점은 명확하다 — 피벗, 트리 데이터, 서버사이드 데이터 로딩이다. 데이터가 커져 서버에서 정렬·필터·페이징을 처리해야 하는 순간 연 399달러가 발생하므로 그 전환점을 미리 가늠할 것. 저장된 데이터 테이블 항목들(Hirael, ui.corr.sh, Cubby의 Data Table)과는 급이 다르다 — 그쪽은 shadcn 수준의 테이블이고 이건 전용 그리드 엔진이다. 반대로 단순 목록에 이걸 쓰면 과하다. 라이선스 기간 중 버전을 영구 사용할 수 있는 구조라 갱신을 멈춰도 쓰던 버전은 남는다. 프로프라이어터리 PRO는 재배포 제한이 있으니 조건을 확인할 것.
·1771technologies.com·
LyteNyte Grid — 무료 Core가 Apache 2.0인 엔터프라이즈 데이터 그리드
Better Upload — S3 호환 스토리지로 바로 올리는 React 업로드 라이브러리 (MIT)
Better Upload — S3 호환 스토리지로 바로 올리는 React 업로드 라이브러리 (MIT)
파일 업로드는 직접 만들면 서명된 URL 발급, 진행률, 오류 처리, 검증을 다 붙여야 하는데 그 배선을 덜어주는 항목이다. 저장된 것 중 업로드를 전담하는 라이브러리는 이게 처음이다 — 다른 kit들(Hirael의 File Dropzone, ui.corr.sh의 File Upload, Delta의 File Upload)은 화면만 주고 실제 업로드 처리는 직접 해야 한다. 여기는 UI와 서버 라우트를 함께 준다. 스택 판단 — S3 호환이면 되므로 AWS S3뿐 아니라 Cloudflare R2, MinIO 등에 붙는다. 다만 Feedle은 Supabase Storage를 쓰므로 저장된 Supabase Library의 Dropzone 블록이 더 맞는 짝이다. Supabase Storage도 S3 호환 엔드포인트를 제공하므로 이걸 쓸 수 있을 가능성은 있으나 확인이 필요하다. MIT이고 최근까지 갱신되고 있다. 대용량 파일의 멀티파트 업로드나 업로드 진행률 표시 지원 여부는 문서에서 확인하지 못했으니 큰 파일을 다룰 계획이면 먼저 볼 것.
·better-upload.com·
Better Upload — S3 호환 스토리지로 바로 올리는 React 업로드 라이브러리 (MIT)
Tiptap — 헤드리스 에디터 본체와 협업·AI 유료 플랫폼 (MIT + 구독)
Tiptap — 헤드리스 에디터 본체와 협업·AI 유료 플랫폼 (MIT + 구독)
저장된 에디터 항목의 상류다 — Shadcn Tiptap과 editorcn이 모두 이것 위에 올라간 것이므로, 그 둘을 쓴다면 실제 토대가 여기다. 에디터 본체만 놓고 보면 MIT 오픈소스이고 확장 100종 이상이 무료라 비용 없이 쓸 수 있다. 값이 드는 지점은 따로다 — 실시간 협업, 댓글, DOCX 변환, AI 편집은 전부 유료 플랫폼 기능이고 월 49달러부터 시작해 협업이 제품의 핵심이면 Business 999달러까지 올라간다. 즉 "Tiptap은 무료인가"의 답은 용도에 달렸으니, 협업·댓글이 필요해지는 시점을 미리 가늠해둘 것. 저장된 Lexical(Meta)과 Plate(Slate 기반)이 경쟁 토대인데, Tiptap은 상용 서비스가 붙어 있어 직접 만들 부분이 가장 적은 대신 그 부분이 종속과 비용이 된다. 반대로 Lexical은 전부 직접 만들지만 비용이 없다. 자체 호스팅 옵션이 있으므로 데이터를 외부에 두기 어려운 경우에도 길은 있다.
·tiptap.dev·
Tiptap — 헤드리스 에디터 본체와 협업·AI 유료 플랫폼 (MIT + 구독)
Lexical — Meta의 텍스트 에디터 프레임워크 (MIT, 2.4만 스타)
Lexical — Meta의 텍스트 에디터 프레임워크 (MIT, 2.4만 스타)
저장된 에디터 항목 둘(Shadcn Tiptap, editorcn)이 모두 Tiptap(ProseMirror) 기반이므로 여기는 다른 토대를 고를 때의 선택지다. 갈리는 지점 — Tiptap 계열은 확장과 툴바가 이미 갖춰져 있어 바로 쓰기 좋고, Lexical은 본체가 얇은 대신 필요한 것을 직접 붙여야 한다. 따라서 에디터를 빨리 넣어야 하면 저장된 두 항목이 낫고, 편집기 동작 자체를 세밀하게 통제하거나 커스텀 노드·문서 모델을 설계해야 하면 여기로 내려온다. 신뢰 근거는 Meta가 자사 제품의 편집기를 이걸로 돌린다는 점과 2.4만 스타, MIT, 최근까지 이어지는 갱신이다. 주의 — 프레임워크라 UI가 전혀 없으므로 툴바·메뉴·단축키는 직접 만들거나 별도 컴포넌트를 붙여야 하고, 초기 구축 비용이 Tiptap 계열보다 크다. 접근성을 명시적으로 다룬다는 점은 에디터 영역에서 드문 장점이다.
·lexical.dev·
Lexical — Meta의 텍스트 에디터 프레임워크 (MIT, 2.4만 스타)
TailGrids UI — 이커머스·대시보드까지 덮는 블록 600종+ (무료 70블록은 MIT)
TailGrids UI — 이커머스·대시보드까지 덮는 블록 600종+ (무료 70블록은 MIT)
무료 티어가 MIT이고 이커머스 블록만 20종을 여는 점이 Feedle 맥락에서 실질적이다 — 저장된 랜딩 위주 kit들(Efferd, Ruixen, PrebuiltUI)에는 이커머스 범주가 없고, 있는 곳은 Systaliko(위젯 단위)와 Hirael(블록 4종) 정도다. 상품 목록·장바구니·결제 화면을 블록으로 가져오려면 여기가 현재 가장 두껍다. 대시보드 13종과 AI 앱 13종도 무료 범위에 들어간다. 유료 판단 기준 — 199달러는 저장된 유료 kit 중 비싼 축이지만(UIAble Enterprise와 비슷, Hover.dev 49달러·The UI Factory 25유로보다 훨씬 위) 600종 이상과 완성 템플릿이 따라온다. Figma 파일이 필요하면 349달러 팀 티어여야 하므로 저장된 Launch UI(99달러에 Figma 포함)와 비교할 것. 15만 사용자와 v3.0이라는 점에서 유지 측면은 개인 프로젝트들보다 안정적이다. 무료분이 MIT로 명확한 것도 라이선스 미표기가 흔한 이 범주에서 장점이다.
·tailgrids.com·
TailGrids UI — 이커머스·대시보드까지 덮는 블록 600종+ (무료 70블록은 MIT)