Frontend

389 bookmarks

Newest

Efferd — shadcn 블록 183종 (앱 셸·대시보드 포함)

저장된 블록 계열(Tailark, blocks.so, ONONC, Ruixen)이 대부분 랜딩 섹션에 몰려 있는 반면 여기는 인증·대시보드·앱 셸을 별도 범주로 갖고 있다 — 즉 마케팅 페이지가 아니라 제품 내부 화면을 세울 때 쓸 수 있는 쪽이다. 저장해둔 useLayouts와 이 지점에서 겹치니 둘을 비교할 것. 아이콘 라이브러리를 5종 중 고를 수 있는 것도 실용적인데, 저장된 아이콘 항목(Lucide·Phosphor·Iconoir·Keyline 등) 중 무엇을 쓰든 블록이 따라온다는 뜻이다. Radix·Base UI 양쪽 지원도 Ruixen과 같은 강점. 주의: 전체는 유료이므로 무료 범위에 필요한 블록이 있는지 먼저 확인하고, 라이선스가 명시돼 있지 않으니 상업 사용 조건은 구매 전 문의해둘 것.

UI Components #react #shadcn #tailwind #radix #base-ui #dashboard #paid #blocks #appkit #paid-license

·efferd.com·Sep 25, 2026

Efferd — shadcn 블록 183종 (앱 셸·대시보드 포함)

Ruixen UI — 랜딩 섹션 위주 240종 (Radix·Base UI 양쪽 지원)

두 가지가 저장된 kit 계열과 갈린다. (1) Radix와 Base UI 양쪽 프리미티브를 지원한다 — 저장된 대부분이 Radix 전제라 Base UI로 기반을 정한 프로젝트에서 쓸 수 있는 선택지는 드물다(Sora UI, UI TripleD, Space UI 정도). (2) Tailwind v3와 v4를 모두 지원해 v3 프로젝트에서도 바로 쓸 수 있다(최근 저장 항목 다수가 v4 전제다). 내용물은 랜딩 섹션 쪽으로 치우쳐 있으므로 앱 내부 화면보다 마케팅 페이지를 세울 때 후보다 — 같은 목적의 Tailark·blocks.so·ONONC와 비교할 것. 유료는 1회 99달러에 상업 라이선스 포함이지만 무료 170종이 먼저이므로 그쪽으로 품질을 본 뒤 판단하면 된다.

추가(2026-10-07): 무료분이 MIT로 확인됐다(llms.txt·GitHub) — 상업 사용에 걸림이 없다. 부록 도구 중 쓸모 있는 건 Tailwind v3→v4 변환기(v4 전제 레지스트리를 v3 프로젝트에 들일 때)와 Extrude(SVG 로고를 3D로 뽑아 PNG·GLB로 내보내기). 글래스·그라디언트·섀도 생성기는 Design 쪽 생성기들과 겹치니 따로 찾아올 이유는 없다.

UI Components #react #typescript #tailwind #radix #base-ui #shadcn #landing #paid #section #mit #generator

·ruixen.com·Sep 25, 2026

Ruixen UI — 랜딩 섹션 위주 240종 (Radix·Base UI 양쪽 지원)

Odyssey UI — AI 채팅·가격표·앱 셸까지 묶은 애니메이션 컴포넌트 (레지스트리 UI 271항목)

AI 컴포넌트 8종에 Token Usage와 Model Selector가 들어 있는 게 눈에 띈다 — 저장해둔 AI UI 계열(prompt-kit, AI Elements, AICSS, Beautiful UI, brainless) 어디에도 토큰 사용량 표시와 모델 선택기는 잘 없다. AI 제품을 만든다면 그 두 개만 떼어 봐도 값어치가 있다. 가격표 6종도 실무에서 매번 새로 짜는 구간이라 발췌 후보. 반대로 음악 카드(Spotify 스타일)나 로고 클라우드는 용도가 한정적이다. 46종 규모라 전면 도입 대상은 아니고 범주가 뚜렷해 필요한 것만 집어오기 좋은 구성이다. 라이선스 종류는 확인하지 못했으므로 상업 사용 전 GitHub에서 볼 것.

UI Components #react #typescript #tailwind #framer-motion #shadcn #pricing #open-source #fx #license-unknown

·odysseyui.com·Sep 25, 2026

Odyssey UI — AI 채팅·가격표·앱 셸까지 묶은 애니메이션 컴포넌트 (레지스트리 UI 271항목)

Theme Toggles — 다크모드 전환 토글 14종

다크모드는 거의 모든 프로젝트에 들어가는데 토글 아이콘 전환은 매번 직접 만들게 되는 구간이다 — 해·달 아이콘을 페이드로 바꾸면 밋밋하고, 모핑을 직접 짜면 SVG 경로 보간이 번거롭다. 14종 중에 고르면 끝난다. React 외에 Svelte·Vue도 지원해 저장된 항목 중 프레임워크 폭이 넓은 축이다. 전환 연출을 화면 전체로 확장하고 싶으면 저장해둔 Transition Kit의 View Transitions 다크모드 원형 확산과 조합하면 된다(토글은 여기, 화면 전환은 그쪽). 아이콘 모핑 일반이 필요하면 morphicons 쪽. 라이선스 미확인이므로 상업 사용 전 저장소에서 확인할 것.

UI Components #react #svelte #vue #dark-mode #toggle #shadcn #micro #license-unclear

·toggles.dev·Sep 24, 2026

Theme Toggles — 다크모드 전환 토글 14종

useLayouts — 레이아웃·내비게이션까지 포함한 복붙 컴포넌트 모음

저장된 kit 계열 중 드물게 "레이아웃"과 "내비게이션"을 독립 범주로 갖고 있다. 대부분의 모음이 히어로·카드·버튼에 몰려 있어 앱 셸(사이드바·헤더·분할 화면)이나 내비게이션 패턴은 직접 짜게 되는데 그 구간을 채운다. 내비게이션은 저장해둔 navbar.gallery(레퍼런스)에서 패턴을 고르고 여기서 구현을 가져오는 조합이 된다. Radix 기반이라 저장된 shadcn 프로젝트에 섞기 쉽다. 다만 kit 계열이 이미 두터우므로 전면 도입보다 레이아웃·내비게이션 범주만 발췌하는 쪽이 실효가 크다. 라이선스 미확인이므로 상업 사용 전 GitHub에서 확인할 것.

UI Components #react #nextjs #typescript #tailwind #framer-motion #radix #navigation #fx #license-unknown

·uselayouts.com·Sep 24, 2026

useLayouts — 레이아웃·내비게이션까지 포함한 복붙 컴포넌트 모음

Nexvyn/UI — 기본 컴포넌트와 연출 조각이 섞인 React 라이브러리

기본 폼 요소와 눈에 띄는 연출 조각이 한 곳에 있는 구성이라 성격이 어중간하다 — 기본형만 필요하면 저장해둔 foundation 계열(Radix·Base UI·React Aria)이 접근성 면에서 낫고, 연출만 필요하면 kit 계열이 규모가 크다. 그래서 전면 도입 대상이라기보다 개별 항목을 집어오는 쪽이다. 실제로 건질 만한 건 다른 곳에 드문 것들이다: Phone/Laptop Mockup(저장해둔 Opensource UI의 기기 목업과 비교), AI Input(prompt-kit·AICSS 계열과 비교), Password Input(MicroKit·Spectrum UI에도 있음), Table of Contents·Scroll Indicator(문서 사이트용). 라이선스가 확인되지 않으므로 상업 사용 전 GitHub 저장소에서 확인할 것.

UI Components #react #nextjs #typescript #tailwind #kit #license-unknown

·ui.nexvyn.dev·Sep 24, 2026

Nexvyn/UI — 기본 컴포넌트와 연출 조각이 섞인 React 라이브러리

neat-annotations — CSS만으로 손글씨 주석과 화살표

제품 설명, 온보딩 가이드, 문서의 스크린샷 설명, 발표 자료처럼 "여기를 보세요"를 표시해야 할 때. 보통은 이미지 편집기로 화살표를 그려 넣는데 그러면 텍스트가 이미지에 박혀 번역·복사·반응형이 안 되고 수정할 때마다 다시 그려야 한다. CSS 주석이면 실제 DOM 요소를 가리키고 라벨도 텍스트로 남는다. JS가 없어 서버 컴포넌트나 정적 사이트에도 그대로 들어가고 번들에 영향이 없다. 저장해둔 Fumadocs·Blume 같은 문서 사이트와 조합하면 스크린샷 없이 실제 UI 위에 설명을 얹을 수 있다. 주의: 화살표 위치가 레이아웃에 의존하므로 반응형에서 어긋나기 쉽다 — 중요한 화면은 모바일 폭에서 확인할 것. Shantell Sans는 한글을 지원하지 않으므로 한국어 라벨이면 손글씨 느낌의 한글 폰트를 따로 지정해야 한다.

UI Components #css #annotation #documentation #no-js #mit #micro

·neat-annotations.syabro.com·Sep 24, 2026

neat-annotations — CSS만으로 손글씨 주석과 화살표

23rd — 선택지를 줄인 shadcn 레지스트리 (React·Svelte 5)

앞서 저장한 Evil Buttons와 같은 제작자(radiumcoders)다. 두 프로젝트를 합쳐 보면 버튼은 Evil Buttons, 배경·섹션·셰이더는 여기로 나뉘는 구성이다. 설계 방향은 저장해둔 Cube Motion과 같은 계열 — 값을 고를 수 있게 하는 대신 좋은 기본값을 강제해 일관성을 얻는 쪽이다. 실질적 이점은 Svelte 5 지원인데, 저장된 컴포넌트 라이브러리가 사실상 전부 React 전용이라 Svelte 프로젝트에서 쓸 수 있는 선택지는 드물다(Balsa UI의 Vue 지원, AICSS의 Vue·Svelte 지원 정도). 아직 14종 규모라 전면 도입 대상은 아니고 배경·셰이더가 필요할 때 후보로 둘 것. 셰이더 배경은 공통적으로 GPU 부담과 모바일 성능을 확인해야 한다.

UI Components #react #svelte #shadcn #tailwind #webgl #shader #open-source #background #license-unknown

·23rd.dev·Sep 23, 2026

23rd — 선택지를 줄인 shadcn 레지스트리 (React·Svelte 5)

Evil Buttons — 애니메이션 버튼 31종 shadcn 레지스트리

버튼 하나에만 효과를 넣고 싶을 때 뒤지기 좋은 특화 모음. 저장된 연출 계열 라이브러리 대부분이 버튼을 한두 종만 갖고 있는 반면 여기는 31종이 전부 버튼이라 선택지가 넓고, 플레이그라운드에서 바로 비교해볼 수 있다. 질감 있는 버튼(메탈·뉴모피즘)은 저장해둔 Cult UI 쪽이 강하니 성격에 따라 나눠 볼 것. 주의 두 가지 — 강한 효과의 버튼은 주요 CTA 하나에만 쓰는 게 맞고(전부에 쓰면 어디를 눌러야 할지 흐려진다), 라이선스가 명시돼 있지 않으므로 상업 프로젝트 전 저장소에서 확인할 것.

UI Components #react #shadcn #framer-motion #tailwind #button #micro #license-unknown

·evilbuttons.com·Sep 23, 2026

Evil Buttons — 애니메이션 버튼 31종 shadcn 레지스트리

Cue Kit — 컴포넌트마다 제작 프롬프트를 함께 주는 모션 라이브러리

저장해둔 연출 계열과 갈리는 지점은 "프롬프트 공개"다. 코드만 복사하면 그 컴포넌트 하나로 끝나지만 프롬프트가 있으면 같은 방식으로 변형을 만들어낼 수 있어서, Claude Code로 작업할 때는 코드보다 프롬프트 쪽이 더 오래 쓸모 있을 수 있다. 저장된 GetLayers·Flexnative도 프롬프트를 제공하지만 그쪽은 프롬프트가 상품이고 여기는 MIT 코드와 프롬프트를 함께 준다는 차이가 있다. 주의: Framer Motion·GSAP·Three.js가 컴포넌트마다 다르게 쓰이므로 하나를 가져올 때 어떤 의존성이 따라오는지 확인할 것 — 전부 도입하면 애니메이션 라이브러리가 셋이 된다. 유료 Cue+는 1회 99달러로 구독이 아니지만, 무료 40종을 먼저 써보고 판단할 것.

UI Components #react #shadcn #framer-motion #gsap #three #prompt #mit #fx

·kit.cuedesign.space·Sep 23, 2026

Cue Kit — 컴포넌트마다 제작 프롬프트를 함께 주는 모션 라이브러리

loading.dev — React 로딩 스피너 27종 라이브러리

저장해둔 로더 항목과 역할이 갈린다 — Loading UI는 CSS 복붙 48종이라 의존성이 안 늘고, Dot Matrix는 도트 매트릭스 톤 특화이며, 여기는 npm 패키지로 설치해 컴포넌트로 쓰는 방식이다. 즉 프로젝트 여러 곳에서 같은 스피너를 일관되게 쓰고 크기·색을 props로 관리하고 싶으면 패키지 쪽이 편하고, 한두 곳에만 필요하면 복붙이 낫다. 27종 이름이 구체적이라(Comet, Snake, Swirl 같은) 고르기도 쉽다. 주의: 로딩 표시는 종류보다 타이밍이 중요하다 — 0.3초 안에 끝나는 요청에 스피너를 띄우면 깜빡임이 되어 오히려 느려 보이므로 지연 표시를 함께 구현할 것. 라이선스 미확인이므로 상업 사용 전 저장소에서 확인.

UI Components #react #loader #spinner #npm #micro #license-unknown

·loading.dev·Sep 23, 2026

loading.dev — React 로딩 스피너 27종 라이브러리

ObsidianUI — Motion 기반 인터랙션 컴포넌트 52종 + 블록 18종

규모는 작지만 항목이 구체적이라 발췌용으로 볼 만한 모음. Apple Spotlight(맥OS 스포트라이트풍 오버레이)와 Circle Menu는 기성 라이브러리에 잘 없는 축이다. 다만 Fractal Glass는 저장해둔 ibelick Lab에도 있고 Magnetic 계열은 Motion Primitives·Kinetics와 겹치므로 중복을 확인하고 가져올 것. MIT라 사용 조건은 깔끔하다. Motion 의존이므로 애니메이션 라이브러리 통일 원칙은 동일하게 적용된다.

UI Components #react #typescript #tailwind #mit #open-source #motion #fx

·obsidianui.dev·Sep 22, 2026

ObsidianUI — Motion 기반 인터랙션 컴포넌트 52종 + 블록 18종

Blobatar — 4.4KB 결정론적 기하 아바타

저장해둔 아바타 항목 셋 중 가장 가벼운 선택지. 구분은 이렇다 — Facehash는 얼굴형 고정, DiceBear는 61종 스타일로 폭이 넓지만 스타일별 라이선스 확인이 필요하고 HTTP API 의존이 생길 수 있으며, Blobatar는 추상 기하 도형에 4.4KB·의존성 0이다. "사용자를 구분할 색과 모양만 있으면 되고 번들을 늘리고 싶지 않다"면 여기가 맞다. 4.5:1 명암비를 보장한다고 명시한 점이 실무적으로 유용한데, 자동 생성 아바타는 배경색과 겹쳐 안 보이는 경우가 흔하기 때문이다. 결정론적이라 이미지를 서버에 저장할 필요가 없는 것은 셋 공통. 추상 도형이라 개성은 약하니 사람 얼굴 느낌이 필요하면 Facehash·DiceBear 쪽으로.

UI Components #react #avatar #identicon #lightweight #accessibility #mit #micro

·blobatar.dev·Sep 20, 2026

Blobatar — 4.4KB 결정론적 기하 아바타

Cube Motion — 선택지를 없앤 UI 모션 라이브러리

"값을 고를 수 없게 만든 것"이 이 라이브러리의 설계 의도다. 애니메이션 값을 매번 정하다 보면 화면마다 지속 시간과 이징이 제각각이 되어 제품이 산만해지는데, 네 가지 역할로 강제하면 일관성이 자동으로 따라온다. 그래서 여러 사람이 작업하는 제품이나 모션에 시간을 쓰고 싶지 않은 프로젝트에 맞다. 반대로 연출이 제품의 차별점인 사이트(저장해둔 Atelier UI·GetLayers 계열)에는 맞지 않는다 — 고칠 수 있는 게 없기 때문이다. 저장된 모션 항목과의 구분: Motion Primitives·Kinetics는 값을 직접 맞추는 재료, DialKit은 그 값을 조절하는 도구, Cube Motion은 값을 아예 정해주는 규율이다. Web Animations API 기반이라 프레임워크 비종속이고 번들이 가볍다는 점도 장점.

UI Components #javascript #animation #web-animations-api #react #vue #svelte #mit #micro

·cube-motion.dev·Sep 20, 2026

Cube Motion — 선택지를 없앤 UI 모션 라이브러리

Atelier UI — 손으로 다듬은 스크롤·셰이더 애니메이션 컴포넌트

스크롤 연출과 WebGL 셰이더가 한 라이브러리에 있고 React Three Fiber를 정식으로 쓴다는 점이 저장된 연출 계열 대부분과 다르다 — 보통은 CSS·Motion 수준에서 끝나거나 3D는 별도 항목이다. 포트폴리오·에이전시·제품 소개처럼 스크롤을 타고 장면이 전개되는 사이트에 맞고, 대시보드나 도구형 제품에는 과하다. 무료 25종이 MIT로 열려 있으니 유료 판단 전에 그쪽으로 코드 품질과 애니메이션 감각을 확인할 것 — 이 계열은 "손으로 맞춘 타이밍"이 값어치의 핵심이라 실제로 만져봐야 판단이 선다. Pro는 구독이 아닌 1회 결제라 조건은 나쁘지 않다. React Three Fiber·Drei·postprocessing이 따라오므로 번들과 모바일 성능은 반드시 확인할 것.

UI Components #react #typescript #tailwind #react-three-fiber #webgl #scroll #paid #motion #fx #paid-license

·atelier-ui.com·Sep 20, 2026

Atelier UI — 손으로 다듬은 스크롤·셰이더 애니메이션 컴포넌트

SPY UI — 컴포넌트 333종·차트 280종 유료 라이브러리

규모로 승부하는 유료 라이브러리. 차트 280종은 저장된 어떤 차트 항목보다 많지만, 실무에서 차트는 종류 수보다 축·툴팁·반응형 제어가 중요하므로 숫자만 보고 판단하지 말 것(그 관점에서는 저장해둔 chartcn의 조합형 설계나 Bklit이 나을 수 있다). 저장된 무료 연출·블록 계열이 이미 두터우므로 유료 결제 근거는 "여기에만 있는 컴포넌트"이거나 "한 곳에서 전부 해결하는 시간 절약"일 때다. 연 구독보다 라이프타임 249달러가 조건상 낫고, 무료 티어로 코드 품질을 먼저 확인할 것.

UI Components #react #nextjs #tailwind #framer-motion #chart #paid #fx #paid-license

·spyui.online·Sep 17, 2026

SPY UI — 컴포넌트 333종·차트 280종 유료 라이브러리

Solaris Sky — 지상에서 본 태양을 재현하는 WebGL 셰이더

히어로 배경에 하늘·태양 연출이 필요할 때의 특화 컴포넌트. 저장해둔 Vanta.js가 프리셋 배경 여러 종을 얕게 제공한다면 여기는 한 가지 장면을 깊게 파고든 쪽이라 결과물의 밀도가 다르다. 시간대 프리셋(새벽·정오·석양)이 있어 서비스 톤이나 시간대에 맞춰 바꿀 수 있는 점도 재미있다. 주의사항은 셰이더 공통 — GPU 부담과 모바일 성능, prefers-reduced-motion 처리, 그리고 텍스트를 위에 얹을 경우 대비 확보다. 용도가 매우 특정하므로 하늘 연출이 콘셉트에 맞을 때만.

UI Components #webgl #shader #react #sky #open-source #background #license-unknown

·solaris.cuvii.dev·Sep 17, 2026

Solaris Sky — 지상에서 본 태양을 재현하는 WebGL 셰이더

Space UI — Base UI 기반 표현형 컴포넌트·창작 도구

Base UI를 기반으로 하는 드문 항목 중 하나(저장된 UI TripleD, Sora UI와 같은 이유로 가치가 있다). 특이한 건 한 라이브러리 안에 프리미티브부터 생성형 아바타·국기·공간 오디오까지 들어 있다는 점인데, 이는 곧 성격이 분산돼 있다는 뜻이기도 하다 — 저장해둔 전문 항목들(DiceBear 아바타, flagcn 국기, UI SFX 사운드)이 각 영역에서는 더 깊다. 따라서 전부를 여기로 통일하기보다 Base UI 기반 프로젝트에서 필요한 조각을 가져오는 용도로 볼 것. MIT.

UI Components #react #base-ui #tailwind #nextjs #shadcn #mit #kit

·spaceui.one·Sep 17, 2026

Space UI — Base UI 기반 표현형 컴포넌트·창작 도구

Bencho — 실제로 동작하는 인터랙티브 UI 블록

"라이브, 목업 아님"이라는 지향이 요점 — 스크린샷이나 정적 데모가 아니라 실제 상태와 상호작용이 있는 블록이라 도입 전에 동작을 확인할 수 있다. 파형이나 컬러 피커처럼 상태 관리가 까다로운 것들이 포함돼 있어 발췌 가치가 있다. 다만 라이선스가 확인되지 않으므로 코드를 가져다 쓰기 전에 조건을 확인할 것.

UI Components #react #ui-blocks #interactive #copy-paste #section #license-unknown

·bencho.dev·Sep 17, 2026

Bencho — 실제로 동작하는 인터랙티브 UI 블록

Rare UI — 흔치 않은 애니메이션 컴포넌트 19종+

규모가 작은 대신 다른 곳에 잘 없는 항목을 노린 모음. Duration Picker(기간 입력)와 Folder Component처럼 실제로 구현하려면 번거로운데 기성 라이브러리에는 없는 것들이 있어 발췌 가치가 있다. 컴포넌트당 단일 파일이라 가져다 수정하기 쉬운 구조. 저장된 연출 계열이 이미 많으므로 전면 도입이 아니라 필요한 항목만 집어올 것.

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

·rareui.com·Sep 17, 2026

Rare UI — 흔치 않은 애니메이션 컴포넌트 19종+

Blume — 마크다운으로 만드는 문서 사이트 생성기

저장해둔 Fumadocs와 직접 비교할 항목. 갈리는 지점은 명확하다 — Fumadocs는 React 프레임워크라 기존 Next.js 앱에 /docs로 얹고 레이아웃·인증·토큰을 공유하는 데 강하고, Blume은 Astro 기반의 독립 생성기라 문서 사이트만 따로 세울 때 설정이 거의 없다. 즉 "앱 안에 문서" 대 "문서 전용 사이트"의 선택이다. Blume 쪽이 특히 앞서는 것은 OpenAPI 인터랙티브 레퍼런스, 36개 로케일, 체인지로그, llms.txt·MCP·페이지 내 어시스턴트가 기본이라는 점 — API를 공개하는 제품 문서라면 이쪽이 손이 훨씬 덜 간다. MIT이고 영구 무료를 표방한다.

UI Components #docs #astro #markdown #openapi #i18n #mcp #mit #content

·useblume.dev·Sep 17, 2026

Blume — 마크다운으로 만드는 문서 사이트 생성기

MicroKit UI — 마이크로 인터랙션 48종 (React·CSS)

의존성을 늘리지 않고 버튼·입력에 움직임을 주고 싶을 때. 저장해둔 Kinetics(153종, 스프링 물리, AI 프롬프트 제공)와 목적이 같으므로 둘 중 하나면 충분하고, 규모와 물리 기반 품질은 Kinetics가 앞선다. MicroKit의 장점은 shadcn 공식 레지스트리 등록과 Tailwind v3·v4 양쪽 코드 제공이라 v3 프로젝트에서도 바로 쓸 수 있다는 점이다(저장된 최신 항목 다수가 v4 전제라 이 점은 실용적이다).

UI Components #react #css #tailwind #micro-interaction #shadcn #mit #micro

·microkit.co·Sep 17, 2026

MicroKit UI — 마이크로 인터랙션 48종 (React·CSS)

Opensource UI — MIT 복붙 컴포넌트 200종+와 기기 목업

주목할 부분은 기기 목업 컴포넌트다 — 랜딩에서 제품 스크린샷을 아이폰이나 맥북 프레임 안에 넣어 보여주는 연출은 자주 필요한데, 보통 이미지 목업을 쓰면 반응형과 다크모드에서 깨진다. 코드 컴포넌트면 실제 화면을 그대로 넣을 수 있어 유지보수가 낫다. 일반 컴포넌트 200여 종은 저장된 다른 모음과 겹치므로 목업 때문에 기억해둘 항목으로 두면 된다. MIT에 출처 표기 불필요라 조건이 깔끔하다.

UI Components #react #nextjs #tailwind #mockup #copy-paste #mit #kit

·opensourceui.in·Sep 17, 2026

Opensource UI — MIT 복붙 컴포넌트 200종+와 기기 목업

BoardUI — 에이전트 제품·대시보드용 React Aria 디자인 시스템

저장해둔 React Aria 기반 항목(Intent UI, dotui)과 같은 계열이면서 용도가 뚜렷하게 다르다 — 범용 UI가 아니라 "에이전트 제품 + 데이터 대시보드" 조합에 맞춰져 있고 차트 카드가 17종으로 두툼하다. 에이전트 전용 블록(컴포저 로더, 진행 표시)과 데이터 테이블·생키가 한 시스템 안에 있는 구성은 저장된 항목 중 드물다. React Aria 기반이라 접근성·날짜 처리의 이점도 따라온다. 판단 기준: 무료 Starter로 범위를 확인한 뒤 Pro 템플릿이 필요한지 보고, 연 구독보다 라이프타임(199유로)이 조건이 낫다. MCP를 제공하므로 Claude Code에서 바로 설치 가능.

UI Components #react #react-aria #tailwind #dashboard #ai-agent #chart #mcp #paid #foundation #paid-license

·boardui.com·Sep 17, 2026

BoardUI — 에이전트 제품·대시보드용 React Aria 디자인 시스템

React Vibe — 모션 중심 완성형 섹션·대시보드

컴포넌트 단위보다 섹션·대시보드 덩어리가 중심이라 화면 한 장을 빠르게 세울 때 후보. 다만 저장된 블록·대시보드 계열(Watermelon UI, Tailark, blocks.so, UI TripleD, Spectrum UI)과 크게 겹치므로 새로 도입하기보다 특정 대시보드 레이아웃이 마음에 들 때 발췌할 것. 라이선스 미표기이니 상업 사용 전 저장소 확인.

UI Components #react #dashboard #copy-paste #license-unclear #motion #blocks #appkit

·reactvibe.com·Sep 17, 2026

React Vibe — 모션 중심 완성형 섹션·대시보드

brainless — AI 코딩 에이전트 화면을 React 컴포넌트로

에이전트 실행 과정을 웹 화면에 보여줘야 할 때 — 툴 호출 로그, 사고 과정, 코드 diff, 세션 히스토리가 이미 컴포넌트로 있다. 저장해둔 AI UI 계열과 초점이 갈린다: prompt-kit·AI Elements는 대화형 채팅, Beautiful UI는 사람의 승인, AICSS는 대화 중 표시 요소, 그리고 brainless는 터미널 에이전트의 실행 로그 재현이다. Claude Code 스타일 화면을 웹으로 옮길 때 사실상 유일한 기성품. 접근성을 시맨틱 요소로 챙긴 점도 드물다. 라이선스는 저장소에서 확인할 것.

UI Components #ai-agent #terminal #react #shadcn #accessibility #ai #license-unknown

·brainless.swerdlow.dev·Sep 17, 2026

brainless — AI 코딩 에이전트 화면을 React 컴포넌트로

tw-fade — 스크롤 가장자리 페이드 Tailwind v4 플러그인

앞서 저장한 Scroll Mask와 목적이 똑같으니 둘 중 하나만 고르면 된다. 차이는 구현과 지원 범위다 — Scroll Mask는 animation-timeline: scroll()을 쓰는 순수 CSS 유틸리티라 지원 브라우저가 더 좁고, tw-fade는 npm 플러그인으로 설치하며 Safari 26+까지 포함해 지원 범위가 넓은 편이다. 또 tw-fade는 "스크롤할 내용이 남아 있을 때만" 페이드를 보이는 판정이 들어 있어 끝에 도달했을 때의 어색함이 없다. 파이어폭스는 아직 부분 지원이므로 확인할 것. 둘 다 Tailwind v4 전제다.

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

·pete.design·Sep 17, 2026

tw-fade — 스크롤 가장자리 페이드 Tailwind v4 플러그인

chartcn — 조합형 React 데이터 시각화 컴포넌트

저장된 차트 계열 중 설계 방향이 가장 다르다 — 차트 종류를 늘리는 대신 축·격자·범례·툴팁을 부품으로 쪼개 조립하게 한다. 그래서 기성 차트로 안 되는 요구(축 두 개, 커스텀 규칙선, 특이한 상호작용)가 있을 때 유리하고, 반대로 "막대 차트 하나 빨리"면 오히려 손이 더 간다. 지도 시각화(Choropleth·Tile)를 같은 API로 다룬다는 점은 저장된 다른 차트 라이브러리에 없는 강점이고, 저장해둔 react-simple-maps를 따로 들이지 않아도 지도와 차트를 한 체계로 묶을 수 있다. Sankey는 Bklit과 함께 몇 안 되는 선택지. 이름이 같은 shadcndeck 쪽 생성기와 혼동하지 말 것.

UI Components #react #chart #composable #sankey #data #license-unknown

·chartcn.dev·Sep 17, 2026

chartcn — 조합형 React 데이터 시각화 컴포넌트

GetLayers — AI에게 넘길 프롬프트 형태의 디자인 레이어

"AI가 만들면 죄다 비슷하게 생긴다"는 문제를 정면으로 겨냥한 접근. 컴포넌트 코드를 받는 게 아니라 잘 쓰인 프롬프트를 받는 것이라, Claude Code로 화면을 만드는 작업 흐름에 그대로 얹힌다는 게 요점이다. 저장해둔 Flexnative(인텐트·프롬프트 제공)와 같은 방향이며 이쪽이 3D·배경 연출에 더 치우쳐 있다. 다만 프롬프트는 결과가 모델과 실행 시점에 따라 달라지므로 코드 라이브러리처럼 재현성을 기대하기 어렵고, 생성된 코드는 결국 직접 검수해야 한다. 유료는 상업 라이선스 조건이 걸려 있으니 클라이언트 작업이면 플랜 조건을 확인할 것.

UI Components #prompt #template #webgl #mcp #paid #section #paid-license

·getlayers.ai·Sep 17, 2026

GetLayers — AI에게 넘길 프롬프트 형태의 디자인 레이어

Balsa UI — 에이전트 친화 디자인 시스템 (Vue·React, 100종)

저장된 컴포넌트 라이브러리 중 범위가 가장 넓은 축 — 프리미티브(59종) + 화면 조각(Compositions) + 팔레트·테마 관리 + 에이전트용 문서가 한 묶음이다. 특히 Vue를 지원하는 점이 드물다(저장된 대부분이 React 전용이라 Vue 프로젝트에서는 선택지가 거의 없다). "코딩 에이전트" 문서와 템플릿 디자인 스킬을 별도로 두었다는 건 Claude Code로 화면을 짜는 작업 흐름을 전제로 설계했다는 뜻이라, 에이전트에게 디자인 시스템을 일관되게 따르게 하고 싶을 때 참고할 만하다. 주의: 범위가 넓다는 건 도입 시 프로젝트 구조에 깊게 관여한다는 뜻이므로, 기존 shadcn 프로젝트에 부분 도입하기보다 새 프로젝트에서 기반으로 택할지 판단할 것. 라이선스는 사이트에서 확인하지 못했다.

UI Components #react #vue #design-system #cli #ai-agent #foundation #license-unknown

·balsa-ui.com·Sep 17, 2026

Balsa UI — 에이전트 친화 디자인 시스템 (Vue·React, 100종)