Component Sample

OnetheTheme

Component Preview

모든 UI 컴포넌트를 상태별로 확인합니다.

Inputs

Text Input

Password

Select

Textarea

Checkbox

Checked Unchecked

Radio

Option 1 Option 2

Toggle Switch

활성화

비활성화

Buttons

Variants

Rounded / Pill

Sizes

With Icon

States

Button States

Input States

Default

Focus

Error

필수 항목입니다.

Feedback

Alert

Info

정보 알림 메시지입니다.

Success

작업이 완료되었습니다.

Warning

주의가 필요합니다.

Error

오류가 발생했습니다.

Toast

저장되었습니다.

업로드에 실패했습니다.

새 업데이트가 있습니다.

Badge

Brand Secondary Success Warning Error Info Neutral

v1.0 Stable Beta Draft

Progress Bar

Upload72%

Processing45%

Complete100%

Error30%

Spinner

Skeleton Loading

Layout

Card

Card Title

카드 설명 텍스트가 들어갑니다.

Feature Card

아이콘이 포함된 피처 카드 스타일.

Filled Card

배경색으로 강조된 카드.

Modal

Modal Title

정말로 이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

Tabs

Tab 1 패널의 콘텐츠가 여기에 표시됩니다.

Pill Tabs

Drawer

Drawer Menu

Accordion

Accordion Item 1

아코디언 패널의 콘텐츠입니다.

FAQ: 설치 방법

npm install로 설치 후 CSS를 import 하세요.

FAQ: 커스터마이징

theme.css의 CSS 변수를 수정하세요.

FAQ: 브라우저 지원

Chrome, Firefox, Safari, Edge를 지원합니다.

Navigation

Navbar

Logo

Sidebar

Breadcrumb

Pagination

120개 중 1-10

Search Bar

Default Search

With Suggestions

Button Component Button Token Button Styles Guide

Filter Tags

Components Active Tokens Layout Forms

Advanced Data Table

Sortable & Filterable Table

8명 표시

이름	이메일	역할	상태	가입일
김 김지수	jisoo@example.com	관리자	Active	2024-01-15
이 이민호	minho@example.com	편집자	Active	2024-03-22
박 박서연	seoyeon@example.com	뷰어	Pending	2024-06-10
최 최현우	hyunwoo@example.com	편집자	Inactive	2023-11-05
정 정수빈	subin@example.com	관리자	Active	2024-08-18
한 한소희	sohee@example.com	뷰어	Active	2024-09-01
강 강다니엘	daniel@example.com	편집자	Active	2024-05-14
윤 윤아름	areum@example.com	관리자	Active	2024-02-28

총 8명

Image Gallery

Masonry Grid

Carousel

Image Slider

Aurora Theme

인디고 & 앰버 색상의 모던 테마

Component Pack

12개의 페이지 섹션 컬렉션

UI Kit

18개 개별 UI 컴포넌트 카탈로그

Material Design 3

M3 디자인 시스템 + 11개 컴포넌트

Rich Text Editor

Full Editor

OnetheTheme

이것은 리치 텍스트 에디터 컴포넌트의 미리보기입니다. 실제 프로젝트에서 contenteditable 또는 전문 에디터 라이브러리를 사용할 수 있습니다.

서식 도구 모음 (Bold, Italic, Underline, Strikethrough)
정렬 옵션 (왼쪽, 가운데, 양쪽)
링크, 이미지, 코드 블록 삽입
Undo / Redo 지원

에디터에서 자유롭게 텍스트를 입력하고 서식을 적용해보세요.

Markdown 지원 자동 저장 활성

126 / 5000자

Storybook Component Token

Addon

컴포넌트별 디자인 토큰 매핑을 확인합니다. 각 컴포넌트가 사용하는 토큰과 실제 렌더링을 비교할 수 있습니다.

@tokens Button / Base

Token	Value	Preview
--btn-bg-primary	#4f46e5
--btn-bg-secondary	#0ea5e9
--btn-bg-destructive	#ef4444
--btn-text	#ffffff
--btn-radius	0.5rem
--btn-font-size	0.875rem	Aa
--btn-font-weight	500	Aa
--btn-padding-x	1.25rem
--btn-padding-y	0.625rem

@tokens Button / States

Token	Value	Preview
--btn-hover-bg	#3730a3
--btn-focus-ring	#4f46e5 / 30%
--btn-disabled-bg	#e5e5e5
--btn-disabled-text	#a3a3a3

Rendered Component

@tokens Input / Base

Token	Value	Preview
--input-bg	#ffffff
--input-border	#d4d4d4
--input-text	#111827
--input-placeholder	#a3a3a3
--input-radius	0.5rem
--input-padding-x	1rem
--input-padding-y	0.625rem

@tokens Input / States

Token	Value	Preview
--input-focus-border	#4f46e5
--input-focus-ring	#4f46e5 / 20%
--input-error-border	#ef4444
--input-disabled-bg	#f5f5f5

Rendered Component

@tokens Card / Base

Token	Value	Preview
--card-bg	#ffffff
--card-border	#e5e5e5
--card-radius	0.75rem
--card-padding	1.25rem
--card-shadow	shadow-sm
--card-hover-shadow	shadow-md
--card-title-size	0.875rem	Aa
--card-desc-color	#6b7280

Rendered Component

Image Card

--card-bg, --card-border, --card-radius, --card-shadow 적용

Learn more →

Feature Card

--card-title-size, --card-desc-color 적용

@tokens Badge / Variants

Token	Value	Preview
--badge-brand-bg	#4f46e5 / 10%
--badge-brand-text	#4f46e5
--badge-success-bg	#d1fae5
--badge-success-text	#065f46
--badge-error-bg	#fee2e2
--badge-error-text	#991b1b
--badge-radius	9999px
--badge-font-size	0.75rem	Aa
--badge-padding-x	0.625rem

Rendered Component

Pill (Soft)

Brand Secondary Success Warning Error Info

Solid

v1.0 Stable Beta Critical

Outline

Brand Success Error Neutral

@tokens Alert / Variants

Token	Value	Preview
--alert-info-bg	#dbeafe
--alert-info-border	#3b82f6 / 20%
--alert-info-icon	#3b82f6
--alert-success-bg	#d1fae5
--alert-warning-bg	#fef3c7
--alert-error-bg	#fee2e2
--alert-radius	0.75rem
--alert-padding	1rem

Rendered Component

Info

--alert-info-bg + --alert-info-border

Success

--alert-success-bg 적용

Warning

--alert-warning-bg 적용

Error

--alert-error-bg 적용

@tokens Toast / Base

Token	Value	Preview
--toast-bg-dark	#262626
--toast-bg-error	#ef4444
--toast-bg-light	#ffffff
--toast-text	#ffffff
--toast-icon-success	#10b981
--toast-icon-info	#3b82f6
--toast-radius	0.5rem
--toast-shadow	shadow-lg

Rendered Component

저장되었습니다.

업로드에 실패했습니다.

새 업데이트가 있습니다.

@tokens Progress / Bar

Token	Value	Preview
--progress-track	#e5e5e5
--progress-fill-brand	#4f46e5
--progress-fill-secondary	#0ea5e9
--progress-fill-success	#10b981
--progress-fill-error	#ef4444
--progress-height	0.5rem
--progress-radius	9999px

@tokens Spinner

Token	Value	Preview
--spinner-color-brand	#4f46e5
--spinner-color-secondary	#0ea5e9
--spinner-track-opacity	0.25
--skeleton-bg	#e5e5e5

Rendered Component

Upload72%

Processing45%

Complete100%

Error30%

@tokens Modal / Base

Token	Value	Preview
--modal-bg	#ffffff
--modal-overlay	rgba(0,0,0,0.5)
--modal-border	#e5e5e5
--modal-radius	1rem
--modal-shadow	shadow-xl
--modal-padding	1.5rem
--modal-title-size	1.125rem	Aa
--modal-body-color	#6b7280

Rendered Component

Modal Title

정말로 이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

@tokens Tabs / Base

Token	Value	Preview
--tab-active-color	#4f46e5
--tab-active-border	#4f46e5
--tab-inactive-color	#6b7280
--tab-hover-bg	#fafafa
--tab-border	#e5e5e5
--tab-font-size	0.875rem	Aa
--pill-active-bg	#ffffff
--pill-track-bg	#f5f5f5

Rendered Component

Underline Tabs

Tab 1 콘텐츠가 여기에 표시됩니다.

Pill Tabs

@tokens Accordion / Base

Token	Value	Preview
--accordion-bg	#ffffff
--accordion-border	#e5e5e5
--accordion-divider	#e5e5e5
--accordion-radius	0.75rem
--accordion-header-text	#111827
--accordion-body-text	#6b7280
--accordion-hover-bg	#fafafa
--accordion-icon-color	#a3a3a3
--accordion-padding	1.25rem / 1rem

Rendered Component

Accordion Item 1

아코디언 패널의 콘텐츠입니다. --accordion-body-text 적용.

Accordion Item 2

두 번째 아코디언 항목입니다.

Accordion Item 3

세 번째 아코디언 항목입니다.

@tokens Nav / Base

Token	Value	Preview
--nav-bg	#ffffff
--nav-border	#e5e7eb
--nav-link-color	#6b7280
--nav-link-active	#4f46e5
--nav-link-hover	#111827
--nav-active-bg	#4f46e5 / 10%
--nav-font-size	0.875rem	Aa
--nav-padding-x	0.75rem

Rendered Component

Navbar

Logo

Sidebar

Breadcrumb

Component Sample

Component Preview

Inputs

Buttons

States

Feedback

Layout

Card Title

Feature Card

Filled Card

Modal Title

Drawer Menu

Navigation

Tooltip

Search Bar

Advanced Data Table

Image Gallery

Carousel

Aurora Theme

Component Pack

UI Kit

Material Design 3

Rich Text Editor

OnetheTheme

Storybook Component Token

Image Card

Feature Card

Modal Title