Component Gallery
Organization Select Org
No organizations
Project Select Project
No projects
Admin User User
AD
Profile
Org & Project
CLI Tokens
Logout

UI Elements

Buttons

Light Buttons (light bg, dark text → solid on hover)

default
primary
secondary
warning
error
success
disabled

Dark Buttons (solid bg, white text)

default-dark
primary-dark
secondary-dark
warning-dark
error-dark
success-dark

Sizes

default
size="md"
size="sm"

With Icons (Light)

default
primary
secondary
warning
error
success

With Icons (Dark)

default-dark
primary-dark
secondary-dark
warning-dark
error-dark
success-dark

Two-Line Action Buttons

Variants

default
primary
secondary
warning
error
success
disabled

Dark variants (selected/active state)

default-dark
primary-dark
secondary-dark
warning-dark
error-dark
success-dark

With Avatar - One Line

blue
indigo
lavender
violet
purple
red
orange
gold

With Avatar - Two Lines

blue
indigo
lavender
violet
purple
red
orange
gold

Variant + Avatar (status cells in tables)

primary
warning
success
display
error

With Icon (all variants)

default
primary
secondary
warning
error
success

Cards

Card Variants

Default

Default style

Primary

Primary accent

Tinted Blue

Blue tinted

Tinted Green

Green tinted

Tinted Orange

Orange tinted

Tinted Purple

Purple tinted

Cards with Tags

Active

Active Project

Running

Pending

Pending Review

Awaiting

Error

Error State

Action required

Labflow Breadcrumb

Arrow-style Workflow (with timestamps)

Created 2 days ago
Analysis 1 day ago
Review 2 hours ago
Sign Off
Complete

Arrow-style Workflow (with avatars)

Created
JD
Analysis
MP
Review
AK
Sign Off
TW
Complete

Simple Pill-style Workflow

Created
Analysis
Review
Sign Off
Complete

Tags & Avatars

Tag Colors

Purple Violet Blue Cyan Green Gold Orange Red

Avatars

JD AB MK SM
JD AB MK SM

Avatar Color Palette (12 colors)

--avatar-1
--avatar-2
--avatar-3
--avatar-4
--avatar-5
--avatar-6
--avatar-7
--avatar-8
--avatar-9
--avatar-10
--avatar-11
--avatar-12

Toast Messages

Upload Complete Your file has been uploaded successfully.
Validation Warning Please check your input fields.
Connection Error Could not connect to server.
Session Info Your session will expire in 5 minutes.
Unsaved Changes Do you want to save before closing?
Update New version available for download.
Update Now

Dropdown

Dropdown Menus

Options
Edit Duplicate
Delete
Actions
View Details
Download
Share

Modal

Modal Dialogs

Section Card

Section Card with Actions

Recent Orders

View All
Order Status Created
ORD-001 Active Jan 10, 2026
ORD-002 Pending Jan 9, 2026

Section Card without Actions

My Assignments

ORD-DNF-017 In Progress
JD
Analyze
2 days ago
ORD-SAMPLE-002 Review
MP
Review
1 day ago

Info Fields

Basic Info Fields (2-column grid)

Organization
Intelliseq
Backend
GCP
Bucket
intelliseq-genomics-prod
Created
3 days ago

With Copy Action

Bucket Name
intelliseq-genomics-prod
Zitadel Org ID
287394821034

With Edit Action

Project Name
Cancer Panel v2
Description
Somatic variant analysis pipeline

With Multiple Actions (edit + copy + delete)

API Key
sk-...4f2a
Webhook URL
https://hooks.example.com/flow
Secret
********

Empty / Missing Values

Prefix
—
Description
—
Credential
None assigned

Dashboard Components

Stat Cards

12
Total Orders
3
Pending Review
8
Signed Off
24
Total Samples

Assignment Cards

ORD-DNF-017-DEV-014 In Progress
JD
Analyze
2 months ago
ORD-VALIDATION-SAMPLE In Progress
MP
Create
3 weeks ago
ORD-sample-7 In Progress
AK
Analyze
1 month ago
ORD-COMPLEX-CASE-001 Review
TW
Review
2 days ago
ORD-PATIENT-REVIEW Complete
SK
Sign Off
1 day ago

Recent Orders Table

Order Status Stage Created
ORD-DNF-017-DEV-014 Analyzing Analyze Dec 31, 2025
ORD-sample-2 Created - Dec 15, 2025
ORD-VALIDATION-TEST Completed Complete Nov 28, 2025

CTA Card

Ready to Get Started?

Browse your files and create orders from VCF data.

Tabs

Basic Tabs

All Orders Active Completed Pending

Tabs with Counts

All 24 Active 12 Completed 10 Pending 2

Tabs with Icons

List Grid Analytics

Usage

All Active Completed
{# With counts #}
All 24 Pending 2
{# With icons #}
List Grid

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); }