컴포넌트 · 109 개 도구

React UI 컴포넌트 라이브러리

이 인덱스에서 가장 큰 섹션입니다. 직접 스타일을 입히는 헤드리스 프리미티브, 프로젝트에 복사해 넣는 shadcn 스타일 레지스트리, 랜딩 페이지용 애니메이션 컴포넌트 모음, 완성형 디자인 시스템까지 아우릅니다. 미리보기는 컴포넌트가 움직이는 모습을 보여주는데, 문서보다 라이브러리의 감각을 더 잘 알려줍니다. React, Tailwind, shadcn으로 필터링해 목록을 좁혀보세요.

정렬

forgeui.in

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

rewampui.com

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

ui.shadcn.com

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

base-ui.com

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

radix-ui.com

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

21st.dev

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

motion-primitives.com

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

reactbits.dev

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

component.gallery

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

number-flow.barvian.me

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

fancycomponents.dev

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

opensourceui.in

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

ui.spectrumhq.in

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

amicro.vercel.app

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

painterly.design-tools.workers.dev

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

bencho.dev

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

shadcnblocks.com

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

blocks.so

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

8bitcn.com

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

evilcharts.com

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

coss.com

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

rareui.com

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

beui.dev

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

butter-nav.vercel.app

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

cult-ui.com

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

daisyui.com

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

heroui.com

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

kibo-ui.com

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

magicui.design

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

ui.aceternity.com

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

animate-ui.com

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

flyonui.com

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

tailgrids.com

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

flowbite.com

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

hyperui.dev

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

preline.co

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

floatui.com

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

merakiui.com

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

tremor.so

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

headlessui.com

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

basecn.dev

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

easyui.pro

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

eldoraui.site

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

velora.colorlib.com

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

watermelon.sh

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

beautifului.dev

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

hexter-ui.com

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

lightswind.com

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

reverseui.com

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

smoothui.dev

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

tailark.com

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

ui-layouts.com

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

kokonutui.com

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

nexui.dev

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

ninna-ui.dev

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

seraui.com

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

reui.io

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

syntaxui.com

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

shadcn-cssinjs.com

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

transitions.dev

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

23rd.dev

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

oneko.dhrv.pw

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

rolling.kitlangton.dev

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

annnimate.com

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

getlayers.ai

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

scrit.to

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

ogimagecn.com

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

tripwire.sh

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

shieldcn.dev

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

ui.unlumen.com

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

bearnie.dev

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

fluidfunctionalism.com

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

termcn.dev

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

framecn.dev

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

emailcn.run

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

startercn.vercel.app

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

pdfcn.dev

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

editorcn.vercel.app

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

shadcn-labs.com

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

frameblox.com

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

ui.nexvyn.dev

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

gradient-spin.vercel.app

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

libraries.dev

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

sonaui.com

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

text-effects.colorion.co

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

dotmatrix.zzzzshawn.cloud

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

sacred.computer

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

prompt-kit.com

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

shoogle.dev

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

interior.dev

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

soundcn.xyz

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

cuelume.dev

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

canvasui.dev

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

odysseyui.com

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

spell.sh

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

skiper-ui.com

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

devl.dev

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

uiuno.com

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

vengeanceui.com

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

sensory-ui.com

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

amacro.vercel.app

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

evilbuttons.com

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

componentry.dev

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

great-ui.com

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

ui.ruru.build

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

shadcnstudio.com

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

shadcn-animated.vercel.app

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

pinui.xyz

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

loading.dev

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

React UI 컴포넌트 라이브러리 자주 묻는 질문

2026년 최고의 React UI 컴포넌트 라이브러리는?

Designeer는 shadcn/ui, Base UI, Radix 등 라이브 미리보기를 제공하는 React UI 컴포넌트 라이브러리 109개를 비교합니다. 최고의 선택은 스택에 따라 다르지만, 이들은 접근성 있는 프리미티브, 애니메이션 컴포넌트, Tailwind 친화적인 빌딩 블록을 두루 갖췄습니다.

React 컴포넌트 라이브러리는 무료 오픈소스인가요?

shadcn/ui, Base UI, Radix를 비롯한 많은 React 컴포넌트 라이브러리는 무료 오픈소스입니다. 일부 프리미엄·애니메이션 UI 라이브러리는 고급 컴포넌트에 비용을 받지만, 무료 오픈소스만으로도 완성도 높은 인터페이스를 만들 수 있습니다.

Tailwind와 shadcn/ui와 함께 쓰는 컴포넌트 라이브러리는?

여러 라이브러리가 Tailwind CSS에 맞춰 만들어져 shadcn/ui와 깔끔하게 조합되며, Radix와 Base UI 같은 헤드리스 프리미티브는 접근성을 처리해 주어 Tailwind로 스타일링하면 됩니다. 몇 가지를 비교해 디자인 시스템에 맞는 컴포넌트 라이브러리를 찾아 보세요.