UI Components

shadcn/ui의 생김새와 사용법은 그대로 두고 밑바닥 헤드리스 레이어만 Ark UI로 바꾸고 싶을 때. 저장된 foundation 중 Radix 계열(shadcn 본가 등)과 Base UI 계열(coss ui 55종, basecn, Cubby UI 등)은 있는데 Ark UI 계열은 이게 처음이다. Ark UI는 상태 머신(Zag.js) 기반이라 Date Picker·Color Picker·Tags Input·Signature Pad·Tour처럼 Radix에 없는 복합 위젯이 기본 제공되는 게 갈아탈 이유가 된다.

프레임워크를 착각하지 말 것 — 홈 화면에 React·Solid·Vue·Svelte 로고가 나오지만 이건 Ark UI가 지원하는 범위이고, 이 사이트의 설치 가이드(Next·Vite·Astro·React Router·TanStack Start·Laravel)와 폼 가이드는 전부 React 기준이다. Vue·Svelte용 shadcn 대체를 찾는 거라면 여기가 아니다.

아직 1.0 전이다. 변경 이력이 2026-01 Beta 1 → 03 RC → 05 Post-RC로 이어지고 있어 컴포넌트 API가 바뀔 수 있다. 1인(Vinicius Vicentini) 프로젝트라는 점도 감안할 것. 다만 shadcn처럼 소스가 내 저장소로 복사되는 방식이라 업스트림이 멈춰도 쓰던 코드는 남는다.

차트 블록 70개는 shadcn 차트 예제와 구성이 거의 같다(area·bar·line·pie·radar·radial·tooltip). 차트가 필요해서 고르는 거라면 차별점은 아니다.

Base UI 위에서 shadcn 방식의 컴포넌트를 쓰고 싶을 때, 특히 실제 대형 제품이 쓰는 걸 원할 때. 저장된 Base UI 계열(basecn 61종, Cubby UI 68종, 9ui, Cnippet, Lumi UI)은 대부분 개인 프로젝트인데, 이건 Cal.com이 자사 제품의 공식 디자인 시스템으로 운영하는 것이라 유지 주체가 분명하고 별 10,641개로 규모도 가장 크다. 저장된 Geist(Vercel), Supabase Design System과 같은 "회사가 자기 제품에 쓰는 걸 공개한" 자리다.

라이선스를 반드시 구분해서 볼 것 — 저장소가 혼합 라이선스다. README가 밝히는 규칙은 "apps/ui와 apps/origin은 MIT, 나머지 디렉터리는 전부 AGPLv3"이고, 루트 LICENSE도 AGPL-3.0이다. 레지스트리 항목의 파일 경로(registry/default/ui/button.tsx 등)를 저장소와 대조해 보니 apps/ui/registry/… 와 일치하므로, shadcn CLI로 설치하는 컴포넌트는 MIT다. 반면 같은 저장소의 packages/ui(@coss/ui)는 package.json에 AGPL-3.0-or-later로 적혀 있다. 즉 "shadcn add로 받으면 MIT, 저장소의 패키지를 그대로 가져다 쓰면 AGPL"이라 경로를 잘못 고르면 서비스 전체에 소스 공개 의무가 생길 수 있다. 저장소 루트만 보고 MIT라고 판단하거나, 반대로 AGPL이라 못 쓴다고 판단하는 것 둘 다 틀린다.

사이트의 "510 particles"를 컴포넌트 수로 읽지 말 것. 실제 설치 단위는 55종이고 510개는 각 컴포넌트를 조합한 사용 예제다. 다만 그 예제가 충실해서 컴포넌트 하나의 여러 쓰임새를 바로 복사할 수 있다는 점은 장점이다.

Origin UI를 찾고 있었다면 여기로 오면 된다 — 같은 저장소의 apps/origin에 MIT 그대로 들어와 있다.

Tailwind를 쓰면서 클래스 이름이 길어지는 게 싫을 때, 또는 색 체계를 직접 짜기 전에 쓸 만한 테마가 필요할 때. 접근 방식이 저장된 다른 기반들과 아예 다르다 — Radix·Base UI·React Aria·Headless UI는 동작(키보드·포커스·ARIA)을 주고 스타일을 안 주는 반면, daisyUI는 스타일(클래스와 테마)을 주고 동작을 거의 안 준다. 그래서 둘은 대체재가 아니라 보완재다. 상호작용이 복잡한 화면이면 프리미티브 위에 daisyUI 클래스를 얹는 조합이 가능하다.

같은 "프레임워크 무관" 자리의 저장된 항목과 비교하면 — Basecoat는 shadcn 외형을 JS 없이 재현, HyperUI는 복붙 마크업 540종, daisyUI는 CSS 클래스 체계 자체를 제공한다. 셋 중 유일하게 "플러그인"이라 프로젝트 전체의 스타일 언어가 되고, 그만큼 되돌리기도 어렵다. 반대로 HyperUI는 복사한 마크업만 남으니 잠금이 없다.

테마 35종이 실질적인 값이다. 다크 모드를 포함해 색 토큰이 이미 맞춰져 있어 theme-controller 하나로 바꿀 수 있고, 커스텀 테마도 CSS에서 정의한다. 디자이너 없이 톤을 바꿔 가며 시험하기에 이만한 게 드물다.

컴포넌트 목록에 mockup-browser·mockup-phone·mockup-code·diff처럼 랜딩에서 쓸 조각이 기본으로 들어 있는 것도 기억해 둘 만하다. 보통 별도 라이브러리를 찾아야 하는 것들이다.

규모와 지속성은 이 컬렉션에서 상위권이다 — 별 42,527개, npm 주당 117만 다운로드, 2020년부터 유지되고 마지막 푸시가 2026-09-30이다. MCP 서버와 에이전트 스킬도 공식 제공한다.

주의: 의미 클래스를 쓰는 만큼 HTML만 봐서는 실제 스타일을 알 수 없고, 디자인을 세밀하게 깎으려면 결국 Tailwind 유틸리티로 덮어쓰게 된다. 즉 "클래스가 줄어든다"는 이점은 기본값을 그대로 쓸 때 가장 크다. 사이트가 내세우는 "클래스 88% 감소·HTML 79% 축소"는 자사 비교 예제 기준이니 그대로 받지 말 것. 그리고 사이트 상단에 Carbon 광고와 자사 유료 제품(BLUEPRINT MCP) 배너가 붙는다.

React를 쓰지 않는 스택에서 화면을 빨리 채워야 할 때. 이 라이브러리의 UI Components는 대부분 React 전용인데 이건 순수 Tailwind 마크업이라 Django·Rails·Laravel·Astro·순수 HTML 어디에나 그대로 들어간다. 저장된 Basecoat가 같은 자리인데 둘의 성격이 다르다 — Basecoat는 shadcn/ui의 외형을 프레임워크 없이 재현하는 쪽이고, HyperUI는 디자인 시스템을 표방하지 않고 그냥 조각을 많이 쌓아 둔 쪽이다. 수로는 HyperUI(540종)가 훨씬 많고 라이선스도 MIT로 분명하다(Basecoat는 라이선스 미표기).

카테고리별 두께가 고르지 않으니 기대치를 맞추고 들어갈 것. Application의 Charts 22·Vertical Menu 16·Loaders 14는 골라 쓸 만하지만 Pricing 2종, Testimonials 3종, Skip Links 3종처럼 사실상 한두 개뿐인 칸도 있다. 랜딩 페이지 전체를 여기서 완성하려 하면 가격표와 후기에서 막힌다.

Neobrutalism 묶음(74종)이 따로 있는 점은 기억해 둘 만하다. 저장된 BRUT/UI·Neobrutalism components는 React 레지스트리인데 이건 같은 미감을 마크업으로 주므로, React가 아닌 프로젝트에서 그 톤을 쓸 때 거의 유일한 선택지다.

한계: 마크업만 주기 때문에 드롭다운·모달·탭처럼 상태가 필요한 것은 동작을 직접 붙여야 한다. 사이트가 js.hyperui.dev를 따로 운영하지만 본체와는 별개이고, 접근성(키보드·ARIA)도 스스로 책임져야 한다. 상호작용이 중요한 화면이면 저장된 Headless UI나 Radix 같은 프리미티브 위에 올리는 편이 맞다.

2021년부터 이어져 별 12,252개에 마지막 푸시가 2026-09-26로 꾸준하다. 이 분야에서 드물게 오래 유지된 쪽이다.

Tailwind를 쓰면서 드롭다운·콤보박스·다이얼로그의 키보드와 ARIA를 직접 짜고 싶지 않을 때. 저장된 프리미티브 기반 정리에 이 항목이 빠져 있었는데, 네 번째 축으로 넣어 두면 선택이 정리된다 — Radix(생태계가 가장 큼, shadcn/ui의 토대), React Aria(접근성·국제화가 가장 깊음), Base UI(Radix 팀의 차세대 재설계), Headless UI(Tailwind 생태계 공식, 범위가 가장 좁음). 범위가 좁다는 게 단점만은 아니다 — 16종으로 폼과 오버레이에 집중해 배울 것이 적고, Tailwind Plus·Catalyst가 이 위에 올라가 있어 그 제품들을 쓰면 자연히 따라온다.

다만 지금 새로 고를 때는 유지보수 상태를 먼저 봐야 한다. React 패키지의 마지막 배포가 2026-04-07(v2.2.10)이고 저장소의 마지막 커밋은 2026-04-13인데 그것도 CI 설정 변경이다. 확인 시점(2026-10-03) 기준 약 6개월 멈춰 있고 미해결 이슈가 115개다. 아카이브되지는 않았지만 활발하다고 보기는 어렵다.

Vue 쪽은 더 분명하다. @headlessui/vue는 v1.7.23에서 멈췄고 마지막 배포가 2024-09-09로 2년이 넘었다. React가 v2로 넘어간 뒤 Vue는 v2 버전이 하나도 없고, 사이트의 Vue 링크도 /v1/vue로 간다. Vue 프로젝트라면 이걸 쓰지 말고 저장된 Reka UI(Vue용 스타일 없는 접근성 프리미티브 40종 이상)를 볼 것.

그래서 지금의 쓸모는 둘로 갈린다 — 이미 Headless UI를 쓰는 React 프로젝트라면 MIT에 28,767 stars로 충분히 안정적이고 당장 걷어낼 이유가 없다. 반면 새로 시작하면서 넓은 컴포넌트 범위나 활발한 갱신이 필요하면 Radix나 Base UI 쪽이 맞다.

참고로 React판은 내부에서 React Aria의 focus·interactions 패키지를 쓴다. 즉 저장된 React Aria 계열과 완전히 다른 토대가 아니라 그 일부를 깔고 Tailwind 친화적인 API를 얹은 구조다.

모션이 이미 맞춰진 컴포넌트 세트를 찾을 때, 특히 에이전트에게 UI를 맡길 계획이라면 볼 것. 무료 범위만으로도 세트 구실을 한다 — 104 컴포넌트 + 22 블록이 MIT이고 계정도 필요 없다. 저장된 freemium 레지스트리(SevenUI, easeUI, ai2, Zyeon UI)는 라이선스가 불분명한 경우가 많은데 이쪽은 무료=MIT, Pro=별도 라이선스로 문서에 명확히 갈라 두었다.

에이전트 지원이 이 라이브러리의 축이다. 레지스트리 항목으로 arc-skill을 배포해 SKILL.md 외에 design·motion·accessibility·composition·copy·responsive 규칙 파일과 완성 예제 셋을 한꺼번에 깔고, llms.txt에 "기존 Arc 컴포넌트를 먼저 쓰고 새로 짜지 말 것", "문서에 적힌 prop만 쓸 것", "모든 애니메이션에 reduced-motion 분기를 둘 것", "Pro에 접근 권한이 없으면 Pro 항목을 재구성하지 말고 무료 대안을 제시할 것" 같은 에이전트 규칙을 명시해 둔다. 저장된 iandefined/ui·Sona UI도 에이전트 대응을 내세우지만 규칙 파일을 이 정도로 쪼개 배포하는 경우는 드물다.

값을 하는 또 하나는 arc-foundation이다. 색·표면·라운드·그림자·강조색 토큰과 공통 모션 프리셋을 한 항목으로 묶어 모든 컴포넌트가 공유하므로, 몇 개만 골라 써도 톤이 어긋나지 않는다.

가격은 Pro 연 129달러 또는 일시불 199달러, 팀 10인 일시불 599달러다. 일시불이 있어 연 구독만 있는 곳보다 조건이 낫고, Pro 소스는 개인·상업·클라이언트 작업에 무제한이지만 라이브러리나 템플릿으로 재판매·재배포하는 것은 금지다.

주의 셋. 첫째, 가격 페이지의 "연 2,880달러 절약" 계산기는 디자인 8시간 × 시급 90달러 × 연 4프로젝트를 가정한 판매자 계산이니 그대로 받지 말 것. 둘째, 라이선스 문서 자체가 "변호사 검토 전 초안이며 출시 전 바뀔 수 있다"고 적혀 있다(2026-09-26 기준). Pro를 사기 전에 그 문구가 걷혔는지 확인하는 게 안전하다. 셋째, 저장소가 2026-09-24 개설로 아주 새롭다 — 별 217개로 출발은 좋지만 무료 범위가 유지될지는 지켜볼 일이다.

버튼이나 카드에 호버 연출 하나만 얹고 싶을 때. 12종뿐이라 규모로는 저장된 MicroKit UI(48종)나 ericts/ui(42종)에 못 미치지만, 이 모음은 다른 축에서 값을 한다.

효과마다 자기 타이밍을 숫자로 명시한다 — magnetic은 track 120ms·release 420ms, scramble은 arrival 700ms, blur-swap은 lead 150ms·release 640ms 식이다. 모션 라이브러리 대부분이 "부드럽게"로 뭉개는 부분을 값으로 적어 두기 때문에, 이 중 하나를 안 쓰더라도 자기 프로젝트의 호버 타이밍을 정할 때 참고표로 쓸 수 있다.

코드 조건도 깔끔하다. 항목당 파일 하나, 외부 의존성 0(react import만), registryDependencies도 없어서 다른 컴포넌트를 끌고 오지 않는다. 직접 열어 확인한 결과 prefers-reduced-motion 처리와 포인터 종류 감지가 들어 있어, 모션을 끈 사용자와 터치 기기에서 헛돌지 않는다. 저장된 호버 계열 중 Atropos(2KB 3D 패럴랙스)는 바닐라·Vue·Svelte까지 덮는 대신 효과가 하나이고, 이쪽은 React 전용이지만 종류가 열둘이다.

문서가 실무 함정을 먼저 알려 주는 점도 드물다 — magnetic-button은 "포인터 반응 영역이 시각적 경계보다 약 8px 넓으니 다른 상호작용 요소와 그만큼 띄우라"고 적어 둔다. 좁은 툴바에 나란히 놓으면 옆 버튼이 먹히는 문제를 미리 짚은 것이다.

사이트가 스스로 "대시보드가 아니라 랜딩 페이지용"이라고 못 박는데, 그 말이 맞다. 업무 화면에 스크램블이나 마그네틱을 깔면 방해만 되니 히어로·CTA·가격표처럼 보여 주는 자리에만 쓸 것.

주의: GitHub 별 3개에 2026-08 개설로 아주 작은 개인 프로젝트다. 다만 파일 하나를 복사해 소유하는 방식이라 프로젝트가 멈춰도 쓰던 코드는 남는다 — 이 구조에서는 지속성 위험이 거의 없다.

셰이더 배경이나 이미지 필터를 코드로 넣을 때 가장 먼저 볼 것. 저장된 셰이더·배경 계열이 이미 두껍지만 이쪽이 몇 가지 점에서 앞선다 — 별 3,514개로 그 계열에서 가장 검증됐고(UVCanvas·Solaris Sky·Ripple Shader 등은 소규모), Apache-2.0으로 라이선스가 명확하며(계열 상당수가 license-unknown), 코어 패키지의 런타임 의존성이 0이다.

계열 안에서의 자리: bg.ibelick·Aura Gradients는 CSS만 쓰는 최경량, Vanta.js는 WebGL 프리셋, UVCanvas는 배경 7종, Canvas UI는 HTML을 캔버스에 올려 효과를 입히는 방식, glfx.js는 이미지 효과 전용이다. Paper Shaders는 이 중 배경 생성과 이미지 필터를 한 패키지에서 둘 다 다루는 거의 유일한 경우라, 둘이 동시에 필요하면 라이브러리를 하나만 들이면 된다.

쓸 때 판단이 필요한 지점: 30종 중 7종은 이미지를 입력으로 받는 필터라 <img> 대신 캔버스로 그려진다. 접근성과 SEO를 고려해 alt 텍스트와 폴백을 따로 챙겨야 하고, 리스트에 여러 개를 깔면 GPU 부담이 커진다. 정적으로 충분한 자리에는 static-mesh-gradient·static-radial-gradient처럼 애니메이션 없는 버전이 따로 있으니 그쪽을 쓸 것.

prop 문서가 유난히 친절해서 각 값의 범위와 "이 값은 저 값이 0보다 커야 효과가 있다" 같은 의존 관계까지 표로 적어 둔다. 사이트에서 값을 바꿔 가며 확인한 뒤 그대로 옮기면 된다. 같은 회사의 디자인 툴 Paper에서 시각적으로 조정해 내보내는 경로도 있다.

버전이 0.0.81로 아직 0.0.x대다. 활발하지만 API가 굳었다고 보기 어려우니 버전을 고정하고 올릴 때 prop 변경을 확인하는 편이 안전하다.

랜딩 페이지를 처음부터 조립하지 않고 한 벌 가져와 고쳐 쓰고 싶을 때. 저장된 블록 레지스트리들과 단위가 다르다 — 7Ovr·uiception·Shadcnblocks는 섹션 조각을 골라 쌓는 쪽이고, 이건 명령 하나로 페이지 전체(파일 8~34개)가 깔린다. 대신 13종뿐이라 원하는 톤이 없으면 그걸로 끝이니, 먼저 프리뷰를 훑어 맞는 게 있는지 보고 없으면 조각 단위 레지스트리로 갈 것.

무료 템플릿 중에서는 조건이 좋은 편이다. MIT라 클라이언트 작업과 상업 프로젝트에 제한 없이 쓰고, 계정도 결제도 없다. 저장된 유료 템플릿(Launch UI, Nexus UI, ForgeUI, Ruixen)과 비교할 때 이 지점이 갈린다.

설치하면 바로 만나는 함정이 하나 있고 사이트도 FAQ에 적어 뒀다 — 템플릿이 Unsplash·Postimg·Webflow CDN 같은 외부 호스트에서 이미지를 불러오기 때문에 next.config.ts의 images.remotePatterns에 해당 도메인을 넣지 않으면 "Invalid src prop" 오류가 난다. 각 템플릿 페이지가 설치 명령 아래에 붙여 넣을 스니펫을 준다. 실무에서는 어차피 그 외부 이미지를 자기 자산으로 갈아 끼우게 되니, 그때 remotePatterns도 같이 정리하면 된다.

스택이 Next.js 16 + React 19 + Tailwind v4로 최신에 고정돼 있다. 구버전 프로젝트에 넣을 거면 Tailwind v4 전환부터 걸리므로 확인이 필요하다.

주의: 사이트가 템플릿을 "originals and internet-inspired"라고 스스로 표현하고, triggerly는 제목부터 "Linear-inspired"다. 레이아웃 구조를 참고한 수준으로 보이지만 색·타이포·문구를 그대로 두고 출시하면 원본 제품과 닮아 보일 수 있으니 브랜드를 자기 것으로 바꾸고 쓸 것. 1인 프로젝트라 유지보수와 추가 속도는 제작자 한 명에게 달려 있다는 점도 감안.

랜딩 섹션을 AI에게 시켜서 뽑을 때, 프롬프트를 처음부터 쓰기 싫을 때. 저장된 프롬프트 계열과 위치가 다르다 — GetLayers는 레이어 단위 유료 템플릿, Cue Kit은 컴포넌트에 제작 프롬프트를 곁들인 모션 라이브러리, Zyeon UI는 프롬프트가 딸린 대형 shadcn 레지스트리다. 이쪽은 코드 배포가 목적이 아니라 프롬프트 자체가 상품이고, 대신 결과물 HTML을 같이 보여 줘서 프롬프트가 실제로 뭘 만들어 내는지 사기 전에 확인이 된다.

값을 하는 지점은 프롬프트의 해상도다. "히어로 섹션 만들어 줘" 수준이 아니라 배경색, 자간, 요소 순서, data 속성 이름, 상호작용 시 JS가 할 일까지 문장으로 박아 둔다. 그래서 AI가 매번 다른 걸 뱉는 문제가 줄고, 원하는 부분만 고쳐서 재사용하기도 쉽다. 프롬프트 쓰는 법 자체를 배우는 용도로도 읽을 만하다.

스택을 확인할 것. 순수 Tailwind HTML이라 프레임워크를 가리지 않는 대신 React 컴포넌트로 바로 떨어지지는 않는다. shadcn 프로젝트라면 저장된 대형 블록 레지스트리(7Ovr, uiception, Shadcnblocks)가 더 맞고, 이쪽은 AI에게 처음부터 시킬 때나 Astro·정적 사이트처럼 마크업만 필요할 때 쓴다.

주의: 라이선스 표기가 아예 없다. 페이지에 붙어 있는 완성 HTML을 그대로 복사해 쓸 권리가 명시돼 있지 않으므로, 상업 프로젝트에 소스를 통째로 옮길 거면 제작자에게 확인하는 게 안전하다. 프롬프트(문장)를 AI에 넣어 직접 생성한 결과물은 상대적으로 부담이 적다. 제작자 정보도 사이트에 없고 /about과 /license가 둘 다 404라 연락처를 찾기 어렵다는 점도 감안할 것.

스크롤 연출이나 히어로 전환처럼 직접 만들면 하루씩 잡아먹는 GSAP 작업을 사서 끝내고 싶을 때. 저장된 GSAP 계열(Tween UI, Cue Kit, Sora UI, Hyperiux Vault, Emerald UI, Morphiq)과 결정적으로 다른 점 두 가지가 있다 — 같은 컴포넌트를 React·Vue·순수 HTML 세 형태로 주기 때문에 Nuxt나 Astro, 심지어 프레임워크 없는 정적 사이트에도 그대로 들어가고, GSAP 생명주기(cleanup, context, ScrollTrigger 해제)를 직접 다루지 않아도 되게 감싸 놨다. 대부분의 무료 모음이 React 전용인 것과 대비된다.

다만 이건 구독이다. 월 29유로(분기 결제)이고 연 249유로이며 평생 등급이 없다. 구독을 끊어도 이미 붙여 넣은 코드는 계속 쓸 수 있다고 명시하지만 새 컴포넌트와 업데이트는 끊긴다. 프로젝트 하나를 위해 산다면 연 결제보다 분기 결제가 맞고, 반대로 상시로 랜딩을 찍어 내는 작업이면 연 결제가 낫다. Landmark Kits(Reveal 149유로)는 구독과 별개의 일시불 영구 라이선스라 섞이지 않는다는 점도 계산에 넣을 것.

사기 전에 무료 13종을 먼저 보면 된다. 필터에 Free가 있어 바로 걸러지고, 이메일만 넣으면 받는 스타터 팩도 있다. 코드 품질과 GSAP 래핑 방식이 취향에 맞는지는 여기서 판단이 가능하다.

짚어 둘 것: GSAP 자체는 이제 상업 이용을 포함해 무료이므로 여기서 내는 돈은 GSAP 라이선스가 아니라 이 컴포넌트들의 제작비다. 즉 같은 연출을 시간 들여 직접 짜는 선택지가 항상 열려 있고, 사이트의 "직접 만들면 8시간 640유로" 같은 비교표는 파는 쪽의 계산이니 그대로 받아들이지 말 것. 실제로 필요한 게 한두 개뿐이라면 저장된 무료 GSAP 모음을 먼저 훑는 쪽이 싸다.

스튜디오 이력(코카콜라·BodyArmor·파워에이드)은 사이트 주장이며, 연출 성향도 그쪽이다 — 브랜드 캠페인성 화려한 모션이 중심이고 대시보드나 업무용 화면에 쓸 조각은 거의 없다.

랜딩 페이지와 콘텐츠 섹션을 한곳에서 대량으로 훑고 싶을 때. 카테고리 분포를 보면 자기 소개("animation-first")와 실제 무게중심이 다르다 — 섹션·블록 계열(content-blocks 96, core-landing-pages 89, grids 52, navigations 54)이 291개로 가장 크고 연출 계열(backgrounds 57, animations 54, special 63, media 43, crazy 24)이 241개, 순수 프리미티브는 68개뿐이다. 즉 프리미티브 세트 대용이 아니라 랜딩·마케팅 화면을 빨리 채우는 쪽이다.

라이선스를 먼저 봐야 한다. npm의 uilora 패키지는 MIT지만 그건 CLI일 뿐이고, 컴포넌트는 약관의 커스텀 라이선스를 따른다 — 상업적 사용·클라이언트 작업·SaaS·사내 도구에 쓰고 소스를 수정하는 것은 허용되지만, 컴포넌트를 독립된 UI 라이브러리나 컴포넌트 팩으로 재배포하는 것은 무료든 유료든 서면 동의 없이 금지다. 저장된 gridcn과 같은 종류의 제약이라, 자기 레지스트리나 사내 공용 라이브러리로 재포장할 계획이면 걸린다.

함정 둘. 첫째, "One source, dual runtime"과 "Full mobile component library"를 내세우지만 React Native 쪽은 실측 24개(버튼 4·카드 8·로더 3·토스트 6·스플래시 3)뿐이다. 모바일을 이유로 고르면 안 되고, React Native가 목적이면 저장된 tetra ui(44종 전용)를 먼저 보는 게 맞다. 둘째, 사이트·llms.txt의 700+는 sitemap 실측 624와 맞지 않는다.

브랜드 주의: 모바일 스플래시가 netflix-intro-splash·instagram-splash로 실제 서비스의 인트로를 재현한 것이고, crazy-components에도 특정 사이트를 흉내 낸 항목이 있다. 그대로 출시하면 상표·저작권 문제가 되니 참고용으로만 보고 자기 브랜드로 바꿔 쓸 것.

비슷한 대형 모음으로는 Beste UI(2,095 블록·의미 검색), Zyeon UI(1,014항목), Shadcnblocks, UIAble(790종)이 이미 있다. 이쪽의 차별점은 MCP 서버를 직접 운영해 에이전트가 검색·미리보기·설치까지 한다는 것과, 무료 범위가 넓다는 점이다(Pro는 pro.uilora.com에서 개발 중이고 코어는 영구 무료라고 밝힌다 — 약속이므로 시간이 지나면 다시 확인할 것).

스크린샷에 주석을 달거나 프레임을 마크업하거나 "여기가 잘못됐다"고 동그라미 치는 기능이 필요할 때. 제작자가 창작 도구를 만들다 같은 걸 반복해서 짜다가 패키지로 뽑았다고 밝히고 있고, 실제로 그 용도에 맞춰져 있다.

선택 기준은 사이트가 직접 적어 뒀다 — 부품을 조립해 그리기 도구를 만들고 싶으면 tldraw나 Excalidraw가 낫고, 이건 기본값 그대로 출시할 수 있게 의견을 박아 둔 완성형이다. 저장된 것 중에는 ilinxa pro-ui의 blackboard·flow-canvas와 Mischief UI의 주석 레이어·서명 패드가 같은 영역인데, 둘 다 큰 레지스트리의 일부라 전체를 끌어와야 한다. 캔버스 하나만 필요하면 이쪽이 가볍다.

붙일 때 걸리는 것들: styles.css를 별도로 import해야 하고, 부모에 height가 없으면 아무것도 안 보인다. "React 외 의존성 없음"은 peer dependency가 없다는 뜻이고 unpacked 365 kB라 번들이 작다는 말은 아니다. 획 데이터가 평문이라 onChange로 받아 그대로 저장하고 setStrokes()로 되돌려 넣을 수 있는데, setStrokes()는 undo 이력까지 교체하니 자동 저장과 되돌리기를 같이 쓸 때 순서를 확인해야 한다.

주의: v0.1.2에 별 323개로 초기 단계이고 문서에 접근성(키보드만으로 그리기, 스크린리더) 언급이 없어 접근성 요건이 있는 화면에는 검증이 필요하다. 외형은 Apple 마크업 도구의 스큐어모피즘에서 가져왔다고 본인이 footnote에 밝혀 뒀으니, 제품 톤과 안 맞으면 look을 studio로 바꾸거나 chrome:false로 툴바를 직접 만드는 쪽을 보면 된다.

버튼·토글·성공/실패 같은 순간에 소리 피드백을 얹고 싶을 때. 이미 저장된 Foley(usefoley.dev)와 정면으로 겹치니 둘 중 하나를 고르는 기준을 적어 둔다 — 큐 종류가 더 많고 사운드 디자이너 툴까지 필요하면 Foley(28종, 7.6 kB), 더 작고 더 널리 검증된 쪽을 원하면 Cuelume(17종, 5 kB 미만, 별 1,834개 대 105개)이다. 둘 다 오디오 파일이 없어 네트워크 요청도 음원 라이선스 문제도 없고 agents.md를 제공한다.

함정: 사이트와 실제 패키지는 17종인데 /agents.md는 14종 기준으로 쓰여 있어 pulse·scan·arrival이 빠져 있다. 코딩 에이전트에게 agents.md만 물리면 그 셋을 모른 채 작업하므로 큐 목록은 sounds 배열이나 사이트에서 직접 확인시켜야 한다.

실무에서 값을 하는 지점은 기본 제공되는 안전장치다 — 호버 소리는 전역 150 ms 스로틀이라 메뉴를 쓸어도 시끄럽지 않고, 호버·프레스는 fine pointer(마우스)에서만 울리며, AudioContext는 지연 생성된 하나를 공유하고 브라우저가 허용할 때 자동 재개한다. 잘못된 큐 이름·차단된 자동재생·Web Audio 미지원은 예외가 아니라 조용한 no-op이라 방어 코드가 덜 필요하다.

주의: 브라우저 정책상 사용자의 첫 상호작용 전에는 소리가 나지 않는다. setEnabled()·setVolume()은 값을 저장해 주지 않으므로 음소거·볼륨 설정의 영속화는 앱이 직접 해야 하고, 업무용 화면이라면 기본 꺼짐 + 사용자가 켜는 방식이 안전하다. 랜딩의 실명 후기와 "Vercel이 fx에서 사용" 표기는 사이트 주장이니 도입 근거로 삼기 전에 직접 확인할 것(Foley는 후기가 합성이라고 스스로 밝힌 전례가 있다).