Beautiful Varients

Explore some varients. Copy and paste into your apps. Open Source.

Browse Varients Documentation

Switchers Fluids Cursors Buttons Inputs Selects Checkboxes Radios Switches Alerts Notifications Banners Dialogs

Show more Switchers Varients

Show more Fluids Varients

Show more Cursors Varients

Show more Button Varients

Simple input

Required input *

Input with helper text

We won't share your email with anyone

Input with hintOptional

Input with colored border and ring

Input with error

Email is invalid

Input with gray background

Disabled input

Input with start icon

Input with end icon

Input with start inline add-on

https://

Input with end inline add-on

.com

Simple textarea

Required textarea *

Textarea with helper text

Please add as many details as you can

Textarea with hintOptional

Show more Input Varients

Simple select (native)

Select with placeholder (native)

Select with icon (native)

Select with helper text (native)

Tell us what's your favorite Select framework

Select with colored border (native)

Select with error (native)

Selected option is invalid

Select with gray background (native)

Disabled select (native)

Required select (native) *

Select with auto-width (native)

Select with option groups (native)

Timezone select (native)

Select with overlapping label (native)

Select with inset label (native)

Simple select with default value

Select with placeholder

Show more Select Varients

Simple checkbox

Indeterminate checkbox

Colored checkbox

Disabled checkbox

Simple todo item

Fancy todo item

I agree to the terms of service

React

Next.js

Astro

Right aligned checkbox

Label (Sublabel)

You can use this checkbox with a label and a description.

Checkbox with expansion

You can use this checkbox with a label and a description.

Label (Sublabel)

You can use this checkbox with a label and a description.

Label (Sublabel)

A short description goes here.

Label (Sublabel)

A short description goes here.

Label (Sublabel)

A short description goes here.

Palette

Brush

Eraser

Cut

Show more Checkbox Varients

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Small (Sublabel)