UI Components Showcase

A comprehensive overview of all available UI components

Advanced Table

No Data found

Try adjusting your filters

Buttons

Variants

Sizes

Icon Buttons

With Icons

States

Badges

Variants

DefaultSecondaryDestructiveOutline

With Icons

NotificationsProfile

Cards

Simple Card

This is a basic card component

Card content goes here. You can put any content inside.

Card with Footer

With action buttons

This card includes a footer section with action buttons.

Avatars

With Image

CNVC

Fallback Only

ABCD

Form Components

Input

Input with Label

Search Input

Checkbox

Accept terms and conditions

Switch

Enable notifications

Toggle

Skeleton Loaders

Basic Skeletons

Card Skeleton

Separator

Horizontal Separator

Content above

Content below

Vertical Separator

Left

Right

Loader

Animated Loader

Dialog

Modal Dialog

Select

Dropdown Select

Command

Command Palette

Sheet

Side Panel

Scroll Area

Custom Scrollable Region

Item 1

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 2

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 3

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 4

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 5

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 6

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 7

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 8

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 9

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 10

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 11

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 12

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 13

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 14

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 15

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 16

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 17

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 18

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 19

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 20

This is a scrollable content item. The scroll area provides custom scrollbars.

Pagination

Page Navigation

Table

Data Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Guest

Notifications

Notification Center

Click the bell icon to view notifications →

Features

• Unread count badge

• Mark as read / Delete individual notifications

• Bulk actions (mark all / clear all)

• Notification types (info, success, warning, error)

• Relative timestamps

Toast Notifications

Basic Toasts

With Actions

✅ All Components Showcased

This page demonstrates all 26 UI components with their variants and interactive features:

✓ Avatar

✓ Badge

✓ Button

✓ Card

✓ Checkbox

✓ Command

✓ Dialog

✓ Dropdown Menu

✓ Input

✓ Label

✓ Loader

✓ Notifications

✓ Pagination

✓ Popover

✓ Scroll Area

✓ Select

✓ Separator

✓ Sheet

✓ Skeleton

✓ Switch

✓ Table

✓ Toast

✓ Toggle

✓ Tooltip

Back to Home

UI Components Showcase

A comprehensive overview of all available UI components

Advanced Table

No Data found

Try adjusting your filters

Buttons

Variants

Sizes

Icon Buttons

With Icons

States

Badges

Variants

DefaultSecondaryDestructiveOutline

With Icons

NotificationsProfile

Cards

Simple Card

This is a basic card component

Card content goes here. You can put any content inside.

Card with Footer

With action buttons

This card includes a footer section with action buttons.

Avatars

With Image

CNVC

Fallback Only

ABCD

Form Components

Input

Input with Label

Search Input

Checkbox

Accept terms and conditions

Switch

Enable notifications

Toggle

Skeleton Loaders

Basic Skeletons

Card Skeleton

Separator

Horizontal Separator

Content above

Content below

Vertical Separator

Left

Right

Loader

Animated Loader

Dialog

Modal Dialog

Select

Dropdown Select

Command

Command Palette

Sheet

Side Panel

Scroll Area

Custom Scrollable Region

Item 1

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 2

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 3

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 4

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 5

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 6

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 7

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 8

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 9

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 10

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 11

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 12

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 13

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 14

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 15

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 16

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 17

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 18

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 19

This is a scrollable content item. The scroll area provides custom scrollbars.

Item 20

This is a scrollable content item. The scroll area provides custom scrollbars.

Pagination

Page Navigation

Table

Data Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Guest

Notifications

Notification Center

Click the bell icon to view notifications →

Features

• Unread count badge

• Mark as read / Delete individual notifications

• Bulk actions (mark all / clear all)

• Notification types (info, success, warning, error)

• Relative timestamps

Toast Notifications

Basic Toasts

With Actions

✅ All Components Showcased

This page demonstrates all 26 UI components with their variants and interactive features:

✓ Avatar

✓ Badge

✓ Button

✓ Card

✓ Checkbox

✓ Command

✓ Dialog

✓ Dropdown Menu

✓ Input

✓ Label

✓ Loader

✓ Notifications

✓ Pagination

✓ Popover

✓ Scroll Area

✓ Select

✓ Separator

✓ Sheet

✓ Skeleton

✓ Switch

✓ Table

✓ Toast

✓ Toggle

✓ Tooltip