허브 · 도구 120개 · 섹션 2개

UI 컴포넌트·애니메이션 라이브러리

복사해 붙여넣는 컴포넌트 모음, 헤드리스 프리미티브, shadcn 레지스트리, 그리고 이들을 움직이게 하는 애니메이션 라이브러리까지. 모든 항목이 짧은 미리보기를 재생하므로 설치 전에 모션을 직접 판단할 수 있습니다.

01 / 02

React UI 컴포넌트 라이브러리

109섹션 열기

ForgeUI preview

ForgeUI컴포넌트 라이브러리인터페이스를 더 빠르게 만들 수 있도록 제공되는 애니메이션 React·Tailwind 컴포넌트와 완성형 템플릿.

RewampUI preview

RewampUI컴포넌트 라이브러리둘러보고 재사용할 수 있는 완성형 UI 컴포넌트를 보여 주는 대시보드.

shadcn/ui preview

shadcn/ui컴포넌트 라이브러리패키지로 설치하는 대신 자신의 코드베이스에 직접 복사해 넣어 쓰는 UI 컴포넌트.

Base UI preview

Base UI컴포넌트 라이브러리Radix와 MUI를 만든 팀이 선보인, 스타일이 적용되지 않아 자유롭게 꾸밀 수 있는 컴포넌트 프리미티브.

Radix preview

Radix컴포넌트 라이브러리React 인터페이스를 만들 때 자유롭게 스타일링할 수 있는, 접근성을 갖춘 무스타일 UI 프리미티브.

21st.dev preview

21st.dev컴포넌트 라이브러리컴포넌트를 추가하기 전에 인터랙티브하게 미리 볼 수 있는 커뮤니티 shadcn 레지스트리.

motion-primitives.com

Motion Primitives preview

Motion Primitives컴포넌트 라이브러리인터페이스에 움직임을 더할 수 있도록 Motion 라이브러리를 기반으로 만든 애니메이션 React 컴포넌트.

React Bits preview

React Bits컴포넌트 라이브러리React 프로젝트에 바로 넣을 수 있는, 애니메이션이 적용된 창의적인 컴포넌트 모음.

component.gallery

Component Gallery preview

Component Gallery컴포넌트 라이브러리여러 디자인 시스템의 컴포넌트를 모아 비교해 주는 레퍼런스.

number-flow.barvian.me

NumberFlow preview

NumberFlow컴포넌트 라이브러리변하는 숫자를 부드럽게 애니메이션하며 최신 프레임워크 전반에서 동작하는 컴포넌트.

fancycomponents.dev

Fancy Components preview

Fancy Components컴포넌트 라이브러리더 생동감 있는 인터랙션을 위해 물리 기반 효과를 활용하는 재미있는 React 컴포넌트.

opensourceui.in

Opensource UI preview

Opensource UI컴포넌트 라이브러리프로젝트에 바로 넣을 수 있는, 복사해 붙여 쓰는 React UI 컴포넌트와 디바이스 목업.

ui.spectrumhq.in

Spectrum UI preview

Spectrum UI컴포넌트 라이브러리SaaS 웹사이트 구축에 특화되어 설계된 완성도 높은 UI 컴포넌트.

amicro.vercel.app

Amicro preview

Amicro컴포넌트 라이브러리React 인터페이스에 마이크로 애니메이션을 더하기 위한 가볍고 바로 쓸 수 있는 프리미티브.

painterly.design-tools.workers.dev

Painterly preview

Painterly컴포넌트 라이브러리React용 컴포넌트로 패키징된 예술적인 캔버스 기반 로딩 애니메이션.

Bencho preview

Bencho컴포넌트 라이브러리원하는 느낌으로 정확히 맞출 수 있도록 물리값을 조정할 수 있는 인터랙티브 UI 블록.

shadcnblocks.com

shadcnblocks preview

shadcnblocks컴포넌트 라이브러리shadcn 스타일로 만든, 깔끔하고 바로 사용할 수 있는 수천 개의 웹사이트 블록.

blocks.so preview

blocks.so컴포넌트 라이브러리커맨드 라인에서 바로 설치하는 오픈 소스 웹사이트 블록.

8bitcn preview

8bitcn컴포넌트 라이브러리shadcn 프로젝트에 바로 넣을 수 있는 레트로 8비트 스타일 UI 컴포넌트.

Evil Charts preview

Evil Charts컴포넌트 라이브러리shadcn/ui 프로젝트에 자연스럽게 어울리도록 설계된 애니메이션 SVG 차트 컴포넌트.

coss ui preview

coss ui컴포넌트 라이브러리Base UI 프리미티브 라이브러리를 기반으로 만든, 복사해 붙여 쓰는 UI 컴포넌트.

Rare UI preview

Rare UI컴포넌트 라이브러리React 인터페이스를 만들기 위한 개성 있고 애니메이션이 적용된 UI 컴포넌트 모음.

beUI preview

beUI컴포넌트 라이브러리더 빠른 인터페이스 작업을 위해 Tailwind CSS로 스타일링한 애니메이션 React 컴포넌트.

butter-nav.vercel.app

Butter Nav preview

Butter Nav컴포넌트 라이브러리섹션 사이를 이동할 때 레이아웃이 부드럽게 변형되는 메가 메뉴 컴포넌트.

Cult UI preview

Cult UI컴포넌트 라이브러리부드러운 인터페이스 모션을 위해 Framer Motion으로 구동되는 애니메이션 React 컴포넌트.

daisyUI preview

daisyUI컴포넌트 라이브러리더 빠른 스타일링을 위해 Tailwind CSS를 확장한 컴포넌트 클래스 라이브러리.

HeroUI preview

HeroUI컴포넌트 라이브러리이전에 NextUI라는 이름으로 공개되었던 현대적인 React UI 컴포넌트 라이브러리.

Kibo UI preview

Kibo UI컴포넌트 라이브러리AI 인터페이스 구축에 맞춘 요소들로 채워진 컴포넌트 레지스트리.

Magic UI preview

Magic UI컴포넌트 라이브러리랜딩 페이지 제작에 특화된 애니메이션 UI 컴포넌트입니다.

ui.aceternity.com

Aceternity UI preview

Aceternity UI컴포넌트 라이브러리시선을 사로잡는 웹 페이지를 만들기 위한 트렌디한 애니메이션 컴포넌트와 히어로 섹션입니다.

Animate UI preview

Animate UI컴포넌트 라이브러리Motion 애니메이션 라이브러리로 생동감을 더한 접근성 높은 shadcn 컴포넌트입니다.

FlyonUI preview

FlyonUI컴포넌트 라이브러리최신 Tailwind v4에서 바로 사용할 수 있는 시맨틱 Tailwind CSS 컴포넌트입니다.

TailGrids preview

TailGrids컴포넌트 라이브러리Tailwind CSS로 페이지를 빠르게 조립할 수 있도록 만들어진 반응형 UI 블록입니다.

Flowbite preview

Flowbite컴포넌트 라이브러리인터페이스 작업을 위해 Tailwind CSS 기반으로 구축된 대규모 컴포넌트 라이브러리입니다.

HyperUI preview

HyperUI컴포넌트 라이브러리Tailwind CSS 프로젝트에 복사해 넣을 수 있는 무료 오픈 소스 UI 컴포넌트입니다.

Preline UI preview

Preline UI컴포넌트 라이브러리복잡한 대시보드 인터페이스를 구축하기에 적합한 Tailwind CSS 컴포넌트입니다.

Float UI preview

Float UI컴포넌트 라이브러리마케팅 웹사이트의 페이지를 조립하기 위해 만들어진 Tailwind CSS 컴포넌트입니다.

Meraki UI preview

Meraki UI컴포넌트 라이브러리오른쪽에서 왼쪽으로 읽는 언어를 지원하는 Tailwind CSS 컴포넌트입니다.

Tremor preview

Tremor컴포넌트 라이브러리완성형 대시보드 인터페이스를 조립하기 위한 모듈형 React 컴포넌트 모음입니다.

Headless UI preview

Headless UI컴포넌트 라이브러리Tailwind Labs 팀이 만든 스타일이 없는 접근성 높은 UI 컴포넌트입니다.

Base CN preview

Base CN컴포넌트 라이브러리shadcn 컴포넌트 워크플로에 끼워 넣을 수 있도록 재구성한 Base UI 프리미티브입니다.

Easy UI preview

Easy UI컴포넌트 라이브러리인터페이스를 빠르게 구성할 수 있는 복사-붙여넣기 방식의 컴포넌트 라이브러리입니다.

Eldora UI preview

Eldora UI컴포넌트 라이브러리웹 랜딩 페이지를 빠르게 제작하는 데 맞춘 애니메이션 UI 컴포넌트입니다.

velora.colorlib.com

Velora UI preview

Velora UI컴포넌트 라이브러리재사용할 수 있는 무료 Tailwind CSS 컴포넌트와 사전 제작된 페이지 섹션 모음입니다.

Watermelon UI preview

Watermelon UI컴포넌트 라이브러리shadcn 도구 생태계에 맞도록 구축된 React 컴포넌트 라이브러리입니다.

beautifului.dev

Beautiful UI preview

Beautiful UI컴포넌트 라이브러리웹 앱의 프런트엔드를 구축하기 위한 세련된 복사-붙여넣기 UI 컴포넌트입니다.

Hexter UI컴포넌트 라이브러리shadcn 프로젝트에서 바로 사용할 수 있는 정돈되고 깔끔한 컴포넌트 모음입니다.

Lightswind preview

Lightswind컴포넌트 라이브러리돋보이는 UI를 위한 조명과 발광 효과를 갖춘 Tailwind CSS 컴포넌트입니다.

Reverse UI preview

Reverse UI컴포넌트 라이브러리React와 Tailwind CSS로 인터페이스를 구축하기 위한 컴포넌트 라이브러리입니다.

Smooth UI preview

Smooth UI컴포넌트 라이브러리자신의 프로젝트에 바로 복사해 넣을 수 있는 모션이 풍부한 React 컴포넌트입니다.

Tailark preview

Tailark컴포넌트 라이브러리마케팅 사이트 구축을 겨냥한 Tailwind CSS 페이지 섹션과 컴포넌트입니다.

UI Layouts preview

UI Layouts컴포넌트 라이브러리Tailwind CSS로 바로 조립할 수 있는 전체 페이지 레이아웃과 히어로 섹션입니다.

Kokonut UI preview

Kokonut UI컴포넌트 라이브러리shadcn 형식에서 동작하도록 패키징된 창의적이고 인터랙티브한 UI 컴포넌트입니다.

Nex UI preview

Nex UI컴포넌트 라이브러리현대적인 스타트업을 구축하는 팀을 겨냥한 확장 가능한 UI 컴포넌트 라이브러리입니다.

Ninja UI preview

Ninja UI컴포넌트 라이브러리웹사이트를 빠르고 신속하게 로드되도록 돕는 경량 UI 컴포넌트입니다.

Sera UI preview

Sera UI컴포넌트 라이브러리shadcn 명령줄 도구를 통해 바로 설치하도록 설계된 React 컴포넌트입니다.

Re UI preview

Re UI컴포넌트 라이브러리Base UI 프리미티브 라이브러리를 기반으로 구축된 접근성 높은 UI 컴포넌트입니다.

Syntax UI preview

Syntax UI컴포넌트 라이브러리랜딩 페이지를 빠르게 구성하기 위한 애니메이션 복사-붙여넣기 UI 컴포넌트입니다.

shadcn-cssinjs.com

shadcn-cssinjs preview

shadcn-cssinjs컴포넌트 라이브러리CSS-in-JS 스타일링을 사용하는 프로젝트에 맞도록 재작업한 shadcn 컴포넌트입니다.

transitions.dev

Transitions preview

Transitions컴포넌트 라이브러리재사용할 수 있도록 선별한 CSS 트랜지션 레시피와 이징 커브 모음입니다.

23rd preview

23rd컴포넌트 라이브러리React와 Svelte 프로젝트 모두에서 사용할 수 있는 shadcn 스타일 컴포넌트입니다.

Oneko preview

Oneko컴포넌트 라이브러리페이지에서 커서를 따라다니며 동반자가 되어 주는 픽셀 아트 고양이입니다.

rolling.kitlangton.dev

Rolling Number preview

Rolling Number컴포넌트 라이브러리부드러운 롤링 효과로 숫자를 애니메이션하는 React 숫자 카운터입니다.

Annnimate preview

Annnimate컴포넌트 라이브러리GSAP 애니메이션 라이브러리로 제작된 프로덕션 수준의 모션 컴포넌트입니다.

GetLayers preview

GetLayers컴포넌트 라이브러리사이트를 위한 영화 같은 스타일의 페이지 섹션을 생성하는 AI 프롬프트 모음입니다.

Scritto preview

Scritto컴포넌트 라이브러리UI에 바로 넣을 수 있는, 글자가 굴러가는 텍스트 전환을 위한 컴포넌트 라이브러리입니다.

ogimagecn preview

ogimagecn컴포넌트 라이브러리Satori를 기반으로 Open Graph 소셜 공유 이미지를 생성하는 컴포넌트입니다.

Dither Kit preview

Dither Kit컴포넌트 라이브러리복고풍의 올드스쿨 감성을 위해 디더링된 픽셀로 렌더링되는 차트 컴포넌트입니다.

shieldcn preview

shieldcn컴포넌트 라이브러리프로젝트 문서를 꾸미기 위해 shadcn 감성에 맞춰 스타일링한 README 배지입니다.

unlumen UI preview

unlumen UI컴포넌트 라이브러리명령줄을 통해 설치하고 추가하는 미니멀한 React 컴포넌트 라이브러리입니다.

Bearnie preview

Bearnie컴포넌트 라이브러리Astro를 위해 제작되고 Tailwind CSS로 스타일링된 UI 컴포넌트 모음입니다.

fluidfunctionalism.com

Fluid Functionalism preview

Fluid Functionalism컴포넌트 라이브러리목적이 분명한 물리 기반 애니메이션으로 움직임을 구현하는 UI 컴포넌트입니다.

termcn preview

termcn컴포넌트 라이브러리Ink와 OpenTUI를 기반으로 터미널 스타일 사용자 인터페이스를 구축하는 React 컴포넌트입니다.

framecn preview

framecn컴포넌트 라이브러리Editframe을 기반으로 React 프로젝트에서 프로그래밍 방식으로 영상을 렌더링합니다.

emailcn preview

emailcn컴포넌트 라이브러리React Email, MJML, JSX Email과 함께 작동하는 반응형 이메일 컴포넌트입니다.

startercn.vercel.app

startercn preview

startercn컴포넌트 라이브러리문서, 랜딩 페이지, 에이전트 지원을 갖춘, 바로 포크할 수 있는 shadcn/ui 레지스트리 스타터입니다.

pdfcn preview

pdfcn컴포넌트 라이브러리Takumi와 Forme를 기반으로 PDF 문서를 생성하는 React 컴포넌트입니다.

editorcn.vercel.app

editorcn preview

editorcn컴포넌트 라이브러리Tiptap 프레임워크를 기반으로 React 앱에 바로 넣을 수 있는 리치 텍스트 편집 UI입니다.

shadcn-labs.com

Shadcn Labs preview

Shadcn Labs컴포넌트 라이브러리shadcn/ui 생태계를 위한 오픈 소스 레지스트리와 도구 모음입니다.

Frameblox컴포넌트 라이브러리Framer 안에서 완성된 사이트로 조립할 수 있는 모듈형 섹션과 템플릿입니다.

Nexvyn UI컴포넌트 라이브러리디지털 인터페이스와 앱에 바로 끼워 넣을 수 있는 세련된 드롭인 UI 컴포넌트입니다.

gradient-spin.vercel.app

gradient-spin.vercel.app

Gradient Spin컴포넌트 라이브러리React 프로젝트를 위한, 그라데이션으로 채워진 회전 로딩 인디케이터 컴포넌트입니다.

Libraries.dev preview

Libraries.dev컴포넌트 라이브러리AI 에이전트가 사용하도록 설계된 UI 효과와 컴포넌트 모음입니다.

Sona UI preview

Sona UI컴포넌트 라이브러리코드베이스에 복사해 완전히 소유하고 다시 스타일링할 수 있는 애니메이션 React 컴포넌트입니다.

text-effects.colorion.co

Colorion Text Effects preview

Colorion Text Effects컴포넌트 라이브러리인터페이스에 바로 복사해 붙여넣을 수 있는 애니메이션 텍스트 효과입니다.

dotmatrix.zzzzshawn.cloud

Dot Matrix preview

Dot Matrix컴포넌트 라이브러리shadcn 프로젝트를 위해 제작된 50가지가 넘는 도트 매트릭스 스타일 로딩 애니메이션 모음입니다.

sacred.computer

SRCL preview

SRCL컴포넌트 라이브러리복고풍 DOS 시절의 터미널 인터페이스 느낌을 재현하는 컴포넌트 키트입니다.

Prompt Kit preview

Prompt Kit컴포넌트 라이브러리채팅을 비롯한 AI 인터페이스 경험을 구축하기 위한 프리미티브 컴포넌트입니다.

Shoogle preview

Shoogle컴포넌트 라이브러리다양한 shadcn 레지스트리 전반의 UI 컴포넌트를 색인하는 검색 엔진입니다.

interior.dev preview

interior.dev컴포넌트 라이브러리클릭하는 순간 반응하는 느낌을 주도록 세심하게 조정된 마이크로 인터랙션입니다.

soundcn preview

soundcn컴포넌트 라이브러리인터페이스에 오디오를 더하기 위한 복사-붙여넣기 방식의 UI 사운드 효과 모음입니다.

cuelume preview

cuelume컴포넌트 라이브러리브라우저의 Web Audio API로 실시간 생성되는 작은 인터페이스 사운드 큐입니다.

Canvas UI preview

Canvas UI컴포넌트 라이브러리풍부한 UI 비주얼을 위한 GPU 가속 유체 물리 효과와 canvas 셰이더입니다.

Odyssey UI preview

Odyssey UI컴포넌트 라이브러리shadcn 컴포넌트 시스템을 기반으로 구축된 애니메이션 React 컴포넌트 모음입니다.

Spell UI preview

Spell UI컴포넌트 라이브러리현대적인 웹 애플리케이션을 구축하기 위한, 정성껏 제작된 인터랙티브 UI 컴포넌트입니다.

Skiper UI preview

Skiper UI컴포넌트 라이브러리Tailwind CSS로 조합하고 스타일링하도록 설계된 애니메이션 UI 프리미티브입니다.

devl preview

devl컴포넌트 라이브러리현대적인 웹 인터페이스를 구축하기 위한 미니멀하고 실험적인 UI 컴포넌트입니다.

Uiuno preview

Uiuno컴포넌트 라이브러리shadcn 컴포넌트를 정리하고 관리하기 위한 AI 지원 워크스페이스입니다.

vengeanceui.com

Vengeance UI preview

Vengeance UI컴포넌트 라이브러리스크롤 기반 인터랙션과 효과를 중심으로 구축된 애니메이션 React 컴포넌트입니다.

sensory-ui preview

sensory-ui컴포넌트 라이브러리shadcn/ui 컴포넌트에 오디오 피드백을 더하는 사운드 디자인 시스템입니다.

amacro.vercel.app

Amacro preview

Amacro컴포넌트 라이브러리간단한 설정만으로 React 앱에 추가할 수 있는 드롭인 페이지 등장 애니메이션입니다.

evilbuttons.com

Evil Buttons preview

Evil Buttons컴포넌트 라이브러리누르는 순간 인터랙티브하고 촉각적인 느낌을 주도록 제작된 버튼 컴포넌트입니다.

componentry.dev

Componentry preview

Componentry컴포넌트 라이브러리React 인터페이스를 구축하기 위한 커스터마이즈 가능한 UI 프리미티브와 컴포넌트입니다.

Great UI preview

Great UI컴포넌트 라이브러리React로 제작되고 Tailwind CSS로 스타일링된 복사-붙여넣기 컴포넌트입니다.

Ruru UI preview

Ruru UI컴포넌트 라이브러리React 애플리케이션을 구축하기 위한 접근성 높고 커스터마이즈 가능한 UI 컴포넌트입니다.

shadcnstudio.com

Shadcn Studio preview

Shadcn Studio컴포넌트 라이브러리shadcn/ui 컴포넌트, 사전 제작된 블록, 완성형 템플릿을 갖춘 라이브러리입니다.

shadcn-animated.vercel.app

Animated shadcn/ui preview

Animated shadcn/ui컴포넌트 라이브러리애니메이션 인터페이스를 위해 모션을 입힌 표준 shadcn/ui 컴포넌트 버전입니다.

Pin UI preview

Pin UI컴포넌트 라이브러리React와 Tailwind CSS로 제작된 개성 있는 복사-붙여넣기 컴포넌트입니다.

loading.dev preview

loading.dev컴포넌트 라이브러리React 앱을 위한 로딩 인디케이터와 스피너를 담은 경량 라이브러리입니다.

02 / 02

React·웹 애니메이션 라이브러리

11섹션 열기

Motion preview

Motion애니메이션웹 React 앱에 모션을 구현하기 위한 프로덕션 수준의 애니메이션 라이브러리입니다.

GSAP preview

GSAP애니메이션타임라인을 중심으로 설계되어 업계에서 널리 쓰이는 JavaScript 애니메이션 엔진입니다.

Rive preview

Rive애니메이션상태 머신으로 구동되는 인터랙티브 벡터 애니메이션을 만드는 도구입니다.

lottiefiles.com

Lottie preview

Lottie애니메이션벡터 애니메이션을 웹에 전달하기 위한 가볍고 JSON 기반의 포맷입니다.

easingwizard.com

Easing Wizard preview

Easing Wizard애니메이션웹 애니메이션용 커스텀 CSS 스프링 이징을 만드는 비주얼 생성기입니다.

Morphrig preview

Morphrig애니메이션아이콘 모핑 애니메이션의 작동 원리를 차근차근 보여 주는 인터랙티브 설명서입니다.

Theatre.js preview

Theatre.js애니메이션DOM 요소 전반의 모션 디자인을 구성하는 비주얼 시퀀서입니다.

morphicons preview

morphicons애니메이션스프링 물리를 이용해 아이콘을 자연스럽게 모핑하는 애니메이션 라이브러리입니다.

glimm preview

glimm애니메이션Next.js 프로젝트의 내비게이션을 애니메이션으로 연출하는 셰이더 기반 페이지 전환 도구입니다.

devouringdetails.com

Devouring Details preview

Devouring Details애니메이션마이크로 인터랙션 디자인의 노하우를 가르쳐 주는 인터랙티브 책입니다.

textmotion preview

textmotion애니메이션웹에 롤링 텍스트 애니메이션을 더하는, 의존성 없는 프리미티브입니다.

UI 컴포넌트·애니메이션 라이브러리 (120) — Designeer