Play Lab - AI Coding Experiments

Button

Variants

Sizes

With Icons

States

Input

Basic Input

With Helper Text

We'll never share your email

With Error

Password must be at least 8 characters

Success State

With Left Icon

With Right Icon

Disabled Input

Badge

Variants

DefaultPrimarySecondarySuccessWarningDanger

Sizes

SmallMediumLarge

With Dot

ActivePendingErrorNeutral

Tooltip

Positions

With Icons

No Arrow

Card

Default Card

This is a simple card with default styling. Cards are great for grouping related content.

Solid Card

This card has a solid background without glassmorphism.

No Hover Card

This card has no hover effect.

Custom Styled Card

Cards can be customized with any Tailwind CSS classes.

Modal

Basic Modal

With Footer

Sizes

Select

Favorite Fruit

Choose your favorite fruit

Country

Theme Toggle

The theme toggle in the header demonstrates the dark mode functionality. All components support both light and dark themes.

Interactive Demo

User Profile Form

Full Name

Email

We'll never share your email

Bio

Status Dashboard

Active UsersOnline

1,234

Pending TasksAttention

42

System StatusError

3