UI Component Demo

Explore all available UI components and their variants

Buttons

Primary actions, secondary actions, and icon buttons with various states.

Variants

Sizes

With Icons

States

Inputs

Text inputs, textareas, and form controls with labels and validation.

Default Input

Disabled Input

With Icon

Password Toggle

Textarea

Select & Dropdowns

Select inputs and dropdown menus for choosing options.

Basic Select

Model Select

Dropdown Menu

Dialog / Modal

Modal dialogs for focused interactions and confirmations.

Tooltips

Helpful hints that appear on hover.

Progress

Visual indicators of progress and completion.

API Requests65%

Storage24%

Tokens89%

Status Badges

Visual indicators for different states and statuses.

SuccessErrorWarningInfoPending

Command Palette

Searchable command palette for quick actions.

Color Palette

Theme colors used throughout the application.

Primary

Secondary

Accent

Muted

Card

Destructive

Chart Colors

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Chart 6

Code Example

{
  "model": "gpt-4",
  "messages": [
    {
      "role": "user",
      "content": "Hello, AI Gateway!"
    }
  ],
  "temperature": 0.7,
  "max_tokens": 150
}

Cards

Content containers with various layouts.

API Gateway

Route requests to any AI model with a single API.

Analytics

Track usage, costs, and performance in real-time.

Models

Access 100+ models from all major providers.