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 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.Body | data-flipped | --card-flipped |
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 | --carousel-position |
CardCarousel.Track | data-dragging | |
CardCarousel.Slide | data-active | --slide-offset, --slide-offset-clamped, --slide-distance |
CardCarousel.Indicator | data-active |