Frontend

389 bookmarks

Newest

Motoko UI — 기본형과 연출 조각이 섞인 초기 단계 라이브러리 18종

현재로서는 저장할 만한 차별점이 약하다 — 18종 중 기본형 8종은 shadcn/ui 원본이 낫고, 연출형과 AI 입력도 저장된 SmoothUI(AI 20종)나 Motiq에 더 두껍게 있다. 표방하는 블록·템플릿·스타터 킷이 아직 없으므로 나중에 채워지면 다시 볼 대상으로 남겨둔다. Waves Shader와 Notch 정도가 눈에 띄는 개별 항목이다. 라이선스 미표기.

UI Components #react #nextjs #tailwind #shadcn #early-stage #license-unclear #kit

·motokoui.com·Sep 25, 2026

Motoko UI — 기본형과 연출 조각이 섞인 초기 단계 라이브러리 18종

UIAble — 컴포넌트 790종·블록 390종 (무료분 MIT, 유료는 SaaS 여부로 갈림)

유료 티어를 고를 때 가격이 아니라 라이선스를 먼저 봐야 하는 곳이다 — Standard(69달러)는 SaaS 형태의 최종 제품에 사용할 수 없고, SaaS를 만들려면 Enterprise(199달러)가 필요하다. Feedle처럼 서비스형 제품에 넣을 생각이면 실질 가격은 199달러다. 클라이언트 웹사이트나 사내 도구까지는 Standard로 충분하다. 무료 Community만으로도 MIT에 상업 사용이 가능하니 먼저 그 범위를 확인해볼 것. 규모는 저장된 것 중 최상위이고(PrebuiltUI 435종, SmoothUI 201종과 비교해도 790종) shadcn과 Base UI 양쪽을 쓰므로 저장된 Base UI 계열(9ui, Space UI, Balsa UI, PaceUI)과 섞어 쓰기 좋다. 대시보드 앱 2종은 CodedThemes의 본업(Able Pro, Berry)에서 온 것이라 그 영역의 완성도는 기대해볼 만하다. Standard에 Figma가 포함되는 점은 Launch UI와 같은 강점이다.

UI Components #react #nextjs #typescript #tailwind #shadcn #base-ui #dashboard #template #figma #paid #blocks #appkit #paid-license

·uiable.com·Sep 25, 2026

UIAble — 컴포넌트 790종·블록 390종 (무료분 MIT, 유료는 SaaS 여부로 갈림)

components.work — shadcn 기반 랜딩 블록 32종 (브라우저에서 바로 복사)

규모로는 저장된 랜딩 블록 계열 중 가장 작다(PrebuiltUI 435종, Ruixen 240종, Efferd 183종, Launch UI 74종, Solace UI 39종). 따라서 여기를 주력으로 쓸 이유는 없고, 순수 shadcn/ui 위에 군더더기 없이 얹힌 기본형 블록이 필요할 때 훑어보는 정도다 — 애니메이션이나 특정 디자인 톤이 얹혀 있지 않아 그대로 프로젝트 톤에 맞추기 쉽다는 것이 유일한 장점이다. 기능 소개 9종이 한 범주로는 제일 두껍다. 구체 라이선스는 사이트에 없고 GitHub brijr/components를 확인해야 한다. 주의(2026-10-03 확인): GitHub brijr/components 마지막 커밋이 2025-08-21로 1년 넘게 멈춰 있다.

UI Components #react #nextjs #typescript #tailwind #shadcn #landing #free #blocks #section #license-unknown

·components.work·Sep 25, 2026

components.work — shadcn 기반 랜딩 블록 32종 (브라우저에서 바로 복사)

AnimBits — 애니메이션을 훅으로 제공하는 컴포넌트 99종 (MIT)

애니메이션을 컴포넌트가 아니라 훅으로 받는다는 점이 저장된 다른 kit들과 갈리는 지점이다 — 이미 만들어둔 컴포넌트에 동작만 얹고 싶을 때, 즉 남의 컴포넌트로 갈아끼우기 싫을 때 쓴다. 저장된 kit 대부분은 완성된 컴포넌트만 주므로 이 용도로는 여기가 거의 유일하다. 아이콘 애니메이션 13종도 같은 방식이라 쓰던 아이콘 세트(Lucide 등)를 유지한 채 동작만 입힐 수 있고, 이건 아이콘 자체를 교체해야 하는 Morphicons·Chamaac과 다르다. 페이지·테마 전환은 저장된 Great UI(페이지 전환 11종)와 겹치니 그쪽이 선택지가 넓다. MIT라 상업 사용은 자유롭다. 다만 GitHub 스타 36으로 아직 매우 초기이고 유지가 이어질지 알 수 없으니, 훅을 프로젝트 전반에 깔기보다 코드를 복사해 직접 들고 있는 편이 안전하다.

UI Components #react #nextjs #typescript #tailwind #framer-motion #hooks #animation #icons #mit #open-source #fx

·animbits.dev·Sep 25, 2026

AnimBits — 애니메이션을 훅으로 제공하는 컴포넌트 99종 (MIT)

visx — Airbnb의 저수준 시각화 프리미티브 (d3 계산 + React 렌더링, MIT)

저장된 차트 항목들과 층위가 다르다 — Bklit, chartcn, Rosen Charts, Evil Charts, Liveline, ssych ui는 완성된 차트를 주고, visx는 차트를 직접 조립하는 재료를 준다. 따라서 기성 차트로 표현되지 않는 형태가 필요할 때, 혹은 차트 동작과 디자인을 완전히 통제해야 할 때 내려가는 곳이다. 반대로 막대·선·파이 정도면 여기까지 올 필요 없이 shadcn Chart나 chartcn이 빠르다. 필요한 패키지만 골라 설치하므로 번들이 가볍다는 점이 저수준 선택의 실질적 이점이다. Airbnb가 유지하고 MIT이며 스타 2.1만에 관리가 이어지고 있어, 최근 저장한 개인 프로젝트 차트 라이브러리들과 달리 장기 의존성으로 삼아도 부담이 적다. 주식 앱처럼 캔들·드로다운 등 금융 차트를 직접 만들어야 하면 ssych ui에서 완성품을 보고 안 맞을 때 여기서 조립하는 순서가 좋다.

UI Components #react #d3 #chart #svg #airbnb #mit #open-source #data

·visx.airbnb.tech·Sep 25, 2026

visx — Airbnb의 저수준 시각화 프리미티브 (d3 계산 + React 렌더링, MIT)

UICapsule — 실제 앱의 특이한 인터랙션을 구현한 컴포넌트 52종 (MIT)

저장된 Design Spells가 실제 앱의 인상적인 디테일을 수집만 하는 사이트라면 여기는 그것을 실제로 구현해 설치 가능한 코드로 준다 — 두 곳을 짝으로 보면 좋다. Circle to Search, Predictive Back, Material You, Dynamic Island, iOS Volume Slider처럼 모바일 OS 고유 동작을 웹으로 옮긴 것은 다른 라이브러리에 거의 없다. 범용 라이브러리가 아니므로 화면을 세우는 데는 쓸 수 없고, 한두 군데에 강한 인상을 심을 때 골라 쓰는 용도다. MIT에 출처 표기도 필요 없다고 명시해 상업 투입이 자유롭다는 점이 실무적으로 크다. 스타일 축에 픽셀아트·사이버펑크·스큐어모피즘이 따로 있어 톤이 확실한 프로젝트라면 그 기준으로 훑어보면 된다.

UI Components #react #tailwind #shadcn #micro-interaction #mobile #ios #android #mit #open-source #fx

·uicapsule.com·Sep 25, 2026

UICapsule — 실제 앱의 특이한 인터랙션을 구현한 컴포넌트 52종 (MIT)

Hover.dev — 섹션 10갈래·컴포넌트 20갈래 (Pro 49달러 평생)

가격 대비 범위가 넓은 편이다 — 49달러 1회로 저장된 유료 kit 중 The UI Factory(25유로) 다음으로 싸고 Ruixen·Cue+·Launch UI(99달러)의 절반이다. 다른 곳에 드문 것은 칸반 보드와 3D 섹션을 섹션 범주로 따로 둔 점으로, 칸반은 저장된 Motiq의 Kanban Card Movement 정도가 비교 대상이다. 컬러 생성기는 Design 쪽 tool 항목들과 성격이 같은 부록이다. 주의할 점 두 가지 — 저작권이 명시돼 재배포가 금지되므로 오픈소스 프로젝트나 자체 라이브러리에 넣을 수 없고(MIT인 Motiq·SmoothUI와 갈리는 지점), 푸터 저작권 표기가 2024년에 머물러 있어 갱신이 활발한지 확인이 필요하다. shadcn 레지스트리가 아니라 코드 복사 방식이라 CLI 워크플로에는 맞지 않는다.

UI Components #react #tailwind #framer-motion #copy-paste #kanban #three #landing #proprietary #paid #fx

·hover.dev·Sep 25, 2026

Hover.dev — 섹션 10갈래·컴포넌트 20갈래 (Pro 49달러 평생)

ssych ui — 트레이딩·금융 화면 전용 다크 컴포넌트 116종 + 블록 18종

토스증권 API 기반 주식 데스크탑 앱을 만들 때 바로 대응되는 항목이다 — Holdings Table, Trade Journal Table, Equity Drawdown, Returns Calendar, Portfolio Allocation, Market Watchlist, Historical EPS, Analyst Radar는 그 앱의 화면 목록과 거의 그대로 겹친다. 주식 분석 MCP의 결과를 화면으로 보여줄 때도 같은 조각들이 쓰인다. 금융 UI는 직접 만들면 시간이 많이 드는 영역이라(캔들차트, 블로터, 드로다운) 이만큼 모여 있는 곳은 저장된 것 중 여기가 유일하다. 차트만 따로 보면 Bklit·chartcn과 겹치지만 그쪽은 범용 차트이고 여기는 금융 의미가 들어간 컴포넌트다. 제약 — 다크 테마 전제로 디자인돼 있어 라이트 모드가 필요하면 손봐야 하고, 라이선스가 명시돼 있지 않아 상업 투입 전 확인이 필요하다. Feedle 같은 커머스 화면에는 맞지 않는다.

UI Components #react #shadcn #dark #finance #trading #chart #dashboard #portfolio #data #license-unknown

·ssych.com·Sep 25, 2026

ssych ui — 트레이딩·금융 화면 전용 다크 컴포넌트 116종 + 블록 18종

MVPBlocks — BSD 라이선스로 상업 사용이 명확한 블록 100종+ · 전체 템플릿 7종

라이선스가 BSD 3-Clause로 명시돼 있어 상업 사용이 분명하다는 점이 가장 큰 장점이다 — 최근 저장한 무료 라이브러리 상당수가 라이선스 미표기여서 상업 투입 전 확인이 필요한 것과 대비된다. 클라이언트 작업이나 제품에 부담 없이 넣을 수 있는 무료 선택지로는 여기와 MIT인 Motiq, SmoothUI가 우선이다. 완성 템플릿 7종을 무료로 여는 것도 드물어서(Launch UI는 무료 1종, PaceUI는 2종) 포트폴리오나 SaaS 랜딩을 통째로 시작할 때 실질적이다. 텍스트 애니메이션 16종은 저장된 text 역할 항목들과 겹치니 굳이 여기를 먼저 볼 필요는 없다. v0 호환이라 블록을 v0에서 열어 변형해볼 수 있는데 이건 저장된 Nur UI와 같은 방식이다.

UI Components #react #nextjs #tailwind #framer-motion #template #v0 #bsd #open-source #free #blocks #section

·blocks.mvp-subha.me·Sep 25, 2026

MVPBlocks — BSD 라이선스로 상업 사용이 명확한 블록 100종+ · 전체 템플릿 7종

Lukacho UI — 무료 오픈소스 컴포넌트 21종 (본업은 프론트엔드 외주)

가격표를 오해하기 쉬운 곳이다 — 컴포넌트에는 유료 티어가 없고 표에 있는 금액은 제작자의 프론트엔드 외주 요금이다. 즉 무료로 다 쓸 수 있다. 21종으로 규모가 작아 주력으로 삼을 곳은 아니고, 저장된 큰 kit(SmoothUI 201종, Motiq 98종) 위에 몇 개 얹는 용도다. 눈여겨볼 조각은 Figma Cursor(피그마식 협업 커서), Mock Browser(브라우저 프레임 목업), Maxed SEO 정도로 다른 곳에 잘 없다. 배경 3종과 커서 2종은 이미 저장된 background·micro 항목들과 겹친다. 라이선스가 명시돼 있지 않으니 상업 투입 전 저장소 확인이 필요하다.

UI Components #react #nextjs #tailwind #framer-motion #copy-paste #cursor #bg-effects #free #open-source #fx #license-unknown

·ui.lukacho.com·Sep 25, 2026

Lukacho UI — 무료 오픈소스 컴포넌트 21종 (본업은 프론트엔드 외주)

Plasma UI — Apple Liquid Glass를 WebGL로 구현한 React 패널 (MIT)

다른 liquid glass 구현과 달리 CSS 흉내가 아니라 실제 굴절과 융합을 WebGL로 계산한다는 점이 다르다. 대시보드나 도구 화면의 패널·독·다이얼로그처럼 컨테이너 용도로 쓰라고 문서가 명시한다. 쓰기 전에 알아야 할 제약이 분명하다 — GPU 부담이 커서 모바일에는 적합하지 않다고 제작자가 직접 밝히고 있고(모든 패스가 전체 화면 기준), 동시에 그릴 수 있는 패널이 기본 16개이며 이 값을 바꾸면 셰이더가 다시 컴파일된다. 0.3.0이라 API가 바뀔 수 있다. 반대로 안심할 부분도 있다 — 미지원 브라우저 CSS 폴백, SSR, prefers-reduced-motion 대응이 이미 들어 있고 MIT다. 저장된 배경 셰이더 항목들(Vanta.js, Solaris Sky, 23rd, Chamaac)은 배경을 그리는 것이고 이건 UI 컨테이너 자체가 재질을 갖는 것이라 자리가 다르다. Liquid Glass 톤을 진짜로 구현해야 할 때 사실상 유일한 후보.

UI Components #react #webgl #liquid-glass #apple #canvas #panel #mit #open-source #micro

·cruxgarden.github.io·Sep 25, 2026

Plasma UI — Apple Liquid Glass를 WebGL로 구현한 React 패널 (MIT)

Great UI — 페이지 전환 11종이 핵심인 컴포넌트 50종

페이지 전환 효과가 필요할 때 첫 번째로 본다. 한 곳에서 11종을 성격별로 고를 수 있는 경우는 드물고, 저장된 Transition Kit과 직접 비교할 대상이다. 테마 전환을 따로 4종 둔 것도 특이한데, 다크모드 토글 자체는 저장된 Theme Toggles(14종)가 전문이므로 토글 모양이 아니라 전환 연출이 필요할 때 여기를 본다. 소셜 카드 5종은 블로그나 포트폴리오에서 외부 프로필을 카드로 박아 넣을 때 바로 쓰이고, Scrambled Install Command와 Terminal Loader는 개발자 도구 랜딩에 어울린다. Pixel to ASCII Image, Multilingual Quote, Vinyl Album Card처럼 용도가 유별난 것도 섞여 있다. 라이선스 미표기이므로 상업 투입 전 저장소 확인이 필요하다.

UI Components #react #typescript #tailwind #framer-motion #page-transition #dark-mode #scroll #open-source #license-unclear #fx

·great-ui.com·Sep 25, 2026

Great UI — 페이지 전환 11종이 핵심인 컴포넌트 50종

SatoriUI — 텍스트 등장 효과가 중심인 소규모 컴포넌트 15종 (MIT)

랜딩의 "50종 이상"은 실제와 맞지 않는다 — 레지스트리와 목록 모두 15종이니 규모를 기대하고 가면 안 된다. 쓸 자리는 텍스트 등장 효과로, Encoded Reveal(문자가 해독되듯 나타나는 효과)과 Typewriter Loop 정도가 눈에 띈다. 다만 저장된 text 역할 항목들과 Cue Kit·SmoothUI 같은 큰 kit이 이미 같은 범주를 덮고 있어 굳이 여기를 먼저 볼 이유는 약하다. 실질적 장점은 MIT로 라이선스가 분명하다는 점이다 — 최근 저장한 소규모 라이브러리 상당수가 라이선스 미표기인 것과 대비된다. Flip Clock, Keyboard UI, Security Card처럼 용도가 좁은 조각은 다른 곳에 잘 없으니 그게 필요할 때만 꺼내 본다.

UI Components #react #tailwind #shadcn #text-animation #spring #mit #open-source #fx

·satoriui.site·Sep 25, 2026

SatoriUI — 텍스트 등장 효과가 중심인 소규모 컴포넌트 15종 (MIT)

crafterui — 실험적 캐러셀 5종이 중심인 소규모 컴포넌트 18종

범용 라이브러리가 아니라 특정 연출이 필요할 때 꺼내 보는 곳이다. 실질적인 이유는 캐러셀 5종으로, Glass Lens·Dither Helix·Molten Ring·Corridor처럼 성격이 뚜렷이 다른 캐러셀을 한자리에 모아둔 경우는 저장된 것 중 드물다 — 포트폴리오나 제품 소개에서 이미지 전환에 힘을 줄 때 먼저 본다. Dynamic Island는 저장된 Design Spells에서 사례로 언급되는 패턴의 구현본이라 함께 보면 된다. 18종뿐이라 여기 하나로 화면을 세울 수는 없고, SmoothUI나 Motiq 같은 큰 kit을 깔아둔 위에 한두 개를 얹는 식이 맞다. 라이선스 미표기이므로 상업 투입 전 저장소 확인이 필요하다.

UI Components #react #tailwind #shadcn #carousel #animation #open-source #license-unclear #fx

·crafterui.com·Sep 25, 2026

crafterui — 실험적 캐러셀 5종이 중심인 소규모 컴포넌트 18종

PaceUI — 무료 티어가 넉넉한 Base UI 기반 블록·템플릿 (Pro 149달러)

무료 티어만으로도 쓸 만한 드문 유료 라이브러리다 — 컴포넌트 200종 이상과 블록 60종을 그냥 열어주므로 돈을 내기 전에 실제로 검증해볼 수 있다. 저장된 유료 kit 상당수가 무료분을 맛보기 수준으로만 여는 것과 대비되는 지점이다(Launch UI는 블록 9종, Hyperiux는 56종). TanStack Start를 명시적으로 지원하는 몇 안 되는 곳이라 Next.js가 아닌 React 라우팅을 쓸 때 후보가 된다. 토대가 Radix가 아니라 Base UI라는 점도 확인할 것 — 저장된 Base UI 계열(9ui, Space UI, Balsa UI)과 프리미티브를 공유하므로 섞어 쓰기 좋다. 인증·결제·DB가 붙은 스타터 킷은 UI 라이브러리 범위를 넘는 부분이라 제품을 처음부터 세울 때 따로 볼 것. 가격은 Pro 149달러로 저장된 것 중 비싼 축이니(Ruixen·Cue+ 99달러, Launch UI 99달러) 무료로 먼저 써보고 판단하면 된다.

UI Components #react #nextjs #tanstack #base-ui #shadcn #tailwind #landing #starter-kit #paid #section #paid-license

·paceui.com·Sep 25, 2026

PaceUI — 무료 티어가 넉넉한 Base UI 기반 블록·템플릿 (Pro 149달러)

Launch UI — Figma 파일까지 짝지어 주는 랜딩 블록 74종 + 템플릿 9종

랜딩 페이지를 디자인 단계부터 같이 만들 때 본다. 저장된 랜딩 블록 계열(Efferd 183종, Ruixen 240종, PrebuiltUI 435종, Solace UI 39종) 중 유일하게 Figma 파일을 함께 주므로, 코드만 필요하면 수량 많은 쪽이 낫고 디자인 시안과 코드를 일치시켜야 할 때 여기가 유일한 선택지다. 일러스트 23종과 컬러 테마 6종이 함께 오는 것도 이 범주에서는 드물다. Figma 페어링이라는 점에서 저장된 Untitled UI·Reshaped·MynaUI와 성격이 같지만 그쪽이 디자인 시스템 전체인 데 비해 여기는 랜딩에 한정된다. 무료 티어가 블록 9종으로 꽤 좁으니 맛보기 이상은 99달러를 전제할 것 — 다만 1회 결제에 상업 사용 무제한이라 Ruixen Pro와 같은 조건이고 구독인 Hyperiux보다 낫다. React 19와 Tailwind v4를 요구한다.

UI Components #react #react-19 #typescript #tailwind #tailwind-v4 #shadcn #landing #template #figma #illustration #paid #section #paid-license

·launchuicomponents.com·Sep 25, 2026

Launch UI — Figma 파일까지 짝지어 주는 랜딩 블록 74종 + 템플릿 9종

Motiq — 제품 화면 단위로 만든 애니메이션 컴포넌트 98종 (MIT)

저장된 kit 대부분이 랜딩 페이지나 위젯 단위인 데 비해 여기는 로그인한 뒤에 보는 화면, 즉 애플리케이션 내부를 다룬다는 점에서 자리가 다르다. 만들려는 게 대시보드·관리 화면·에이전트 도구라면 조각을 모아 조립하는 대신 흐름 하나를 통째로 가져올 수 있다. 성격이 겹치는 저장 항목들과의 구분 — Geist는 같은 콘솔 영역이지만 File Tree·JSON View 같은 부품 단위이고, SmoothUI는 AI 컴포넌트가 더 세분돼 있으며, Systaliko는 이커머스 위젯 단위다. Motiq는 그보다 큰 단위(체크아웃 진행, 패스키 설정, 승인 워크플로)를 준다. MIT라 상업 투입에 제약이 없고 이 점이 라이선스 미표기가 흔한 이 범주에서 드문 장점이다. 다만 컴포넌트가 특정 화면을 전제하고 만들어져 추상화가 덜 돼 있을 수 있으니 실제 데이터 구조에 맞추는 수정 작업을 예상할 것.

UI Components #react #nextjs #typescript #tailwind #framer-motion #shadcn #dashboard #ai-agent #developer-tools #mit #open-source #appkit

·motiq.dev·Sep 25, 2026

Motiq — 제품 화면 단위로 만든 애니메이션 컴포넌트 98종 (MIT)

SmoothUI — shadcn/ui를 대체하는 무료 애니메이션 컴포넌트 201종 (AI 전용 20종)

저장된 무료 kit 중 규모가 가장 크고 성격이 가장 광범위해서 새 프로젝트에서 한 곳만 고른다면 우선 후보다. shadcn/ui 위에 얹는 게 아니라 대체를 표방하므로 기본형까지 다 들어 있다. 가장 큰 실용 가치는 AI·에이전트 컴포넌트 20종으로, Tool Call·Reasoning·Citation·Diff·Approval·Context Meter까지 세분돼 있어 저장된 Agent Elements(21st.dev)나 Odyssey UI의 AI 8종보다 훨씬 두껍다. 챗봇이나 에이전트 UI를 만든다면 여기를 먼저 본다. MCP 서버를 제공하는 세 번째 항목(Solace UI, The UI Factory와 함께)이고 무료·오픈소스라는 점에서 그중 시험해보기 가장 부담 없다. 제약은 React 19와 Tailwind v4를 요구한다는 것이라 구버전 프로젝트에는 바로 못 들어간다. Motion과 GSAP을 모두 쓰므로 어떤 컴포넌트가 어느 쪽 의존성을 끌어오는지 설치 시 확인할 것.

UI Components #react #react-19 #typescript #tailwind #tailwind-v4 #gsap #shadcn #ai-agent #mcp #open-source #motion #fx #license-unknown

·smoothui.dev·Sep 25, 2026

SmoothUI — shadcn/ui를 대체하는 무료 애니메이션 컴포넌트 201종 (AI 전용 20종)

Geist — Vercel이 자사 제품에 쓰는 디자인 시스템 (개발자 도구용 컴포넌트 70종)

대시보드나 개발자 도구 화면을 만들 때 본다. 저장된 foundation 대부분이 범용 프리미티브(Radix, Base UI, React Aria)이거나 마케팅 톤인 데 비해, 여기는 배포 로그·프로젝트 목록·설정 화면 같은 콘솔형 UI를 전제로 설계돼 있다. File Tree, JSON View, Snippet, Status Dot, Relative Time Card, Entity는 다른 라이브러리에 거의 없는 조각이라 이 용도면 우선 후보다. 참고 가치도 커서 Vercel 콘솔의 실제 구현을 그대로 열람하는 셈이니 컴포넌트를 직접 만들 때 레퍼런스로도 쓴다. 다만 Vercel 브랜드 톤이 강하게 배어 있어 그대로 쓰면 Vercel처럼 보이고, 라이선스가 명시돼 있지 않아 자사 제품 투입 전 패키지 라이선스 확인이 필요하다. 문서에 .md를 붙여 마크다운으로 받을 수 있는 점은 Claude Code로 참조시킬 때 유용하다.

UI Components #react #design-system #vercel #geist #developer-tools #dashboard #typography #icons #foundation #license-unknown

·vercel.com·Sep 25, 2026

Geist — Vercel이 자사 제품에 쓰는 디자인 시스템 (개발자 도구용 컴포넌트 70종)

Systaliko UI — 이커머스·스크롤 애니메이션까지 다루는 무료 블록 96종 + UI 60종

저장된 kit 중 이커머스 조각을 제대로 갖춘 드문 항목이라 상거래 화면 작업에 바로 쓸 만하다 — Product Carousel, Quantity 셀렉터, Price/Pricing 표시, Image Zoom, Infinite Scroll은 상품 목록·상세 화면에 그대로 대응된다. 다른 랜딩 위주 kit(Efferd, Ruixen, Solace)에는 이 범주가 아예 없다. 스크롤 애니메이션도 6종 이상으로 두꺼워서 Hyperiux Vault(GSAP·Lenis)와 달리 Framer Motion만으로 해결하고 싶을 때 대안이 된다. 반대로 shadcn 기본형(Avatar·Dialog·Input 등)이 섞여 있는데 이건 shadcn/ui 원본을 그대로 쓰는 게 낫고 여기서 가져올 이유는 없다. 라이선스 미표기이므로 상업 투입 전 저장소 확인이 필요하다.

UI Components #react #typescript #tailwind #framer-motion #shadcn #ecommerce #scroll #open-source #license-unclear #section

·systaliko-ui.vercel.app·Sep 25, 2026

Systaliko UI — 이커머스·스크롤 애니메이션까지 다루는 무료 블록 96종 + UI 60종

Chamaac UI — WebGL 셰이더 배경 + 애니메이션 아이콘 63종 (총 90종)

간판은 셰이더지만 실제 무게 중심은 애니메이션 아이콘 63종이다. 저장된 Morphicons(애니메이션 아이콘 전문)와 이 부분이 정면으로 겹치므로 아이콘만 필요하면 둘을 비교할 것. 셰이더 배경 쪽은 10종으로 23rd, Vanta.js, Solaris Sky 같은 background 항목들과 겹치는데, React Three Fiber를 쓰므로 이미 R3F가 들어간 프로젝트라면 의존성 추가 없이 붙는다는 게 선택 이유가 된다. Dock과 AI Input처럼 특정 용도 컴포넌트가 섞여 있어 단일 목적 micro가 아니라 kit으로 둔다. 무료지만 라이선스 표기가 없어 상업 투입 전 저장소 확인이 필요하다. WebGL 셰이더는 저사양 기기와 배터리에 부담이 크니 배경으로 깔 때는 프레임 제한이나 reduced-motion 대응을 직접 넣어야 한다.

UI Components #react #webgl #glsl #shader #react-three-fiber #framer-motion #icons #nextjs #license-unclear #fx

·chamaac.com·Sep 25, 2026

Chamaac UI — WebGL 셰이더 배경 + 애니메이션 아이콘 63종 (총 90종)

The UI Factory — 두 가지 디자인 테마를 가진 유료 컴포넌트 70종 (25€ 평생)

디자인 톤이 확실히 서 있는 화면이 필요할 때 본다. 저장된 유료 kit 중 가장 싸다 — Cue+ 99달러, Ruixen Pro 99달러, Atelier UI 79.99달러, SPY UI 라이프타임 249달러와 비교해 25유로이고 상업 사용 무제한이 명시돼 있어 조건도 깔끔하다(라이선스가 불분명한 Nexus UI와 대비되는 지점). 다만 70종은 저 가격대 다른 유료 라이브러리보다 적으니 양이 아니라 Ink & Acid / Modern 두 테마의 완성도가 취향에 맞는지로 판단할 것. Tailwind v4를 요구한다. Solace UI와 함께 MCP를 제공하는 몇 안 되는 레지스트리라 Claude Code에서 직접 붙여 쓰는 실험 대상으로 묶어둔다. 프로프라이어터리라 코드 재배포는 불가.

UI Components #react #nextjs #tailwind #tailwind-v4 #framer-motion #mcp #proprietary #paid #fx

·uithefactory.com·Sep 25, 2026

The UI Factory — 두 가지 디자인 테마를 가진 유료 컴포넌트 70종 (25€ 평생)

Solace UI — 마케팅 페이지용 shadcn 블록 39종 (MCP 레지스트리 제공)

저장된 랜딩 블록 계열(Efferd 183종, Ruixen 240종) 대비 규모가 훨씬 작은 초기 프로젝트라 이걸 먼저 볼 이유는 없다. 다만 히어로 8종과 팀 소개 7종은 한 범주만 놓고 보면 선택지가 충분하고, 폰 목업·채팅 메시지·히어로 비디오처럼 모바일 SaaS 랜딩에 특화된 조각은 다른 곳에 잘 없어서 그 용도로 본다. 실질적으로 눈여겨볼 점은 레지스트리 자체가 MCP를 제공한다는 것으로, Claude Code에서 컴포넌트를 직접 찾아 설치시키는 흐름을 시험해볼 대상이다 — 저장된 레지스트리 중 이걸 갖춘 곳은 드물다. 라이선스가 명시돼 있지 않아 상업 투입 전 확인이 필요하고, 항목 수가 적어 시간이 지나야 쓸 만해질 수 있으니 나중에 다시 볼 것.

UI Components #react #nextjs #typescript #tailwind #shadcn #landing #mcp #motion #section #license-unknown

·solaceui.com·Sep 25, 2026

Solace UI — 마케팅 페이지용 shadcn 블록 39종 (MCP 레지스트리 제공)

Nexus UI — 모션 이펙트 중심 컴포넌트 85종 + Next.js 템플릿 18종

Next.js App Router 프로젝트에서 RSC를 깨지 않는 애니메이션 조각이 필요할 때 본다. 저장된 Framer Motion 계열 kit(ObsidianUI, Odyssey UI, useLayouts, Rare UI 등)과 범위가 상당히 겹치므로 새로 고를 이유는 크지 않고, 차별점은 RSC 호환과 reduced-motion 대응을 명시한 점, 그리고 Next.js 템플릿 18종을 함께 준다는 점 정도다. 랜딩 블록은 한 종씩만 있어 얇으니 섹션 단위로 뽑아 쓸 거면 Efferd나 Ruixen이 낫다. 가장 주의할 점은 상업 라이선스가 유료 티어에 묶여 있다는 것으로, 클라이언트 작업이나 상용 제품에 넣으려면 무료 컴포넌트라도 라이선스 조건을 먼저 확인해야 한다 — MIT인 Atelier UI 무료분이나 Cue Kit과 다른 지점이다.

UI Components #react #nextjs #typescript #tailwind #framer-motion #shadcn #rsc #template #paid #section #paid-license

·nexus-ui.com·Sep 25, 2026

Nexus UI — 모션 이펙트 중심 컴포넌트 85종 + Next.js 템플릿 18종

HeroUI v3 (구 NextUI) — React Aria 기반 완성형 컴포넌트 라이브러리 100종+

shadcn/ui처럼 코드를 복사해 소유하는 방식이 아니라 패키지로 설치해 쓰는 완성형 라이브러리가 필요할 때 본다. 저장된 foundation 중 React Aria 계열(React Aria 본체, Intent UI, BoardUI)과 같은 줄기지만, React Aria가 헤드리스 기반이고 Intent UI가 복붙 방식인 데 비해 여기는 스타일까지 완성된 패키지라 손댈 일이 가장 적다. 대신 디자인 톤이 이미 정해져 있어 브랜드에 맞추려면 shadcn/ui나 Base UI 쪽이 자유롭다. Tailwind v4를 요구하므로 v3 프로젝트에는 바로 못 넣는다. 컬러 피커와 날짜·시간 범주가 유난히 두꺼워서 ColorPicker나 DateRangePicker가 필요하면 다른 곳을 뒤지는 것보다 여기가 빠르다. 문서가 llms.txt와 Docs Agent API를 제공해 Claude Code로 작업할 때 유리하다. 라이선스는 사이트에서 확인하지 못했고 저장소 확인이 필요하다(NextUI 시절은 MIT였다).

UI Components #react #react-aria #tailwind #tailwind-v4 #react-native #accessibility #open-source #paid #foundation #paid-license

·heroui.com·Sep 25, 2026

HeroUI v3 (구 NextUI) — React Aria 기반 완성형 컴포넌트 라이브러리 100종+

interior.dev — 클릭 직후 0.5초를 다루는 마이크로 인터랙션 59종

"동작은 끝냈고 스타일은 네 것"이라는 방향이라 디자인 톤이 강한 다른 kit들과 성격이 다르다. 겉모습을 가져오는 게 아니라 로딩·확인·검증·스트리밍처럼 상태 전환의 동작 패턴이 필요할 때 본다. 특히 Feedle처럼 폼과 비동기 처리가 많은 화면에서 Hold to Confirm(오삭제 방지), Inline Validation, Password Strength, Streaming Text, Value Flash 같은 조각이 바로 쓰인다. 범주 분류가 "언제 쓰는가" 기준이라 02UI(컴포넌트 선택 판단 기준)와 짝지어 보면 좋고, Design Spells가 실제 앱의 마이크로 인터랙션 사례집이라면 여기는 그것을 구현한 코드 쪽이다. 저장된 단일 목적 micro 항목들(loading.dev 스피너, Evil Buttons, Theme Toggles)과 달리 범주를 아울러 kit으로 둔다. MIT라 상업 프로젝트에 제약 없다.

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

·interior.dev·Sep 25, 2026

interior.dev — 클릭 직후 0.5초를 다루는 마이크로 인터랙션 59종

PrebuiltUI — HTML·React·Vue 공용 Tailwind 컴포넌트 435종

React·shadcn CLI에 묶이지 않은 컴포넌트가 필요할 때 쓴다. 저장된 kit 대부분(Efferd, Ruixen, Odyssey, useLayouts, Nexvyn 등)이 React+shadcn 레지스트리 설치 방식이라 Vue나 순수 HTML 프로젝트에서는 쓸 수 없는데, 여기는 Tailwind 마크업만 주므로 그 자리를 메운다. 랜딩 섹션(Hero·CTA·FAQ·Footer)과 기본 폼 요소가 한 곳에 다 있어 정적 페이지나 마케팅 페이지를 빨리 세울 때 유리하다. 반대로 애니메이션·모션은 거의 없으니 연출이 필요하면 Motion 기반 kit 쪽을 본다. 라이선스가 명시돼 있지 않아 상업 프로젝트에 넣기 전 확인이 필요하고, 프리미엄 템플릿은 별도 구매 대상이다. 랜딩 블록만 놓고 보면 Efferd·Ruixen과 범위가 겹치므로 React 프로젝트라면 그쪽이 먼저다.

UI Components #tailwind #html #vue #react #copy-paste #landing #free #section #license-unknown

·prebuiltui.com·Sep 25, 2026

PrebuiltUI — HTML·React·Vue 공용 Tailwind 컴포넌트 435종

Hyperiux Vault — GSAP·Three.js 기반 모션 이펙트 (무료 56종)

스택이 갈리는 지점이 선택 기준이다 — 저장된 연출·kit 계열이 거의 다 Framer Motion/Motion인 반면 여기는 GSAP + Lenis 조합이라, 스크롤 기반 연출(스크럽, 피닝, 관성 스크롤)을 본격적으로 하는 프로젝트라면 이쪽이 맞는다. 반대로 이미 Motion을 쓰고 있다면 GSAP과 Lenis가 통째로 따라오므로 의존성이 겹친다. 무료 56종이 상업 사용 가능하다고 명시된 점은 라이선스 미표기가 흔한 이 계열에서 드문 장점이니 그 안에서 먼저 찾아볼 것. Pro는 구독이라 1회 결제인 Cue+·CharmUI·Atelier UI와 조건이 다르다는 점도 감안할 것. 스크롤 연출 관련 저장 항목: ScrollX UI, Scroll Mask·tw-fade(가장자리 페이드), Transition Kit·glimm(페이지 전환).

UI Components #react #nextjs #gsap #three #lenis #webgl #scroll #paid #fx #paid-license

·vault.hyperiux.com·Sep 25, 2026

Hyperiux Vault — GSAP·Three.js 기반 모션 이펙트 (무료 56종)

bg.ibelick — 복붙용 전체 화면 배경 스니펫 20종

저장된 background 계열 중 가장 가볍고 단순한 쪽 — 셰이더도 캔버스도 없이 CSS 그라디언트·패턴만으로 만든 것이라 의존성이 0이고 성능 부담도 없다. 그래서 대시보드나 도구형 제품처럼 배경에 GPU를 쓰기 싫은 곳에 맞다. 계열 구분: bg.ibelick(CSS만, 최경량) → Aura Gradients(CSS, 206종으로 폭이 넓음) → Vanta.js(WebGL 프리셋) → Canvas UI·Solaris Sky(셰이더 전문). 같은 제작자의 ibelick Lab·Motion Primitives·prompt-kit이 이미 저장돼 있으니 코드 취향은 일관적이다. 20종으로 적으니 원하는 게 없으면 Aura Gradients로 넘어갈 것. 라이선스 미확인이므로 상업 사용 전 저장소에서 볼 것. 주의(2026-10-03 확인): 저장소 ibelick/background-snippets 마지막 커밋이 2024-09-26으로 2년 가까이 갱신이 없다. CSS 스니펫이라 낡아도 동작에는 지장이 적지만 새 항목은 기대하지 말 것.

UI Components #css #tailwind #gradient #copy-paste #background #license-unknown

·bg.ibelick.com·Sep 25, 2026

bg.ibelick — 복붙용 전체 화면 배경 스니펫 20종

Agent Elements — Claude Code 스타일 에이전트 UI 컴포넌트

저장된 AI UI 계열이 이제 여섯이 됐으니 초점으로 갈라 쓸 것 — prompt-kit(shadcn 관례, SDK 비종속), AI Elements(Vercel AI SDK 공식), AICSS(React·Vue·Svelte 다중 프레임워크), Beautiful UI(사람의 승인 화면), brainless(터미널 에이전트 실행 로그 재현), 그리고 Agent Elements다. 여기의 특징은 승인·되묻기·도구 카드가 한 세트로 들어 있다는 점 — 에이전트가 작업을 제안하고 사람이 확인하는 왕복이 컴포넌트 단위로 갖춰져 있다. brainless가 터미널 출력의 재현이라면 이쪽은 그 상호작용까지 포함한다고 보면 된다. MCP와 Vercel AI SDK를 모두 지원하므로 어느 쪽 스택이든 붙일 수 있다. 8종 남짓으로 작으니 전체 채택보다 승인·도구 카드만 가져오는 조합이 현실적이다. 라이선스 종류는 저장소에서 확인할 것.

UI Components #react #typescript #tailwind #ai-agent #mcp #vercel-ai-sdk #open-source #ai #license-unknown

·agent-elements.21st.dev·Sep 25, 2026

Agent Elements — Claude Code 스타일 에이전트 UI 컴포넌트