UI Component Showcase

A comprehensive collection of UI components for modern business applications

Quick Navigation

Buttons Forms Tables Cards Modals Alerts Navigation Progress Badges Lists Drag & Drop

Buttons

Primary Buttons

Action Buttons

Outline Buttons

Button Groups

Loading States

Forms

Text Inputs

Text Input

Email Input

Password

Number Input

Select & Textarea

Select Dropdown

Multiple Select

Textarea

Checkboxes & Radios

Default checkbox

Checked checkbox

Default radio

Selected radio

Switches & Ranges

Toggle switch

Enabled switch

Range Slider: 50

File Upload

Single File

Multiple Files

Input Groups

@example.com

$ .00

Tables

Interactive Data Table

#	Name	Email	Status	Role
1	John Doe	john@example.com	Active	Admin
2	Jane Smith	jane@example.com	Pending	User
3	Bob Johnson	bob@example.com	Inactive	Editor

Cards & Panels

Revenue

$45,231

12% from last month

Users

1,234

8% from last month

Orders

892

3% from last month

Featured Card

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card with Image

Some quick example text to build on the card title.

Learn More

Modals & Dialogs

Modal Examples

Alerts & Notifications

Alert Types

A simple primary alert with an icon—check it out!

Success! Your changes have been saved.

Warning! Please review your input before proceeding.

Error! Something went wrong. Please try again.

Dismissible Alerts

Heads up! This alert is dismissible.

Toasts

Hello! This is a toast notification.

Navigation Components

Tabs

Home tab content goes here...

Profile tab content goes here...

Contact tab content goes here...

Breadcrumb

Pills Navigation

Progress & Loading

Progress Bars

Basic Progress

25%

Success Progress

50%

Animated Progress

75%

Spinners

Badges & Labels

Badge Styles

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Primary Success Danger Warning

Badges in Buttons

Lists & Groups

List Group

Inbox 14
Sent 2
Drafts 1

Action List

List group item heading

3 days ago

Some placeholder content.

And some small print.

Another item

1 week ago

Drag & Drop Components

File Upload Drag & Drop

Drag & Drop files here

Supported formats: JPG, PNG, PDF, DOC (Max 10MB)

Sortable List (Drag to Reorder)

Task 1: Design new dashboard High
Task 2: Review pull requests Medium
Task 3: Update documentation Low
Task 4: Fix critical bug Critical
Task 5: Deploy to production Scheduled

Kanban Board (Drag Cards Between Columns)

To Do

Feature

User Authentication

Implement OAuth2 login system

Due: Dec 15

Bug

Fix Payment Gateway

Resolve timeout issues

Due: Dec 10

Enhancement

Dark Mode Theme

Add dark mode toggle

Due: Dec 20

In Progress

Task

API Documentation

Write REST API docs

Due: Dec 12