Component Gallery

AD
Profile
Settings
Logout

UI Elements

Buttons

Variants

Sizes & Icons

Cards

Card Variants

Default

Default style

Primary

Primary accent

Gray

Gray background

Tinted

Tinted background

Cards with Tags

Active

Active Project

Running

Pending

Pending Review

Awaiting

Error

Error State

Action required

Tags & Avatars

Tag Colors

Purple Violet Blue Cyan Green Gold Orange Red

Avatars

JD AB MK SM
JD AB MK SM

Snack Messages

Operation completed successfully!
Please check your input.
An error occurred.
Here is some information.

Dropdown

Dropdown Menus

Options
Edit Duplicate
Delete
Actions
View Details
Download
Share

Modal

Modal Dialogs

Shadows

Shadow Variables

--shadow Cards, color swatches 0 0 8px rgba(0,0,0,0.08)
--shadow-lg Sidebar, topbar, body 0 0 16px rgba(0,0,0,0.1)

Usage

Cards --shadow
Sidebar --shadow-lg
Topbar --shadow-lg
Main body --shadow-lg
.card { box-shadow: var(--shadow); } .sidebar-group, .topbar, .main { box-shadow: var(--shadow-lg); }