Utilities

Effects

Visual effects, shadows, and animations to enhance your UI components.

Shadows

shadow-sm

Subtle shadow

shadow

Default shadow

shadow-md

Medium shadow

shadow-lg

Large shadow

shadow-xl

Extra large

shadow-2xl

Prominent

Border Radius

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Hover Effects

Interactive hover effects for buttons and cards.

Scale

hover:scale-105

Shadow

hover:shadow-lg

Background

hover:bg-accent

Border

hover:border-primary

Lift

hover:-translate-y-1

Group Hover

group-hover:text-primary

Transitions

transition-all duration-200

Fast, smooth transitions for interactive elements

transition-colors

Only animate color changes

transition-transform

Only animate transforms (scale, translate)

transition-opacity

Fade in/out effects

More Coming Soon 🚧

This page is a work in progress. More effects and animation utilities will be added soon.