Typography

Headline H1 56px

Headline H2 40px

Headline H3 36px

Headline H4 30px

Headline H5 26px
Headline H6 20px
Headline H6 20px

Paragraph 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.

Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.

Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.

Paragraph 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh.

Small Display Text

Medium Display Text

Large Display Text

Quote 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum mollis metus, id dictum justo eleifend nec. Donec ut arcu mauris. Aliquam luctus nisl dolor, id mollis ante viverra eu. Sed nec mauris leo. Vivamus vel congue nibh. Nunc fermentum rhoncus orci ac tincidunt. Aenean erat massa, fringilla a lorem at, tincidunt mattis neque.

Colors

Charcoal

50

100

200

300

400

500

600

700

800

900

Parchment

50

100

200

300

400

500

600

700

800

900

Sand

50

100

200

300

400

500

600

700

800

900

Sage

50

100

200

300

400

500

600

700

800

900

Dusk Teal

50

100

200

300

400

500

600

700

800

900

Eucalyptus

50

100

200

300

400

500

600

700

800

900

Clay Rose

50

100

200

300

400

500

600

700

800

900

Terracotta

50

100

200

300

400

500

600

700

800

900

Forest

50

100

200

300

400

500

600

700

800

900

Buttons

Variants

Sizes

With Icons

Full Width

Form Inputs

Text Inputs

Must be at least 8 characters

Input States

Helper text
This field is required
Looks good!

Textarea & Disabled

This field is disabled
Fruits
Select & Dropdown

Checkboxes

Checkboxes, Radios & Toggles
Accept terms
Subscribe to newsletter
Indeterminate
Disabled option

Radio Buttons

Small
Medium
Large

Toggles

Dark mode
Notifications
Small toggle
Disabled
Sliders & Range
Volume40
0100
Brightness75
0100
Disabled Slider50
0100

Badge Variants

Feedback & Status
InformationThis is an informational alert with useful details.
SuccessYour changes have been saved successfully.
WarningPlease review your settings before proceeding.
ErrorSomething went wrong. Please try again later.

Progress Bars

Uploading...25%
Processing60%
Complete100%

Circular Progress

25%
60%
90%

Toast Notifications

Changes saved successfully!
Failed to upload file.

Spinners

Loading...
Processing

Skeleton Loaders

Single Open Mode

What to expect

How we can help

Past & Present

Overlays & Modals

Confirm Action

Are you sure you want to proceed? This action can be undone.

Destructive Modal

Delete Item

This action cannot be undone. All associated data will be permanently removed.

Date Picker

Badges, Tags & Chips
Forest
Terracotta
Sand
Sage
Charcoal
Dusk Teal
Clay Rose
Eucalyptus

With Status Dots & Removable

Active
Warning
Error
Removable

Tag Group

ReactDesignFramerUI KitComponents
NatureEarthOrganicMinimal

Tab Styles

Accordion & Disclosure
We offer a 30-day return policy on all items. Items must be in original condition.

Multiple Open Mode

Create an account, verify your email, and complete your profile to get started.

Default Modal

Miscellaneous

File Upload

Drag and drop files here, or click to browse.pdf, .png, .jpg, .docx up to 10MB