Frontend

389 bookmarks
Newest
Loading UI — CSS·React 로더 48종 모음
Loading UI — CSS·React 로더 48종 모음
스피너 하나 만들려고 CSS 애니메이션을 다시 짜는 시간을 줄이는 용도. 대부분 순수 CSS라 의존성이 늘지 않고 번들에 거의 영향이 없는 게 장점이다. 실무 기준으로는 text-shimmer와 skeleton이 가장 쓸모가 많다 — 데이터 로딩 구간에 스피너 대신 스켈레톤을 쓰면 체감 대기시간이 줄어든다. 저장해둔 bprogress(페이지 전환 진행 바)와 역할이 다르니 함께 쓰면 되고, 도트 매트릭스 스타일 로더가 필요하면 Dot Matrix 쪽이 전문이다.
·loading-ui.com·
Loading UI — CSS·React 로더 48종 모음
@pierre/diffs — 코드 diff 렌더링 라이브러리
@pierre/diffs — 코드 diff 렌더링 라이브러리
코드 리뷰 화면, 변경 이력 뷰어, AI가 제안한 수정안을 비교해 보여주는 UI를 만들 때. 줄 단위 코멘트와 머지 충돌 해결 UI까지 들어 있어 GitHub 스타일 리뷰 경험을 직접 구현하지 않아도 된다는 게 핵심이다. 형제 라이브러리인 @pierre/trees와 함께 쓰면 저장소 뷰어 한 벌이 된다. 주의: Shadow DOM으로 렌더링하므로 전역 CSS나 Tailwind 클래스가 내부에 그대로 적용되지 않는다 — 스타일은 제공되는 CSS 변수와 Shiki 테마로 다루는 것을 전제로 설계를 잡을 것.
·diffs.com·
@pierre/diffs — 코드 diff 렌더링 라이브러리
@pierre/trees — 고성능 파일 트리 렌더링 라이브러리
@pierre/trees — 고성능 파일 트리 렌더링 라이브러리
코드 브라우저, 파일 관리 UI, 문서 탐색기처럼 트리 구조를 보여줘야 할 때. 트리는 직접 만들면 가상화, 키보드 포커스 이동, 드래그앤드롭 재배치에서 난도가 급격히 올라가는 컴포넌트라 기성품 가치가 크다. Git 상태 표시가 내장돼 있어 코드 리뷰나 저장소 뷰어 성격의 화면이면 바로 맞고, 같은 팀의 @pierre/diffs(diffs.com)와 짝으로 쓰면 "파일 목록 + 변경 내용" 화면이 한 번에 선다. 주의: 아직 베타 버전이므로 API 변경 가능성을 감안하고 버전을 고정할 것.
·trees.software·
@pierre/trees — 고성능 파일 트리 렌더링 라이브러리
NumberFlow — 값이 바뀔 때 굴러가는 숫자 컴포넌트
NumberFlow — 값이 바뀔 때 굴러가는 숫자 컴포넌트
대시보드 지표, 가격 표시, 카운터, 실시간 수치처럼 "숫자가 바뀌는 것 자체를 보여줘야" 하는 곳에 쓴다. 단순히 예쁜 게 아니라 값이 변했다는 사실을 인지시키는 기능이 있어서, 폴링·실시간 업데이트가 있는 화면에서 특히 값어치가 있다. Intl 서식을 내장해 통화·천 단위 구분·로케일 처리를 따로 짜지 않아도 되는 점이 다른 카운트업 라이브러리와 갈리는 지점이다(대부분은 서식이 깨진다). 주의: 값이 자주 바뀌는 곳에 많이 깔면 애니메이션이 겹쳐 산만해지므로 화면당 핵심 지표 몇 개로 제한할 것. 저장해둔 Motion Primitives의 Animated/Sliding Number와 목적이 겹치니 서식 요구가 있으면 이쪽을 우선.
·number-flow.barvian.me·
NumberFlow — 값이 바뀔 때 굴러가는 숫자 컴포넌트
Sonner — React 토스트 알림 라이브러리
Sonner — React 토스트 알림 라이브러리
알림 토스트가 필요할 때 사실상 기본값. 직접 만들면 항상 어긋나는 부분(여러 개가 동시에 뜰 때의 스택 애니메이션, 호버 시 타이머 정지, 스와이프 해제, 접근성 라이브 리전)이 기본 동작으로 들어 있다. 특히 toast.promise()로 "요청 중 → 성공/실패"를 한 줄로 처리하는 패턴이 실무에서 자주 쓰인다. 같은 저자의 Vaul과 달리 활발히 유지보수되고 있어 신규 채택에 부담이 없다. 디자인이 꽤 강하게 잡혀 있는 편이라 브랜드 톤에 맞추려면 CSS 변수와 커스텀 렌더러로 덮어쓰는 작업이 필요하다.
·sonner.emilkowal.ski·
Sonner — React 토스트 알림 라이브러리
Vaul — React 드로어(바텀시트) 컴포넌트
Vaul — React 드로어(바텀시트) 컴포넌트
모바일 웹에서 모달 대신 바텀시트를 쓸 때. 드래그로 닫기, 스냅 포인트(반쯤 열림), 내부 스크롤과 드래그 제스처의 충돌 같은 부분은 직접 구현하면 디테일에서 계속 무너지는 영역이라 기성 라이브러리 가치가 크다. shadcn Drawer를 쓰고 있다면 이미 의존성에 있고, 스냅 포인트나 방향 설정을 손볼 때 원본 문서가 여기다. 다만 유지보수 중단 공지가 있으므로 신규 채택이라면 판단이 필요하다 — 이미 기능이 안정적이고 API가 단순해 당장 쓰는 데는 문제가 적지만, React 신버전 대응이나 버그 수정은 기대하기 어렵다. 대안이 필요하면 저장해둔 React Aria나 Base UI 계열의 Dialog·Popover 위에 제스처를 직접 얹는 구성, 또는 Cult UI의 Family Drawer 계열 구현을 참고할 것.
·vaul.emilkowal.ski·
Vaul — React 드로어(바텀시트) 컴포넌트
Base UI — Radix·Floating UI·MUI 팀이 다시 만든 프리미티브
Base UI — Radix·Floating UI·MUI 팀이 다시 만든 프리미티브
Radix 이후 세대의 프리미티브. 같은 사람들이 Radix에서 겪은 API·합성 문제를 정리해 다시 설계한 것이라 신규 프로젝트에서 검토할 가치가 크다. 다만 생태계 크기는 Radix가 여전히 압도적이므로, 기성 컴포넌트를 많이 끌어다 쓸 계획이면 Radix, 자체 디자인 시스템을 처음부터 쌓을 계획이면 Base UI가 맞다. 저장해둔 Base UI 기반 항목들(9ui, mcpcn, Cambio, Reka UI)과 함께 보면 이 위에 디자인을 얹은 사례를 확인할 수 있다. 3대 기반을 정리하면 — Radix(생태계), React Aria(접근성·국제화), Base UI(차세대 설계) 중 하나를 고르는 구조이며 프로젝트 초반에 정해야 하는 항목이다.
·base-ui.com·
Base UI — Radix·Floating UI·MUI 팀이 다시 만든 프리미티브
Radix UI — shadcn/ui의 토대가 되는 프리미티브
Radix UI — shadcn/ui의 토대가 되는 프리미티브
저장된 컴포넌트 라이브러리 상당수가 결국 여기에 기대고 있으므로 원본 문서로 둘 가치가 있다. shadcn/ui 컴포넌트에서 예상과 다른 동작(포커스 트랩, Portal, asChild 합성, 컨트롤드/언컨트롤드 상태)을 만나면 shadcn 문서가 아니라 여기 Primitives 문서를 봐야 답이 나온다. 선택 관점에서는 Radix Primitives = 가장 넓은 생태계 호환(shadcn 및 파생 레지스트리 전부), React Aria = 접근성·국제화 심도, Base UI = Radix 팀이 다시 만든 후속 세대라는 구도다. Themes는 디자인이 이미 강하게 잡혀 있어 브랜드 디자인이 있는 제품에는 보통 Primitives + 자체 스타일이 맞다.
·radix-ui.com·
Radix UI — shadcn/ui의 토대가 되는 프리미티브
Intent UI — React Aria 기반 복붙 컴포넌트 (87종+)
Intent UI — React Aria 기반 복붙 컴포넌트 (87종+)
저장해둔 React Aria 위에 디자인을 얹은 완성형 레이어. React Aria를 쓰기로 했다면 프리미티브부터 직접 스타일링하지 말고 여기서 시작하는 편이 훨씬 빠르다 — shadcn/ui가 Radix에 대해 하는 역할을 Intent UI가 React Aria에 대해 한다고 보면 된다. 그래서 선택은 사실상 상위 기반의 선택과 같다: Radix+shadcn 생태계의 넓은 호환이냐, React Aria의 강한 접근성·국제화·날짜 처리냐. 날짜/시간 선택기와 테이블 조작이 제품의 핵심이면 이쪽이 유리하다. 같은 계열로 저장해둔 dotui(디자인 시스템 스튜디오)도 React Aria 기반이니 함께 비교할 것.
·intentui.com·
Intent UI — React Aria 기반 복붙 컴포넌트 (87종+)
Stackflow — 모바일 웹용 스택 내비게이션 프레임워크
Stackflow — 모바일 웹용 스택 내비게이션 프레임워크
웹뷰 기반 앱이나 모바일 웹에서 "뒤로 가기 시 이전 화면이 스크롤 위치까지 그대로 살아 있어야" 할 때 쓰는 도구. 일반 라우터는 화면을 교체하지만 스택 내비게이션은 이전 화면을 살려둔 채 위에 쌓으므로 네이티브 감각의 전환과 상태 보존이 가능하다. 당근 앱의 실제 요구에서 나온 라이브러리라 한국 모바일 서비스의 패턴(웹뷰 내 화면 전환, 앱-웹 혼합)에 잘 맞고 한국어 자료를 찾기도 쉽다. 채택 기준: 일반적인 페이지 이동 중심 웹이면 Next.js 라우터로 충분하고, 화면 스택·전환·제스처가 제품 경험의 핵심이면 여기가 맞다. 주의: 헤드리스라 전환 애니메이션과 헤더 UI는 직접 만들어야 하므로 저장해둔 iOS풍 인터랙션 모음(ibelick Lab, Cult UI)에서 표현을 가져오는 조합을 고려할 것.
·stackflow.so·
Stackflow — 모바일 웹용 스택 내비게이션 프레임워크
Spectrum UI — MCP로 설치하는 애니메이션 컴포넌트 레지스트리
Spectrum UI — MCP로 설치하는 애니메이션 컴포넌트 레지스트리
"에이전트에게 컴포넌트를 설치시키는" 방식이 맞는다고 판단되면 저장해둔 reui.io, AI Canvas와 같은 계열로 묶어 비교할 것 — 셋 다 MCP 서버를 운영하는 shadcn 레지스트리다. Spectrum UI의 차별점은 목록이 제품 화면 단위로 구체적이라는 점이다(계좌 이체 카드, 최근 활동, 프로필, 로그인, FAQ 탭, AI 채팅 카드처럼 완성된 조각). 그래서 SaaS 대시보드나 AI 제품의 초기 화면을 빠르게 세울 때 실효가 크고, 반대로 범용 프리미티브를 찾는 용도로는 적합하지 않다. Hold to Confirm, Swipe to Delete, Quantity Stepper, Password Strength 같은 인터랙션 단위는 따로 만들면 은근히 시간이 드는 것들이라 개별로 떼어 쓰기 좋다. 주의: Framer Motion 의존이라 프로젝트 애니메이션 라이브러리를 하나로 통일할 것, 문서 일부가 계정 가입을 요구하는 흐름이 보이므로 무료 범위를 먼저 확인할 것.
·ui.spectrumhq.in·
Spectrum UI — MCP로 설치하는 애니메이션 컴포넌트 레지스트리
React DayPicker — 달력·날짜 선택 컴포넌트
React DayPicker — 달력·날짜 선택 컴포넌트
예약·기간 필터·생년월일 입력처럼 달력 UI가 필요할 때의 기본 선택지. shadcn/ui의 Calendar 컴포넌트가 내부적으로 이 라이브러리를 감싼 것이므로, shadcn을 쓰고 있다면 이미 의존성에 들어와 있고 여기 문서가 곧 커스터마이징 원본 문서다 — 기간 선택이나 비활성 날짜 규칙을 손볼 때 여기를 봐야 답이 나온다. date-fns 의존이므로 프로젝트에서 dayjs나 Luxon을 쓰고 있다면 날짜 라이브러리가 둘로 늘어나는 점을 감안할 것. 선택 기준: 달력 격자 UI면 여기, 모바일 휠 방식 입력이면 저장해둔 React Wheel Picker, 다국어 달력을 포함한 폼 전체 기반이 필요하면 React Aria 쪽이 통합적이다.
·daypicker.dev·
React DayPicker — 달력·날짜 선택 컴포넌트
React Aria — Adobe의 접근성 헤드리스 UI 기반 라이브러리
React Aria — Adobe의 접근성 헤드리스 UI 기반 라이브러리
디자인은 직접 하되 동작·접근성은 검증된 것을 쓰고 싶을 때의 기반층. 저장해둔 Base UI 계열(9ui, mcpcn, Cambio)이나 Radix 계열과 같은 자리를 놓고 경쟁하는 선택지이며, 셋 중 하나를 고르는 건 프로젝트 초반의 되돌리기 어려운 결정이다. React Aria가 특히 앞서는 구간은 세 가지 — (1) 날짜·시간 선택기(13종 달력, 로케일별 포맷), (2) 접근 가능한 드래그앤드롭과 키보드 다중 선택이 필요한 테이블·리스트, (3) 다국어 서비스. 반대로 shadcn/ui 생태계를 그대로 쓰려면 Radix 기반이 주변 컴포넌트 호환이 훨씬 넓다. 저장해둔 dotui(React Aria 기반 디자인 시스템 스튜디오)를 보면 이 위에 디자인을 얹은 실제 사례를 확인할 수 있다. 주의: 훅 레이어는 유연한 만큼 코드량이 늘어나므로, 특별한 이유가 없으면 컴포넌트 레이어부터 쓰고 필요한 곳만 훅으로 내려갈 것.
·react-aria.adobe.com·
React Aria — Adobe의 접근성 헤드리스 UI 기반 라이브러리
Vanta.js — 몇 줄로 넣는 3D 애니메이션 배경
Vanta.js — 몇 줄로 넣는 3D 애니메이션 배경
랜딩 히어로 배경에 "움직이는 분위기"가 필요할 때 가장 빠른 방법. 셰이더를 직접 쓰지 않고 프리셋 + 색 옵션만으로 끝난다. 다만 공식 문서도 경고하듯 제약이 뚜렷하다: 구형 기기에서 프레임이 떨어지고 모바일 호환이 들쭉날쭉해 정적 이미지 폴백을 준비해야 하며, 한 페이지에 한두 개까지만 쓰는 게 맞다. React에서는 useEffect로 초기화하고 반환값의 destroy()를 반드시 정리해야 리렌더 때 인스턴스가 쌓이지 않는다. prefers-reduced-motion 처리도 직접 넣을 것. 프리셋 느낌이 강해 "본 적 있는 배경"이 되기 쉬우니, 브랜드 고유의 표현이 필요하면 저장해둔 Unicorn Studio나 셰이더 계열(Cult UI의 Hero Dithering/Liquid Metal)을 볼 것.
·vantajs.com·
Vanta.js — 몇 줄로 넣는 3D 애니메이션 배경
DiceBear — 시드 기반 아바타 생성 라이브러리·API
DiceBear — 시드 기반 아바타 생성 라이브러리·API
프로필 이미지를 올리지 않은 사용자의 기본 아바타, 더미 데이터의 얼굴, 팀 목록의 구분용 이미지에 쓴다. 시드가 같으면 결과가 같으므로 DB에 이미지를 저장할 필요 없이 ID만 갖고 매번 같은 아바타를 재현할 수 있는 게 핵심이다. 선택 기준: 얼굴형 고정이면 저장해둔 Facehash가 더 단순하고, 스타일 폭이 필요하면(픽셀·추상·일러스트) DiceBear가 압도적이다. 주의 두 가지 — (1) 스타일마다 라이선스가 달라서 상업 서비스에 넣기 전 해당 스타일이 CC0인지 CC BY(출처 표기 필요)인지 확인할 것, (2) HTTP API 직결은 외부 의존이 생기므로 트래픽이 붙는 서비스라면 라이브러리로 서버에서 생성해 캐싱하는 편이 안전하다.
·dicebear.com·
DiceBear — 시드 기반 아바타 생성 라이브러리·API
react-simple-maps — React SVG 지도 차트
react-simple-maps — React SVG 지도 차트
"국가·지역별 수치를 색으로 칠하는 지도"(코로플레스)나 지점 표시가 필요할 때. 타일 지도가 아니라 SVG라서 서버 호출 없이 정적으로 그려지고, 색·테두리·호버를 CSS로 다루므로 디자인 통제가 쉽다. 채택 기준: 실제 도로·위성 타일과 검색·경로가 필요하면 Mapbox/Leaflet 계열(저장해둔 mapcn)로 가고, 데이터 시각화용 지도면 여기가 가볍고 정확하다. 3D 지구본 연출은 COBE. 주의: 지도 데이터(TopoJSON)는 별도로 구해야 하고 해상도가 높을수록 파일이 커지므로 필요한 지역만 단순화해서 쓸 것. 국경 표기는 정치적으로 민감할 수 있으니 서비스 대상 지역 기준으로 데이터 출처를 확인할 것.
·react-simple-maps.io·
react-simple-maps — React SVG 지도 차트
Fumadocs — React 문서 사이트 프레임워크
Fumadocs — React 문서 사이트 프레임워크
사내 문서, 오픈소스 라이브러리 문서, 디자인 시스템 문서를 Next.js 프로젝트 안에서 직접 굴릴 때의 기본 선택지. 채택 기준: Docusaurus/Mintlify처럼 완성된 제품을 원하면 이건 손이 더 가고, 반대로 기존 Next.js 앱과 레이아웃·인증·디자인 토큰을 공유해야 하면 여기가 압도적으로 유리하다(같은 App Router 안에 /docs로 얹으면 된다). RSC 지원 덕에 "실제 API 응답이나 DB 값을 문서에 그대로 렌더링"하는 게 가능한 점이 다른 문서 도구와 갈리는 지점. 주의: ESM 전용이고 Content 레이어 설정(소스 어댑터, 라우트 매핑)이 초기 진입 비용이므로, 단순한 문서 몇 장이면 Fumapress 쪽을 먼저 볼 것. 마크다운 렌더링만 필요하고 사이트 구조는 직접 짤 생각이면 프레임워크 전체를 들이지 말고 저장해둔 에디터/마크다운 계열을 볼 것.
·fumadocs.dev·
Fumadocs — React 문서 사이트 프레임워크
Motion Primitives — Motion 기반 애니메이션 컴포넌트 키트
Motion Primitives — Motion 기반 애니메이션 컴포넌트 키트
"프리미티브"라는 이름대로 완성된 섹션이 아니라 조립용 애니메이션 단위를 준다는 점이 특징이다. Magic UI나 Aceternity가 화려한 완성 블록 위주라면, 여기는 기존 컴포넌트에 얹어 쓰는 모션 레이어에 가까워 이미 디자인이 잡힌 프로젝트에 넣기 덜 부담스럽다. Morphing Dialog·Transition Panel은 레이아웃 애니메이션 품질이 좋아 저장해둔 다른 라이브러리에서 대체하기 어려운 축. 같은 저자의 ibelick Lab(실험 원형)과 prompt-kit(AI 채팅 UI)과 세트로 보면 된다. 주의: Motion 의존이므로 번들에 이미 다른 애니메이션 라이브러리가 있다면 중복을 정리할 것.
·motion-primitives.com·
Motion Primitives — Motion 기반 애니메이션 컴포넌트 키트
COBE — 5KB짜리 WebGL 지구본
COBE — 5KB짜리 WebGL 지구본
랜딩 페이지에 "전 세계에서 쓰입니다" 류의 지구본을 넣을 때의 기본 선택지. 같은 목적으로 Three.js를 끌어오면 번들이 수백 KB 늘어나는데 이건 5KB에 의존성 0이라 마케팅 페이지에 얹기 적합하다. React에서는 공식 래퍼가 없고 canvas ref에 직접 붙이는 방식이라 useEffect로 초기화/정리를 직접 써야 한다(사이트에 React 예제 있음). 한계도 분명하다: 도트 지구본 한 가지 스타일 전용이라 실제 지도 타일, 국가 경계 하이라이트, 클릭 인터랙션이 필요하면 범위를 벗어나므로 저장해둔 mapcn 같은 지도 컴포넌트를 볼 것. 회전 애니메이션은 계속 도므로 prefers-reduced-motion 처리 권장.
·cobe.vercel.app·
COBE — 5KB짜리 WebGL 지구본
Cult UI — 질감·물성 중심의 shadcn 컴포넌트
Cult UI — 질감·물성 중심의 shadcn 컴포넌트
버튼이나 패널에 "금속·질감·입체감"을 주고 싶을 때 여기를 먼저 볼 것. 저장된 다른 연출 계열 라이브러리가 대체로 그라디언트·파티클·텍스트 애니메이션에 몰려 있는 반면, 여기는 뉴모피즘/메탈/디더링처럼 표면 질감 쪽이 강하다. Dynamic Island·Family Drawer 계열은 ibelick Lab의 Family Popover Menu와 겹치므로 둘을 비교해서 고르면 된다. 주의: 질감 컴포넌트는 특정 배경색과 그림자를 전제로 디자인돼 있어 기존 디자인 토큰에 그대로 얹으면 붕 뜨기 쉽다 — 한두 곳 포인트로만 쓰는 편이 안전하다. 히어로 셰이더는 GPU 부담이 있으니 모바일 성능 확인 필요.
·cult-ui.com·
Cult UI — 질감·물성 중심의 shadcn 컴포넌트
React Email — React로 이메일 HTML 만들기
React Email — React로 이메일 HTML 만들기
트랜잭션 메일(가입 인증, 비밀번호 재설정, 주문 확인, 알림)을 직접 만들 때 사실상 표준 선택지. 이메일 HTML은 테이블 레이아웃과 인라인 스타일, Outlook 전용 조건부 주석까지 다뤄야 해서 손으로 짜면 비용이 크고, 이 라이브러리는 그 지옥을 컴포넌트 뒤로 감춰준다. 발송 서비스와 분리돼 있으니 Resend를 안 써도 렌더링 결과 HTML만 뽑아 기존 발송 경로에 넣으면 된다. 저장해둔 emailcn.run은 완성형 이메일 템플릿 모음에 가까우니, 템플릿을 고르는 단계면 emailcn, 메일을 코드로 관리하고 빌드 파이프라인에 넣을 단계면 여기가 맞다. 주의: 미리보기가 통과해도 실제 클라이언트별 렌더링은 다를 수 있어 발송 전 실제 계정으로 테스트 발송은 여전히 필요하다.
·react.email·
React Email — React로 이메일 HTML 만들기
glfx.js — WebGL 실시간 이미지 효과 라이브러리
glfx.js — WebGL 실시간 이미지 효과 라이브러리
이미지 업로드 후 필터·보정 UI가 필요할 때(프로필 사진 편집, 썸네일 보정, 사진 기반 서비스) 참고할 레퍼런스. CSS filter로는 불가능한 왜곡·퍼스펙티브·틸트시프트를 GPU로 처리한다는 점이 핵심 가치다. 주의사항이 뚜렷하다: (1) 2011년 바닐라 JS라 React 래퍼가 없어 ref로 canvas를 직접 다뤄야 하고, (2) 이미지 로드에 same-origin 제약이 있어 외부 CDN 이미지는 CORS 설정이 필요하며, (3) 유지보수가 멈춰 있어 프로덕션에 넣는다면 코드를 직접 읽고 필요한 셰이더만 떼어 쓰는 편이 안전하다. 최신 대안을 쓰고 싶다면 저장해둔 Unicorn Studio나 셰이더 계열 항목을 먼저 볼 것.
·evanw.github.io·
glfx.js — WebGL 실시간 이미지 효과 라이브러리
prompt-kit — AI 채팅/에이전트 UI 컴포넌트
prompt-kit — AI 채팅/에이전트 UI 컴포넌트
AI 채팅 UI를 처음부터 만들 때 시간을 가장 많이 잡아먹는 부분(스트리밍 중 자동 스크롤, 마크다운+코드블록 렌더링, reasoning/tool call 접기, 첨부 업로드)을 이미 컴포넌트로 갖고 있다. 채택 기준: 저장해둔 AI Elements(elements.ai-sdk.dev)는 Vercel AI SDK 공식이라 SDK를 그대로 쓸 때 정합성이 좋고, prompt-kit은 shadcn/ui 관례에 더 가깝고 SDK 비종속이라 자체 백엔드나 OpenAI SDK 직결 구조에 붙이기 쉽다. agentcn은 에이전트 실행 화면 쪽에 가깝다. 같은 저자의 ibelick Lab과 함께 보면 인터랙션 디테일 감각이 일관된다.
·prompt-kit.com·
prompt-kit — AI 채팅/에이전트 UI 컴포넌트
ibelick Lab — UI 인터랙션 실험 모음 (코드 포함)
ibelick Lab — UI 인터랙션 실험 모음 (코드 포함)
"이런 느낌"은 있는데 이름을 모르는 인터랙션을 찾을 때 훑기 좋은 곳. 라이브러리가 아니라 실험 모음이라 npm 설치나 레지스트리가 없고, 각 실험 페이지의 코드 블록을 직접 복사해 프로젝트 관례에 맞게 다듬어 쓰는 방식이다. 버전 관리·업데이트·이슈 대응이 없으니 제품 코드에 넣을 때는 내 코드로 인수한다고 생각할 것. 특히 Family Popover Menu, Underlay Action Sheet, Curved Tab Bar처럼 iOS 앱 감각의 인터랙션은 저장해둔 다른 연출 계열 라이브러리(Magic UI, Aceternity, Animate UI 등)에 잘 없는 것들이라 여기서만 건질 게 있다. 유리·블러 계열(Distorted Glass, Fractal Glass, Progressive Blur)이 필요하면 여기를 먼저 볼 것.
·ibelick.com·
ibelick Lab — UI 인터랙션 실험 모음 (코드 포함)
Frimousse — React 이모지 피커 컴포넌트
Frimousse — React 이모지 피커 컴포넌트
댓글·채팅·리액션 UI에 이모지 피커가 필요할 때 첫 번째 후보. 직접 만들면 이모지 데이터셋 로딩, 스킨톤 변형, 검색 인덱스, 수천 개 항목 가상화까지 전부 떠안게 되는데 이걸 전부 해결해준다. unstyled라서 기존 디자인 토큰에 맞춰 껍데기를 직접 입혀야 하고, 반대로 빠르게 끝내려면 shadcn 레지스트리 버전을 받아 바로 쓰면 된다. 채택 기준: 이모지 "선택" UI만 필요하면 이것, 에디터 본문 안에서 :smile: 같은 인라인 자동완성이 필요하면 에디터 쪽(Plate/editorcn/Shadcn Tiptap)의 멘션·슬래시 커맨드 확장을 먼저 보는 게 맞다. 저장해둔 특수 입력 컴포넌트 계열(shadcn-phone-input, React Wheel Picker, Cascader shadcn)과 같은 성격이라 필요할 때 함께 훑어보면 된다.
·frimousse.liveblocks.io·
Frimousse — React 이모지 피커 컴포넌트
ncdai components — 개인 레지스트리 컴포넌트 45종 + 블록 12 (MIT)
ncdai components — 개인 레지스트리 컴포넌트 45종 + 블록 12 (MIT)

iOS풍 인터랙션이 필요할 때. Slide to Unlock, Elastic Slider처럼 네이티브 앱에서 보던 동작들이 있다. UI Components의 React Wheel Picker와 같은 제작자(ncdai)다. 저쪽은 휠 피커 하나만 떼어낸 별도 프로젝트이고, 여기 41종 안에 다른 것들이 모여 있다. MIT로 명확하다. 라이선스 미표기가 많은 이 계열에서 드문 경우다. 최신 스택 기준이다(Next.js 16, React 19, Tailwind 4, Base UI 1.8). 구버전 프로젝트면 손봐야 한다. 개인 프로젝트다. 규모는 작지만 라이선스가 확실하고 shadcn 레지스트리로 낱개 설치가 된다.

·chanhdai.com·
ncdai components — 개인 레지스트리 컴포넌트 45종 + 블록 12 (MIT)
9ui — Base UI 기반 복붙 컴포넌트
9ui — Base UI 기반 복붙 컴포넌트

Base UI 계열에서 복붙 컴포넌트를 찾을 때. shadcn/ui는 Radix 기반이라 Base UI 프로젝트에 그대로 얹히지 않는다. 이 컬렉션의 Base UI 계열은 넷이다 — mcpcn(MCP 화면), Cambio(공유 애니메이션), Reka UI(Vue 프리미티브), 그리고 이것. Base UI로 간다면 함께 볼 것. Base UI v1.0.0을 명시한다. 정식 버전 기준이라는 뜻이라 안정성 면에서 낫다. 컴포넌트 수가 공개돼 있지 않다. 목록을 보고 판단할 것. 라이선스 종류가 명시돼 있지 않다. GitHub에서 확인할 것.

·9ui.dev·
9ui — Base UI 기반 복붙 컴포넌트
Plate — Slate 기반 리치 텍스트 에디터 프레임워크
Plate — Slate 기반 리치 텍스트 에디터 프레임워크

에디터를 제대로 만들어야 할 때. 표·멘션·댓글·협업처럼 요구가 커지면 결국 이 급이 필요하다. UI Components의 에디터 셋과 층위가 갈린다 — · editorcn: Tiptap 기반 완성된 에디터(툴바형·블록형). 빠르게 붙일 때 · Shadcn Tiptap: Tiptap용 부품. 이미 Tiptap을 쓸 때 · Plate: Slate 기반 프레임워크. 깊게 커스터마이징할 때 Tiptap(ProseMirror)과 Slate는 계열이 다르다. 한번 정하면 바꾸기 어려우니 초기에 결정할 것. shadcn/ui 컴포넌트로 UI가 제공돼 기존 디자인과 맞추기 쉽다. AI 에디터 플러그인이 따로 있다. 글쓰기 보조를 넣을 계획이면 볼 것. Slate 자체가 학습 곡선이 있다. 단순한 서식 편집이면 과하다.

·platejs.org·
Plate — Slate 기반 리치 텍스트 에디터 프레임워크
Vidstack — 미디어 플레이어를 조립해 만드는 컴포넌트 라이브러리
Vidstack — 미디어 플레이어를 조립해 만드는 컴포넌트 라이브러리

영상 플레이어를 직접 만들어야 할 때. 기본 video 태그로는 자막·화질 선택·라이브 처리에서 금방 막히는데 그 부분을 컴포넌트로 조립한다. UI Components의 framecn과 갈린다. 저쪽은 Editframe이라는 외부 서비스에 묶이고, 이건 순수 라이브러리다. 외부 의존 없이 쓰려면 이쪽. HLS·DASH를 지원한다. 자체 스트리밍이나 VOD 서비스를 붙일 때 실질적으로 필요한 부분이다. WCAG 2.2를 명시한다. 이 컬렉션에서 접근성 기준을 버전까지 밝히는 곳은 드물다. Plyr를 만든 팀이라 이 분야 이력이 길다. 유지보수 위험이 낮은 축. 라이선스가 첫 화면에 없다. GitHub에서 확인할 것.

·vidstack.io·
Vidstack — 미디어 플레이어를 조립해 만드는 컴포넌트 라이브러리
Basecoat — 프레임워크를 가리지 않는 Tailwind 컴포넌트
Basecoat — 프레임워크를 가리지 않는 Tailwind 컴포넌트

React가 아닌 환경에서 shadcn/ui 같은 결과를 원할 때. Django·Rails·Laravel·순수 HTML처럼 React를 안 쓰는 스택이 대상이다. 이 컬렉션의 UI Components는 거의 전부 React 전용이다. 프레임워크 무관을 표방하는 몇 안 되는 항목이라 자리가 겹치지 않는다. React 프로젝트라면 shadcn/ui가 먼저다. 이건 그 대안이 필요할 때의 선택지다. 컴포넌트 수가 공개돼 있지 않고 라이선스도 없다. 목록을 보고 GitHub에서 확인할 것.

·basecoatui.com·
Basecoat — 프레임워크를 가리지 않는 Tailwind 컴포넌트