UI Components

Input

Standard

Required + Help Text

We'll never share your email.

Error State

Password must be at least 8 characters.

Disabled

Password Input

Standard Password Input

Signup Flow (Validation & Confirmation)

  • Minimum 8 characters
  • Contain lowercase
  • Contain uppercase
  • Contain numbers
  • Contain special characters: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~

Button

Variants

Sizes

With Icons

States

Full Width

Select Component

Default

No options found

Label & Placeholder

No options found

Pre-selected

No options found

Searchable

No options found

Disabled

No options found

Error State

No options found

Please select a valid country.

Multi Select (Tags)

No options found

Multi Select + Search

No options found

With Avatars (Single)

No options found

With Avatars (Multi)

No options found

Textarea

Default

With Label & Value

Required

Help Text

Please keep it under 500 characters.

Error State

Message is required to submit a ticket.

Disabled

Custom Rows (rows="6")

Badge

Variants

Neutral Success Warning Danger Info

With Icons

Completed In Progress Pending Failed Draft

Icon Position

Left Icon Right Icon

Dismissible

Click to dismiss Filter: Active

Shapes

Pill (Default) Rounded Rectangle

Sizes

Small Medium Large

Alert

Solid Style

Soft Style (Outline)

Left Accent Border

Top Accent Border

Dismissible Alerts

Complex Layouts

Sizes

Card

1. Simple Card

This is a simple card container without a header. It's great for basic wrappers.

2. Card with title

Account Settings

Settings related to your personal account.

3. Card with title + description

Notifications

Manage how you receive updates and alerts.

Notification preferences will go here.

4. Card with actions

Team Members

Invite and manage users in your organization.

JD

John Doe

Admin

5. Form Section

Profile Information

Update your public profile details.

6. Analytics Widget

Total Users

72,540

12.5%

Revenue

$45,210

4.2%

Table & DataTable

Table Components

1. Simple Table

Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com Editor

2. Table with Badges & Actions (Hoverable)

User Status
Alice Johnson Active
Bob Williams Pending

DataTable Features (Integrated)

1. Search Only

File Name Size Type
presentation.pdf 2.4 MB Document
logo.svg 150 KB Image

2. Full DataTable (Search, Filters, CTA)

Name Role Status
Sarah Connor Admin Active
John Smith Viewer Offline

Empty State

Empty State Patterns

1. Default Empty State

No data found

2. Empty State with Icon

No users

There are currently no users in this organization.

4. Primary CTA

No projects found

Get started by creating your first project.

5. Primary + Secondary CTA

No integration active

Connect your first integration to sync data automatically.

6. Compact Empty State

No comments

Be the first to leave a comment.

7. No Search Results

No results found

We couldn't find anything matching your search. Please try a different query.

3 & 8. No Data Illustration (Full Width)

No data

No data here yet. We will notify you when there's an update.

Tabs

Tabs Patterns

1. Basic Tabs

Showing all accounts.

2. Tabs with Icons

Profile settings.

3. Tabs with Badges

Inbox messages.

4. Tabs with Icons & Badges

Open issues.

5. Disabled Tab Example

General info.

6. Full-width Tabs

Overview content.

8. Analytics Style Tabs

Audience Overview

7 Day Chart Placeholder

7 & 9. Dynamic Content & Settings Tabs (External State Binding)

Account Settings Form Content
Preferences Form Content
API Keys Management Content

Checkbox

Checkbox Variations

1. Default Checkbox

2. Checked State

3. Disabled State

4. With Description

User has full control over all project settings and data.

5. With Helper Text

Requires additional bandwidth.

6. Error State

You must accept the terms.

7. Checkbox Group (Bulk Actions)

Permissions

Radio

Radio Variations

1. Default Radio

2. Checked State

3. Disabled State

4. With Description

Anyone on the internet can see this repository.

6. With Helper Text

Syncs occur at 2:00 AM UTC.

7. Error State

You must select a policy choice.

5. Radio Group

Select a payment method

8. Alpine x-model Binding

Subscription Plan

Includes all advanced features.

Switch (Toggle)

Sizes

Variants

States

Layout Options

Standalone:

This description provides extra context for the setting below the label.

Stats Card

Overview Metrics

Total Users

12,450

Revenue

$45,230.00

Compared to last month 12.4%

Churn Rate

8.2%

This quarter 3.1%

Active Sessions

3,412

Right now 0.0%

Layout Variations

API Requests

1.2M

Last 24 hours 2.4%

Avg Response Time

240ms

Stable

Conversion Funnel

14.8%

Percentage of visitors who completed the checkout process.

Industry avg: 10.5% 1.2%
View detailed funnel analysis →

Page Header

Standard

Users

Manage users, roles and permissions.

Without Actions

Settings

Configure your application preferences.

Drawer (Offcanvas)

Placements

Sizes (Right Placement)

Variants & Use Cases

Form Drawer

Sticky header and footer with a scrollable form body.

Long Content

Scrollable body with lots of text content.

Persistent Mode

Cannot be closed by clicking outside or pressing ESC.

Details Drawer

A rich view for displaying entity details.

Filter Drawer

A sidebar for complex list filtering.

Tooltip

Popover

1. Basic Popover

2. Text Content Popover

Review Security Guidelines

3. List Popover

6 Courses Available

4. User List Popover

User Avatar User Avatar User Avatar +8

5. Metadata Popover

6. Action Menu Popover

7. Form Popover

8. Empty State Popover

9. Long Scrollable Popover

10. Interactive Popover

Placement Examples

Size Variations

Small (w-60)
Medium (w-72 - Default)
Large (w-96)

States

Default
Open (Load state)
Loading
Empty
Disabled Trigger

Toast / Notifications

Variants

Features

Content Layouts

Placements & Stacking

Tip: Click repeatedly to see multiple toasts stack beautifully in their respective positions.

Upload

Single File Upload
Drop your files here or browse

Pick a file up to 2MB. (Accepted: pdf)

Multiple File Upload
Drop your files here or browse

Pick a file up to 5MB. (Accepted: pdf, zip, csv)

Any File Upload (For Testing)
Drop your files here or browse

Pick a file up to 100MB. (Accepted: *)

Date Picker

1. Single Date Picker
/
Mo Tu We Th Fr Sa Su
2. Date & Time Picker
/
Mo Tu We Th Fr Sa Su
3. Date Range Picker
/
Mo Tu We Th Fr Sa Su
4. Date Range with Time Picker
/
Mo Tu We Th Fr Sa Su
5. Inline Calendar
/
Mo Tu We Th Fr Sa Su
6. Disabled Date Picker
/
Mo Tu We Th Fr Sa Su
7. Min / Max Dates (Restricted to June 2026)
/
Mo Tu We Th Fr Sa Su

Pagination

Stepper

1. Default (Title + Description)

  • Step 1

    Account details

  • 2
    Step 2

    Personal info

  • 3
    Step 3

    Confirmation

2. Compact (Title Only)

  • Cart
  • Shipping
  • 3
    Payment
  • 4
    Review

3. Vertical

  • Create project

    Initialize repository

  • 2
    Add collaborators

    Invite team members

  • 3
    Deploy

    Publish to production

4. Completed Steps

  • Setup
  • Configuration
  • Launch

5. Current Step Override

  • Step 1

    Desc 1

  • Step 2

    Desc 2

  • Step 3

    Desc 3

  • 4
    Step 4

    Desc 4

  • 5
    Step 5

    Desc 5

6. Error State

  • Validation

    Check details

  • Payment

    Process transaction

  • 3
    Fulfillment

    Send items

7. Disabled State

  • 1
    Step 1

    This is disabled

  • 2
    Step 2

    This is disabled

  • 3
    Step 3

    This is disabled

8. Numbered

  • Step One
  • Step Two
  • 3
    Step Three

9. Icon Variant

  • User
  • Settings
  • Payment
  • Done

10. Empty State

No steps configured

Skeleton Loaders

Basic Skeletons

Single Text Line

Multi-line Paragraph

Shapes (Circle, Square, Rectangle)

UI Elements (Button, Badge, Input)

Card Skeletons

List & Timeline Skeletons

Form Skeletons

Table Skeletons

Dashboard Skeletons

Page Layout: Course Details