Material Design 3 Showcase

Material Design 3 Showcase

Material Design 3 Design System

Welcome to the comprehensive Material Design 3 showcase. This page demonstrates all available MD3 components and styling.

Color System

Light Mode Colors

Primary
var(--md3-primary)
Secondary
var(--md3-secondary)
Tertiary
var(--md3-tertiary)

Buttons

Button Variants

Cards

Card Examples

Elevated Card

This is a standard elevated card with a subtle shadow.

Outlined Card

This is an outlined card with a border instead of shadow.

Text Fields

Chips

Default Chip
Filled Chip
Selected Chip

Lists

  • 📝
    First Item
    Supporting text for the first item
  • 🎨
    Second Item
    Supporting text for the second item
  • ✨
    Third Item
    Supporting text for the third item

Typography

Display Large
Display Medium
Display Small
Headline Large
Headline Medium
Headline Small
Title Large
Title Medium
Title Small
Body Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Medium - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tags

Design System Material Design 3 UI Components Typography Colors

Badges

Notifications: 5 12

Responsive Grid

Grid Item 1
This is a responsive grid item
Grid Item 2
This is a responsive grid item
Grid Item 3
This is a responsive grid item

Design Principles

Material Design 3 is built on the following principles:

  1. Adaptable - The design system works across all screen sizes
  2. Accessible - Components are built with accessibility in mind
  3. Consistent - Unified visual language across all pages
  4. Delightful - Smooth animations and interactions
  5. Dynamic - Colors adapt to user preferences

Installation & Usage

All MD3 components are available through CSS classes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- Primary Button -->
<button class="md3-button md3-button-filled">Click Me</button>

<!-- Card -->
<div class="md3-card">
  <div class="md3-card-header">Header</div>
  <div class="md3-card-content">Content</div>
</div>

<!-- Grid -->
<div class="md3-grid md3-grid-3">
  <div class="md3-card">Item 1</div>
  <div class="md3-card">Item 2</div>
  <div class="md3-card">Item 3</div>
</div>

Enjoy the Material Design 3 experience! 🎨