## 🎨 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 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