Production Ready

Themes

Buttons

Cards & Surfaces

Elevated Card

Surface with shadow elevation for prominent content

Filled Card

Subtle background for grouped content

Completed task

Outlined Card

Bordered surface for equal visual hierarchy

@material.design

Featured Card

Highlighted content with semantic color

Buttons & Actions

Primary Actions

Secondary Actions

Button States

Pills, Badges & Chips

Filled Pills

DesignDevelopmentTestingDeployment

Outlined Pills

ReactTypeScriptTailwindNext.js

Badges

5
New
Pro

Assist Chips (Interactive)

Icons & Semantic Colors

Icon Buttons

Semantic Color Containers

Primary
Secondary
Tertiary
Error
Surface
Surface Variant

Color Containers

Primary Container

For primary content areas

Secondary Container

For secondary content areas

Tertiary Container

For tertiary content areas

Input Fields

Chips

Assist ChipOutlined ChipSuggestion Chip

Lists

List Item 1
Supporting text for this list item
List Item 2
Supporting text for this list item
List Item 3
Supporting text for this list item

Progress & Loading

Linear Progress

Circular Progress

75%
50%
25%

Selection Controls

Checkboxes

Radio Buttons

Toggle Switches

Sliders & Range

Tabs & Navigation

Navigation Tabs

Bottom Navigation

Search & Input

Stepper & Steps

3
4
Design
Development
Testing
Deployment

Alerts & Messages

Error: Something went wrong
Snackbar notification