UI Components Showcase

Color Palette

Primary colors used throughout the application

Primary
#007bff
Success
#28a745
Warning
#ffc107
Danger
#dc3545
Info
#17a2b8
Secondary
#6c757d
Dark
#343a40
Light
#f8f9fa

Typography

Text styles and headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with bold text and italic text.

This is muted text.

This is primary colored text.

This is success colored text.

This is warning colored text.

This is danger colored text.

Buttons

Various button styles and states

Cards

Card components for content display

Card Title

This is a basic card with header and body content.

Go somewhere
Card without Header

This card doesn't have a header section.

Action
Card with Footer

This card has a footer section.

Footer content

Alerts

Alert messages for user feedback

Badges

Badge components for labels and counts

Primary Secondary Success Danger Warning Info Light Dark
Pill Primary Pill Secondary Pill Success Pill Danger
Heading with badge New

Paragraph with badge Updated

Progress Bars

Progress indicators for completion status

25%
50%
75%
100%

Forms

Form controls and input elements

Tables

Table components for data display

# Name Email Status
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Pending
3 Mike Johnson mike@example.com Inactive

Charts

Chart components for data visualization

Bar Chart
Pie Chart

Icons

Font Awesome icons used throughout the application

Home
User
Settings
Notifications
Search
Add
Edit
Delete
Save
Download
Upload
View
Chart
File
Folder

Modals

Modal dialogs for user interactions

Tooltips

Tooltip components for additional information

Spinners

Loading spinners for async operations

Toast Notifications

Toast notifications for user feedback