Data display

Card

Compound component: `Card`, `Card.Header`, `Card.Body`, `Card.Footer`.

Server safeSource

Import

import { Card } from '@the_viveksingh/vivek-ui'

Compound parts

Card.Header, Card.Body and Card.Footer, so structure comes from markup.

Everything you need to ship.

<Card variant="elevated" padding="lg">
  <Card.Header>
    <Badge tone="success" pill>Most popular</Badge>
    <Heading level={3}>Pro</Heading>
  </Card.Header>
  <Card.Body>
    <Text tone="muted">Everything you need to ship.</Text>
  </Card.Body>
  <Card.Footer>
    <Button fullWidth>Choose Pro</Button>
  </Card.Footer>
</Card>

Variants

Outline

Elevated

Ghost

<Card variant="outline">Outline</Card>
<Card variant="elevated">Elevated</Card>
<Card variant="ghost">Ghost</Card>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Card
Prop	Type	Default	Description
`variant`	`'outline' \| 'elevated' \| 'ghost'`	—	—
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	—	—
`interactive`	`boolean`	—	Lift on hover. Only set this when the whole card is clickable.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Card carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.