Frontend

389 bookmarks

Newest

flagcn — 국기 컴포넌트 306종 shadcn 레지스트리

국가 선택 드롭다운, 언어 전환기, 통화 선택, 국제 배송 폼처럼 국기가 필요한 화면에 쓴다. 직접 하면 국기 SVG를 어디선가 모아 크기와 비율을 통일하는 작업이 생기는데 그걸 없애준다. 비율 옵션이 있는 게 실무에서 중요한 부분 — 국기는 원본 비율이 제각각이라 목록에 나란히 놓으면 정렬이 깨지는데 4:3이나 정사각으로 통일할 수 있다. 주의: 국기와 언어는 1:1이 아니므로(영어=미국기, 스페인어=스페인기 식의 매핑은 정확하지 않다) 언어 선택기에는 국기 대신 언어명을 쓰는 편이 맞고, 분쟁 지역 관련 표기는 서비스 대상 지역 기준으로 신중히 판단할 것.

UI Components #react #shadcn #flags #i18n #svg #geo #license-unknown

·flagcn.dev·Sep 17, 2026

flagcn — 국기 컴포넌트 306종 shadcn 레지스트리

Beautiful UI — AI 에이전트가 사람과 대화하는 화면용 프리미티브 21종

저장된 AI UI 계열 중 "사람의 승인이 필요한 에이전트"에 초점을 맞춘 쪽. 에이전트가 실제 작업(결제, 발송, 삭제)을 하려 할 때 사람이 확인하고 승인하는 화면은 대부분의 AI UI 라이브러리가 안 다루는 영역인데, 여기는 승인 카드와 워크플로 시각화를 프리미티브로 갖고 있다. 에이전트 제품에서 이 화면의 품질이 곧 신뢰도이므로 참고 가치가 크다. MIT라 상업 사용에 걸림돌이 없다. 21종으로 작으니 전체 채택보다 prompt-kit·AI Elements 위에 승인 흐름만 얹는 조합이 현실적이다.

UI Components #ai-agent #human-in-the-loop #chat #react #mit #ai

·beautifului.dev·Sep 17, 2026

Beautiful UI — AI 에이전트가 사람과 대화하는 화면용 프리미티브 21종

Transition Kit — View Transitions API 페이지 전환 템플릿 30종+

브라우저 표준 API로 전환을 만든다는 점이 핵심 — 애니메이션 라이브러리 없이, DOM을 이중으로 렌더링하지 않고 브라우저가 스냅샷을 찍어 보간하므로 구현이 가볍고 성능이 좋다. 특히 다크모드 토글의 원형 확산 전환은 View Transitions로 만드는 게 사실상 정석이라 여기 템플릿을 그대로 쓰면 된다. 저장해둔 glimm(WebGL 밴드 전환)과 비교하면 — glimm은 연출이 강하고 독립적이며, 이쪽은 표준 기반이라 가볍고 콘텐츠 자체가 변형된다. 사파리와 파이어폭스 지원 상황은 시점에 따라 다르니 사용 전 확인하고, 폴백이 자연스러운지 반드시 테스트할 것.

UI Components #css #view-transitions #page-transition #react #nextjs #open-source #micro #license-unknown

·transition-kit.space·Sep 17, 2026

Transition Kit — View Transitions API 페이지 전환 템플릿 30종+

LocalMode UI — 브라우저에서 모델을 직접 돌리는 AI 컴포넌트

저장해둔 AI UI 계열(prompt-kit, AI Elements, AICSS, agentcn)과 결정적으로 다른 축 — 저 셋이 서버의 모델과 대화하는 화면이라면, 여기는 모델 자체를 브라우저에서 WebGPU로 돌리는 구성까지 포함한다. 그래서 데이터가 서버로 나가면 안 되는 기능(로컬 요약, 기기 내 분류, 오프라인 동작)을 만들 때 참고할 유일한 축이다. 현실적 제약은 분명하다: WebGPU 지원 브라우저가 필요하고, 모델 가중치를 내려받아야 하므로 첫 로딩이 수십~수백 MB가 될 수 있으며, 기기 성능에 따라 속도 편차가 크다. 즉 "보조 기능"으로는 쓸 만해도 주 기능을 여기에 걸기는 이르다. 프라이버시가 판매 포인트인 제품에서 검토할 것.

UI Components #webgpu #local-first #privacy #react #shadcn #open-source #ai #license-unknown

·localmode.ai·Sep 17, 2026

LocalMode UI — 브라우저에서 모델을 직접 돌리는 AI 컴포넌트

FeralUI — 물리 시뮬레이션 기반 인터랙션 실험

실용 컴포넌트 모음이 아니라 인터랙션 실험실에 가깝다. 다크 패턴 없이 재미를 주는 요소(당기는 줄로 다크모드 토글, 인형뽑기 캡차)가 필요할 때 아이디어를 얻는 용도이고, 개인 사이트·포트폴리오·이벤트 페이지처럼 성격이 자유로운 곳에 어울린다. 물리 시뮬레이션은 계산 비용이 있으니 모바일 성능은 반드시 확인할 것. 저장해둔 ibelick Lab과 같은 성격(실험 모음)이지만 이쪽은 물리 기반이라 더 무겁고 더 튄다. 라이선스가 확인되지 않았으므로 코드를 가져다 쓸 계획이면 저장소에서 먼저 확인할 것.

UI Components #react #physics #interaction #experiment #playful #fx #license-unknown

·feralui.dev·Sep 17, 2026

FeralUI — 물리 시뮬레이션 기반 인터랙션 실험

Flexnative UI — 블록·패턴과 AI 에이전트용 프롬프트

특이한 축은 "인텐트"와 "프롬프트"다 — 컴포넌트 목록뿐 아니라 인증·결제 같은 기능 단위 흐름과, AI 에이전트에 넣을 프롬프트를 함께 제공한다. Claude Code로 화면을 만들 때 컴포넌트를 하나씩 지시하는 대신 기능 단위로 지시하는 방식에 맞춘 구성이라 참고할 만하다. 다만 블록·패턴 자체는 저장해둔 계열과 크게 겹치므로, 이 프롬프트·인텐트 접근이 마음에 들 때 꺼낼 항목으로 두면 된다. 이름 때문에 React Native로 오해하기 쉬우니 주의.

UI Components #react #nextjs #shadcn #tailwind #prompt #open-source #blocks #section #license-unknown

·ui.flexnative.com·Sep 17, 2026

Flexnative UI — 블록·패턴과 AI 에이전트용 프롬프트

dither-kit — 디더링 질감의 차트·아바타 컴포넌트

저장해둔 차트 계열(Bklit, chartcn, Rosen Charts, Evil Charts, Liveline)과 같은 자리지만 선택 이유가 다르다 — 기능이 아니라 질감이다. 레트로·터미널·브루탈리즘 톤의 제품에서 차트만 매끈한 SaaS 스타일이면 톤이 깨지는데 그 간극을 메운다. recharts 스타일 API라 기존 차트 코드에서 옮기기 쉬운 점도 장점. 주의: 캔버스 렌더링이라 SVG 차트와 달리 텍스트 선택·접근성 처리가 제한적이고, 디더링은 저해상도 질감이라 정밀한 수치 판독에는 불리하다 — 정확한 데이터 읽기가 목적인 대시보드보다 연출용 화면에 맞다. 라이선스 미확인이므로 상업 사용 전 확인할 것.

UI Components #react #chart #dither #canvas #shadcn #retro #data #license-unknown

·tripwire.sh·Sep 17, 2026

dither-kit — 디더링 질감의 차트·아바타 컴포넌트

AICSS — AI 에이전트 대화 화면용 블록

저장해둔 AI 채팅 UI 계열과 나란히 비교할 항목 — prompt-kit(shadcn 관례, SDK 비종속), AI Elements(Vercel AI SDK 공식), agentcn(에이전트 실행 화면), 그리고 AICSS. AICSS의 차별점은 React 외에 Vue·Svelte도 지원한다는 점이라, React가 아닌 스택에서 에이전트 UI를 만들 때는 사실상 몇 안 되는 선택지가 된다. 툴 호출과 사고 과정 표시는 에이전트 제품에서 반드시 필요한데 직접 만들면 상태 종류가 많아 번거로운 부분이다. 주의: 무료와 Pro가 나뉘므로 필요한 블록이 무료 범위에 있는지 먼저 확인할 것.

UI Components #ai-agent #chat #react #vue #svelte #paid #ai #paid-license

·aicss.dev·Sep 17, 2026

AICSS — AI 에이전트 대화 화면용 블록

Sora UI — Motion·GSAP 기반 애니메이션 컴포넌트

특징은 Base UI와 Radix 양쪽 기반 컴포넌트를 함께 제공한다는 점이다 — 저장된 대부분의 연출 계열 라이브러리가 Radix/shadcn 전제라, Base UI로 기반을 정한 프로젝트에서 쓸 수 있는 선택지는 드물다(UI TripleD와 같은 이유로 가치가 있다). GSAP까지 쓰는 구성이라 Motion만 쓰는 프로젝트라면 의존성이 하나 더 늘어날 수 있으니 필요한 컴포넌트가 어느 쪽을 쓰는지 확인할 것. Tailwind v4 전제.

UI Components #react #gsap #tailwind #base-ui #radix #open-source #motion #fx #license-unknown

·ui.soralabs.studio·Sep 17, 2026

Sora UI — Motion·GSAP 기반 애니메이션 컴포넌트

CharmUI — 유료 React·Tailwind 인터랙션 컴포넌트

저장해둔 연출 계열 대부분이 무료라 유료로 넘어갈 이유는 "여기에만 있는 컴포넌트"뿐이다. 실제로 Isometric Pillars, Light Rays, Holographic Button처럼 구현 난도가 높고 무료 모음에 잘 없는 항목이 있으므로, 랜딩 히어로 연출에 시간을 많이 쓰는 상황이면 39달러 1회는 회수 가능한 편이다. 같은 제작자의 Scroll Mask(무료 CSS 유틸리티)를 먼저 써보면 코드 품질과 취향을 가늠할 수 있다. 구독이 아니라 1회 결제라는 점은 장점.

UI Components #react #tailwind #paid #copy-paste #interaction #fx #paid-license

·charmui.com·Sep 17, 2026

CharmUI — 유료 React·Tailwind 인터랙션 컴포넌트

Scroll Mask — 스크롤 가장자리 페이드 Tailwind 유틸리티

가로 스크롤 목록이나 긴 세로 목록에서 "더 있다"는 신호를 주는 가장 깔끔한 방법. 흔히 쓰는 고정 그라디언트 오버레이와 달리 스크롤 위치에 반응해서 끝에 도달하면 마스크가 사라지므로 어색함이 없고, JS 스크롤 리스너가 필요 없어 성능 부담도 없다. 주의는 하나 — animation-timeline: scroll()은 비교적 최신 기능이라 지원 범위를 caniuse에서 확인하고, 미지원 브라우저에서는 마스크가 적용되지 않는 형태로 자연스럽게 떨어지는지 확인할 것. Tailwind v4 전제이므로 v3 프로젝트에서는 그대로 쓸 수 없다.

UI Components #css #tailwind #scroll #mask #no-js #micro #license-unknown

·twilson.net·Sep 17, 2026

Scroll Mask — 스크롤 가장자리 페이드 Tailwind 유틸리티

Arise UI — 애니메이션 컴포넌트 shadcn 레지스트리

아직 규모가 작고 일부 컴포넌트가 작업 중 상태인 초기 단계 프로젝트. 저장된 동류 레지스트리가 이미 많으므로 지금 시점에서 전면 도입할 이유는 크지 않고, OTP 입력처럼 필요한 항목이 정확히 있을 때 개별로 가져다 쓰는 정도가 맞다. 성장하는 프로젝트일 수 있으니 나중에 다시 확인할 대상으로 두되, 라이선스 미표기 상태는 상업 사용 전 반드시 확인할 것.

UI Components #react #shadcn #tailwind #animation #early-stage #license-unclear #motion #fx

·ariseui.vercel.app·Sep 17, 2026

Arise UI — 애니메이션 컴포넌트 shadcn 레지스트리

Canvas UI — HTML을 캔버스에 올려 GPU 효과를 입히는 컴포넌트

"실제 DOM 콘텐츠에 셰이더 효과를 입히는" 드문 접근. 보통의 연출 계열 라이브러리는 장식 레이어를 따로 얹지만 여기는 HTML 자체를 캔버스로 올려 파티클로 흩어지게 하거나 유리 굴절을 통과시킨다 — 텍스트·이미지가 그대로 효과의 대상이 된다. 그래서 전환 연출이나 히어로에서 임팩트가 크다. 대신 비용도 분명하다: 캔버스로 올라간 콘텐츠는 텍스트 선택·검색·스크린리더 접근이 불가능하므로 중요한 콘텐츠에는 쓰지 말고 장식 구간에만, 그리고 미지원 환경 폴백을 반드시 확인할 것. 라이선스에 Commons Clause가 붙어 있어 이 컴포넌트를 상품으로 되파는 형태는 금지된다는 점도 유의.

UI Components #webgl #webgpu #shader #canvas #react #vue #svelte #mit #background

·canvasui.dev·Sep 17, 2026

Canvas UI — HTML을 캔버스에 올려 GPU 효과를 입히는 컴포넌트

unlumen UI — Motion 기반 shadcn 레지스트리

저장된 shadcn 레지스트리 계열과 같은 성격. Primitives와 Components를 층으로 나눠 둔 구성이라 기본형부터 가져다 쓰기 좋다. 다만 동류 항목이 이미 많으므로 전면 도입 후보라기보다 필요한 컴포넌트가 있을 때 확인하는 목록에 둘 것. 라이선스 미확인 상태이니 상업 사용 전 저장소를 볼 것.

UI Components #react #shadcn #tailwind #typescript #registry-cli #motion #fx #license-unknown

·ui.unlumen.com·Sep 17, 2026

unlumen UI — Motion 기반 shadcn 레지스트리

8bitcn/ui — 레트로 8비트 스타일 shadcn 컴포넌트

게임·커뮤니티·개인 프로젝트처럼 톤이 자유로운 곳에서 정체성을 만들 때. shadcn 컴포넌트 구조를 그대로 따르므로 기존 shadcn 프로젝트에서 스타일만 갈아끼우는 형태로 적용할 수 있는 게 장점이다. 주의: 픽셀 폰트와 강한 테두리는 가독성과 접근성(대비, 작은 글씨)에서 불리하므로 정보 밀도가 높은 화면이나 업무용 제품에는 맞지 않는다. 레트로 로더가 필요하면 저장해둔 Dot Matrix와 톤이 맞는다.

UI Components #react #shadcn #retro #8bit #pixel #open-source #blocks #skin #license-unknown

·8bitcn.com·Sep 17, 2026

8bitcn/ui — 레트로 8비트 스타일 shadcn 컴포넌트

Amicro — 트리셰이킹 가능한 마이크로 인터랙션 컴포넌트

번들 크기를 의식하면서 모션을 넣고 싶을 때 후보. 다만 저장된 마이크로 인터랙션 계열이 이미 여럿이라(Kinetics는 CSS까지 뽑히고 153종, Motion Primitives는 조립 단위가 정돈됨) 굳이 새로 도입할 이유를 찾으려면 여기에만 있는 컴포넌트가 있어야 한다. 트리셰이킹을 내세우지만 Framer Motion 자체가 번들에 들어가므로 실질 절감 폭은 확인이 필요하다. 라이선스 미표기이므로 상업 사용 전 저장소에서 확인할 것.

UI Components #react #framer-motion #tailwind #micro-interaction #cli #license-unclear #micro

·amicro.vercel.app·Sep 17, 2026

Amicro — 트리셰이킹 가능한 마이크로 인터랙션 컴포넌트

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종

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 셰이더 페이지 전환

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 디자인 시스템

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 기반 컴포넌트·블록·페이지