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
Card Playground
nexoreui
Live Preview
Card Title
This is a description of the card.
Card Content goes here.
Props Panel
select
Visual style of the card
select
Hover animation style
boolean
Whether to enable hover scale/lift animation
text
Title of the card (Mapped to <CardTitle>)
text
Description of the card (Mapped to <CardDescription>)
text
Optional top image URL (Mapped inside Card)
text
Card body children text (Mapped to <CardContent>)
Generated Code
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "nexoreui"
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>This is a description of the card.</CardDescription>
</CardHeader>
<CardContent>
Card Content goes here.
</CardContent>
</Card>Showcase & Examples
Default Compound Card
Default Card
Simple content wrapper built with compound components.
This is the main body of the card.
component.tsx
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. |