언제: Apple의 Liquid Glass 느낌을 "흐림 필터 흉내"가 아니라 실제 굴절로 웹이나 Electron 데스크톱 앱에 넣고 싶을 때. 툴바·탭 바·메뉴처럼 콘텐츠 위에 떠 있는 크롬 UI에 맞다. 비교: 저장된 liquefy-ui(34종, WebGL)·Plasma UI(WebGL 패널 하나)와 같은 목표지만, 여기는 WebGPU 기반에 재질·모션 파라미터가 더 체계적이고 Electron을 명시적으로 지원한다. 같은 WebGPU 토대인 vgpu(Tools)와 짝. 주의: 공개 하루 된 v0.0.x라 API가 바뀔 수 있다. React 19 이상, HTTPS(또는 localhost)와 WebGPU 어댑터가 필요하고 Safari에 알려진 렌더링 문제가 있다 — WebGPU 미지원 환경용 대체 스타일을 따로 준비해야 한다.
언제: Magic UI·Aceternity에서 익숙한 종류의 이펙트(오로라 배경·텍스트 스크램블·글로우 버튼·틸트 카드·3D 오브젝트)를 가볍게 하나씩 가져오고 싶을 때. mesh-gradient처럼 외부 의존성 없이 파일 하나로 떨어지는 것들이 있어 들여오기 부담이 적다. 비교: 구성이 Magic UI·Aceternity·React Bits와 거의 겹치고 규모는 훨씬 작다 — 그쪽에서 먼저 찾고, 없을 때 보조로. 3D 오브젝트 몇 종은 ThreeUI 계열과 겹친다. 주의: "open source"라 적혀 있지만 GitHub 조직(kraavon)에 공개 저장소가 없고 라이선스 표기도 찾지 못했다 — 상업 프로젝트에 넣기 전 확인 필요. 전체 목록 JSON이 없어 각 컴포넌트 페이지에서 슬러그를 확인해야 한다.
언제: 랜딩·AI 제품 화면에 들어갈 움직이는 조각을 shadcn 방식으로 바로 설치하고 싶을 때. 무료 233종이 MIT로 깔끔하고, 키트 단위로 같은 톤의 조각을 묶어 둬서 "한 디자이너가 만든 것처럼" 페이지를 맞추기 쉽다. 에이전트에게 디자인 가이드 문서를 먼저 읽히고 조립시키는 흐름을 공식으로 지원하는 점이 특이. 비교: 같은 Motion 이펙트 계열인 Magic UI·React Bits(무료 MIT)와 겹치는 영역이 크다. 유료로 보면 All-Access 49달러는 Hover.dev(49달러)와 같고 BuouUI 평생 79달러보다 싸지만 12개월 한정 업데이트. 무료 웹 도구(배경 제거·압축·OG 이미지)는 Design 쪽 단일 도구들 대신 한곳에서 쓸 수 있는 부록. 주의: 프리미엄은 레지스트리에 없어 zip 다운로드로 받고, 재판매·재배포 금지. 홈의 X 후기들은 "축하해요" 류 짧은 반응이라 품질 근거로 보긴 어렵다.
언제: 평범한 컴포넌트에 "만지는 맛"을 얹고 싶을 때 — 토글·슬라이더·토스트·시트처럼 매일 쓰는 조각의 물리적인 손맛 버전이 필요할 때 한 개씩 골라 설치. 각 항목 설명이 "어떻게 움직이는지"를 한 문장으로 적어 둬서 인터랙션 아이디어 사전으로 읽어도 쓸모 있다. Spring playground·Easing editor는 모션 값을 튜닝할 때 학습 도구로 좋다. 비교: 같은 결의 마이크로 인터랙션 모음인 UICapsule(52종)·Skecher UI(26종)·Morphiq(20종)보다 수가 훨씬 많고 MIT로 깔끔하다. 이펙트·배경 중심의 Magic UI·React Bits와는 결이 달라 "기능 컴포넌트의 손맛" 쪽. 주의: 본인이 "라이브러리가 아니라 학습용 실험"이라고 못박는다 — 접근성·엣지 케이스·API 안정성 보장이 없으니 프로덕션에 넣을 땐 코드를 읽고 다듬어서 쓸 것. 2주 만에 204종을 만든 초기 1인 프로젝트라 품질 편차가 있을 수 있다.
언제: 히어로 배경·이미지 처리·페이지 전환을 셰이더로 만들고 싶은데 GLSL을 직접 쓰기 싫을 때. 효과를 컴포넌트처럼 겹쳐 쌓는 방식이라 "그라디언트 위에 필름 그레인, 그 위에 커서 물결" 같은 조합을 코드 몇 줄로 만든다. 에디터에서 눈으로 맞추고 코드로 뽑는 흐름이 무료라는 게 가장 큰 장점. 비교: 저장된 Paper Shaders(30종, Apache-2.0, 의존성 0·WebGL)보다 범위가 6배 넓고 프레임워크 지원도 넓다. 대신 WebGPU 전제라 구형 브라우저·일부 기기 대응은 Paper Shaders·Vanta 같은 WebGL 쪽이 안전하다. 디자인 툴로 셰이더를 만드는 건 Unicorn Studio(Design)와 겹치지만 이쪽은 결과물이 오픈소스 코드다. 주의: WebGPU 지원 브라우저가 필요하니 사이트의 System check 페이지로 대상 환경을 먼저 확인할 것. 오픈소스 전환 직후(커밋 12)라 저장소 이력이 짧다. 섹션·프리셋은 Pro 전용.
언제: 랜딩에 눈에 띄는 연출 조각(파티클·카운터·독·배경 이펙트)을 빠르게 붙이고 싶을 때 훑어볼 곳. 네오브루탈리즘 톤의 Brutal UI 35종은 저장된 것 중 드문 스타일이라 그 톤이 필요하면 바로 여기. 비교: 같은 Framer Motion 이펙트 계열 무료 대안이 많다 — Magic UI·React Bits(MIT)와 Aceternity(무료분)가 규모가 커서 먼저 볼 것. 유료로 간다면 Hover.dev(49달러)·The UI Factory(25유로)보다 비싸고, 79달러 Lifetime도 Ruixen Pro(99달러) 근처다. 주의: ① 컴포넌트 목록 다수가 Pro라 무료로 쓸 수 있는 범위가 생각보다 좁다. ② 유료 템플릿 Standard 라이선스는 "최종 제품을 무료로 배포"하는 경우만 허용 — 수익 제품엔 상위 라이선스 확인 필요. ③ 홈의 후기가 같은 이름·회사(@Tencent·@Huawei)를 반복하는 형태라 신뢰 근거로 보기 어렵다. ④ 상시 할인 카운트다운 배너 등 판매 압박이 강하다.
언제: 웹과 모바일 앱을 같은 컴포넌트 코드로 함께 만들어야 할 때 — Next.js 웹과 Expo 앱을 한 디자인 시스템으로 묶는 대표 선택지다. 저장된 RN 토대들(BNA UI·PanelUI·tetra ui)은 Expo 전용이고, 웹까지 같은 코드로 가는 건 여기뿐이다. 비교: 규모·유지 체력은 저장된 RN 계열 중 압도적(GeekyAnts 회사 운영, 릴리스 610). 반면 컴포넌트 수 자체는 41종 안팎의 기본기 위주라 화려한 모션은 Reacticx, 앱 화면 레퍼런스는 Native Bloom에서 보충할 것. 웹 전용 프로젝트라면 shadcn 계열이 더 자연스럽다. 주의: 메이저 버전이 자주 바뀌었다(v1 styled → v2 NativeWind → v5 Tailwind v4/UniWind). 블로그·검색 결과 다수가 v2 기준이라 문서 버전을 확인하고 따라 할 것. 사이트 곳곳에 자사 유료 서비스(pro 템플릿·RapidNative·theappmarket) 배너가 붙어 있다.
언제: 레트로·게임풍 페이지나 사이드 프로젝트에서 shadcn 사용법은 그대로 두고 외형만 픽셀로 바꾸고 싶을 때. import 경로만 @/components/ui/pixelact-ui/로 바꾸면 되는 구조라 기존 shadcn 화면을 부분적으로 갈아 끼우기 쉽다. 비교: 같은 8비트 계열인 8bitcn/ui(121항목, 블록 포함)나 8bit/cnlibs(58종)보다 작다 — 종 수·블록이 필요하면 그쪽, 원본 shadcn과의 차이를 최소로 두고 싶으면 이쪽. 터미널·CRT 톤은 Afterglow, 구형 Mac은 nostalgia-ui. 주의: 2026-10-07 기준 사이트의 /docs 경로가 404라 문서는 GitHub README로 봐야 한다. 마지막 푸시가 7월 말로 2개월 넘게 정체. 픽셀 폰트·CSS를 전역 styles.css로 함께 깔기 때문에 다른 스킨과 한 페이지에 섞으면 스타일이 새어 나갈 수 있다.
언제: 오버레이가 여러 겹 쌓이는 제품 화면(설정 → 팝오버 → 다이얼로그)에서 깊이감과 모션을 손으로 맞추기 싫을 때. 표면 고도와 스프링 강도를 토큰으로 묶어 두어서 컴포넌트를 섞어도 일관된다 — 이 체계 자체가 핵심이라 foundation으로 뒀다. 비교: Base UI 기반이라 9ui·Space UI·PaceUI·Ruixen(Base 모드)과 프리미티브를 공유한다. 차트 13종은 덤으로 쓸 만하지만 차트가 주목적이면 evilcharts·chartcn 쪽이 넓다. 폼 입력 다양성은 Hirael이 더 두껍다. 주의: 1인 프로젝트(2026-03 시작, 스타 27)라 규모가 작고, 고도·모션 체계를 쓰려면 surface-context/motion-tokens lib를 같이 들여와야 해서 다른 kit와 섞을 때 토큰이 충돌할 수 있다.
랜딩·포트폴리오를 만들면서 블록뿐 아니라 그 주변 재료(기기 목업, 기술 스택 로고, 배경 패턴, 장식용 도형)까지 한 출처에서 맞춰 쓰고 싶을 때. 저장된 kit 중 이렇게 코드·SVG 자산·Figma 디자인을 한 사이트에서 같이 주는 곳은 드물다. 특히 쓸모가 큰 건 세 가지 — · 애플 기기 목업 6종(iPhone·iPad·MacBook 등): 스크린샷을 기기 프레임에 넣는 컴포넌트라 제품 소개 섹션에 바로 쓴다. 저장된 Opensource UI의 기기 목업과 같은 자리. · CSS 배경 패턴 약 500종: 클릭 한 번으로 CSS를 복사하는 방식이라 bg.ibelick(20종)·Aura Gradients(206종)보다 폭이 넓다. · 기술 로고 282종: npm 패키지(@aliimam/logos)로도 받을 수 있어 "사용 기술" 섹션에 쓰기 좋다. 저장된 svgl·theSVG가 더 크지만 프레임워크·라이브러리 쪽은 여기도 충분하다.
반대로 "컴포넌트 라이브러리"로 기대하면 실망한다 — 레지스트리 324항목 중 162개는 shadcn 기본 컴포넌트를 꾸민 예제이고, 고유 UI는 14종뿐이다. 블록도 38종이라 Shadcnblocks·Ruixen 같은 대형 블록 모음을 대체하진 못한다.
주의 넷.
kit로 둔 이유: 코드 블록·UI·자산이 섞인 통합 허브라 특정 역할 하나(section·asset)로 좁히면 다른 절반이 묻힌다.
대시보드에 "현재 값이 범위 안 어디쯤인지"를 한눈에 보여야 할 때 — CPU·메모리 사용률, 목표 달성률, 온도·습도, 속도·RPM, 배터리·연료, 타이머처럼 최소~최대가 정해진 단일 값. 저장된 data 항목들(dashboardcn, livedocs, Evil Charts, Rosen Charts 등)은 막대·선·영역 같은 시계열 차트가 중심이고 게이지는 있어도 반원 하나 정도인데, 이건 게이지만 다루는 대신 눈금·구간 색·바늘·중심 값 표시를 따로 조합하게 해 둬서 계기판·스마트홈 패널·운동 링·나침반까지 같은 부품으로 만든다는 게 다르다.
쓰는 방법은 두 가지다. Studio에서 모양을 맞춘 뒤 코드를 가져오거나, 사이트가 제안하듯 에이전트에게 "@/components/gauge 프리미티브로 0~240 속도계, 상단 빨간 구간" 식으로 시키면 된다. 부품이 컴포지션 방식이라 에이전트가 조립하기 쉬운 구조다.
값 변화는 내장 스프링 애니메이션으로 움직이고 GaugeControl로 드래그 입력도 받을 수 있어 표시용뿐 아니라 다이얼형 입력(온도 설정 등)에도 쓸 수 있다. 다만 SVG 텍스트로 값을 그리므로 스크린리더용 aria 레이블(현재 값·범위)은 직접 붙여 확인할 것.
2026-09 말에 시작한 신생 프로젝트(1인)라 API가 바뀔 수 있다. 소스가 내 프로젝트로 복사되는 방식이라 업스트림 변화의 영향은 적다.
https://github.com/Yousuf-developer/Viscose-carousel 라이브 데모: https://viscose-carousel.vercel.app/ 제작자: Yousuf Soomro. 사용자 제공 데모와 저장소의 homepage를 대조했고 실제 Carousel.jsx 및 관련 파일을 확인했다.
일반 이미지 슬라이더보다 재질 표현에 집중한 단일 포트폴리오 캐러셀이다. 큰 원형 링 대부분이 화면 밖에 놓이고, 일부 호를 따라 작품이 지나간다. 도입부에는 중앙에 모인 카드들이 좌우로 갈라지며 실 같은 연결부를 끌고 나온다. 카드들은 각각의 DOM 이미지가 아니라 전체 화면 fragment shader 안에서 그린 SDF 형태다. smooth minimum으로 인접 표면을 합치고, 별도의 연결 형태를 늘리고 끊어 점성이 있는 재질처럼 표현한다. 커서 주변의 표면 변형·카드 기울기와 연결부, 가장자리 굴절, View 커서 태그도 이 링 셰이더에 포함된다. projects.js 실측은 Matchday부터 MVN까지 18개다. 이름·분야·연도는 예시 데이터이며 18종의 독립 컴포넌트가 아니다.
README는 휠·드래그·터치 스와이프로 링을 회전시키고 카드가 정면에서 멈추는 동작을 설명한다. Carousel.jsx에 wheel·pointerdown/move/up/cancel·click 이벤트가 있다. 실제 브라우저에서 캔버스, 작품 카드와 좌우 메타데이터, 18개 이름 목록이 렌더링되는 것을 확인했다. 모든 입력·뷰포트·기기 성능을 실행 시험한 것은 아니다.
완성 npm 라이브러리·shadcn 레지스트리보다 공개 Next.js 프로젝트를 복제해 수정하는 방식이다. 실제 저장소 주소를 사용한다: git clone https://github.com/Yousuf-developer/Viscose-carousel cd Viscose-carousel npm install npm run dev
README는 Node 20 이상을 요구한다. package.json에서 Next 16·React 19·Three.js·GSAP·lil-gui, 개발 의존성 Tailwind v4를 확인했다. 이 세션에서는 설치·빌드하지 않았다. 콘텐츠는 projects.js, 모양·반응형·타이밍·커서·연결부·유리 효과는 params.js와 관련 모듈을 함께 수정한다. 개발 모드의 lil-gui는 README 기준 약 136개 조절값을 제공하고 NODE_ENV 조건부 동적 import로 로드된다. 조절값의 픽셀 기준은 참조 창 크기에 맞춰 정규화돼 있어 README가 먼저 기준 창을 맞추도록 안내한다.
README가 작업 중인 실험으로 명시한다.
LICENSE에서 소스 코드는 MIT임을 직접 확인했다. GitHub 자동 분류의 Other/NOASSERTION 대신 실제 라이선스 내용을 기준으로 기록한다. LICENSE는 public/ 에셋을 이 MIT 적용 범위에서 제외한다.
확인일: 2026-10-05. GitHub 소스: https://github.com/Yousuf-developer/Viscose-carousel 동작·설치·현황: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/README.md 재질 구현 설명: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/BREAKDOWN.md 메인 컴포넌트: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/components/Carousel.jsx 셰이더: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/components/shaders/planeShaders.js 라이선스·에셋 조건: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/LICENSE
Nikhil Singh(nikhils4)의 웹용 React 모션 UI 라이브러리. 런타임 UI 패키지를 통째로 설치하는 방식보다 원하는 컴포넌트의 소스를 프로젝트에 가져와 직접 수정하는 방식이다. 실측 /r/registry.json은 55항목: registry:ui 52종 + registry:block 3종. 홈페이지의 "55 components"는 블록을 포함한 총합이다. 문서 범주별 합계도 55다.
공식 요구 환경은 React 19·Tailwind CSS v4·Motion. 대부분 Motion이 필요하고 일부는 cn 클래스 헬퍼도 사용한다. npx shadcn@latest add https://uibeats.com/r/border-beam.json 또는 컴포넌트 문서의 소스를 복사하고 명시된 의존성을 설치한다. shadcn CLI는 파일과 의존성을 함께 설치한다. 이름에 Beats가 있지만 오디오·효과음 라이브러리가 아니다.
실제 공개 JSON 표본에서 확인한 차이:
공식 README는 UI 52종 각각 /playground/<category>/<name>에서 props를 조절하고 변경한 값만 포함한 스니펫을 복사할 수 있다고 설명한다. Motion Studio는 cubic-bezier와 스프링 stiffness·damping·mass를 조절해 Motion transition 또는 CSS를 가져오는 도구로 안내된다. 별도 페이지의 컴포넌트 선택·props 컨트롤·스니펫도 확인했다. MCP 패키지 @uibeats/mcp는 search_components, get_component, list_components, get_install_command 4개 도구를 제공한다. 설정 예: npx -y @uibeats/mcp 에이전트가 URL로 읽을 수 있는 /llms.txt, /docs/<category>/<name>.md, /r/components.json도 제공한다. MCP나 패키지를 이 세션에 설치하지 않고 제공 방식만 기록한다.
공식 README는 전체 레지스트리가 prefers-reduced-motion을 고려하고 CI로 검사한다고 설명한다. tests/reduced-motion.test.ts에 preference 조회·사용 여부와 client directive 검사 코드가 있음을 확인했다. 위의 레지스트리 표본 5종에도 useReducedMotion이 들어 있다. 감소 처리 방식은 항목별로 다르다. README 예시는 입장 효과를 즉시 정착시키고, 자동 재생을 멈추되 수동 동작을 허용하며, Flip Card는 뒷면 전환을 즉시 처리한다고 설명한다. 실제 전 컴포넌트의 브라우저 동작·접근성·성능을 시험한 것은 아니다.
확인일: 2026-10-04. 공식 LICENSE.md와 컴포넌트 Markdown에서 MIT 확인. 공식 사이트: https://uibeats.com/ 공개 레지스트리: https://uibeats.com/r/registry.json 설치: https://uibeats.com/docs/getting-started/installation CLI: https://uibeats.com/docs/getting-started/cli MCP: https://uibeats.com/docs/getting-started/mcp Motion Studio: https://uibeats.com/motion-studio 저장소: https://github.com/nikhils4/ui-beats 라이선스: https://github.com/nikhils4/ui-beats/blob/main/LICENSE.md 모션 감소 검사: https://github.com/nikhils4/ui-beats/blob/main/tests/reduced-motion.test.ts
Eduard Bodak이 만든 작은 버튼 모션 라이브러리·실험 갤러리. 공개 페이지의 데모 링크를 세면 43종이다. Webflow 복제 CTA와 맨 위로 이동 버튼은 제외했다. GSAP 표시 3종(GSAP-Teleport, GSAP Color, GSAP-FUN), 나머지 40종은 CSS 중심의 버튼 연출이다. 31종은 개별 button-* 클래스, 12종은 .button-default에 is-* 변형 클래스를 붙인 구조다. 별도 입력·체크박스·라디오 컴포넌트는 FAQ의 향후 계획으로만 안내한다.
공식 Webflow Cloneable: https://webflow.com/made-in-webflow/website/tiny-mighty-buttons FAQ는 Webflow에서 사이트를 복제하고 구조·스타일을 살펴보라고 안내한다. 공통 스타일은 상단 global-button-css, 개별 버튼의 CSS는 해당 버튼 앞의 이름 붙은 embed에 있으며 나머지 기본 스타일은 Webflow에 설정돼 있다. 필요한 스타일을 함께 확인해 자신의 클래스·마크업으로 재구현한다. 개발자 도구로 검사하는 경로도 안내한다. 간편 복사 버튼은 학습·재구현을 유도하려고 제공하지 않는다고 설명한다. npm 설치, React 컴포넌트, shadcn 레지스트리, GitHub 저장소 경로는 확인되지 않았다. GSAP 3종은 SplitText·CustomEase를 사용한다. 실제 데모 페이지에는 Webflow 런타임·jQuery·Locomotive Scroll·SplitType도 로드된다. 사이트 전체의 의존성과 특정 CSS 버튼에 필요한 의존성은 구분한다.
CSS에서 hover: hover / pointer: fine 조건, focus-visible 스타일, prefers-reduced-motion 대응을 확인했다. 공통 모션 감소 규칙은 CSS 애니메이션·전환 시간을 줄인다. GSAP 버튼은 pointerenter와 focus 이벤트로 실행한다. 이를 전체 버튼의 모든 브라우저 접근성 검증으로 해석하지 않는다. 데모 43종은 a 링크로 렌더링된다. 실제 액션 버튼으로 쓸 때는 FAQ가 안내하는 button 요소와 type="button"으로 바꾸고 마크업을 점검한다. 페이지는 button 안에 div를 넣지 말라는 주의도 표시한다. CSS vendor prefix는 작성자가 생략했다고 설명하므로 적용 환경에 맞춰 보완한다. 문서·공개 소스를 확인했으며 실제 브라우저별 실행 시험은 하지 않았다.
확인일: 2026-10-04. 공식 페이지의 최신 기재 변경 기록: v0.39 / 2025-05-07, GSAP 버튼 3종 추가. 이는 패키지 배포 버전이 아닌 사이트 변경 기록이다. Webflow 페이지의 Clone in Webflow 링크 확인. 제작자 사이트·프로젝트 페이지에서 별도 MIT 등 코드 라이선스 선언은 확인되지 않았다. 공식 데모·FAQ·Changelog: https://tiny-mighty-buttons.webflow.io/ 공식 복제 페이지: https://webflow.com/made-in-webflow/website/tiny-mighty-buttons 제작자: https://webflow.com/@eduardbodak
Artur Bień의 작은 JavaScript 풍선 효과 라이브러리. 성공·완료·생일·출시 같은 이벤트에서 화면 전체에 잠깐 축하 연출을 얹는 용도로 적합하다. 일반 SVG 풍선과 풍선처럼 부풀린 텍스트·이모지 두 모드이며, UI 컴포넌트 갤러리나 상시 배경 파티클 엔진은 아니다.
npm install balloons-js import { balloons, textBalloons } from "balloons-js";
balloons(); textBalloons([{ text: "🎉축하해요", fontSize: 120, color: "#ff4081" }]);
일반 풍선은 뷰포트 크기로 크기·개수를 계산하고 최소 7개를 띄운다. 노랑·빨강·파랑·초록·보라의 5가지 색 조합, 3D transform과 원근, 기울기·블러로 거리감을 만든다. 각 풍선 애니메이션은 약 25~30초이며 순서에 따른 지연이 있다. 텍스트 풍선은 SVG morphology·blur·specular lighting으로 볼륨·광택을 만든다. 줄 사이 지연은 1초, 글자 사이는 0.1초로 소스에 지정돼 있다. 두 모드 모두 fixed 레이어와 pointer-events: none을 사용한다. 공개 API에 개수·속도·색 팔레트·취소 핸들 설정은 없다(일반 풍선 기준). 텍스트 모드는 개별 풍선은 제거하지만 컨테이너 제거 코드는 확인되지 않았다. 반복 호출을 제품에 넣을 때 정리가 필요하다. 두 구현에 prefers-reduced-motion 분기는 없어 모션 감소 처리는 호출부에서 추가해야 한다. 텍스트 모드의 Intl.Segmenter와 Web Animations API 지원도 대상 브라우저에서 확인한다. 문서·소스 확인이며 실제 브라우저 실행 시험은 하지 않았다.
확인일: 2026-10-04. 공식 LICENSE: MIT, Copyright 2024 Artur Bień. npm 메타데이터도 MIT. 공식 데모: https://arturbien.github.io/balloons-js/ 저장소: https://github.com/arturbien/balloons-js npm: https://www.npmjs.com/package/balloons-js 일반 풍선 소스: https://github.com/arturbien/balloons-js/blob/main/src/balloons.ts 텍스트 풍선 소스: https://github.com/arturbien/balloons-js/blob/main/src/textBalloons.ts 라이선스: https://github.com/arturbien/balloons-js/blob/main/LICENSE
Vaso는 유리 표면을 만드는 React 래퍼 한 종류다. 사이트의 테마 스위치, 크기 변경 패널, 드래그 렌즈, 프로스트 토글, 세그먼트 컨트롤, 컬러 피커 렌즈, outset, 알림은 같은 컴포넌트의 응용 예시다. 별도 UI 컴포넌트 세트로 세지 않는다. 자식 콘텐츠는 유리 레이어 위에 놓이고, 굴절 대상은 뒤쪽 배경이다.
npm install vaso import { Vaso } from 'vaso'
React 18·19를 peer dependency로 사용하며 추가 런타임 의존성은 없다. Tailwind 없이도 사용할 수 있다.
공식 README와 소스 기준, Chromium 계열은 SVG feDisplacementMap을 backdrop-filter에 적용한다. Safari·Firefox는 뒤쪽의 가까운 조상을 복제해 굴절시키는 폴백을 자동으로 사용한다. 스크롤·드래그에 맞춰 위치를 갱신하고 video·canvas도 미러링한다. DOM 변경 시 복제본을 갱신하며 멀리 화면 밖에 있는 유리 레이어는 복제를 일시 중지한다. 복제 대상 요소가 400개를 초과하면 복제를 생략하고 blur와 rim을 유지한다. 복제 영역 밖의 조상에 의존하는 CSS는 복제본에서 다르게 보일 수 있다. 복잡한 페이지에서는 실제 화면·성능을 확인해야 한다. 여기서는 문서와 소스를 확인했으며 브라우저별 실행 시험은 하지 않았다.
확인일: 2026-10-04. npm 최신 1.0.0. npm 메타데이터와 공식 README에 MIT 명시. 제작자 huozhi. 공식 사이트: https://vasooo.vercel.app/ npm: https://www.npmjs.com/package/vaso 저장소·README: https://github.com/huozhi/vaso 굴절 래퍼 소스: https://github.com/huozhi/vaso/blob/main/src/index.tsx 배경 복제 폴백 소스: https://github.com/huozhi/vaso/blob/main/src/backdrop-copy.ts
GitHub Contributions, Reveal Menu Items on Hover, Infinite Marquee (Scroll-Direction), Smooth Expand/Collapse Accordion, Pixelated Page Transition, Pixelated Section Transition (Scroll-Driven), Simple Horizontal Carousel, Staggered Grid with Image Clip Path, Lightbox with Controls, Form Validation, Timed Content Section, Expand Image on Hover, Circle Mask Reveal on Hover, Scroll Snap, Scroll-Driven Card Reveal, Expandable Directory.
Arcade pixel, Holo, Pixel brushes, Fade motion, Liquid UI, Kinetic typography, Apple's corners, Ransom note, Chromatic glow, Realistic emboss, The typer, The art of color depth, Ghosty reveal, Symbols effect, Dia Browser's gradient, Figma vector editor, Amo hover button, Midjourney Medical's ASCII.
공식: https://www.arlan.me/vault 확인한 상세 코드: https://www.arlan.me/vault/liquid-ui / https://www.arlan.me/vault/squircle 확인일: 2026-10-04.
Expo 앱에서 버튼·입력·오버레이·차트·업무 화면을 한 디자인 시스템으로 묶고 싶을 때의 후보다. 공통 토큰과 6개 테마가 색·모서리까지 같이 바꾸므로 화면별 스타일 수정이 쌓이는 상황에 맞는다. 기본 프리미티브 외에 Planner·Table·Timeline·Flow, 채팅·추론·출처·계획 표시까지 있어 앱 안의 데이터/AI 작업 화면을 같은 문법으로 구성하는 용도로 볼 수 있다.
저장된 BNA UI는 소스를 가져오며 카메라·오디오·백엔드 스타터와 에이전트 MCP까지 넓게 묶는 Expo 후보였고, PanelUI는 Uniwind/Tailwind 토큰과 공통 테마를 전제로 패키지 사용·소스 복사를 함께 제공한다. tetra ui는 네이티브 프리미티브를 골라 가져오는 후보로 비교하면 된다. Native Bloom은 이런 라이브러리 바깥의 사례를 영상과 원본 링크로 찾는 Design 카탈로그이므로 설치 가능한 기반 UI를 고르는 이 항목과 역할이 다르다.
기본 경로는 panelui-native를 의존성으로 설치해 import하는 방식이다. 수정 폭이 크면 npx panelui-cli@latest init 뒤 add item으로 필요한 컴포넌트를 프로젝트 안에 가져올 수 있고, 두 방식을 섞어 특정 컴포넌트만 포크할 수도 있다. 패키지는 버전 업데이트로 테마까지 함께 갱신되지만 복사한 소스와 theme.css는 직접 관리한다. CLI add --overwrite는 로컬 수정과 충돌할 수 있으므로 업데이트 방식을 선택할 때 확인한다.
스타일 설정은 라이브러리 설치 하나로 끝나지 않는다. Uniwind Metro 설정, global.css의 Tailwind/Uniwind/테마 import와 @source, 앱 진입점의 CSS import 및 PanelUIProvider가 필요하다. Moon·Grass 계열은 Metro extraThemes에 등록하고 개발 서버를 다시 시작해야 한다. Expo Router/React Navigation은 자기 배경색을 그리므로 토큰을 연결하지 않으면 라이브러리 테마를 바꿔도 화면 배경이 안 바뀐 것처럼 보일 수 있다는 문서 설명이 실무적으로 유용하다.
필수 네이티브 기반으로 Reanimated·Gesture Handler·Safe Area·SVG·Masked View·Linear Gradient 등이 있고, 기능에 따라 햅틱·블러·클립보드·키보드 제어·파일/스크린샷·MapLibre·@expo/ui 같은 optional peer를 추가한다. 패키지 peerDependencies와 optional 표기를 확인했다. 모든 선택 기능이 Expo Go에서 돌아간다고 해석하면 안 된다: Map 문서는 alpha이며 MapLibre 네이티브 렌더러·config plugin·개발 빌드가 필요하다고 명시한다.
native 렌더링은 Button·Switch·Slider·Select·BottomSheet 다섯 개에서 선택할 수 있다. @expo/ui가 없거나 웹이면 스타일 컴포넌트로 조용히 폴백하고, 네이티브 제어로 전환하면 플랫폼의 색·크기·폰트·프레스 동작을 사용하므로 PanelUI 테마 토큰·className과 일부 props는 적용되지 않는다. 디자인 시스템과 동일한 모양이 필요한 경우와 플랫폼 기본 모양이 필요한 경우를 구분해서 선택한다.
AI 문서는 beta 패턴이며 React Native의 스트리밍·키보드·토큰마다 재렌더되는 비용 등을 다룬다. Reasoning·Sources·Task·CodeBlock·Plan 등의 UI는 plain props를 받아 AI SDK 없이도 쓸 수 있다고 명시한다. 채팅 UI가 들어 있다고 모델·API·백엔드가 패키지에 자동으로 연결되는 것은 아니다. 접근성·UI 스레드 성능을 강조하지만 이번에는 문서·메타데이터·소스 목록을 확인한 것이며 실기기 접근성이나 성능을 직접 테스트하지 않았다.
2026-10-04 확인. 컴포넌트 138은 export 모듈 기준이고 서브컴포넌트 이름이나 데모의 수를 더한 값은 아니다. MIT 라이선스를 확인했으며 Map의 alpha 및 AI 문서의 beta 조건을 별도로 기록했다.
근거: https://panelui.dev/ · https://panelui.dev/docs/installation · https://panelui.dev/docs/cli · https://panelui.dev/docs/customization/theming · https://panelui.dev/docs/native · https://panelui.dev/docs/components/map · https://panelui.dev/docs/ai · https://github.com/panel-ui/PanelUI · https://www.npmjs.com/package/panelui-native
Expo 모바일 앱을 처음 구성하거나, 이미 있는 앱에 기본 UI·미디어 입력/재생·차트를 같은 테마로 추가할 때 볼 곳이다. 카메라·파일·오디오·키보드 회피·햅틱처럼 웹 UI를 그대로 가져와 해결할 수 없는 영역이 포함돼 있다. 선택한 소스를 앱 내부로 가져와 수정하는 방식이므로 디자인 언어를 맞추고 모바일 기능을 한 묶음으로 구성하려는 경우에 잘 맞는다.
저장된 tetra ui가 React Native의 bottom-sheet·swipeable·native-select 같은 프리미티브를 고르는 후보라면, BNA UI는 앱 생성 CLI·차트·카메라/오디오·백엔드 스타터·에이전트 도구까지 범위가 넓다. Uilora의 모바일 묶음은 큰 웹/모바일 모음의 일부였고 자체 재배포 제한 라이선스로 기록돼 있지만, 이쪽은 Expo 중심이며 저장소 라이선스가 MIT다. 웹용 audiocn의 믹서·파형 UI와 용도가 일부 닿아도 BNA의 소스는 React Native/Expo 모듈을 쓰므로 DOM용 React 컴포넌트로 대체해 읽지 않는다.
새 앱은 npx bna-ui init my-app, 기존 Expo 프로젝트는 npx bna-ui add button 또는 add card input처럼 시작한다. 문서의 add --dry-run은 가져올 항목을 미리 확인하는 방법이고 --overwrite는 기존 파일을 덮어쓰므로 사용 의도를 확인해야 한다. CLI는 https://ui.ahmedbna.com/r에서 소스를 받아 components·hooks·providers·theme에 설치한다. 기본 설치만으로 백엔드를 선택할 필요는 없으며 Convex·Supabase·Firebase/인증 흐름은 해당 스타터가 필요한 경우에 보는 별도 선택지다.
버튼 하나도 독립 TSX 하나만으로 끝나지 않는다. 실제 /r/button.json을 조회하니 파일 12개가 들어 있었고 useColor·useHaptics·mode-provider·색/전역 상수와 text/view/icon/spinner를 함께 포함했다. npm 의존성은 expo-haptics·lucide-react-native·react-native-reanimated·react-native-svg·react-native-worklets였다. Line Chart 표본은 SVG·Reanimated·Gesture Handler·Worklets, Audio Recorder 표본은 expo-audio·expo-asset 및 재생기/파형/버튼 쪽을 요구한다. 파일 개수와 의존성은 UI 개수와 구분해서 본다.
스타일링은 문서의 StyleSheet·Colors·글로벌 상수 및 useColor/모드 provider를 중심으로 하며 Tailwind·NativeWind를 전제하는 설치로 확인된 것은 아니다. 저장소의 현재 기본 스타터 package.json은 Expo 57·React Native 0.86·React 19.2를 사용하지만 이것을 모든 기존 프로젝트의 최소 지원 버전으로 해석하지 않는다. 기존 앱에서는 Expo SDK와 네이티브 의존성의 호환, 카메라/마이크/파일 접근 권한, 실제 기기의 제스처·키보드·햅틱 동작을 확인할 필요가 있다. 이번 확인은 문서·소스·레지스트리 조회이며 앱을 설치하거나 실기기에서 실행한 테스트는 아니다.
AI 도구는 npx bna-ui mcp로 제공하며 list_components/search_components/get_component/get_component_source/get_install_plan/get_docs를 문서화했다. get_install_plan은 파일과 npm 패키지·명령을 알려 주는 읽기 도구로 직접 설치하지 않는다. Rules for agents·Claude Skill 문서도 있어 코딩 에이전트가 웹 JSX 대신 React Native 컴포넌트를 고르게 하는 참고 경로가 있다. 이름 때문에 shadcn CLI로 설치한다고 가정하지 말 것: /docs/shadcn은 원 프로젝트와 기술에 대한 감사 페이지이고 문서가 안내하는 설치 명령은 자체 bna-ui CLI다.
2026-10-04 확인. 공식 문서·GitHub 원본 목록·LICENSE·버튼의 실서비스 레지스트리·npm 메타데이터를 대조했다.
근거: https://ui.ahmedbna.com/ · https://ui.ahmedbna.com/docs/cli · https://ui.ahmedbna.com/docs/theming · https://ui.ahmedbna.com/docs/mcp · https://ui.ahmedbna.com/r/button.json · https://github.com/ahmedbna/ui · https://www.npmjs.com/package/bna-ui
SF·신호 장치·터미널·관제 화면 같은 시각 언어를 잡거나, 짧은 시작/전환 모션과 화면의 인광 질감을 공부할 때 볼 곳이다. Motion의 번쩍임·잔상·스캔·조립·분할 진입은 상태 표시나 타이틀·로고 연출의 레퍼런스가 되고, Phosphor는 같은 로고·문자·이미지·항법 화면을 여러 룩으로 비교하므로 특정 질감을 고르는 데 유용하다. 사이트 자체의 밀도 높은 눈금·그리드·동아시아 문자·진단 패널도 디자인 참고 자료로 볼 수 있다.
같은 제작자의 저장된 Solaris Sky는 태양·대기·하늘이라는 한 장면의 셰이더를 깊게 다루고, 여기서는 신호/인광 모션 여러 종류를 비교한다. Emerald UI가 스크롤 기반 연출을 찾을 때의 항목이었다면 이쪽은 짧은 신호 모션과 셰이더 질감이 중심이다. Skecher UI처럼 시연과 코드가 함께 있는 모션 단품을 찾는 용도와 가깝지만, 일반 제품의 버튼·폼·네비게이션 기반을 대체할 대상은 아니다. 효과가 콘셉트와 맞는 화면에 필요한 한두 개를 골라 가져오는 편이 낫다.
설치용 패키지 이름이나 shadcn 레지스트리를 확인한 것은 아니다. 페이지의 COPY가 주는 컴포넌트를 직접 옮기는 방식이다. GLITCH 복사 코드는 'use client' React TSX이며 gsap·@gsap/react 설치가 필요하다. SVG 사각형 프레임을 GSAP 타임라인으로 바꾸고 마운트 시 재생, 해제 시 timeline.kill()을 수행한다. 순수 CSS 효과라고 가정해서 복사하면 동작하지 않는다.
Phosphor의 SHADOW_MASK 복사 코드는 별도 Three.js import 없이 React와 WebGL/GLSL를 사용한다. source는 HTMLCanvasElement를 만드는 factory 또는 비동기 loader로 받고, cells·cellStyles·interaction과 activateCell/moveCell/deactivateCell/triggerCell/reset/refresh 핸들을 제공한다. 기본 calibrationSource가 있으므로 임의의 DOM을 감싸기만 하면 사이트의 로고·항법 UI가 그대로 나오는 API로 읽으면 안 된다. 자기 콘텐츠를 넘기는 source 구성을 확인해야 한다. 소스가 약 2.9만 자이므로 소형 모션 표본보다 적용·유지보수 부담이 크다.
코드 복사·수정·자유 사용 문구는 확인했지만 MIT 등 표준 라이선스나 공개 저장소 링크는 페이지에서 찾지 못했다. 특히 제작자가 AI로 재현했고 원출처가 불명확한 사례가 있다고 밝히므로 코드 공개와 원작·데모 로고의 권리까지 한 번에 해결됐다고 해석하지 않는다. Jerry Liu의 Motion 원작 크레딧을 남겨 두고 라이선스 불명확으로 분류했다.
GLITCH와 SHADOW_MASK 복사 표본 모두 prefers-reduced-motion 처리는 보이지 않았다. 서비스에 넣을 때는 모션 감소 옵션·멈춤/정적 대안과 과도한 깜빡임을 검토할 필요가 있다. WebGL 표본은 requestAnimationFrame과 devicePixelRatio를 사용하므로 모바일·고해상도 화면에서 GPU/프레임 비용을 확인한다. 이 확인은 복사 소스를 읽은 결과이며 기기별 성능이나 접근성을 실제 테스트한 것은 아니다.
2026-10-04 확인. 루트는 /volume/motion으로 이동하며 메뉴에서 /volume/phosphor도 제공한다. 정적 루트의 텍스트만 읽으면 Motion 18종만 보이기 쉬워 두 볼륨과 실제 COPY 동작을 확인했다.
근거: https://labs.cuvii.dev/ · https://labs.cuvii.dev/volume/motion · https://labs.cuvii.dev/volume/phosphor · https://x.com/SloppyJ44/status/1846584501847142705 · https://x.com/SloppyJ44/status/1986086639391670290
⚠️ 2026-10-06 재확인: 구성과 가격이 이틀 만에 크게 바뀌었다 — 전체 54종+로 늘고 모션 범주가 생겼으며, 무료는 27종(레지스트리 실측), Pro는 개인 창립자가 $99(선착순 25명, 이후 $199)·팀 10석 $499로 바뀌었다. 아래 10-04 기록의 개수·가격은 당시 기준이다. 하루 단위로 항목이 추가되는 초기 프로젝트라 쓸 때마다 무료/Pro 경계를 다시 확인할 것.
설정 화면·온보딩·AI 작업 승인·댓글 편집처럼 사용자가 무엇을 해야 하는지와 결과가 어떻게 확인되는지를 함께 설계할 때 가져올 곳이다. 기본 버튼 세트를 늘리기보다 연결 설정의 저장 상태, 추천을 수락한 뒤 되돌리기, 승인/보류 후 접힘, 완료한 체크리스트의 진행률, 알림을 닫고 다음 항목을 드러내는 흐름을 참고할 가치가 있다. 무료 항목만으로도 제품 화면의 작은 상호작용을 상당 부분 가져올 수 있다.
저장된 HoverUI가 버튼·카드·텍스트의 호버 효과를, Emerald UI가 스크롤 기반 연출을 맡는다면 이쪽은 실제 제품 안의 상태 전환과 업무 흐름에 가깝다. ui.amarjay처럼 shadcn 기본 부품의 변형을 수집하는 용도보다 Comments Panel, Decision Inbox, Integration Settings 같은 기능 단위를 골라 보는 편이 낫다. 일러스트는 빈 상태·탭 과부하·응답 없는 채팅·연결 관계를 설명하는 보조 화면에 쓸 수 있다.
React 19가 기준이며 파일 안에 스타일이 들어 있어 Tailwind가 없는 프로젝트에도 넣을 수 있다. shadcn은 설치 경로이고 Radix·Base UI·Tailwind를 런타임으로 요구하는 라이브러리는 아니다. 무료 설치는 npx shadcn@latest add https://www.affectui.com/r/<항목>.json 또는 공개 저장소에서 해당 TSX를 직접 가져오는 방식. Integration Settings 레지스트리 표본은 파일 1개, 추가 dependencies 0개를 확인했다. 네이티브 요소·포커스 링·aria-label·aria-live·reduced-motion을 문서화했지만 실제 프로젝트의 키보드와 스크린리더 동작은 적용 후 확인해야 한다.
채팅 입력기·Thinking State·편집 가능한 Data Table, 칸반 Task Board, App Directory, Pricing Plans는 Pro이고, 10-04에 무료였던 Integration Settings·Comments Panel·Setup Guide도 10-06 공개 레지스트리에서 빠졌으므로 미리보기만 보고 무료 소스로 오인하지 말 것. Pro는 로그인/개인 액세스 키로 소스를 받는다. 무료 항목(10-06 기준 27종)만 MIT이며 Pro 소스를 공개 저장소·UI 키트·템플릿·컴포넌트 라이브러리로 배포하거나 Pro 항목으로 인터페이스를 만드는 페이지 빌더·디자인 도구를 만드는 것은 약관에서 금지한다. 완성된 상용·클라이언트 제품에 포함하는 것은 허용된다. 데모의 다른 회사 로고도 라이선스 대상이 아니다.
2026-10-04 확인. 홈은 컴포넌트 17·블록 3·일러스트 9를 표시하고 가격 페이지는 무료 18종을 안내한다. Introduction의 “Pro 5 today”는 현재 전체 Pro 11종과 맞지 않아 홈 표시와 공개 저장소 목록을 기준으로 정리했다. 공개 저장소는 2026-10-03 생성된 신생 프로젝트이므로 파일을 직접 보유하고 필요한 항목만 가져오는 편이 관리하기 쉽다.
근거: https://www.affectui.com/docs · https://www.affectui.com/docs/installation · https://www.affectui.com/docs/accessibility · https://www.affectui.com/pricing · https://www.affectui.com/terms · https://github.com/flohoeller/affectui-components
브라우저에서 소리를 "조작"하는 화면을 만들 때 — 방송·녹음 툴의 마이크 설정 화면, 통화 앱의 입력 레벨 확인, 사운드보드, DAW풍 믹서, 웹 기반 음악 도구의 노브·페이더 패널. 저장된 오디오 관련 항목은 각자 한 조각만 맡는다: waves-cn은 wavesurfer.js로 파형 "표시", Limeplay·Vidstack은 미디어 "재생기", ElevenLabs UI·Pipecat UI는 음성 AI 대화 화면, soundcn·Foley·Cuelume은 효과음 자체. 이건 그 사이의 빈자리인 입력 장치 선택·게인·미터·믹싱을 맡고, UI만이 아니라 Web Audio 그래프를 묶는 훅(useWebAudioMixer는 덕킹·모니터 센드·마스터 리미터까지)까지 준다는 게 다르다.
컴포넌트만 골라 쓸 때는 훅을 함께 봐야 한다. 페이더·노브는 값만 다루는 순수 UI이고, 실제 소리에 연결하는 건 use-gain-node·use-audio-analyser 같은 훅 쪽이다. 처음이면 블록(mic-setup이나 system-audio-mixer)을 하나 설치해 연결 방식을 본 뒤 필요한 조각만 남기는 게 빠르다.
시스템 오디오 캡처(use-system-audio)는 브라우저의 화면 공유 API에 기대므로 브라우저·OS에 따라 안 될 수 있다. 데모 화면의 동작만 보고 모든 환경에서 된다고 가정하지 말 것.
공개된 지 며칠 안 된 신생 레지스트리라 API가 바뀔 수 있다. 다만 shadcn 생태계에서 이미 8bitcn 등을 운영해 온 제작자라 방치 위험은 상대적으로 낮다. 홈 사운드패드의 "Work, work" 음성은 Blizzard 소유로 MIT 대상이 아니지만 레지스트리에는 포함되지 않아 설치 시 따라오지 않는다.
손 제스처 입력을 실험해 보고 싶을 때 — 키오스크·전시용 화면, 요리 중처럼 손을 못 쓰는 상황의 데모, "만지지 않고 넘기는" 프레젠테이션 같은 경우. 저장된 컴포넌트 중 웹캠·손 추적을 다루는 것은 이것뿐이다. MediaPipe를 직접 붙이면 랜드마크 좌표 노이즈 처리와 핀치 판정 임계값을 다 만들어야 하는데, 그 부분이 이미 되어 있다는 게 쓸 이유다.
라이선스가 가장 큰 함정 — npm의 CLI 패키지(@opendevsociety/kine-ui)는 MIT로 표기돼 있지만, CLI가 복사해 주는 컴포넌트 소스가 있는 저장소는 AGPL-3.0이고 README도 "웹 서비스로 배포해도 소스를 같은 라이선스로 공개해야 한다"고 명시한다. 서비스에 넣으면 그 서비스의 소스 공개 의무가 생길 수 있으니 상용 제품에는 넣지 말고 데모·사내 프로토타입용으로만 쓸 것. 상용으로 필요하면 구조만 참고해 MediaPipe 위에 직접 짜는 게 낫다.
사실상 멈춘 프로젝트다. 생성 3일 만에 마지막 커밋(2026-02-24) 후 7개월째 변화가 없고 npm도 2개 버전이 전부다. 버그가 있어도 업스트림 수정은 기대하지 말 것. 모바일은 카메라 각도 때문에 사실상 마우스·터치 폴백으로만 동작한다고 보면 된다.
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 그대로 들어와 있다.
