UI Components

Input

Standard

Required + Help Text

We'll never share your email.

Error State

Password must be at least 8 characters.

Disabled

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

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. Striped Table

 Amount
#INV-001 $240.00 Oct 12, 2026
#INV-002 $120.00 Oct 15, 2026
#INV-003 $950.00 Oct 18, 2026

3. Table with Badges & Actions

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)

Team Members

Manage your team members and their account permissions here.

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.

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.

Tooltip

Popover

Component Overview

A Popover displays rich content in a portal or viewport-fixed layer that triggers on clicking (or hovering) an element. Unlike standard absolute tooltips, a Popover is designed to handle more complex interactive content such as user lists, action lists, forms, and custom configuration filters while preventing layout containment issues.

When to use:
  • Showing detailed metadata cards for hovered/clicked elements.
  • Embedding simple forms inside dropdown list filters.
  • Displaying nested list arrays (like assigned courses) without cluttering lists.
  • Handling complex click-triggered utility settings.
Key characteristics:
  • Viewport-clamped position rendering utilizing fixed.
  • Fully keyboard accessible (ESC closes, backdrop click closes).
  • Dynamic arrow offsets that shift to match the trigger center.
  • Configurable size bounds and theme overrides.

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

Behavior & Interactions

  • Open Trigger: Popover defaults to open on click. An optional hover state configuration can be used.
  • Outside Click: Automatically closes when clicking outside the popover card boundary using Alpine's @click.outside.
  • ESC Escape: Closes the open element instantly on pressing the ESC keyboard key.
  • Scroll Protection: Listens to scroll events and repositions coordinates dynamically to stick with the anchor item.

Accessibility (A11y)

  • WAI-ARIA: Implements aria-haspopup="dialog" and :aria-expanded="active" attributes automatically on the trigger node.
  • Focus Lock: Forms or menus contained in popovers should ideally keep focus bound internally when navigated via tab keys.
  • Roles: The card element contains a role="dialog" mapping to define interactive content overlays.

Design Guidelines

  • Max Sizing: Suggested max width is 384px (w-96). Suggested max scroll height is 240px (max-h-60).
  • Styling: Features a 1px border mapping, subtle box shadows (shadow-lg), and responsive light/dark background.
  • Mobile Flow: Avoid large popovers on narrow mobile layouts; cards will automatically clamp within viewport bounds.

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