Frontend

인증은 화면 수가 많고 빠뜨리기 쉬운 곳인데(재설정, 기기 관리, 세션 목록, 계정 삭제 확인) 여기는 그 전부를 목록으로 갖고 있어 무엇을 만들어야 하는지 체크리스트로도 쓸 수 있다. 메일 템플릿 12종이 함께 오는 점이 특히 실용적이다 — 저장된 React Email과 달리 인증 흐름에 맞춘 실제 문안까지 있어 그대로 시작할 수 있다. 다만 전제 조건이 크다. Better Auth를 쓸 때만 그대로 붙고, Feedle처럼 Supabase Auth를 쓰는 경우에는 연동이 맞지 않으므로 저장된 Supabase Library의 인증 블록이 맞는 짝이다. 그래도 화면 구성과 메일 문안은 스택과 무관하게 참고가 된다. UI를 shadcn/ui·HeroUI·Zaidan 세 갈래로 내는 구조라 저장된 HeroUI를 쓰는 프로젝트면 바로 맞물린다. Agent Auth 항목이 있는 것은 에이전트가 사용자 대신 인증하는 흐름을 다루는 것으로 보이며 다른 곳에 거의 없다. MIT.

저장된 Geist(Vercel), Astryx(Meta)와 같은 갈래 — 회사가 자사 콘솔을 만드는 데 실제로 쓰는 시스템이라 참고 가치가 크다. 특히 프래그먼트 27종이 실용적인데, Filter Bar, Inner Side Menu, Page Header/Nav/Section, Key Value Field Array, Form Item Layout, Text Confirm Dialog는 관리 화면을 만들 때 매번 다시 설계하게 되는 부분이다. Supabase 대시보드를 써봤다면 그 화면들의 구조를 그대로 열람하는 셈이다. UI 패턴 10편은 컴포넌트가 아니라 판단 기준을 다루므로 저장된 02UI("언제 이 컴포넌트를 쓰는가")와 같은 성격이고, 카피라이팅 가이드까지 있는 건 드물다. 주의 — 이건 Supabase 내부용 시스템 문서이므로 Library처럼 설치해 쓰라고 만든 것이 아니다. 코드를 가져오려면 저장소에서 직접 떼어내야 하고 브랜드 톤도 강하게 배어 있다. 같은 Supabase 스택이라면 Library(연동 블록)와 이것(디자인 참고)을 역할을 나눠 보면 된다.

Feedle이 Supabase 위에 있으므로 저장된 것 중 가장 직접적으로 쓰일 항목이다. 인증 화면과 파일 업로드는 매번 직접 만드는 부분인데 공식 블록이 있으면 Supabase 쪽 연동 코드까지 함께 온다는 게 다르다 — 서드파티 kit의 로그인 폼은 껍데기만 주고 연결은 직접 해야 한다. 실시간 계열(커서, 아바타 스택, 채팅, 플로우)은 Realtime 기능을 실제로 어떻게 엮는지 보여주는 예제 역할도 겸하므로 기능 자체를 안 쓰더라도 구현 참고가 된다. 무한 쿼리 훅은 상품 목록처럼 페이지네이션이 필요한 화면에 바로 대응된다. MCP 서버와 에이전트 스킬을 함께 제공하는 점은 저장된 Sona UI(스킬)·Astryx(MCP)와 같은 흐름인데, 여기는 UI가 아니라 백엔드 연동이라 Claude Code로 Supabase 작업을 맡길 때 더 실질적이다. 공식이라 유지가 끊길 걱정이 없다는 점도 개인 프로젝트 라이브러리들과 갈리는 지점이다.

Lens 프로토콜 위에 소셜 기능을 올릴 때만 의미가 있는 항목이다. 그 조건에 해당하지 않으면 지금 쓸 일은 없고, 저장 가치는 두 가지다 — 첫째, 탈중앙 소셜을 다루게 되면 컴포넌트 단위로 정리된 곳이 드무니 출발점이 된다. 둘째, 후원(팁), 인용, 수집, 팔로우처럼 소셜 기능을 블록으로 쪼갠 구성 자체가 일반 커뮤니티 기능을 설계할 때 참고가 된다. 주의 — 제작자가 직접 프로덕션 부적합이라고 밝히고 있고, Lens SDK와 wagmi, 지갑 연결(ConnectKit)까지 스택이 통째로 따라붙으므로 일반 웹 프로젝트에 조각만 떼어 쓰기는 어렵다. Text Editor, Audio/Video Player, Link Preview 정도는 범용으로 보이지만 Lens 컨텍스트에 묶여 있을 가능성이 크니 확인이 필요하다. 라이선스 미표기.

저장된 것 중 처음으로 에이전트용 스킬 파일을 레지스트리로 함께 배포하는 항목이다 — agent-skill에 SKILL.md와 참고 문서 네 편(컴포넌트 선택 기준, 소비자 검증, 디자인 원칙, 프로바이더 설정)이 들어 있어 "코딩 에이전트가 컴포넌트를 찾고 설치하고 조합하고 검증하는 절차"를 지시한다. MCP 서버를 제공하는 항목들(SmoothUI, Solace UI, The UI Factory, Astryx, 8StarLabs)과는 접근이 다르다 — MCP는 도구를 붙이는 쪽이고 이건 판단 기준을 문서로 주는 쪽이라, Claude Code로 UI를 맡길 때 어느 방식이 나은지 비교해볼 대상이다. 컴포넌트 자체는 42종으로 중간 규모이고 유체·변형 연출과 iOS식 제스처(Swipe Action Row, Hold to Delete)에 강점이 있다. Live Activity는 저장된 UICapsule의 Dynamic Island와 같은 계열이다. 라이선스 미표기라 상업 투입 전 확인이 필요하다.

핵심은 "기존 shadcn 프로젝트를 갈아엎지 않고 옆에 끼워 쓴다"는 설계다 — 제작자가 shadcn 컴포넌트와 나란히 돌아간다고 명시한다. 접근성이 중요한 화면(날짜 선택, 콤보박스, 메뉴)만 React Aria 구현으로 바꾸고 나머지는 그대로 두는 식이 가능하다. 저장된 React Aria 계열과 비교할 것 — Intent UI(87종)가 규모가 크고 HeroUI는 패키지 설치형이며 BoardUI는 에이전트 제품용인데, 이건 shadcn 병행을 전면에 내세운 유일한 쪽이다. React Router 전용 헬퍼가 있는 점도 드물어서 Next.js가 아닌 React Router 스택이면 눈여겨볼 만하다. 다만 실태를 감안할 것 — GitHub 스타 7개에 마지막 커밋이 2025년 12월로 9개월가량 지났다. MIT이고 코드를 복사해 소유하는 방식이니 그대로 가져와 직접 관리할 생각이면 문제없지만, 유지되는 라이브러리로 기대하지는 말 것.

문서 기반 AI 제품을 만들 때 가장 손이 많이 가는 부분을 덜어주는 항목이다 — 특히 바운딩 박스 인용은 RAG나 문서 추출에서 "모델이 이 답을 어느 페이지 어디서 가져왔는지" 보여줄 때 필요한데, 좌표를 받아 PDF 위에 겹쳐 그리는 구현을 직접 하면 꽤 번거롭다. Schema Builder도 문서에서 뽑을 필드를 사용자가 정의하게 하는 화면이라 같은 맥락이다. 저장된 것 중 문서 뷰어를 제대로 다루는 곳은 여기가 유일하다. 이름 주의 — 저장된 Extend UI(extend-ui.com, 제작자 kicky·rynkovski)는 shadcn 확장 라이브러리로 전혀 다른 프로젝트다. 이쪽은 문서 AI 회사 Extend가 자사 제품을 만들며 떼어낸 것이다. 6종뿐이지만 각각이 통째로 큰 기능이라 수량으로 볼 항목이 아니다. 라이선스 확인 필요.

저장된 Base UI 계열(9ui, Space UI, Balsa UI, PaceUI, UIAble, Hirael, glasscn) 중 기본형 충실도와 부가 항목의 균형이 좋은 쪽이다. 특히 훅 4종이 실질적이다 — use-list-virtualizer와 use-fuzzy-filter는 목록이 길어지면 반드시 필요해지는데 보통 별도 패키지(react-virtual, fuse.js)를 붙이게 되는 부분이라, 같은 톤으로 함께 오는 건 드물다. 폼 입력 쪽에서 Autocomplete, Number Field, OTP Field, Date Range Picker, Circular Slider를 갖춘 점은 저장된 Hirael과 같은 자리이니 둘을 비교할 것 — Hirael이 수량과 범위(SaaS·인프라 블록)에서 앞서고, 여기는 훅과 OKLCH 토큰 체계가 강점이다. QR Code가 컴포넌트로 있는 것도 다른 곳에 잘 없다. MIT라 상업 사용에 제약이 없고 Tailwind 4를 요구한다.

텍스트 애니메이션이 18종으로 저장된 것 중 한 곳에 모인 규모로는 가장 크다 — 저장된 text 역할 항목들이 대개 4~6종인 것과 비교된다. 글자 연출에 힘을 줘야 하는 히어로나 포트폴리오라면 여기를 먼저 훑을 만하다. 주의할 점은 설치 방식이다. shadcn CLI가 아니라 자체 CLI를 쓰므로 지금까지 저장한 레지스트리들과 워크플로가 갈리고, shadcn MCP로 에이전트에게 맡기는 흐름(8StarLabs UI 노트 참고)도 그대로는 안 된다. 파일이 평범한 .tsx로 떨어진다고 밝히고 있으니 실제로는 코드를 직접 복사해도 되는지 확인해볼 것. 기본형 55종은 shadcn/ui 원본과 겹치므로 그것 때문에 결제할 이유는 없고, 결제 근거는 프리미엄 템플릿이나 Agentic AI 인터페이스 계열이 되어야 한다. 가격 59~99달러는 저장된 유료 kit 중간대다. 라이선스 미표기.

범용 라이브러리가 아니라 "이런 게 필요한데 어디에도 없네" 싶을 때 뒤지는 곳이다. Heatmap, Partition Bar, Flip Clock, Status Monitor, JSON Viewer, Relative Time은 직접 만들면 번거롭고 다른 kit에 잘 없다. Transport Badge(대중교통 노선 배지)는 특히 용도가 좁아서, 이런 것까지 만들어 두는 성격의 모음이라는 걸 보여준다. 상태 표시 계열(Status Indicator, Status Monitor, System Banner)은 저장된 OpenStatus의 상태 페이지 레지스트리와 겹치니 함께 비교할 것. JSON Viewer는 저장된 Geist에도 있다. MCP 항목이 있지만 자체 MCP 서버가 아니라 shadcn 공식 MCP 서버에 레지스트리를 등록해 쓰는 방식이다 — components.json에 registries 항목만 추가하면 되므로, 이 방법은 다른 shadcn 레지스트리에도 그대로 적용할 수 있는 일반 기법이다. 저장된 레지스트리들을 Claude Code에 붙일 때 참고할 것. 라이선스와 제작자 정보는 확인하지 못했다.

저장된 배경 셰이더 항목 중 도입이 가장 간단하다 — 23rd, Chamaac, Solaris Sky가 모두 코드를 복사해 프로젝트에 넣는 방식인 데 비해 여기는 npm 설치 후 컴포넌트 한 줄이면 끝난다. 대신 소스를 소유하지 않으므로 셰이더를 직접 손볼 수는 없고, 주어진 7종이 마음에 들어야 쓸 수 있다. 히어로 섹션 배경을 빨리 얹어야 할 때 먼저 볼 것. 각 배경에 이름이 붙어 있어 고르기도 쉽다. WebGL 셰이더 공통의 주의점은 그대로 적용된다 — 저사양 기기와 배터리 부담이 크고 reduced-motion 대응은 직접 확인해야 한다. 정적 CSS 배경으로 충분하면 저장된 bg.ibelick이 훨씬 가볍다. Shadertoy 포크가 섞여 있으므로 상업 프로젝트에 넣기 전 원 저작물의 라이선스까지 확인할 것.

저장된 Vidstack과 같은 자리를 놓고 비교할 항목이고 갈리는 지점이 분명하다 — Vidstack은 자체 미디어 계층을 쓰는 반면 여기는 Google의 Shaka Player를 그대로 얹는다. 따라서 HLS·DASH 적응형 스트리밍이나 Widevine·PlayReady 같은 DRM이 필요한 상황이면 Shaka의 검증된 구현을 그대로 쓰는 이쪽이 유리하고, 단순 재생이면 Vidstack이 가볍다. 훅 17종이 UI와 분리돼 있다는 점도 실용적이다 — 플레이어 모양을 완전히 직접 만들면서 상태 관리만 가져올 수 있고, 저장된 AnimBits가 애니메이션을 훅으로 주는 것과 같은 발상이다. 재생 목록(use-playlist)과 미디어 세션(use-media-session, 잠금화면·OS 미디어 컨트롤 연동)까지 있는 것은 다른 플레이어 라이브러리에 잘 없다. shadcn CLI로 설치해 소스를 소유하므로 디자인을 자유롭게 바꿀 수 있다. Shaka Player가 무게가 있는 엔진이니 번들 크기를 확인할 것. 라이선스 미표기.

0.0.1이라 아직 실무에 넣을 단계는 아니고, 두 가지 문제를 헤드리스로 푼다는 접근을 기억해둘 항목이다. 둘 다 직접 만들면 까다로운 것들이다 — 컬러 피커는 색공간 변환과 포인터 처리가, drag-to-scrub 수치 입력은 Figma·Blender식 조작감을 재현하는 부분이 그렇다. 완성된 컬러 피커가 지금 필요하면 저장된 Hirael, glasscn, Delta Components, ABUI에 이미 있으니 그쪽이 빠르고, 여기는 스타일까지 직접 정해야 할 때의 선택지다. 수치 입력 쪽은 Hirael의 Number Field와 비교할 것. 저장된 DialKit이 값을 실시간으로 조절하는 개발 도구라 발상이 닿아 있다. 버전과 라이선스 모두 확인이 필요하며, 당장 쓰기보다 나중에 성숙하면 다시 볼 대상으로 둔다.

마케팅 문구 없이 "내가 실제로 다시 쓰는 것들"이라고 밝히는 구성이라 항목 선정이 실무적이다. 눈여겨볼 것은 두 갈래다. 첫째, 유틸리티가 개발 중에 쓰는 도구라는 점 — 특히 Chart Empty Loading Error는 차트에 늘 필요한 빈 상태·로딩·오류 세 가지를 묶어둔 것이라 직접 만들 때 빠뜨리기 쉬운 부분을 채운다. Responsive Preview Shell과 Screen Size Guard는 저장된 ABUI의 Breakpoint Display와 같은 갈래다. 둘째, 블록이 앱 내부 화면 쪽이다 — Settings Page, Audit Log, Mailbox, File Manager, Status Page, Form Builder는 랜딩 블록 kit들에 없는 것들이고 저장된 Hirael·Motiq와 같은 영역을 덮는다. Sankey 차트가 있는 점은 저장된 Bklit과 함께 드문 경우다. 제작자 정보와 라이선스가 사이트에 드러나 있지 않으니 상업 투입 전 확인이 필요하다.

범용 라이브러리가 아니라 개인 사이트·포트폴리오를 만들 때 필요한 조각들이라는 점에서 자리가 뚜렷하다 — 저장된 kit 대부분이 제품 랜딩이나 앱 내부를 겨냥하는데 여기는 "나를 소개하는 페이지"에 쓰이는 것들이다. GitHub 기여도 히트맵, 기술 스택 클라우드, 프로젝트 탐색기, 연락처 채널, 점으로 찍은 세계 지도는 직접 만들면 은근히 손이 가는 것들이라 개발자 포트폴리오를 세울 때 시간을 아낀다. Ask AI와 Model Picker가 있는 것도 요즘 개인 사이트에 챗봇을 붙이는 흐름에 맞는다. 17종뿐이니 여기 하나로 사이트를 끝낼 수는 없고 저장된 MVPBlocks의 개발자 포트폴리오 템플릿 같은 것과 함께 볼 것. 라이선스 미표기라 상업 투입 전 확인이 필요하다.

개인 디자인 시스템이라 규모는 작지만 AI 화면에 필요한 조각이 한 벌 갖춰져 있다는 점이 쓸모다 — Chat, Chat Input, Chat Message, Chat Reasoning, Chat Tool이 한 톤으로 묶여 있고 여기에 JSX Preview가 붙는다. JSX Preview는 모델이 생성한 컴포넌트를 그 자리에서 렌더링해 보여주는 용도라 저장된 AI 항목 중 드문 조각이다. 다만 대화형 UI 전반은 저장된 SmoothUI(AI 20종)와 GAIA UI가 더 두껍고 완성도도 검증됐으니 그쪽을 먼저 볼 것. Window와 Command Prompt, ASCII Wave는 터미널·레트로 톤 화면에 어울리고, Invisible Input과 Long Press Button은 다른 곳에 잘 없는 변형이다. 27종뿐이고 라이선스가 명시돼 있지 않아 상업 투입 전 확인이 필요하다.

저장된 Plasma UI와 같은 목표를 다른 방법으로 푼다 — Plasma는 WebGL로 실제 굴절을 계산해 모바일에 부적합하고 패널 개수 제한이 있는 반면, 여기는 CSS와 SVG 필터라 훨씬 가볍고 일반 컴포넌트에 그대로 얹힌다. 대신 유리 질감의 사실성은 Plasma가 위다. 판단 기준은 이것이다 — 화면 전체를 유리 재질로 덮는 연출이면 Plasma, 버튼·입력·사이드바 같은 평범한 UI에 유리 톤만 입히려면 glasscn. 일반 버전과 glass- 버전을 쌍으로 두어 부분적으로만 적용하기 쉽다는 점도 실용적이다. Base UI 기반이라 저장된 9ui·Space UI·PaceUI·UIAble·Hirael과 프리미티브를 공유한다. CSS backdrop-filter와 SVG 필터에 의존하므로 브라우저별 렌더링 차이와 성능은 실제 기기에서 확인할 것 — 특히 스크롤되는 목록 위에 깔면 부담이 커진다. MIT. 글래스모피즘 CSS만 필요하면 저장된 Aether CSS 생성기가 더 간단하다.

용도가 아주 좁은 대신 그 안에서는 대체재가 없다. 저장된 mapcn 위에 얹혀 있으므로 지도 자체가 필요하면 mapcn, 그 위에 항공 노선·항적·궤도를 그려야 하면 여기다 — 두 항목을 짝으로 볼 것. react-simple-maps는 SVG 기반 정적 지도 차트라 계열이 다르다. 항공 도메인이 아니어도 쓸 구석은 있다. 측지선(대권 항로) 그리기, 두 지점 간 애니메이션 이동, 네트워크 커버리지 표현은 물류 경로, 배송 추적, 노드 간 연결 시각화에 그대로 옮겨 쓸 수 있는 패턴이다. Satellite Orbit Tracker는 궤도 계산까지 들어가 있어 그 자체로 참고할 만하다. MIT라 상업 사용에 제약이 없고 코드를 복사해 소유하는 방식이다. 13종뿐이니 라이브러리가 아니라 특정 문제의 해답으로 둘 것.

저장된 SmoothUI와 같은 제작자(Eduardo Calvo)다. 그쪽이 범용 대체 라이브러리라면 이쪽은 양식이 강하게 정해진 테마이니 필요에 따라 갈라 쓰면 된다. 양식 선택 갈래(8bit/cnlibs, 8bitcn, Neobrutalism)에 들어가는데 그중 규모가 가장 크고, shadcn 전 목록을 덮으면서 HUD 조각까지 있어 화면 전체를 한 양식으로 끝낼 수 있다는 점이 다르다. 실용적으로는 두 갈래다 — 게임·SF 톤 제품이나 포트폴리오에서 양식 자체로 쓰거나, HUD·레이더·게이지·파형처럼 상태를 실시간으로 보여주는 조각만 뽑아 모니터링 대시보드에 얹는 식이다. 후자라면 저장된 ssych ui(금융 다크), Geist·Motiq(콘솔)와 비교해볼 것. Radix와 Base UI를 모두 지원하므로 기존 프로젝트 프리미티브에 맞춰 고를 수 있다. 폰트까지 레지스트리로 배포하는 점은 양식 통일에 실질적이다. 사이트 표기(55종)와 실제 수량 차이가 크니 목록을 직접 볼 것. Tailwind 4와 React 19를 요구하고 라이선스는 저장소 확인이 필요하다.

컴포넌트 수로 볼 곳이 아니라 구조를 참고할 곳이다 — 느슨한 컴포넌트 모음이 아니라 surfaces·tokens·surface-context 같은 토큰·표면 레이어를 아래에 깔아두고 그 위에 컴포넌트를 올린 형태라, 직접 디자인 시스템을 만들 때 레이어를 어떻게 나눌지 참고가 된다. 아이콘 라이브러리를 골라 끼우는 방식은 저장된 Efferd와 같은 접근이다. 개별 항목으로는 Editor, Code, Embed, MP3 Player가 눈에 띄는데 블로그나 문서 사이트를 만들 때 필요한 조각들이고 다른 kit에 잘 없다. Product Card는 상거래 화면용인데 저장된 Systaliko의 이커머스 조각들과 함께 볼 것. 11종뿐이니 주력으로 쓸 수는 없다. 라이선스 미표기라 상업 투입 전 확인이 필요하다.

출처가 가장 무거운 항목이다 — Vercel의 Geist와 같은 갈래로, 회사가 자사 제품을 만드는 데 실제로 쓰는 시스템이라 장기 의존성으로 삼기에 부담이 적다. 저장된 foundation 중 스타일 방식이 갈리는 유일한 항목이라는 점이 실무 판단의 핵심이다. 나머지가 전부 Tailwind 전제인 반면 여기는 StyleX 기반이며, 다만 소비자 쪽에서는 Tailwind로 덮어쓸 수 있다고 밝히고 있으므로 도입 전 그 경계를 실제로 확인해볼 것 — 빌드 파이프라인에 StyleX가 들어온다는 사실 자체는 변하지 않는다. React 19 이상을 요구한다. MCP를 제공하는 점은 저장된 SmoothUI·Solace UI·The UI Factory와 같은 흐름인데, 그중 규모와 출처가 가장 크다. 아직 베타이므로 API 변경 가능성을 감안할 것. 컴포넌트 수가 사이트와 저장소에서 다르게 적혀 있어 실제 목록은 직접 확인이 필요하다.

규모는 작지만 다른 레지스트리에 없는 갈래가 하나 있다 — 화면에 그리는 컴포넌트가 아니라 개발 중에 쓰는 유틸리티를 함께 배포한다는 점이다. Breakpoint Display(현재 브레이크포인트를 화면에 표시), Debug Utils, 방향 미디어 쿼리, 추가 브레이크포인트는 반응형 작업을 할 때 직접 만들어 쓰던 것들이라 그대로 가져다 쓸 만하다. Vercel의 components.build 규격을 따른다고 밝히는데, 레지스트리 표준이 자리를 잡는지 지켜볼 겸 참고 대상으로 둔다. 컴포넌트 쪽은 Color Swatch Selector, Radio Tabs/Rows, Accordion Multiselect처럼 선택 UI에 몰려 있어 폼을 만들 때 Hirael을 먼저 보고 없는 것을 여기서 찾는 순서가 맞다. Calendar Year와 Availability는 예약·일정 화면에 대응되는 드문 블록이다. 라이선스 미표기라 상업 투입 전 확인이 필요하다.

실제로 운영되는 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종뿐이니 화면 전체를 세우는 용도가 아니라 대화형 부분에 골라 쓰는 곳이다.

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과 프리미티브를 공유한다. 라이선스는 사이트에 종류가 적혀 있지 않아 저장소 확인이 필요하다.

커스텀 스크롤바를 직접 만들 때 늘 걸리는 문제를 해결해 둔 컴포넌트다 — 데스크톱에서 예쁘게 만들면 모바일에서 관성 스크롤과 고무줄 효과가 깨지는 지점을 기기 감지로 우회한다. shadcn ScrollArea를 쓰는 프로젝트라면 import 경로만 바꾸면 되므로 도입 비용이 거의 없다. 가장자리 마스크는 저장된 Scroll Mask, pete.design의 tw-fade와 같은 효과인데 그쪽은 마스크만 주고 여기는 스크롤 영역 자체에 통합돼 있다. 긴 목록이나 사이드바, 시간대·옵션 선택기처럼 스크롤이 UI의 일부로 보이는 곳에 쓴다. 단일 컴포넌트이므로 라이브러리로 기대하지 말 것. 라이선스 미표기라 상업 투입 전 저장소 확인이 필요하다.

6종뿐이라 라이브러리로 볼 것이 아니라 에이전트 UI를 처음 세울 때의 출발점으로 본다. 저장된 AI·에이전트 항목들과 층위가 다르다 — SmoothUI는 AI 컴포넌트 20종을 조각 단위로, Agent Elements는 메시지·도구 카드 등 부품을, Motiq는 에이전트 워크스페이스 전체를 준다. 여기는 그 중간으로 Chat Page와 Shell 수준의 골격을 주고 안을 직접 채우게 한다. 따라서 완성품을 원하면 다른 곳이 낫고, 구조만 참고해 직접 만들 거라면 코드가 적어 읽기 쉽다는 게 장점이다. Reasoning과 Tool은 모델의 추론 과정과 도구 호출을 화면에 드러내는 부분이라 에이전트를 만들 때 자주 필요한 지점이다. 라이선스 미표기.

저장된 8bitcn/ui(제작자 OrcDev)와 이름이 비슷하지만 제작자도 프로젝트도 다르므로 혼동하지 말 것. 갈리는 지점이 분명하다 — 8bitcn은 블록 35종처럼 페이지 조립용 덩어리에 무게를 두고, 여기는 shadcn 전 목록을 8비트로 옮기는 데 무게를 둔다. 따라서 Data Table, Sidebar, Command 팔레트, Resizable처럼 앱 내부 화면에 필요한 것까지 같은 양식으로 맞추려면 여기가 맞고, 랜딩을 빨리 세우려면 8bitcn이 맞다. 같은 제작자의 Neobrutalism components와 자매 프로젝트라 두 양식을 같은 구조로 바꿔 끼울 수 있다. 픽셀 유틸리티와 테마 문서를 따로 둔 점이 실용적이다. 주간 활성 사용자가 공개돼 있어 실사용 규모를 가늠할 수 있다. 8비트 폰트와 테두리는 가독성·접근성에 불리하므로 정보 밀도 높은 업무용 화면에는 여전히 부적합하다는 점은 8bitcn과 같다.

톤이 확실히 정해진 프로젝트를 위한 곳이다. 저장된 kit 대부분이 무난한 모던 톤이라 네오브루탈리즘을 제대로 다루는 항목은 여기가 사실상 유일하다 — 저장된 8bitcn(픽셀), Evil Buttons, industrial 계열과 같은 "양식 선택" 갈래에 들어간다. 5.4k 스타로 이 갈래에서는 규모가 크고 관리도 이어지는 편이라 실제로 쓸 만하다. shadcn/ui와 Base UI 위에 얹혀 있으므로 이미 그 프리미티브를 쓰는 프로젝트라면 스타일만 갈아끼우는 식으로 도입할 수 있고, 저장된 Base UI 계열(9ui, Space UI, PaceUI, UIAble)과 프리미티브를 공유한다. 차트와 별 모양까지 같은 양식으로 맞춰둔 점이 실용적 — 스타일 통일에서 보통 차트가 가장 먼저 깨진다. Tailwind v4를 요구하고 라이선스는 저장소 확인이 필요하다.