UI Components

All components with their variants

Button

packages/ui/src/components/button.tsx

Input & Label

packages/ui/src/components/input.tsxpackages/ui/src/components/label.tsx

Password

Disabled

Card

packages/ui/src/components/card.tsx

Card Title

Card description goes here

This is the card content area.

Another Card

Content without description

Badge

packages/ui/src/components/badge.tsx

Default

Secondary

Outline

Destructive

Avatar

packages/ui/src/components/avatar.tsx

CNJDAB

Select

packages/ui/src/components/select.tsx

Checkbox & Switch

packages/ui/src/components/checkbox.tsxpackages/ui/src/components/switch.tsx

Accept terms and conditions

Airplane Mode

Textarea

packages/ui/src/components/textarea.tsx

Alert

packages/ui/src/components/alert.tsx

Heads up!

You can add components to your app using the cli.

Error

Your session has expired. Please log in again.

Dialog

packages/ui/src/components/dialog.tsx

Dropdown Menu

packages/ui/src/components/dropdown-menu.tsx

Tabs

packages/ui/src/components/tabs.tsx

Account

Make changes to your account here.

Name

Tooltip

packages/ui/src/components/tooltip.tsx

Form Field

packages/ui/src/components/form-field.tsx

Username

This field is required

Password Field

packages/ui/src/components/password-field.tsx

Password

Password must be 8+ characters

Register Form

packages/ui/src/components/register-form.tsx

Create new account

Registration is free and only takes a minute

Metric Card

packages/ui/src/components/metric-card.tsx

Total Revenue

$45,231.89

+20.1%from last month

Active Users

+2,350

+180.1%from last month

Sales

+12,234

+19%from last month

Conversion Rate

3.24%

-4.3%from last month

Collapsible

packages/ui/src/components/collapsible.tsx

This is collapsible content. It can be expanded or collapsed by clicking the trigger.

You can put any content here, including other components.

Page Header

packages/ui/src/components/page-header.tsx

Dashboard

Overview of your business metrics

Settings

Manage your account preferences

Simple Title

Section & Container

packages/ui/src/components/section.tsx

Section Component

The Section component provides consistent spacing and container constraints for page sections.

Container Component

The Container component provides centered content with max-width constraints.

Setting Item

packages/ui/src/components/setting-item.tsx

Enable Notifications

Receive email notifications about your account activity

Two-Factor Authentication

Add an extra layer of security to your account

Public Profile

Make your profile visible to everyone

Team Members Card

packages/ui/src/components/team-members-card.tsx

UUU

No Team Members

Invite your team to collaborate on this project.

JJSBJ

No Team Members

Invite your team to collaborate on this project.

Sidebar

packages/ui/src/components/sidebar.tsx