🎨 Color Palette

Primary Colors

Primary #2196f3

Secondary #757575

Success #4caf50

Danger #f44336

Warning #ff9800

Info #00bcd4

🔘 Buttons

Button Variants

Primary

Success

Danger

Warning

Button Group

📇 Cards

Card Header

Card Title

This is a sample card body with some content.

Simple Card

Card without header or footer.

Card Footer

Card with Badge

Primary Success Danger

🏷️ Badges

Badge Variants

Primary Success Danger Warning Info

Pill Badges

Primary Success Danger

⚠️ Alerts

Info Alert: This is an informational message.

Success Alert: Operation completed successfully!

Warning Alert: Please be careful with this action.

Danger Alert: An error occurred, please try again.

📝 Forms

Input Fields

Text Input

Email Input

Password Input

Select

Textarea

Checkboxes & Radio

Checkbox 1

Checkbox 2 (Checked)

Radio 1

Radio 2

Form Validation

Valid Input

Looks good!

Invalid Input

This field is required.

📊 Tables

ID	Name	Email	Status
#001	John Doe	john@example.com	Active
#002	Jane Smith	jane@example.com	Active
#003	Bob Johnson	bob@example.com	Inactive

📝 Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Styles

Bold Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Italic Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Underlined Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

~~Deleted Text:~~ Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

⚙️ Utilities

Text Alignment

Left aligned text

Center aligned text

Right aligned text

Text Colors

Primary text

Success text

Danger text

Warning text

Muted text

Background Colors

Primary Background

Success Background

Danger Background

Warning Background