Component Material

OnetheTheme

Component Preview

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

Inputs

Outlined Text Field

Filled Text Field

Select

Textarea

Checkbox

Checked Unchecked

Radio

Option 1 Option 2

Toggle Switch

활성화

비활성화

Buttons

MD3 Variants

Elevated

Sizes

With Icon

States

Button States

Input States

Default

Focus

Error

필수 항목입니다.

Feedback

Banner (Alert)

Info

정보 알림 메시지입니다.

Success

작업이 완료되었습니다.

Warning

주의가 필요합니다.

Error

오류가 발생했습니다.

Snackbar

저장되었습니다.

업로드에 실패했습니다.

새 업데이트가 있습니다.

Chip (Badge)

Brand Secondary Success Warning Error Info Neutral

v1.0 Stable Beta Draft

Progress Bar

Upload72%

Processing45%

Complete100%

Error30%

Spinner

Skeleton Loading

Layout

Card

Elevated Card

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

Filled Card

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

Tonal Card

톤 배경으로 강조된 카드.

Modal (Dialog)

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자

Preview

컴포넌트들을 조합하여 실제 서비스에서 사용되는 페이지 형태로 구성한 샘플입니다.

Dashboard

통계 카드, 데이터 테이블, 차트 영역을 조합한 관리자 대시보드 레이아웃.

Material Dashboard

Home Dashboard

Overview

Total Users

24,580

+12.5% from last month

Revenue

$48,290

+8.2% from last month

Orders

1,842

-3.1% from last month

Conversion

3.24%

+0.8% from last month

Revenue Overview

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Recent Activity

New order #1284 placed

2 min ago

User "emily_k" registered

15 min ago

Server CPU usage at 89%

32 min ago

Payment failed for #1279

1 hr ago

Recent Orders

Order	Customer	Amount	Status
#1284	Kim Minjun	$320.00	Completed
#1283	Lee Soojin	$185.50	Pending
#1282	Park Jiwoo	$540.00	Shipping
#1281	Choi Yuna	$92.00	Cancelled

Settings

프로필 편집, 알림 설정, 계정 관리를 포함한 설정 페이지 레이아웃.

Account Settings

Manage your profile, notifications, and preferences.

Profile Information

Jung Kihoon

kihoon@example.com

First Name

Last Name

Role

Bio

Notifications

Email Notifications

Receive email updates for new activity

Push Notifications

Get push notifications on your devices

Marketing Emails

Receive tips, product updates, and offers

Danger Zone

Once you delete your account, there is no going back. Please be certain.

Article

Hero, 본문, 이미지 갤러리, 댓글, 관련 글을 포함한 블로그 아티클 레이아웃.

Design Material 3

Building Modern UIs with Material Design 3

A comprehensive guide to Google's latest design system

Song Yerin

Feb 14, 2026 · 8 min read

Material Design 3 is the latest evolution of Google's open-source design system. With its emphasis on personalization and dynamic color, M3 brings a fresh approach to building beautiful, accessible user interfaces.

Key Principles

The new system is built around three core principles that guide every design decision:

Note

Material Design 3 requires Tailwind CSS v3+ and supports dynamic color through the Material Theme Builder tool.

Personalization — Dynamic color adapts to user wallpapers and preferences
Accessibility — Enhanced contrast ratios and larger touch targets
Expressiveness — Rounded shapes and tonal surfaces create depth

Component Showcase

Here's a quick look at the updated component library:

Button Variants

<button class="px-5 py-2.5 bg-brand text-white
  rounded-full text-sm font-medium">
  Filled Button
</button>

The rounded-full class creates the distinctive pill shape that defines M3 buttons, while the tonal palette provides consistent, accessible color combinations.

Gallery

#MaterialDesign #TailwindCSS #UIDesign #Frontend #GoogleDesign

Comments (3)

Kim Minjun

2 hours ago

Great article! The dynamic color feature is really exciting. Can't wait to try it in my next project.

Lee Hyunee

5 hours ago

The pill-shaped buttons look so clean. M3 is a huge improvement over M2.

Dynamic Color in M3: A Deep Dive

5 min read

Migrating from Material 2 to M3

12 min read

Tailwind + M3: Best Practices

7 min read

Storybook Component Token

Addon

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

@tokens Button / Base

Token	Value	Preview
--btn-bg-primary	#6750A4
--btn-bg-secondary	#625B71
--btn-bg-destructive	#B3261E
--btn-text	#FFFBFE
--btn-radius	9999px
--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	#21005D
--btn-focus-ring	#6750A4 / 30%
--btn-disabled-bg	#CAC4D0
--btn-disabled-text	#938F99

Rendered Component

@tokens Input / Base

Token	Value	Preview
--input-bg	#FFFBFE
--input-border	#CAC4D0
--input-text	#1C1B1F
--input-placeholder	#938F99
--input-radius	0.5rem
--input-padding-x	1rem
--input-padding-y	0.625rem

@tokens Input / States

Token	Value	Preview
--input-focus-border	#6750A4
--input-focus-ring	#6750A4 / 20%
--input-error-border	#B3261E
--input-disabled-bg	#F4EFF4

Rendered Component

@tokens Card / Base

Token	Value	Preview
--card-bg	#FFFBFE
--card-border	#CAC4D0
--card-radius	1.75rem
--card-padding	1.25rem
--card-shadow	shadow-sm
--card-hover-shadow	shadow-md
--card-title-size	0.875rem	Aa
--card-desc-color	#49454F

Rendered Component

Elevated Card

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

Learn more →

Filled Card

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

@tokens Badge / Variants

Token	Value	Preview
--badge-brand-bg	#6750A4 / 10%
--badge-brand-text	#6750A4
--badge-success-bg	#C4EEAA
--badge-success-text	#1B3409
--badge-error-bg	#F9DEDC
--badge-error-text	#601410
--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	#D1E4FF
--alert-info-border	#0061A4 / 20%
--alert-info-icon	#0061A4
--alert-success-bg	#C4EEAA
--alert-warning-bg	#FFDEA1
--alert-error-bg	#F9DEDC
--alert-radius	1rem
--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	#1D192B
--toast-bg-error	#B3261E
--toast-bg-light	#FFFBFE
--toast-text	#FFFBFE
--toast-icon-success	#386A20
--toast-icon-info	#0061A4
--toast-radius	0.5rem
--toast-shadow	shadow-lg

Rendered Component

저장되었습니다.

업로드에 실패했습니다.

새 업데이트가 있습니다.

@tokens Progress / Bar

Token	Value	Preview
--progress-track	#CAC4D0
--progress-fill-brand	#6750A4
--progress-fill-secondary	#625B71
--progress-fill-success	#386A20
--progress-fill-error	#B3261E
--progress-height	0.5rem
--progress-radius	9999px

@tokens Spinner

Token	Value	Preview
--spinner-color-brand	#6750A4
--spinner-color-secondary	#625B71
--spinner-track-opacity	0.25
--skeleton-bg	#CAC4D0

Rendered Component

Upload72%

Processing45%

Complete100%

Error30%

@tokens Modal / Base

Token	Value	Preview
--modal-bg	#FFFBFE
--modal-overlay	rgba(0,0,0,0.5)
--modal-border	#CAC4D0
--modal-radius	1.75rem
--modal-shadow	shadow-xl
--modal-padding	1.5rem
--modal-title-size	1.125rem	Aa
--modal-body-color	#49454F

Rendered Component

Modal Title

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

@tokens Tabs / Base

Token	Value	Preview
--tab-active-color	#6750A4
--tab-active-border	#6750A4
--tab-inactive-color	#49454F
--tab-hover-bg	#FFFBFE
--tab-border	#CAC4D0
--tab-font-size	0.875rem	Aa
--pill-active-bg	#FFFBFE
--pill-track-bg	#F4EFF4

Rendered Component

Underline Tabs

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

Pill Tabs

@tokens Accordion / Base

Token	Value	Preview
--accordion-bg	#FFFBFE
--accordion-border	#CAC4D0
--accordion-divider	#CAC4D0
--accordion-radius	1rem
--accordion-header-text	#1C1B1F
--accordion-body-text	#49454F
--accordion-hover-bg	#FFFBFE
--accordion-icon-color	#938F99
--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	#FFFBFE
--nav-border	#CAC4D0
--nav-link-color	#49454F
--nav-link-active	#6750A4
--nav-link-hover	#1C1B1F
--nav-active-bg	#6750A4 / 10%
--nav-font-size	0.875rem	Aa
--nav-padding-x	0.75rem

Rendered Component

Navbar

Logo

Sidebar

Breadcrumb

@tokens Tooltip / Base

Token	Value	Preview
--tooltip-bg	#332D41
--tooltip-text	#FFFBFE
--tooltip-radius	0.25rem
--tooltip-font-size	0.75rem	Aa
--tooltip-padding-x	0.75rem
--tooltip-padding-y	0.375rem
--tooltip-arrow-size	4px

@tokens Tooltip / Variants

Token	Value	Preview
--tooltip-info-bg	#0061A4
--tooltip-success-bg	#386A20
--tooltip-warning-bg	#7D5700
--tooltip-error-bg	#B3261E

Rendered Component

Directions

Top

위쪽 툴팁

Bottom

아래쪽 툴팁

Color Variants

Info

정보 툴팁

Error

오류 툴팁

@tokens Search / Base

Token	Value	Preview
--search-bg	#FFFBFE
--search-border	#CAC4D0
--search-radius	9999px
--search-icon-color	#938F99
--search-placeholder	#938F99
--search-text	#1C1B1F
--search-focus-border	#6750A4
--search-btn-bg	#6750A4

@tokens Search / Filter Tag

Token	Value	Preview
--tag-bg-brand	#6750A4 / 10%
--tag-text-brand	#6750A4
--tag-radius	9999px

Rendered Component

Search Bar

Filter Tags

Components Active Tokens

@tokens DataTable / Base

Token	Value	Preview
--table-bg	#FFFBFE
--table-header-bg	#F4EFF4
--table-border	#CAC4D0
--table-row-hover	#6750A4 / 8%
--table-divider	#E7E0EC
--table-radius	1.75rem
--table-header-text	#49454F
--table-cell-text	#1C1B1F

@tokens DataTable / Badge Chip

Token	Value	Preview
--chip-admin-bg	#6750A4 / 10%
--chip-editor-bg	#625B71 / 10%
--chip-radius	9999px

Rendered Component

이름	역할	상태
김지수	관리자	Active
이민호	편집자	Active
박서연	뷰어	Pending

@tokens Gallery / Base

Token	Value	Preview
--gallery-item-radius	1.5rem
--gallery-item-shadow	shadow-sm
--gallery-hover-shadow	shadow-lg
--gallery-overlay	rgba(0,0,0,0.2)
--gallery-icon-color	#FFFBFE
--gallery-gap	1rem

Rendered Component

@tokens Carousel / Base

Token	Value	Preview
--carousel-radius	1.75rem
--carousel-shadow	shadow-md
--carousel-transition	500ms ease-out	0.5s
--carousel-nav-size	2.5rem
--carousel-nav-bg	rgba(255,251,254,0.9)
--carousel-nav-icon	#332D41
--carousel-dot-size	0.625rem
--carousel-dot-active	#FFFBFE
--carousel-dot-inactive	rgba(255,251,254,0.5)

Rendered Component

Slide 1

--carousel-radius, --carousel-shadow 적용

@tokens RTE / Base

Token	Value	Preview
--rte-bg	#FFFBFE
--rte-border	#CAC4D0
--rte-radius	1.5rem
--rte-toolbar-bg	#F4EFF4
--rte-toolbar-border	#CAC4D0
--rte-text-color	#1C1B1F
--rte-padding	1.5rem / 1.25rem

@tokens RTE / Toolbar

Token	Value	Preview
--rte-btn-size	2rem	B
--rte-btn-active-bg	#EADDFF
--rte-btn-active-text	#21005D
--rte-btn-hover-bg	#F4EFF4
--rte-divider	#E7E0EC

Rendered Component

리치 텍스트 에디터 토큰 미리보기입니다.

--rte-bg, --rte-border, --rte-radius, --rte-toolbar-bg 적용.

Markdown 지원 42 / 5000자

@tokens Drawer / Base

Token	Value	Preview
--drawer-bg	#FFFBFE
--drawer-radius	1rem
--drawer-shadow	shadow-lg
--drawer-title-size	0.875rem	Aa
--drawer-padding	1rem

@tokens Drawer / Nav Item

Token	Value	Preview
--drawer-item-radius	9999px
--drawer-active-bg	#EADDFF
--drawer-active-text	#21005D
--drawer-inactive-text	#49454F
--drawer-hover-bg	#F4EFF4
--drawer-item-gap	0.625rem
--drawer-icon-size	1rem

Rendered Component

Component Material

Component Preview

Inputs

Buttons

States

Feedback

Layout

Elevated Card

Filled Card

Tonal 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

Preview

Dashboard

Overview

Revenue Overview

Recent Activity

Recent Orders

Settings

Account Settings

Profile Information

Notifications

Danger Zone

Article

Building Modern UIs with Material Design 3

Key Principles

Component Showcase

Gallery

Comments (3)

Related Articles

Storybook Component Token

Elevated Card

Filled Card

Modal Title

Slide 1

Drawer Menu