Create Next App

Typography

Heading 4xl

Heading 3xl

Heading 2xl

Heading xl

Heading lg

Heading base

Heading sm

Heading xs

Custom heading

Sans typography

Serif typography

Mono typography

Button

Variants

Sizes

With Icons

Card

Basic Card

A simple card example

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

Card with Action

Card with action button

This card demonstrates the action slot in the header.

Input & Label

Email

Password

Disabled Input

File Upload

Search

Number

Textarea

Message

Disabled Textarea

Select

Default Size

Small Size

With Icons

Disabled Select

Checkbox

Accept terms and conditions

Subscribe to newsletter

Disabled checkbox

Disabled checked checkbox

Radio Group

Option 1

Option 2

Option 3

Switch

Enable notifications

Dark mode

Disabled switch

Disabled checked switch

Dialog

Separator

Horizontal Separator

Content above

Content below

Vertical Separator

Left

Right

UI Components

Typography

Button

Variants

Sizes

With Icons

Card

Input & Label

Textarea

Select

Checkbox

Radio Group

Switch

Dialog

Separator

Horizontal Separator

Vertical Separator

Toast

Dropdown Menu

Basic Dropdown

With Checkboxes

With Radio Group

With Submenu

Navigation Menu