Component Library

UI Kit 2026

Color Tokens

Primary

Secondary

Accent

Destructive

Success

Warning

Data Visualization Palette

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Chart 6

Buttons

Variants
Sizes
With Icons
States

Form Controls

Input
Textarea
Select
Checkbox
Switch
Radio Group
Slider
0.5

Badges

Solid Variants
DefaultSecondarySuccessWarningErrorInfoOutline
Status Badges
ActiveDraftProcessingFailed
Subtle Variants
PrimarySuccessWarningErrorInfo
Sizes
SmallDefaultLarge

Avatars

Sizes & Variants
JDJDJDJD

Cards

Card Title
Card description goes here

This is the card content area where you can place any content.

Active Users

2,847

+12.5% from last month

Documents Processed

1,234

+8.2% from last week

Alerts

Tables

NameStatusRoleActions
J

John Doe

john@example.com

ActiveAdmin
J

Jane Smith

jane@example.com

ActiveEditor
B

Bob Wilson

bob@example.com

PendingViewer

Progress & Loading

Progress Bar
Spinners
Skeleton

Tabs

Overview content goes here.

Stepper / Wizard

Basic Info

Name and description

Configuration

LLM settings

Knowledge Base

Upload documents

Review

Confirm and create

File Upload

Empty State

No projects yet

Get started by creating your first project. Projects help you organize your AI avatars and documents.

Dialog

Chat Interface

What is the capital of France?

03:13 AM

The capital of France is **Paris**. It's the largest city in France and serves as the country's major cultural, economic, and political center. Paris is known for landmarks like the Eiffel Tower, the Louvre Museum, and Notre-Dame Cathedral.

03:13 AM