Card

Content card with padding, radius, and shadow.

import { Card } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

Prop	Type	Default	Description
`variant`	`'default' \| 'outlined' \| 'elevated'`	`'default'`	Visual style variant. Affects border, shadow, and background.
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Padding size for card content.
`onClick`	`() => void`	—	Click event handler. Makes card clickable with cursor pointer.
`hoverable`	`boolean`	`false`	Enable hover effect without click handler.
`live`	`boolean`	`false`	When true, the card visually breathes + carries an animated accent border to signal "this represents a live, running thing" (per premium-ui Law #11). Auto-wraps the rendered card in a `LivePulse`.
`children` *	`JSX.Element`	—	Card content.
`unstyled`	`boolean`	`false`	Remove all default styles, only apply classNames.
`classNames`	`{ /** Class for root card element. */ root?: string; }`	—	Custom class names for card root.
`class`	`string`	—	Additional CSS class for root element.
`style`	`JSX.CSSProperties`	—	Inline styles for root element.

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.