Kidow

542 bookmarks

Newest

CSS Text Effects — 순수 CSS 텍스트 애니메이션 90종

헤드라인 하나에 효과를 주려고 애니메이션 라이브러리를 새로 들이지 않아도 되게 해주는 모음. JS 의존이 없다는 게 핵심이라 번들에 영향이 없고 서버 컴포넌트에서도 그대로 쓸 수 있다. 저장해둔 텍스트 계열(textmotion.dev, Calligraph, Motion Primitives의 Text Effect류)과 겹치지만, 그쪽들이 대부분 Motion/Framer Motion 기반인 반면 여기는 CSS 전용이라 선택 기준이 명확하다 — 프로젝트에 모션 라이브러리가 없거나 넣고 싶지 않으면 여기. 같은 제작자의 Kinetics(스프링 마이크로 인터랙션)와 세트로 보면 된다. 주의: 글리치·스플릿플랩 같은 강한 효과는 가독성을 해치므로 히어로 한 곳 정도로 제한할 것.

UI Components #css #animation #no-js #mit #open-source #micro

·text-effects.colorion.co·Sep 17, 2026

CSS Text Effects — 순수 CSS 텍스트 애니메이션 90종

Valessa — 브라우저에서 만드는 3D 제품 비주얼

제품 목업, 랜딩 히어로의 3D 오브젝트, 기능 소개용 짧은 3D 영상이 필요할 때. Blender를 켜서 재질과 조명을 세팅하는 과정을 건너뛰고 브라우저에서 결과물만 뽑는 것이 요점이라, 3D 전문 도구를 다루지 않는 입장에서 실효가 크다. 단 전제 조건이 있다 — 3D 모델 자체는 준비돼 있어야 한다(모델링 도구가 아니다). 모델이 없다면 저장해둔 Thiings(3D 오브젝트 에셋) 같은 기성 에셋을 먼저 구할 것. 결과물이 이미지·영상이므로 웹에서 회전시키는 인터랙티브 3D가 목적이라면 Three.js 계열이나 저장해둔 3D 컴포넌트 쪽으로 가야 한다.

Design #product-visualization #render #design-tool #browser #tool

·valessa.riotters.com·Sep 17, 2026

Valessa — 브라우저에서 만드는 3D 제품 비주얼

movin.design — X에서 모은 모션 디자인 레퍼런스

"어떤 움직임을 만들 것인가"를 정하는 단계에서 보는 자료. 코드가 아니라 완성된 모션 클립이므로 구현체는 저장해둔 Motion Primitives·Kinetics 쪽에서 찾고, 여기서는 방향과 타이밍 감각을 얻는 식으로 나눠 쓰면 된다. 이징 섹션은 곡선을 고를 때 실용적이다. 주의: 출처가 X 게시물이라 대부분 애프터이펙트·프로토타입 작업물이고 웹에서 그대로 구현하기 어려운 것이 섞여 있다 — 참고할 때 "이걸 브라우저에서 60fps로 돌릴 수 있는가"를 먼저 따질 것.

Design #motion #animation #gallery #easing #inspiration

·movin.design·Sep 17, 2026

movin.design — X에서 모은 모션 디자인 레퍼런스

Macapp Supply — 잘 만든 macOS 앱 큐레이션

두 가지 용도로 쓸 수 있다. 하나는 도구 발굴 — 유틸리티나 인디 앱을 찾을 때 완성도 기준으로 걸러진 목록이라 시간이 절약된다. 다른 하나가 사실 더 크다: macOS 앱은 UI 완성도 기준이 웹보다 높아서, 여기 등록된 앱들의 스크린샷과 아이콘이 데스크톱 앱이나 도구형 웹 서비스를 디자인할 때 레퍼런스가 된다(사이드바 구조, 설정 화면, 아이콘 톤). 아이콘 리소스 섹션도 같은 맥락으로 볼 것. 저장해둔 everywhere.tools·OpenAlternative과 같은 디렉터리 계열이지만 플랫폼(macOS)과 선정 기준(디자인)이 달라 겹치지 않는다.

Tools #macos #apps #curated #design-reference #directory

·macapp.supply·Sep 17, 2026

Macapp Supply — 잘 만든 macOS 앱 큐레이션

ONONC — 모션 중심 React 컴포넌트 336종

저장된 연출 계열 중 규모가 가장 큰 축(336종). 특히 섹션 블록이 119종으로 많아 랜딩 페이지를 블록 조립으로 세울 때 후보가 넓다. 다만 규모가 크다는 건 곧 "비슷한 것들 사이에서 고르는 시간"이 든다는 뜻이기도 하니, 배경 하나·텍스트 효과 하나처럼 목적이 분명할 때 해당 카테고리만 훑는 식으로 쓸 것. reduced-motion을 명시적으로 다룬다고 밝힌 점은 저장된 다른 연출 계열 모음 대비 장점이다. 주의: 라이선스가 확인되지 않으므로 상업 프로젝트에 넣기 전 저장소나 문서에서 라이선스를 직접 확인할 것. Framer Motion 의존이라 애니메이션 라이브러리 통일 원칙은 동일하다.

UI Components #react #nextjs #framer-motion #tailwind #animation #blocks #section #license-unknown

·dev.ononc.com·Sep 17, 2026

ONONC — 모션 중심 React 컴포넌트 336종

Planes — WebGL·물리·AI·캐러셀까지 연출 컴포넌트 114종 (무료 10종, 나머지 1회 결제 Pro)

랜딩이나 데모 화면에 "이건 직접 만들기엔 시간이 아깝다" 싶은 연출 조각이 필요할 때. 제품 전체를 세우는 키트가 아니라 한두 개를 골라 넣는 용도다. 저장된 유료 fx 중 Skiper UI·Hyperiux Vault·Atelier UI와 같은 자리인데, 여기는 WebGL 셰이더 배경과 물리 시뮬레이션(진자·잔물결)에 더해 AI 에이전트 화면 조각(추론 흐름·도구 호출 카드·승인 카드)까지 한 번에 들어 있다는 게 다르다. AI 조각만 필요하면 저장된 무료 쪽(AI Elements, Scrim UI 무료분)을 먼저 볼 것.

사기 전에 무료 10종부터 설치해 볼 것 — 계정 없이 공개 URL로 받을 수 있어 코드 품질과 스타일을 확인하기 좋다. 이전에 따로 저장한 Cover Flow도 무료 10종에 포함돼 있다.

라이선스: Pro는 개발자 1인 기준 무제한 상업 프로젝트 사용 가능, 다만 소스를 그대로 재배포·공개 저장소 게시·컴포넌트 라이브러리로 재판매하는 것은 금지되고 좌석(활성화) 수 제한이 있다. 키가 없으면 설치 명령 자체가 실패하는 구조라 CI에서 다시 설치하는 흐름이면 키 관리가 필요하다. 환불 불가(소스 즉시 제공)라 구매 전 목록을 꼭 확인할 것.

Tailwind v4가 아닌 프로젝트에는 맞지 않는다고 llms.txt가 스스로 밝히고 있다. WebGL·Canvas 항목은 모바일 성능을 따로 확인할 것.

UI Components #react #tailwind-v4 #motion #webgl #shader #interaction #ai-agent #shadcn #mcp #freemium #paid #fx #paid-license

·useplanes.com·Sep 17, 2026

Planes — WebGL·물리·AI·캐러셀까지 연출 컴포넌트 114종 (무료 10종, 나머지 1회 결제 Pro)

Cover Flow — 애플 커버플로우 3D 캐러셀 컴포넌트

앨범·포트폴리오·제품 이미지를 "넘겨 보는" 연출이 필요할 때의 완성품. 직접 만들면 3D 원근 계산과 관성 스냅, 입력 방식별 처리에서 시간이 많이 드는 부류라 기성 컴포넌트 가치가 크다. 다만 강한 연출이라 쓰임이 제한적이다 — 항목이 시각적으로 구분되는 경우(앨범 아트, 표지, 스크린샷)에만 맞고 텍스트 위주 목록에는 부적합하며, 한 번에 보이는 항목 수가 적어 탐색 효율은 일반 그리드보다 떨어진다. 접근성 측면에서 키보드 지원이 있는 점은 확인됐으나 스크린리더 대응은 별도 검증 필요.

UI Components #react #carousel #framer-motion #shadcn #mit #micro

·coverflow.ashishgogula.in·Sep 17, 2026

Cover Flow — 애플 커버플로우 3D 캐러셀 컴포넌트

Kinetics — 스프링 물리 기반 마이크로 인터랙션 153종

버튼 눌림, 토글, 리스트 삽입 같은 작은 동작의 "느낌"을 잡을 때 참고할 사전. 스프링 기반이라 애니메이션 도중 중단·재시작이 자연스럽다는 점이 핵심으로, 사용자가 빠르게 연타하는 UI(토글·좋아요·탭 전환)에서 고정 duration 이징보다 확실히 낫다. 각 항목을 순수 CSS로도 뽑을 수 있어 애니메이션 라이브러리를 추가하지 않고 적용할 수 있는 것이 저장해둔 다른 연출 계열 모음과의 차별점이다. AI 프롬프트 형태 제공은 Claude Code에 그대로 붙여 쓰기 좋다. stiffness·damping 값은 사이트에서 조정한 뒤 확정해서 옮길 것.

UI Components #css #react #spring #micro-interaction #animation #open-source #micro #license-unknown

·kinetics.colorion.co·Sep 17, 2026

Kinetics — 스프링 물리 기반 마이크로 인터랙션 153종

Groot Studio — Motion·Radix 기반 컴포넌트·블록 모음

Radix를 기반으로 하면서 Motion을 얹은 구성이라 저장해둔 shadcn 계열 프로젝트에 이물감 없이 섞이는 편이다. 다만 연출·블록 계열이 이미 충분히 쌓여 있으므로 전면 도입 대상이라기보다, 특정 블록이 마음에 들 때 발췌하는 용도로 둘 것. 다중 프레임워크 지원을 내세우지만 실제 커버리지는 항목마다 다를 수 있으니 필요한 컴포넌트가 React 외 프레임워크에서도 제공되는지는 개별 확인이 필요하다.

UI Components #react #radix #tailwind #open-source #motion #blocks #section #license-unknown

·grootstudio.dev·Sep 17, 2026

Groot Studio — Motion·Radix 기반 컴포넌트·블록 모음

Watermelon UI — 애니메이션 컴포넌트·블록·대시보드 모음

컴포넌트 단위보다 "대시보드 한 벌", "랜딩 섹션 한 벌"처럼 덩어리로 가져올 때 유용한 구성. llms.txt와 MCP를 제공하므로 Claude Code·Cursor에서 컴포넌트를 참조시키기 편하다는 점이 실무적 차별점이다. 다만 저장해둔 블록·템플릿 계열(Tailark, blocks.so, UI TripleD 등)과 범위가 크게 겹치므로 새로 도입하기보다 필요한 화면 유형이 있을 때 후보 목록에 올려두는 정도가 맞다.

UI Components #react #tailwind #shadcn #dashboard #mcp #open-source #blocks #appkit #license-unknown

·ui.watermelon.sh·Sep 17, 2026

Watermelon UI — 애니메이션 컴포넌트·블록·대시보드 모음

Bklit UI — shadcn 기반 차트·데이터 시각화 컴포넌트

저장해둔 차트 계열(chartcn, Rosen Charts, Evil Charts, Liveline)과 같은 자리를 놓고 비교할 항목. Bklit의 강점은 기본 차트를 넘어 히트맵·게이지·생키까지 커버한다는 점과, Studio에서 시각적으로 구성해 코드를 뽑을 수 있다는 점이다. 생키 다이어그램은 다른 shadcn 차트 모음에 거의 없으므로 유입 경로·전환 흐름을 보여줘야 하면 여기가 사실상 유일한 후보다. 선택 기준: 기본 차트 몇 개면 shadcn 기본 Chart로 충분하고, 종류가 다양하거나 대시보드 전체를 짜야 하면 Bklit을 볼 것.

UI Components #react #shadcn #chart #tailwind #open-source #data #license-unknown

·bklit.com·Sep 17, 2026

Bklit UI — shadcn 기반 차트·데이터 시각화 컴포넌트

Trophy Gamification UI Kit — 게이미피케이션 컴포넌트

출석 체크, 연속 학습 일수, 등급·포인트, 랭킹 같은 기능을 붙일 때 UI를 처음부터 만들지 않아도 되게 해준다. 특히 스트릭 캘린더와 업적 해제 애니메이션은 직접 만들면 시간이 꽤 드는 축이다. 중요한 구분: 이건 UI만 제공하고 포인트 적립 규칙·연속 판정·레벨 산식 같은 로직은 직접 구현하거나 Trophy 서비스를 쓰는 구조다. 즉 데이터 모델은 내 몫이고 화면만 빌려오는 것이라 보면 된다. 특정 도메인 전용이라 게이미피케이션을 실제로 넣기로 결정한 뒤에 꺼낼 항목.

UI Components #react #shadcn #tailwind #gamification #mit #open-source #commerce

·ui.trophy.so·Sep 17, 2026

Trophy Gamification UI Kit — 게이미피케이션 컴포넌트

glimm — WebGL 셰이더 페이지 전환

페이지 이동이 "그냥 내용이 바뀌는" 느낌일 때 전환 한 겹을 얹는 용도. 포트폴리오·에이전시·제품 소개처럼 연출이 중요한 사이트에 어울리고, 대시보드처럼 이동이 잦은 도구형 제품에는 오히려 방해가 된다(이동마다 대기 시간이 체감된다). 10KB에 의존성이 없으니 도입 비용 자체는 낮다. 저장해둔 bprogress(상단 진행 바)와 목적이 갈린다 — bprogress는 "기다리는 중"을 알리는 정보 전달, glimm은 연출이다. prefers-reduced-motion 처리는 직접 확인할 것.

UI Components #react #nextjs #webgl #page-transition #shader #mit #micro

·glimm.dev·Sep 17, 2026

glimm — WebGL 셰이더 페이지 전환

Velvet UI — 인터페이스 사운드 디자인 원칙

UI에 사운드를 넣기로 했을 때 라이브러리를 고르기 전에 먼저 읽을 자료. 저장해둔 soundz.js와 soundcn이 "어떻게 재생할 것인가"라면 여기는 "언제 어떤 소리를 낼 것인가"를 다룬다 — 이 판단을 건너뛰면 소리가 성가신 기능이 되기 쉽다. 특히 네 가지 유형 분류(상태 변화/도착/확인/실패)는 그대로 구현 설계에 옮길 수 있고, 옵트인·상시 음소거 원칙은 접근성과 사용자 불만 측면에서 실무적으로 중요하다. 컴포넌트 라이브러리가 아니라 읽고 판단하는 레퍼런스이므로 설치할 것은 없다.

Design #sound #ux #design-principles #audio #reference #inspiration

·velvet-ui-eight.vercel.app·Sep 17, 2026

Velvet UI — 인터페이스 사운드 디자인 원칙

CTA Gallery — 실제 웹사이트의 CTA 사례 모음

전환이 걸린 화면(가입 유도, 결제 버튼, 뉴스레터 폼, 가격표)을 설계할 때 훑는 레퍼런스. 컴포넌트 라이브러리가 "어떻게 만드는가"를 준다면 여기는 "무엇을 어떤 문구와 배치로 보여주는가"를 준다 — 버튼 하나의 카피, 보조 문구, 주변 여백, 부가 정보(무료 체험·카드 불필요 같은 안심 문구)의 조합을 실제 사례로 확인할 수 있다. 저장해둔 navbar.gallery(내비게이션), details.so(인터랙션 디테일)와 같은 성격의 레퍼런스 갤러리이니 화면 영역별로 나눠 쓰면 된다. 주의: 사례는 그 제품의 맥락에서 통한 것이므로 문구를 그대로 옮기지 말고 구조만 참고할 것.

Design #cta #landing #ux #copywriting #gallery #inspiration

·cta.gallery·Sep 17, 2026

CTA Gallery — 실제 웹사이트의 CTA 사례 모음

Klarden UI — 복붙용 애니메이션 React 컴포넌트 25종+

규모가 작은 대신 개별 항목이 구체적이라 "이 효과 하나만 필요할 때" 뒤지기 좋은 모음. 터미널, Spotify 카드, 포털 업로더, 서명 애니메이션처럼 큰 라이브러리에는 잘 없는 조각들이 있는 게 실효다. 다만 저장해둔 연출 계열이 이미 많으므로 전면 도입 대상이 아니라 부분 발췌용으로 두는 게 맞다. 넘버 티커는 저장해둔 NumberFlow(서식·접근성 처리가 더 탄탄)와, 로고 캐러셀은 Cult UI와 겹치니 그쪽을 먼저 볼 것. Framer Motion 의존이라 프로젝트 애니메이션 라이브러리 통일 원칙은 동일하다.

UI Components #react #framer-motion #tailwind #copy-paste #open-source #fx #license-unknown

·klarden.vercel.app·Sep 17, 2026

Klarden UI — 복붙용 애니메이션 React 컴포넌트 25종+

Iconiq UI — Motion을 얹은 shadcn 디자인 시스템

이름이 아이콘 라이브러리처럼 보이지만 아이콘이 아니라 컴포넌트 라이브러리다. 저장해둔 Spectrum UI, reui.io, AI Canvas와 같은 계열(MCP를 운영하는 shadcn 레지스트리)이므로 넷을 함께 비교할 것. Iconiq의 성격은 "화려한 효과 모음"이 아니라 버튼·입력 같은 기본 컴포넌트에 은은한 모션을 기본값으로 깔아둔 쪽이다 — 그래서 shadcn을 쓰고 있는데 전체적으로 좀 더 살아 있는 느낌을 원할 때, 개별 연출 계열 라이브러리를 덧대는 대신 기본 세트를 통째로 교체하는 선택지가 된다. 주의: 기본 컴포넌트를 갈아끼우는 성격이라 이미 shadcn 컴포넌트를 많이 커스터마이징한 프로젝트에 중간 도입하면 충돌 비용이 크다. 새 프로젝트나 초기 단계에서 판단할 것. 컴포넌트 총 개수는 사이트에서 명확히 확인하지 못했다.

UI Components #react #shadcn #tailwind #mcp #open-source #motion #fx #license-unknown

·iconiqui.com·Sep 17, 2026

Iconiq UI — Motion을 얹은 shadcn 디자인 시스템

로고착착 — 한국 브랜드 로고·CI/BI 공식 자료 모음

국내 서비스 만들 때 파트너사 로고, 제휴사 목록, 결제·간편로그인 버튼(카카오·네이버·토스 등), 회사 소개의 "함께하는 브랜드" 섹션에 로고가 필요할 때. 구글 이미지에서 해상도 낮은 PNG를 주워 오는 대신 각 사의 공식 배포처와 CI 가이드라인으로 바로 연결해준다는 게 핵심 가치다. 컬러 코드가 정리돼 있어 로고 옆 배경색이나 버튼 색을 브랜드 규정대로 맞추기도 쉽다. 저장해둔 svgl(글로벌 브랜드 로고)·Developer Icons(기술 스택 로고)와 역할이 나뉘며, 국내 브랜드는 그 둘에 거의 없으므로 여기가 유일한 출처가 되는 경우가 많다. 중요: 로고는 다운로드 가능 여부와 별개로 각 사의 브랜드 가이드라인(최소 여백, 색 변형 금지, 상업적 사용 조건)을 따라야 하며, 특히 제휴 관계를 암시하는 배치는 사전 합의가 필요하다 — 사이트도 저작권 귀속을 명시하고 있다.

Design #logo #brand #korea #ci-bi #free #asset

·logochakchak.site·Sep 17, 2026

로고착착 — 한국 브랜드 로고·CI/BI 공식 자료 모음

shieldcn — shadcn 스타일 README 배지·차트 생성기

오픈소스 저장소나 사내 라이브러리의 README를 정리할 때. 기존 shields.io 배지는 기본 스타일이 촌스럽고 색을 맞추기 번거로운데, 여기는 shadcn 톤으로 통일돼 있어 README 상단이 한 세트로 보인다. 스타 히스토리·다운로드 추이 차트를 별도 서비스(star-history 등)를 붙이지 않고 같은 스타일로 뽑을 수 있는 점이 실질적인 이점. 배지는 URL로 임베드하는 방식이므로 외부 서비스 가용성에 README 표시가 묶인다는 점은 감안할 것 — 중요한 저장소라면 SVG를 내려받아 저장소에 넣어두는 편이 안전하다.

Tools #readme #badge #chart #github #open-source #shadcn #build

·shieldcn.dev·Sep 17, 2026

shieldcn — shadcn 스타일 README 배지·차트 생성기

Dot Matrix — 도트 매트릭스 스타일 로더 91종

로더에 성격을 주고 싶을 때 쓰는 특화 모음. 일반적인 스피너는 Loading UI 쪽이 범용적이고, 여기는 레트로·터미널·하드웨어 계열 톤이 필요한 제품(개발자 도구, AI 에이전트 실행 화면, 대시보드)에서 분위기 맞추기에 좋다. shadcn 레지스트리라 설치 후 코드가 프로젝트 소유가 되므로 색·점 밀도·속도를 직접 조정하기 쉽다. 주의: 도트 애니메이션은 점 개수만큼 DOM이나 렌더 비용이 늘 수 있으므로 목록 아이템마다 깔기보다 화면 단위 로딩에 쓸 것.

UI Components #react #shadcn #loader #tailwind #typescript #dot-matrix #micro #license-unknown

·dotmatrix.zzzzshawn.cloud·Sep 17, 2026

Dot Matrix — 도트 매트릭스 스타일 로더 91종

UI TripleD — Motion 기반 컴포넌트·블록·페이지

애니메이션이 들어간 랜딩 섹션을 통째로 가져다 조립할 때 후보. 저장된 연출 계열과 성격이 겹치지만 두 가지가 다르다 — (1) 컴포넌트 단위가 아니라 블록·페이지 단위 구성이 있어 랜딩 한 장을 빠르게 세우는 데 유리하고, (2) 코어를 shadcn UI뿐 아니라 Base UI 버전으로도 제공해 Base UI를 기반으로 정한 프로젝트에서도 쓸 수 있다(저장된 대부분의 연출 계열 라이브러리는 Radix/shadcn 전제라 이 점이 드문 장점이다). Motion 의존이므로 애니메이션 라이브러리 통일 원칙은 동일하게 적용할 것.

UI Components #react #shadcn #base-ui #tailwind #motion #blocks #section #license-unknown

·ui.tripled.work·Sep 17, 2026

UI TripleD — Motion 기반 컴포넌트·블록·페이지

Loading UI — CSS·React 로더 48종 모음

스피너 하나 만들려고 CSS 애니메이션을 다시 짜는 시간을 줄이는 용도. 대부분 순수 CSS라 의존성이 늘지 않고 번들에 거의 영향이 없는 게 장점이다. 실무 기준으로는 text-shimmer와 skeleton이 가장 쓸모가 많다 — 데이터 로딩 구간에 스피너 대신 스켈레톤을 쓰면 체감 대기시간이 줄어든다. 저장해둔 bprogress(페이지 전환 진행 바)와 역할이 다르니 함께 쓰면 되고, 도트 매트릭스 스타일 로더가 필요하면 Dot Matrix 쪽이 전문이다.

UI Components #css #react #loader #spinner #skeleton #open-source #micro #license-unknown

·loading-ui.com·Sep 17, 2026

Loading UI — CSS·React 로더 48종 모음

@pierre/diffs — 코드 diff 렌더링 라이브러리

코드 리뷰 화면, 변경 이력 뷰어, AI가 제안한 수정안을 비교해 보여주는 UI를 만들 때. 줄 단위 코멘트와 머지 충돌 해결 UI까지 들어 있어 GitHub 스타일 리뷰 경험을 직접 구현하지 않아도 된다는 게 핵심이다. 형제 라이브러리인 @pierre/trees와 함께 쓰면 저장소 뷰어 한 벌이 된다. 주의: Shadow DOM으로 렌더링하므로 전역 CSS나 Tailwind 클래스가 내부에 그대로 적용되지 않는다 — 스타일은 제공되는 CSS 변수와 Shiki 테마로 다루는 것을 전제로 설계를 잡을 것.

UI Components #react #diff #code-review #shiki #syntax-highlighting #open-source #content #license-unknown

·diffs.com·Sep 17, 2026

@pierre/diffs — 코드 diff 렌더링 라이브러리

@pierre/trees — 고성능 파일 트리 렌더링 라이브러리

코드 브라우저, 파일 관리 UI, 문서 탐색기처럼 트리 구조를 보여줘야 할 때. 트리는 직접 만들면 가상화, 키보드 포커스 이동, 드래그앤드롭 재배치에서 난도가 급격히 올라가는 컴포넌트라 기성품 가치가 크다. Git 상태 표시가 내장돼 있어 코드 리뷰나 저장소 뷰어 성격의 화면이면 바로 맞고, 같은 팀의 @pierre/diffs(diffs.com)와 짝으로 쓰면 "파일 목록 + 변경 내용" 화면이 한 번에 선다. 주의: 아직 베타 버전이므로 API 변경 가능성을 감안하고 버전을 고정할 것.

UI Components #react #file-tree #typescript #virtualization #git #open-source #micro #license-unknown

·trees.software·Sep 17, 2026

@pierre/trees — 고성능 파일 트리 렌더링 라이브러리

NumberFlow — 값이 바뀔 때 굴러가는 숫자 컴포넌트

대시보드 지표, 가격 표시, 카운터, 실시간 수치처럼 "숫자가 바뀌는 것 자체를 보여줘야" 하는 곳에 쓴다. 단순히 예쁜 게 아니라 값이 변했다는 사실을 인지시키는 기능이 있어서, 폴링·실시간 업데이트가 있는 화면에서 특히 값어치가 있다. Intl 서식을 내장해 통화·천 단위 구분·로케일 처리를 따로 짜지 않아도 되는 점이 다른 카운트업 라이브러리와 갈리는 지점이다(대부분은 서식이 깨진다). 주의: 값이 자주 바뀌는 곳에 많이 깔면 애니메이션이 겹쳐 산만해지므로 화면당 핵심 지표 몇 개로 제한할 것. 저장해둔 Motion Primitives의 Animated/Sliding Number와 목적이 겹치니 서식 요구가 있으면 이쪽을 우선.

UI Components #react #animation #number #intl #accessibility #open-source #micro #license-unknown

·number-flow.barvian.me·Sep 17, 2026

NumberFlow — 값이 바뀔 때 굴러가는 숫자 컴포넌트

Sonner — React 토스트 알림 라이브러리

알림 토스트가 필요할 때 사실상 기본값. 직접 만들면 항상 어긋나는 부분(여러 개가 동시에 뜰 때의 스택 애니메이션, 호버 시 타이머 정지, 스와이프 해제, 접근성 라이브 리전)이 기본 동작으로 들어 있다. 특히 toast.promise()로 "요청 중 → 성공/실패"를 한 줄로 처리하는 패턴이 실무에서 자주 쓰인다. 같은 저자의 Vaul과 달리 활발히 유지보수되고 있어 신규 채택에 부담이 없다. 디자인이 꽤 강하게 잡혀 있는 편이라 브랜드 톤에 맞추려면 CSS 변수와 커스텀 렌더러로 덮어쓰는 작업이 필요하다.

UI Components #react #toast #notification #mit #open-source #micro

·sonner.emilkowal.ski·Sep 17, 2026

Sonner — React 토스트 알림 라이브러리

Vaul — React 드로어(바텀시트) 컴포넌트

모바일 웹에서 모달 대신 바텀시트를 쓸 때. 드래그로 닫기, 스냅 포인트(반쯤 열림), 내부 스크롤과 드래그 제스처의 충돌 같은 부분은 직접 구현하면 디테일에서 계속 무너지는 영역이라 기성 라이브러리 가치가 크다. shadcn Drawer를 쓰고 있다면 이미 의존성에 있고, 스냅 포인트나 방향 설정을 손볼 때 원본 문서가 여기다. 다만 유지보수 중단 공지가 있으므로 신규 채택이라면 판단이 필요하다 — 이미 기능이 안정적이고 API가 단순해 당장 쓰는 데는 문제가 적지만, React 신버전 대응이나 버그 수정은 기대하기 어렵다. 대안이 필요하면 저장해둔 React Aria나 Base UI 계열의 Dialog·Popover 위에 제스처를 직접 얹는 구성, 또는 Cult UI의 Family Drawer 계열 구현을 참고할 것.

UI Components #react #drawer #bottom-sheet #gesture #mobile #mit #micro

·vaul.emilkowal.ski·Sep 17, 2026

Vaul — React 드로어(바텀시트) 컴포넌트

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(차세대 설계) 중 하나를 고르는 구조이며 프로젝트 초반에 정해야 하는 항목이다.

UI Components #react #headless #primitive #accessibility #base-ui #open-source #foundation #license-unknown

·base-ui.com·Sep 17, 2026

Base UI — Radix·Floating UI·MUI 팀이 다시 만든 프리미티브

Radix UI — shadcn/ui의 토대가 되는 프리미티브

저장된 컴포넌트 라이브러리 상당수가 결국 여기에 기대고 있으므로 원본 문서로 둘 가치가 있다. shadcn/ui 컴포넌트에서 예상과 다른 동작(포커스 트랩, Portal, asChild 합성, 컨트롤드/언컨트롤드 상태)을 만나면 shadcn 문서가 아니라 여기 Primitives 문서를 봐야 답이 나온다. 선택 관점에서는 Radix Primitives = 가장 넓은 생태계 호환(shadcn 및 파생 레지스트리 전부), React Aria = 접근성·국제화 심도, Base UI = Radix 팀이 다시 만든 후속 세대라는 구도다. Themes는 디자인이 이미 강하게 잡혀 있어 브랜드 디자인이 있는 제품에는 보통 Primitives + 자체 스타일이 맞다.

UI Components #react #headless #primitive #accessibility #radix #open-source #foundation #license-unknown

·radix-ui.com·Sep 17, 2026

Radix UI — shadcn/ui의 토대가 되는 프리미티브

Intent UI — React Aria 기반 복붙 컴포넌트 (87종+)

저장해둔 React Aria 위에 디자인을 얹은 완성형 레이어. React Aria를 쓰기로 했다면 프리미티브부터 직접 스타일링하지 말고 여기서 시작하는 편이 훨씬 빠르다 — shadcn/ui가 Radix에 대해 하는 역할을 Intent UI가 React Aria에 대해 한다고 보면 된다. 그래서 선택은 사실상 상위 기반의 선택과 같다: Radix+shadcn 생태계의 넓은 호환이냐, React Aria의 강한 접근성·국제화·날짜 처리냐. 날짜/시간 선택기와 테이블 조작이 제품의 핵심이면 이쪽이 유리하다. 같은 계열로 저장해둔 dotui(디자인 시스템 스튜디오)도 React Aria 기반이니 함께 비교할 것.

UI Components #react #react-aria #tailwind #accessibility #copy-paste #mit #foundation

·intentui.com·Sep 17, 2026

Intent UI — React Aria 기반 복붙 컴포넌트 (87종+)