Headless React primitives for payment-card UI: a card that flips and tilts, a number that decodes, a freeze with frost, a spending meter and a swipeable carousel. You bring the look and the motion.
Read the docspnpm add @danolekh/cardstock @base-ui/reactv0.2.0
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
cardstockDebit
Card number ending in 4822••••••••••••4822
Max MustermannVALID THRU09/29
Security code hidden•••
Demo card. The number fails the Luhn check.
This month❄ Frozen · payments paused€ 842 of € 1.200
Freeze card
Headless
Plain elements with data attributes and CSS variables. No CSS shipped, no animation library required.
Composable
Parts on a namespace with a render prop on each, the way Base UI builds them.
Yours to style
Tailwind, plain CSS or Motion, or copy the styled versions from the registry and change them.