This website requires JavaScript and Cloudflare Turnstile to function properly.

Base Components Cookbook

Form Controls

Input

This field has an error

Textarea

Please enter at least 20 characters

Select

ROI Descending
Select an option
Select an option
Select a provider
Select an option

Checkbox

Size Variants

Radio

Default Radio Buttons
Card Radio Buttons
Size Variants

Switch

Size Variants
Label Position

Buttons

Button

Color Variants

Size Variants

States

Containers

Modal

Card

Card Title

This is a simple card component. You can use this for various content.

Card image

Card with Image

This card includes an image at the top.

Table

Name
Email
Role
Status

Display Components

Chip

Basic Chips

DefaultGreenBlueRedOrangePurple

Chips with Icons

With Prefix With Suffix

Dismissible Chips

Feature Bug Enhancement Documentation

Divider

Basic Divider

Content above the divider

Content below the divider

Divider with Text

Content above the divider

Content below the divider

Vertical Divider

Left content
Right content

Dropdown

Basic Dropdown

Dropdown with Dividers

Hero

Image

Small Size

Example image

Medium Size

Example image

Large Size

Example image

Image with Loading State

Dynamically loaded image

Loader

Spinner

Loading...

Pulse

Loading...

Dots

Loading...

Colors

Loading...
Blue
Loading...
Green
Loading...
Red
Loading...
White

Sizes

Loading...
Small
Loading...
Medium
Loading...
Large

Complete Examples

Form Example