Skip to content
fuji-ui
Component

Card

Compound component (Header/Title/Description/Content/Footer). Cards are static by default; opt into a subtle hover lift (scale and tilt) only when the card is interactive.

Basic

Plan

Pro tier

$29/month

Static (no hover)

Static card

interactive={false} for non-clickable containers.

  • Use interactive for a card that behaves like a clickable surface; static cards show no hover effect

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

interactivefalse
boolean

Enables hover lift and deeper shadow for an interactive card.

Header / Title / Description / Content / FooterNone
compound parts

Optional semantic sections for composing card content.

Card.MediaNone
compound part

position ("top" | "bottom" | "full", default "top") cancels Card's own padding on that edge so an Image reaches the card's outer border.

Card.OverlayNone
compound part

Bottom-pinned gradient scrim + content slot for captions baked into a Card.Media photo. Text is fixed white.

classNameNone
string

Additional classes applied to the component root.