컴포넌트 갤러리
카테고리별로 UI 컴포넌트를 탐색하세요
100개의 프롬프트
기본 버튼
CTA 버튼, 폼 제출, 주요 액션에 사용
고스트 버튼
보조 액션, 취소 버튼, 덜 강조할 때 사용
그라데이션 버튼
랜딩 페이지 CTA, 프리미엄 기능 강조에 사용
Card Title
This is a simple card component with a title and description. It has rounded corners and a subtle shadow.
심플 카드
정보 그룹화, 블로그 포스트, 공지사항 표시에 사용
Product Name
상품 카드
쇼핑몰 상품 목록, 마켓플레이스, 상품 갤러리에 사용
Pro Plan
- Unlimited projects
- 10GB storage
- Priority support
- Custom domain
가격 카드
SaaS 요금제 페이지, 구독 서비스, 플랜 비교에 사용
검색 입력
사이트 검색, 필터 검색, 콘텐츠 탐색에 사용
Contact Us
문의 폼
고객 문의, 피드백 수집, 지원 요청 페이지에 사용
토글 스위치
설정 ON/OFF, 알림 토글, 기능 활성화에 사용
슬라이더
볼륨 조절, 가격 범위 선택, 값 조절에 사용
체크박스
다중 선택 옵션, 약관 동의, 설정 체크에 사용
라디오 버튼
단일 선택 옵션, 요금제 선택, 배송 방법 선택에 사용
셀렉트 드롭다운
카테고리 선택, 정렬 옵션, 필터 선택에 사용
스텝퍼
회원가입 단계, 결제 프로세스, 위자드 폼에 사용
필터 칩
검색 필터, 태그 선택, 카테고리 필터링에 사용
최소 10자 이상 작성해주세요
필수 항목입니다
텍스트 영역
긴 텍스트 입력, 리뷰 작성, 설명 입력에 사용
별점
상품 평가, 리뷰 별점, 만족도 조사에 사용
클릭하여 업로드 또는 파일을 드래그하세요
PNG, JPG, PDF 최대 10MB
document.pdf
image.png
또는 버튼 스타일
파일 업로드
이미지 업로드, 문서 첨부, 프로필 사진 변경에 사용
선택된 색상
#3b82f6
컬러 피커
테마 색상 선택, 커스터마이징, 디자인 도구에 사용
OTP Input Examples
Basic OTP Input
6자리 인증 코드를 입력하세요 (테스트: 123456)
OTP 입력
본인 인증, 2FA 인증, 휴대폰 인증에 사용
Date Picker Examples
Inline Calendar
날짜 선택기
예약 날짜 선택, 일정 등록, 생년월일 입력에 사용
Time Picker Examples
Dropdown Time Picker
시간 선택기
예약 시간 선택, 알림 시간 설정, 일정 시간 입력에 사용
Range Slider Examples
Single Value Slider
범위 슬라이더
가격 범위 필터, 거리 범위 선택, 다중 값 조절에 사용
Autocomplete Examples
Basic Autocomplete
자동완성
주소 검색, 사용자 멘션, 태그 입력에 사용
심플 헤더
웹사이트 상단 메뉴, 랜딩 페이지 헤더에 사용
사이드바 메뉴
대시보드 사이드 메뉴, 관리자 페이지 네비게이션에 사용
하단 네비게이션
모바일 앱 하단 네비게이션, 탭 바 구현에 사용
브레드크럼
페이지 경로 표시, 카테고리 계층 표시에 사용
페이지네이션
목록 페이지 이동, 검색 결과 페이징에 사용
메가 메뉴
쇼핑몰 카테고리 메뉴, 대형 사이트 네비게이션에 사용
Tab Bar Examples
Basic Tab Bar
홈 탭 콘텐츠
탭 바
모바일 탭 네비게이션, 섹션 전환 UI에 사용
Hamburger Menu Examples
Slide Left Menu
메뉴 버튼을 클릭하세요
안녕하세요 👋
로그인해 주세요
햄버거 메뉴
모바일 메뉴, 반응형 네비게이션 구현에 사용
Confirm Action
Are you sure you want to proceed with this action? This operation cannot be undone.
확인 대화상자
삭제 확인, 작업 취소 확인, 중요 액션 확인에 사용
Success
Your operation has been completed successfully. You can now continue with your work.
알림 대화상자
완료 알림, 에러 알림, 시스템 메시지 표시에 사용
풀스크린 다이얼로그
전체 화면을 사용하여 몰입감 있는 경험을 제공합니다. 복잡한 폼 작성, 갤러리 뷰어, 상세 정보 페이지 등에 적합합니다.
풀스크린 다이얼로그
새 항목 생성 폼, 이미지 전체 화면 보기, 모바일 폼에 사용
Overlay / Backdrop Examples
Basic Overlay Types
다크
배경 콘텐츠
여기에 내용이 있습니다
라이트
배경 콘텐츠
여기에 내용이 있습니다
블러
배경 콘텐츠
여기에 내용이 있습니다
그라데이션
배경 콘텐츠
여기에 내용이 있습니다
오버레이 / 백드롭
로딩 화면, 모달 배경, 콘텐츠 딤 처리에 사용
Build Amazing Products
Transform your ideas into reality with our powerful tools and intuitive design system. Start building today.
히어로 섹션
랜딩 페이지 상단, 제품 소개 섹션, 홍보 페이지에 사용
푸터 섹션
웹사이트 하단 정보, 링크 모음, 회사 정보 표시에 사용
장소 상세
카페 모카
서울시 강남구
바텀시트
모바일 옵션 메뉴, 필터 패널, 상세 정보 패널에 사용
플로팅 액션 버튼
빠른 작업 버튼, 새 항목 추가, 주요 액션 버튼에 사용
리사이즈 가능한 분할 레이아웃
사이드바
메인 콘텐츠
드래그하여 패널 크기를 조절할 수 있습니다.
고정 비율 분할 (1:2)
왼쪽 패널
1/3 너비
오른쪽 패널
2/3 너비
반응형 분할 레이아웃
대시보드
메뉴
모바일에서는 햄버거 메뉴로 전환됩니다.
3열 분할
분할 레이아웃
에디터 화면, 비교 뷰, 사이드바 레이아웃에 사용
기본 고정 헤더
로고
스크롤하면 헤더가 상단에 고정되고 스타일이 변경됩니다.
콘텐츠 아이템 1
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 2
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 3
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 4
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 5
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 6
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 7
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 8
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 9
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 10
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 11
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 12
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 13
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 14
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 15
스크롤 테스트를 위한 더미 콘텐츠입니다.
축소되는 헤더
브랜드명
슬로건이 여기에
투명 → 불투명 헤더
투명 헤더
히어로 영역 위에서는 투명, 스크롤 후 불투명해지는 헤더 패턴
다단계 고정 헤더
고정 헤더
스크롤 시 고정 메뉴, 상단 고정 네비게이션에 사용
동적 열 그리드
아이템 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
그리드 레이아웃
갤러리, 상품 목록, 카드 그리드 표시에 사용
선택 가능한 리스트
김철수
개발자
이영희
디자이너
박민수
PM
정수진
마케터
알림 리스트
새 메시지가 도착했습니다
5분 전회의 일정이 변경되었습니다
1시간 전프로젝트가 승인되었습니다
3시간 전새 팀원이 합류했습니다
어제상세 정보 리스트
이메일
example@email.com
전화번호
010-1234-5678
주소
서울시 강남구 테헤란로 123
영업시간
09:00 - 18:00
소셜 피드 리스트
사용자 1
1시간 전
오늘 새로운 프로젝트를 시작했습니다! 기대되네요 🎉
사용자 2
2시간 전
오늘 새로운 프로젝트를 시작했습니다! 기대되네요 🎉
컴팩트 리스트
리스트 레이아웃
알림 목록, 이메일 리스트, 피드 표시에 사용
툴팁
아이콘 설명, 추가 정보 표시, 도움말 제공에 사용
배지
알림 개수 표시, 새 메시지 알림, 장바구니 아이템 수에 사용
제품의 전체적인 개요를 확인하세요.
탭
콘텐츠 섹션 전환, 설정 카테고리, 정보 그룹핑에 사용
아코디언
FAQ 섹션, 설정 그룹, 접이식 콘텐츠에 사용
캐러셀
이미지 갤러리, 상품 슬라이더, 배너 롤링에 사용
| 이름 | 이메일 | 상태 | 역할 |
|---|---|---|---|
| 김철수 | kim@email.com | 활성 | 관리자 |
| 이영희 | lee@email.com | 활성 | 사용자 |
| 박민수 | park@email.com | 비활성 | 사용자 |
데이터 테이블
데이터 목록 표시, 관리자 패널, 보고서 테이블에 사용
아바타
사용자 프로필, 팀 멤버 표시, 댓글 작성자 표시에 사용
팝오버 제목
팝오버는 추가 정보나 액션을 표시하는 데 사용됩니다. 클릭하면 열리고 닫힙니다.
팝오버
상세 정보 팝업, 미리보기 카드, 추가 옵션 표시에 사용
마우스 우클릭으로 메뉴 열기
컨텍스트 메뉴
파일 관리자, 에디터 컨텍스트 메뉴, 우클릭 옵션에 사용
라이트박스
이미지 확대 보기, 포토 갤러리, 상품 이미지 뷰어에 사용
다양한 스타일
태그
카테고리 레이블, 상태 표시, 태그 목록에 사용
주문 진행 상황
주문 접수
2024-01-15 09:00주문이 성공적으로 접수되었습니다.
결제 완료
2024-01-15 09:05결제가 확인되었습니다.
상품 준비중
2024-01-15 10:30상품을 포장하고 있습니다.
배송 시작
예정택배사로 상품이 전달됩니다.
배송 완료
예정상품이 도착할 예정입니다.
프로젝트 일정
타임라인
주문 추적, 프로젝트 진행, 이력 표시에 사용
저장 완료
변경사항이 저장되었습니다.
토스트 메시지
작업 완료 알림, 에러 메시지, 시스템 알림에 사용
로딩 스피너
데이터 로딩, 버튼 로딩 상태, 페이지 로딩에 사용
프로그레스 바
파일 업로드, 다운로드 진행, 단계 진행 표시에 사용
스켈레톤 로더
콘텐츠 로딩 대기, 리스트 로딩, 카드 로딩에 사용
데이터가 없습니다
아직 등록된 항목이 없습니다. 새로운 항목을 추가해보세요.
빈 상태
검색 결과 없음, 데이터 없음, 빈 목록 안내에 사용
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
에러 메시지
폼 유효성 오류, API 에러 표시, 실패 안내에 사용
Success State Examples
Simple Success Messages
Success!
Your profile has been updated.
성공 상태
결제 완료, 회원가입 완료, 작업 성공 안내에 사용
Focus Ring Examples
접근성 팁
- • 포커스 링은 키보드 사용자에게 필수적입니다
- • focus:outline-none만 사용하지 말고 대체 스타일을 제공하세요
- • 색상 대비를 충분히 유지하세요 (최소 3:1)
- • focus-visible을 사용하면 키보드 포커스만 표시할 수 있습니다
포커스 링
키보드 사용자를 위한 포커스 스타일링, 접근성 개선에 사용
Skip Link Examples
Main Content Area
이 영역이 메인 콘텐츠입니다. Skip Link를 사용하면 반복되는 네비게이션을 건너뛰고 바로 이 영역으로 이동할 수 있습니다.
Multiple Skip Links Pattern
복잡한 페이지에서는 여러 개의 Skip Link를 제공할 수 있습니다.
구현 팁
- • Skip Link는 페이지의 첫 번째 포커스 가능한 요소여야 합니다
- • 기본적으로 숨겨져 있다가 Tab 키로 포커스 시 표시되어야 합니다
- • 대상 요소에 tabIndex={-1}를 추가하면 포커스를 받을 수 있습니다
- • 명확한 레이블을 사용하세요 (예: "Skip to main content")
스킵 링크
스크린 리더 사용자가 반복 콘텐츠를 건너뛸 때 사용
Keyboard Navigation Examples
Menu Navigation (Arrow Keys)
↑↓ 키로 메뉴 이동, Enter로 선택, Esc로 닫기
키보드 단축키 가이드
다음 요소로 이동
이전 요소로 이동
선택/활성화
목록 내 이동
키보드 내비게이션
드롭다운, 탭, 메뉴 등의 키보드 접근성 구현에 사용
프리미엄 업그레이드
Premium| 이름 | 이메일 | 상태 | 역할 |
|---|---|---|---|
| 김철수 | kim@email.com | 활성 | 관리자 |
| 이영희 | lee@email.com | 활성 | 사용자 |
| 박민수 | park@email.com | 비활성 | 사용자 |
데이터 테이블
프리미엄 업그레이드
PremiumBuild Amazing Products
Transform your ideas into reality with our powerful tools and intuitive design system. Start building today.
히어로 섹션
프리미엄 업그레이드
Premium클릭하여 업로드 또는 파일을 드래그하세요
PNG, JPG, PDF 최대 10MB
document.pdf
image.png
또는 버튼 스타일