Styling
Every data attribute and CSS variable the parts write.
Every part renders a single element with a data-slot naming it, for example [data-slot="card-front"]. Its state is written as data-* attributes. Values that change continuously are CSS variables, which inherit, so any descendant can use them.
className and style accept functions of state, like in Base UI:
<Card.Root className={(state) => (state.frozen ? "grayscale" : "")} />render swaps the element for another tag or your own component:
<Card.Root render={<section />} />
<Card.Body effect="none" render={<motion.div animate={{ rotateY: flipped ? 180 : 0 }} />} />Reference
| Part | Data attributes | CSS variables |
|---|---|---|
Card.Root | data-flipped, data-frozen, data-revealed | |
Card.Tilt | data-hovering, data-disabled | --card-pointer-x/y, --card-tilt-x/y |
Card.TiltSurface | data-hovering, data-disabled | |
Card.Body | data-flipped | --card-flipped, --card-flip, --card-flip-angle/-axis-x/-direction/-lift/-light/-glow/-sheen |
Card.Front, Card.Back | data-side, data-visible | |
| Triggers | data-pressed, data-disabled | |
Card.Number, Card.SecurityCode | data-revealed, data-animating | --char-count |
| their cells | data-char-state | --char-index, --group-index |
Card.Holder, Card.Expiry | data-revealed | |
Card.FrozenOverlay | data-open, data-starting-style, data-ending-style | |
Card.Spending | data-over-limit | --card-spending-ratio |
CardCarousel.Root | data-dragging, data-effect, data-dir | --carousel-position, --carousel-gap/turn/depth/fade/direction |
CardCarousel.Track | data-dragging | |
CardCarousel.Slide | data-active, data-side, data-index | --slide-offset, --slide-offset-clamped, --slide-distance |
CardCarousel.Previous, Next | data-disabled | |
CardCarousel.Indicator | data-active |