21st.dev
shadcn/ui 기반 React 컴포넌트·블록 장터. shadcn 명령으로 바로 설치한다.
복사해 쓰는 컴포넌트
출처shadcn/ui components 65Copy-paste UI block sites (hand-picked) 7
Shadcnblocks
shadcn/ui로 만든 랜딩·앱 블록 모음. 무료와 유료가 섞여 있다.
Tailwind Plus (Tailwind UI)
Tailwind CSS 제작팀이 만든 유료 컴포넌트·템플릿 모음. 무료 미리 보기가 있다.
Uiverse
버튼·카드·로더 같은 UI 조각 수천 개를 HTML/CSS·Tailwind 코드로 복사해 쓰는 오픈소스 갤러리.
Aceternity UI
화려한 움직임이 들어간 React·Tailwind 컴포넌트를 복사해 쓰는 곳. 일부 유료.
HyperUI
무료 Tailwind CSS 컴포넌트 모음.
Tailblocks
랜딩 페이지 블록 60여 개를 Tailwind 코드로 주는 곳.
Accordion (shadcn/ui)
제목을 누르면 내용이 펼쳐지는 세로 아코디언 컴포넌트다(shadcn/ui).
Alert (shadcn/ui)
사용자의 주의를 끄는 안내 상자를 보여 주는 컴포넌트다(shadcn/ui).
Alert Dialog (shadcn/ui)
중요한 내용으로 흐름을 멈추고 응답을 받는 모달 대화상자다(shadcn/ui).
Aspect Ratio (shadcn/ui)
원하는 비율 안에 콘텐츠를 보여 주는 컴포넌트다(shadcn/ui).
Attachment (shadcn/ui)
파일이나 이미지 첨부를 메타데이터, 업로드 상태, 동작과 함께 보여 주는 컴포넌트다(shadcn/ui).
Avatar (shadcn/ui)
사용자를 나타내는 이미지와 대체 표시를 갖춘 아바타 컴포넌트다(shadcn/ui).
Badge (shadcn/ui)
배지나 배지처럼 생긴 요소를 보여 주는 컴포넌트다(shadcn/ui).
Breadcrumb (shadcn/ui)
현재 위치까지의 경로를 링크 계층으로 보여 주는 브레드크럼이다(shadcn/ui).
Bubble (shadcn/ui)
대화 내용을 말풍선으로 보여 주는 컴포넌트다. 정렬, 묶음, 반응, 접기를 지원한다(shadcn/ui).
Button (shadcn/ui)
버튼이나 버튼처럼 생긴 요소를 보여 주는 컴포넌트다(shadcn/ui).
Button Group (shadcn/ui)
관련 버튼을 일관된 스타일로 묶는 버튼 그룹이다(shadcn/ui).
Calendar (shadcn/ui)
날짜나 날짜 범위를 고르는 달력 컴포넌트다(shadcn/ui).
Card (shadcn/ui)
머리말, 본문, 꼬리말이 있는 카드 컴포넌트다(shadcn/ui).
Carousel (shadcn/ui)
Embla로 만든 움직임과 스와이프가 있는 캐러셀이다(shadcn/ui).
Chart (shadcn/ui)
Recharts로 만든 차트를 앱에 복사해 쓰는 컴포넌트다(shadcn/ui).
Checkbox (shadcn/ui)
체크와 해제를 오가는 체크박스다(shadcn/ui).
Code Block (shadcn/ui)
코드·터미널 출력·diff를 줄 번호와 복사 버튼과 함께 보여 주는 shadcn/ui 블록이다.
Collapsible (shadcn/ui)
패널을 펼치고 접는 컴포넌트다(shadcn/ui).
Combobox (shadcn/ui)
추천 목록이 뜨는 자동완성 입력창이다(shadcn/ui).
Command (shadcn/ui)
검색과 빠른 실행을 위한 명령 메뉴다(shadcn/ui).
Context Menu (shadcn/ui)
오른쪽 클릭으로 여는 동작 메뉴다(shadcn/ui).
Dialog (shadcn/ui)
기본 창 위에 떠서 아래 내용을 비활성화하는 대화상자다(shadcn/ui).
Direction (shadcn/ui)
앱의 글 방향을 정하는 프로바이더 컴포넌트다(shadcn/ui).
Drawer (shadcn/ui)
React용 서랍(drawer) 컴포넌트다(shadcn/ui).
Dropdown Menu (shadcn/ui)
버튼을 누르면 동작 목록 메뉴가 뜨는 드롭다운이다(shadcn/ui).
Empty (shadcn/ui)
빈 상태를 보여 주는 컴포넌트다(shadcn/ui).
Field (shadcn/ui)
라벨, 입력, 도움말을 묶어 접근성 좋은 폼 필드를 만드는 컴포넌트다(shadcn/ui).
Form (shadcn/ui)
React와 shadcn/ui로 폼을 만드는 컴포넌트다.
Hover Card (shadcn/ui)
링크 너머 내용을 미리 보여 주는 호버 카드다(shadcn/ui).
Input (shadcn/ui)
스타일과 접근성을 갖춘 텍스트 입력 컴포넌트다(shadcn/ui).
Input Group (shadcn/ui)
입력창에 부가 요소, 버튼, 도움말을 붙이는 입력 그룹이다(shadcn/ui).
Input Otp (shadcn/ui)
복사·붙여넣기를 지원하는 접근성 좋은 일회용 비밀번호(OTP) 입력이다(shadcn/ui).
Item (shadcn/ui)
미디어, 제목, 설명, 동작을 함께 보여 주는 다용도 항목 컴포넌트다(shadcn/ui).
Kbd (shadcn/ui)
키보드 입력 글자를 표시하는 컴포넌트다(shadcn/ui).
Label (shadcn/ui)
입력 요소와 연결된 접근성 좋은 라벨이다(shadcn/ui).
Marker (shadcn/ui)
대화 속에 상태, 시스템 메모, 구분선 등을 표시하는 컴포넌트다(shadcn/ui).
Menubar (shadcn/ui)
데스크톱 앱처럼 늘 보이는 메뉴 막대다(shadcn/ui).
Message (shadcn/ui)
대화 속 메시지를 아바타, 머리말, 정렬과 함께 보여 주는 컴포넌트다(shadcn/ui).
Message Scroller (shadcn/ui)
스트리밍 응답을 따라가고 기록을 불러오는 채팅 스크롤 컨테이너다(shadcn/ui).
Native Select (shadcn/ui)
디자인 시스템에 맞춘 기본 HTML select 요소다(shadcn/ui).
Navigation Menu (shadcn/ui)
웹사이트 이동용 링크 모음 메뉴다(shadcn/ui).
Pagination (shadcn/ui)
페이지 이동, 이전·다음 링크가 있는 쪽 나누기다(shadcn/ui).
Popover (shadcn/ui)
버튼을 누르면 풍부한 내용이 뜨는 팝오버다(shadcn/ui).
Progress (shadcn/ui)
작업 진행률을 막대로 보여 주는 컴포넌트다(shadcn/ui).
Questionnaire (shadcn/ui)
단일·다중 선택, 자유 입력, 건너뛰기 질문을 담은 여러 단계 설문이다(shadcn/ui).
Radio Group (shadcn/ui)
한 번에 하나만 고르는 라디오 버튼 그룹이다(shadcn/ui).
Resizable (shadcn/ui)
키보드로도 크기를 바꿀 수 있는 패널 그룹과 레이아웃이다(shadcn/ui).
Scroll Area (shadcn/ui)
브라우저마다 같은 모양의 스크롤 영역을 만드는 컴포넌트다(shadcn/ui).
Select (shadcn/ui)
버튼을 누르면 옵션 목록에서 고르는 선택 컴포넌트다(shadcn/ui).
Separator (shadcn/ui)
내용을 시각적·의미적으로 나누는 구분선이다(shadcn/ui).
Sheet (shadcn/ui)
화면 옆에서 보조 내용을 보여 주는 시트 컴포넌트다(shadcn/ui).
Sidebar (shadcn/ui)
조합하고 테마를 바꿀 수 있는 사이드바 컴포넌트다(shadcn/ui).
Skeleton (shadcn/ui)
내용을 불러오는 동안 자리를 채워 보여 주는 스켈레톤이다(shadcn/ui).