Component Gallery
Browse UI components by category
100 prompts
Primary Button
Use for CTA buttons, form submissions, and primary actions
Ghost Button
Use for secondary actions, cancel buttons, or less emphasis
Gradient Button
Use for landing page CTAs, highlighting premium features
Card Title
This is a simple card component with a title and description. It has rounded corners and a subtle shadow.
Simple Card
Use for grouping information, blog posts, or announcements
Product Name
Product Card
Use for e-commerce product listings, marketplaces, or product galleries
Pro Plan
- Unlimited projects
- 10GB storage
- Priority support
- Custom domain
Pricing Card
Use for SaaS pricing pages, subscription services, or plan comparisons
Login
Don't have an account? Sign up
Login Form
Use for member login pages or authentication screen implementation
Search Input
Use for site search, filter search, or content navigation
Contact Us
Contact Form
Use for customer inquiry, feedback collection, or support request pages
Toggle Switch
Use for settings ON/OFF, notification toggles, or feature activation
Slider
Use for volume control, price range selection, or value adjustment
Checkbox
Use for multiple selection options, terms agreement, or settings checks
Radio Button
Use for single selection options, plan selection, or shipping method choice
Select Dropdown
Use for category selection, sort options, or filter selection
Stepper
Use for signup steps, checkout process, or wizard forms
Filter Chips
Use for search filters, tag selection, or category filtering
최소 10자 이상 작성해주세요
필수 항목입니다
Text Area
Use for long text input, review writing, or description entry
Rating
Use for product ratings, review stars, or satisfaction surveys
클릭하여 업로드 또는 파일을 드래그하세요
PNG, JPG, PDF 최대 10MB
document.pdf
image.png
또는 버튼 스타일
File Upload
Use for image upload, document attachment, or profile photo changes
선택된 색상
#3b82f6
Color Picker
Use for theme color selection, customization, or design tools
OTP Input Examples
Basic OTP Input
6자리 인증 코드를 입력하세요 (테스트: 123456)
OTP Input
Use for identity verification, 2FA authentication, or phone verification
Date Picker Examples
Inline Calendar
Date Picker
Use for booking date selection, schedule registration, or birthdate entry
Time Picker Examples
Dropdown Time Picker
Time Picker
Use for booking time selection, alarm time setting, or schedule time entry
Range Slider Examples
Single Value Slider
Range Slider
Use for price range filters, distance range selection, or multi-value adjustment
Autocomplete Examples
Basic Autocomplete
Autocomplete
Use for address search, user mentions, or tag input
Simple Header
Use for website top menu or landing page headers
Sidebar Menu
Use for dashboard side menus or admin page navigation
Bottom Navigation
Use for mobile app bottom navigation or tab bar implementation
Breadcrumb
Use for page path display or category hierarchy indication
Pagination
Use for list page navigation or search result paging
Mega Menu
Use for e-commerce category menus or large site navigation
Tab Bar Examples
Basic Tab Bar
홈 탭 콘텐츠
Tab Bar
Use for mobile tab navigation or section switching UI
Hamburger Menu Examples
Slide Left Menu
메뉴 버튼을 클릭하세요
안녕하세요 👋
로그인해 주세요
Hamburger Menu
Use for mobile menus or responsive navigation implementation
Confirm Action
Are you sure you want to proceed with this action? This operation cannot be undone.
Confirm Dialog
Use for delete confirmation, action cancellation, or important action confirmation
Success
Your operation has been completed successfully. You can now continue with your work.
Alert Dialog
Use for completion alerts, error notifications, or system messages
풀스크린 다이얼로그
전체 화면을 사용하여 몰입감 있는 경험을 제공합니다. 복잡한 폼 작성, 갤러리 뷰어, 상세 정보 페이지 등에 적합합니다.
Full Screen Dialog
Use for new item creation forms, full-screen image view, or mobile forms
Overlay / Backdrop Examples
Basic Overlay Types
다크
배경 콘텐츠
여기에 내용이 있습니다
라이트
배경 콘텐츠
여기에 내용이 있습니다
블러
배경 콘텐츠
여기에 내용이 있습니다
그라데이션
배경 콘텐츠
여기에 내용이 있습니다
Overlay / Backdrop
Use for loading screens, modal backgrounds, or content dimming
Build Amazing Products
Transform your ideas into reality with our powerful tools and intuitive design system. Start building today.
Hero Section
Use for landing page headers, product introduction sections, or promotional pages
Footer Section
Use for website footer info, link collections, or company information display
장소 상세
카페 모카
서울시 강남구
Bottom Sheet
Use for mobile option menus, filter panels, or detail info panels
Floating Action Button
Use for quick action buttons, new item creation, or primary action buttons
리사이즈 가능한 분할 레이아웃
사이드바
메인 콘텐츠
드래그하여 패널 크기를 조절할 수 있습니다.
고정 비율 분할 (1:2)
왼쪽 패널
1/3 너비
오른쪽 패널
2/3 너비
반응형 분할 레이아웃
대시보드
메뉴
모바일에서는 햄버거 메뉴로 전환됩니다.
3열 분할
Split Layout
Use for editor screens, comparison views, or sidebar layouts
기본 고정 헤더
로고
스크롤하면 헤더가 상단에 고정되고 스타일이 변경됩니다.
콘텐츠 아이템 1
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 2
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 3
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 4
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 5
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 6
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 7
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 8
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 9
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 10
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 11
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 12
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 13
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 14
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 15
스크롤 테스트를 위한 더미 콘텐츠입니다.
축소되는 헤더
브랜드명
슬로건이 여기에
투명 → 불투명 헤더
투명 헤더
히어로 영역 위에서는 투명, 스크롤 후 불투명해지는 헤더 패턴
다단계 고정 헤더
Sticky Header
Use for fixed menus on scroll or top-fixed navigation
동적 열 그리드
아이템 1
카테고리 A
아이템 2
카테고리 B
아이템 3
카테고리 A
아이템 4
카테고리 C
아이템 5
카테고리 B
아이템 6
카테고리 A
반응형 자동 조절 그리드
아이템 1
카테고리 A
아이템 2
카테고리 B
아이템 3
카테고리 A
아이템 4
카테고리 C
아이템 5
카테고리 B
아이템 6
카테고리 A
그리드/리스트 토글
아이템 1
아이템 2
아이템 3
아이템 4
아이템 5
아이템 6
메이슨리 스타일 그리드
피처드 그리드
주요 아이템
2x2 크기의 피처드 카드입니다.
간격 변형
gap-1
gap-4
gap-6
Grid Layout
Use for galleries, product lists, or card grid displays
선택 가능한 리스트
김철수
개발자
이영희
디자이너
박민수
PM
정수진
마케터
알림 리스트
새 메시지가 도착했습니다
5분 전회의 일정이 변경되었습니다
1시간 전프로젝트가 승인되었습니다
3시간 전새 팀원이 합류했습니다
어제상세 정보 리스트
이메일
example@email.com
전화번호
010-1234-5678
주소
서울시 강남구 테헤란로 123
영업시간
09:00 - 18:00
소셜 피드 리스트
사용자 1
1시간 전
오늘 새로운 프로젝트를 시작했습니다! 기대되네요 🎉
사용자 2
2시간 전
오늘 새로운 프로젝트를 시작했습니다! 기대되네요 🎉
컴팩트 리스트
List Layout
Use for notification lists, email lists, or feed displays
Tooltip
Use for icon descriptions, additional info display, or help provision
Badge
Use for notification counts, new message alerts, or cart item counts
제품의 전체적인 개요를 확인하세요.
Tabs
Use for content section switching, settings categories, or info grouping
Accordion
Use for FAQ sections, settings groups, or collapsible content
Carousel
Use for image galleries, product sliders, or banner rotation
| 이름 | 이메일 | 상태 | 역할 |
|---|---|---|---|
| 김철수 | kim@email.com | 활성 | 관리자 |
| 이영희 | lee@email.com | 활성 | 사용자 |
| 박민수 | park@email.com | 비활성 | 사용자 |
Data Table
Use for data list display, admin panels, or report tables
Avatar
Use for user profiles, team member display, or comment author display
팝오버 제목
팝오버는 추가 정보나 액션을 표시하는 데 사용됩니다. 클릭하면 열리고 닫힙니다.
Popover
Use for detail info popups, preview cards, or additional option display
마우스 우클릭으로 메뉴 열기
Context Menu
Use for file managers, editor context menus, or right-click options
Lightbox
Use for image zoom view, photo galleries, or product image viewers
다양한 스타일
Tag
Use for category labels, status display, or tag lists
주문 진행 상황
주문 접수
2024-01-15 09:00주문이 성공적으로 접수되었습니다.
결제 완료
2024-01-15 09:05결제가 확인되었습니다.
상품 준비중
2024-01-15 10:30상품을 포장하고 있습니다.
배송 시작
예정택배사로 상품이 전달됩니다.
배송 완료
예정상품이 도착할 예정입니다.
프로젝트 일정
Timeline
Use for order tracking, project progress, or history display
저장 완료
변경사항이 저장되었습니다.
Toast Message
Use for task completion alerts, error messages, or system notifications
Loading Spinner
Use for data loading, button loading states, or page loading
Progress Bar
Use for file upload, download progress, or step progress display
Skeleton Loader
Use for content loading wait, list loading, or card loading
데이터가 없습니다
아직 등록된 항목이 없습니다. 새로운 항목을 추가해보세요.
Empty State
Use for no search results, no data, or empty list guidance
Error Message Examples
Inline Error Messages
Unable to process your request
The server encountered an unexpected error. Please try again later.
Connection failed
Unable to connect to the server. Check your internet connection.
Error Code: 500
Internal Server Error
Error Message
Use for form validation errors, API error display, or failure notices
Success State Examples
Simple Success Messages
Success!
Your profile has been updated.
Success State
Use for payment complete, signup complete, or task success notices
Focus Ring Examples
접근성 팁
- • 포커스 링은 키보드 사용자에게 필수적입니다
- • focus:outline-none만 사용하지 말고 대체 스타일을 제공하세요
- • 색상 대비를 충분히 유지하세요 (최소 3:1)
- • focus-visible을 사용하면 키보드 포커스만 표시할 수 있습니다
Focus Ring
Use for keyboard user focus styling and accessibility improvements
Skip Link Examples
Main Content Area
이 영역이 메인 콘텐츠입니다. Skip Link를 사용하면 반복되는 네비게이션을 건너뛰고 바로 이 영역으로 이동할 수 있습니다.
Multiple Skip Links Pattern
복잡한 페이지에서는 여러 개의 Skip Link를 제공할 수 있습니다.
구현 팁
- • Skip Link는 페이지의 첫 번째 포커스 가능한 요소여야 합니다
- • 기본적으로 숨겨져 있다가 Tab 키로 포커스 시 표시되어야 합니다
- • 대상 요소에 tabIndex={-1}를 추가하면 포커스를 받을 수 있습니다
- • 명확한 레이블을 사용하세요 (예: "Skip to main content")
Skip Link
Use for screen reader users to skip repetitive content
Keyboard Navigation Examples
Menu Navigation (Arrow Keys)
↑↓ 키로 메뉴 이동, Enter로 선택, Esc로 닫기
키보드 단축키 가이드
다음 요소로 이동
이전 요소로 이동
선택/활성화
목록 내 이동
Keyboard Navigation
Use for keyboard accessibility in dropdowns, tabs, menus, etc.
Upgrade to Premium
Premium| 이름 | 이메일 | 상태 | 역할 |
|---|---|---|---|
| 김철수 | kim@email.com | 활성 | 관리자 |
| 이영희 | lee@email.com | 활성 | 사용자 |
| 박민수 | park@email.com | 비활성 | 사용자 |
Data Table
Upgrade to Premium
PremiumBuild Amazing Products
Transform your ideas into reality with our powerful tools and intuitive design system. Start building today.
Hero Section
Upgrade to Premium
Premium클릭하여 업로드 또는 파일을 드래그하세요
PNG, JPG, PDF 최대 10MB
document.pdf
image.png
또는 버튼 스타일