On This Page
Cards
Versatile layouts with hover animations, glows, and custom glass overrides built on a flexible compound pattern.
When to use which variant
defaultStandard information blocks, features grids, item detail summariesglassSleek dark modes with rich imagery backdrops to frosted glass panelsgradientHighlighting special items — pricing recommendations, premium tiersglowCalling direct interactive interest to promo tiles or dashboard headershover: liftHighly clickable cards — linking articles, store products, profileshover: glowHighlighting specific widgets inside dense dashboardsInteractive Playground
Live CanvasInteractive
Card Title
This is a description of the card.
Card Content goes here.
Showcase & Examples
Default Compound Card
Default Card
Simple content wrapper built with compound components.
This is the main body of the card.
component.tsx
1
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "glass" | "gradient" | "glow" | "default" | Visual style profile of the card. |
| hover | "lift" | "glow" | "none" | "lift" | Interactive hover feedback animation style. |
| animate | boolean | true | Enables spring/scale animations for hover states. |