Skip to content
Fuji UI
Component

Card

Compound component (Header/Title/Description/Content/Footer). Cards are static by default; effect opts into a hover treatment - 'lift' for a CSS scale-and-tip, 'tilt' for a gentle 3D lean that follows the pointer.

Basic

Plan

Pro tier

$29/month

Hover effect: lift

Scales up slightly, tips a degree and deepens its shadow. Pure CSS, so it works inside a Server Component.

Weekly report

Hover me.

  • Cards are static by default - omit effect for a non-clickable container
  • The scale and tip are skipped under prefers-reduced-motion: reduce; the colour and shadow change still applies

Hover effect: tilt

Tracks the pointer and leans the card gently towards it in 3D - at most 3° at the corners - springing back when the pointer leaves.

Weekly report

Move the pointer across this card.

  • Skipped for touch pointers, which have no hover to follow, and under prefers-reduced-motion: reduce
  • The tilt needs a client boundary; Card itself stays usable from a Server Component

Media + badges + price row

Lakeside cabin in Banff
Top rated

Banff, Canada

Turquoise lakes and snowy peaks in wild Canadian beauty.

June 22 - 26 · Local host
$172 / night
  • Card.Media (position: top | bottom | full, default top) cancels Card's own padding on the relevant edge so an Image reaches the card's outer border.

Full-bleed image + gradient overlay

Dune Messiah

by Frank Herbert

62%
Progress
25 min
Avg. session
213
Pages read
  • position="full" cancels padding on all four sides and rounds every corner, for a card that's entirely media.
  • Card.Overlay is a bottom-pinned gradient scrim + content slot for captions baked into a photo; text is fixed white regardless of theme.

Overlapping avatar + bottom overlay

Aiwanfo Faith

Designing for clarity & usability

4.6 rating · $44/hr
  • An Avatar pulled up with a negative margin overlaps the media/overlay boundary - a common freelancer/profile-card pattern.

Freeform composition (payment card)

zero
•••• •••• •••• 4242
LINDA K ELIASENVISA
  • Card is a plain styled container underneath - override className freely for a fully custom composition, like this stylized payment-card mockup.
  • Overriding border-color needs an inline style, not a plain Tailwind className: this app's own Tailwind build and the package's "fj:" prefixed utilities can't reliably resolve conflicts against each other.

API reference

effect"none"
CardEffect

Hover treatment. Defaults to `"none"`. `"lift"`: scale, tip and shadow in pure CSS (server-safe). `"tilt"`: 3D lean to the pointer (max 3deg), client-only (`CardTilt`), off for touch/reduce.

interactivefalse
boolean

Legacy hover switch, equivalent to `effect="lift"`. Deprecated: Use `effect`, which wins when both are set (so `effect="none"` opts back out).

padding"md"
CardPadding

Inner padding. Default `"md"` (20px); `"none"` for flush content. Unlike `className="p-0"` it works regardless of cascade-layer order (docs/theming.md), and `Card.Media` still bleeds to the edge.

Also accepts everything from React.HTMLAttributes<HTMLDivElement>.

Card.Media props

position"top"
"top" | "bottom" | "full"

Edge(s) the media bleeds to: "top"/"bottom" cancel padding on three sides; "full" on all four, rounding every corner, for an all-media card. Default "top".

Also accepts everything from React.HTMLAttributes<HTMLDivElement>.

Card.Title props

asNone
keyof react_jsx_runtime.JSX.IntrinsicElements

Override the rendered element (defaults to h3, its semantic role).

Also accepts everything from React.HTMLAttributes<HTMLElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent