Docs Components Blocks Templates Community Pricing

Loading

복사해서 바로 쓰는 React 컴포넌트. Base UI + Tailwind CSS 기반.

문서

소개
설치
테마

컴포넌트

전체 보기
블록
템플릿
멤버십

리소스

변경 내역
Base UI
Tailwind CSS

약관

개인정보처리방침
이용약관
환불·취소 정책

Family

Groudit
Groudit UI
Ahopkhan

Groudit | 대표자: 최준경 | 사업자등록번호: 863-08-03234 | 통신판매업 신고번호: 2026-suwonjangan-0159

문의: hello@groudit.com

© 2026 Groudit. All rights reserved.정성껏 만든 Korea에서.

Getting Started

Introduction
Installation

Design Guide

UX/UI Guide
Typography
Colors
Color Palettes
Color Usage
Spacing

Foundations

Connecting Data
Accessibility
Internationalization
Versioning

Primitives

Button
Button Group
Badge
Avatar
Separator
Skeleton
Card

Form

Input
Textarea
Label
Checkbox
Switch
Select
Form
Radio Group

Navigation

Tabs
Accordion
Dropdown Menu
Menubar
Breadcrumb
Pagination
Command
Sidebar
Nested Sidebar
Wizard

Overlay

Dialog
Sheet
Drawer
Tooltip
Popover
Hover Card

Feedback

Alert
Sonner
Progress
Spinner

Data

Table
Table Toolbar
Barcode
Barcode Scanner Dialog
Calendar
Date Range Picker
Slider
Scroll Area
Aspect Ratio
Resizable
Chart

EnterpriseERP-style

Flexible Column Layout
Dynamic Page
Filter Bar
Column Filter
Editable Cell
Object Identifier
Object Number
Semantic Text

Catalog

Components

Base UI primitive 위에 빌드된 54개 React 컴포넌트. 복사해서 자유롭게 수정하세요.

Primitives · 7

사용자 액션을 트리거하는 가장 기본적인 컴포넌트.

여러 버튼·인풋·셀렉트를 하나의 연결된 그룹으로 묶음. nested·split·separator.

상태·카테고리·카운트 등을 한눈에 보여주는 작은 라벨.

사용자 프로필 이미지. 이미지 로드 실패 시 fallback.

콘텐츠 그룹을 시각적으로 분리하는 가로/세로 선.

콘텐츠 로딩 중 자리에 표시되는 placeholder.

관련된 정보를 그룹화해서 보여주는 컨테이너.

Form · 8

사용자 텍스트 입력 필드.

여러 줄 텍스트 입력 필드.

폼 요소의 접근성 향상을 위한 라벨.

켜고 끄는 단일 옵션 선택.

토글 형식의 켜고 끄기 컨트롤.

옵션 리스트에서 하나 선택. 키보드 네비게이션.

react-hook-form + zod 기반 폼 컴포넌트.

여러 옵션 중 하나만 선택.

Navigation · 10

관련된 콘텐츠를 같은 영역에서 전환해가며 보여줍니다.

접고 펼치는 콘텐츠 패널 컬렉션.

버튼을 클릭하면 펼쳐지는 옵션 메뉴.

데스크탑 앱 스타일의 가로 메뉴바.

현재 위치 + 상위 경로 네비게이션.

긴 리스트 분할 네비게이션.

키보드 우선 명령 팔레트. ⌘K 패턴.

확장 가능한 사이드 내비게이션. expanded / collapsed / offcanvas.

계층형(depth) 사이드 메뉴. 펼침/접힘 서브메뉴를 무한 중첩.

다단계 스텝 플로우(Stepper). 온보딩·체크아웃·폼 마법사.

Overlay · 6

사용자 주의를 끌어 추가 정보·확인을 받는 모달.

화면 가장자리에서 슬라이드되는 패널.

끌어내려(스와이프) 닫는 바텀 시트 패널. vaul 기반.

hover/focus 시 표시되는 짧은 정보 팝업.

주변에 위치하는 부유 패널.

hover 시 표시되는 미리보기 카드.

Feedback · 4

사용자 주의를 끄는 상황별 메시지 박스.

전역 토스트(알림) 컴포넌트.

작업의 진행 상태를 시각화하는 가로 바.

로딩 인디케이터. 사이즈 5단계 + 영역 오버레이.

Data · 11

구조화된 데이터를 행과 열로 표시하는 표.

테이블 상단 액션 바 — 검색·생성·삭제·정렬·필터·설정·인쇄.

Code 128 1D 바코드. 의존성 없이 SVG 로 렌더.

Barcode Scanner Dialog

카메라로 바코드·QR 을 스캔하는 다이얼로그. zxing 기반.

날짜 선택용 달력. react-day-picker 기반.

Date Range Picker

시작/종료 두 날짜 범위 선택.

범위 내 값 선택 컨트롤.

커스텀 스크롤바를 가진 스크롤 컨테이너.

비율 고정 박스. 이미지·비디오용.

사용자가 패널 크기 조정. 가로/세로/중첩.

recharts wrapper — Line / Bar / Area / Pie.

Enterprise · 8

Flexible Column Layout

반응형 1/2/3 column 마스터-디테일 레이아웃.

sticky title + 접힘 header + sticky footer 페이지.

variant + Go + Adapt Filters 필터 바.

text/select 팝오버를 테이블 헤더에 부착하는 컬럼 필터.

셀 클릭 시 input/select/switch 로 인라인 편집.

Object Identifier

코드 + 상태 배지 식별자. 테이블·헤더 공용.

값 + 단위/통화 + 상태 색 + 변동률 수치 표현.

positive/negative/critical/informative 의미별 색.