Typography & Headings

A comprehensive type system with responsive sizing, weights, and alignment utilities.

Heading XXXL

Heading XXL

Heading XL

Heading LG

Heading MD

Heading SM

Text XXL Light

Text XL Normal

Text LG Medium

Text MD Semibold

Text SM Bold

Text XS Muted

Layout Utilities

Flexbox and Grid layouts with responsive breakpoints.

Flex Item

Left Right

Column Stack

Grid 1

Grid 2

Grid 3

Grid 4

Grid 5

Grid 6

Buttons

Multiple button variants, sizes, and states.

Cards

Versatile card components with headers, footers, and hover effects.

★

Primary Card

With gradient header

This card features a gradient top, title, subtitle, and descriptive text body.

Updated 2 days ago

✓

Success Card

Green gradient header

Cards can include any content. Hover to see the lift effect and shadow.

Status: Active

⚠

Danger Card

Red gradient header

This card demonstrates the danger color scheme with a matching button.

Requires attention

⚡

Horizontal Card

Image on the side

This layout places the image beside the content, ideal for listing items or blog previews.

Featured Popular

Tables

Styled tables with striped, bordered, hover, and dark variants.

#	Name	Email	Role	Status
1	Alice Johnson	alice@example.com	Designer	Active
2	Bob Smith	bob@example.com	Developer	Review
3	Carol White	carol@example.com	Manager	Pending
4	Dan Brown	dan@example.com	Analyst	Inactive
5	Eva Green	eva@example.com	Engineer	Active

Product	Price	Stock	Category
Laptop Pro	$1,299	12	Electronics
Wireless Mouse	$29	45	Accessories
4K Monitor	$499	8	Displays
USB-C Hub	$79	23	Accessories

Forms

Inputs, selects, checkboxes, radios, and floating labels.

Full Name * We'll never share your information.

Email Address Looks good!

Password Password must be at least 8 characters.

Country

Preferences

Subscribe to newsletter

I agree to the terms

Plan

Basic

Pro

Enterprise

Volume

Floating Labels

Your Name

Email Address

Select an option

Message

Alerts

Contextual alerts with icons and dismissible option.

ℹ

Primary Alert

This is a primary alert with an icon and title. Use it for general information.

✔

Success Alert

Your action was completed successfully. Everything is good to go.

⚠

Danger Alert

Something went wrong. Please check your input and try again.

⚡

Warning Alert

This action cannot be undone. Proceed with caution.

ⓘ

Info Alert

Did you know? Our design system includes 1000+ lines of CSS.

⚙

Dark Alert

A neutral dark alert for system messages.

Badges

Small labels for counts, statuses, and categories.

Primary Secondary Success Danger Warning Info Dark Light

Outline Outline Outline Outline Outline Outline

Small Default Large Pill Pill Large

Status indicators

CSS Animations

Pure CSS animations: pulse, shimmer, slide, bounce, spin, wiggle, float, and ripple.

Pulse

.animate-pulse

Shimmer

.animate-shimmer

Bounce

.animate-bounce-in

↻

.animate-spin

Wiggle

.animate-wiggle

Float

.animate-float

Slide & Fade Animations

Slide Down

Slide Up

Slide Left

Slide Right

Fade In

Ripple

.animate-ripple (click or hover)

Delay 1 Delay 2 Delay 3 Delay 4 Delay 5

Shadows & Gradients

Shadow utilities and gradient backgrounds.

Shadow SM

Shadow MD

Shadow LG

Shadow XL

Gradient Primary

Gradient Success

Gradient Danger

Gradient Warning

Spacing & Border Utilities

Padding, margin, border-radius, and border-color utilities.

Border Primary / Rounded SM

Border 2 / Rounded LG

Border 4 / Rounded Pill

Dashed / Rounded XL

Circle

Border None

p-1

p-2

p-3

p-4

p-5

p-6

m-1

m-2

m-3

m-4

m-5

m-6