Data display

Card

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

Server safeSource

Import

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

Image cards

padding="none" lets an Image sit flush with the card edge; the body carries its own padding. interactive adds the hover lift and a pointer cursor. The images here are generated SVGs - no photo service, no licence question.

Arc floor lamp

New

₹12,400

Oak dining chair

₹8,900

Wool rug, 200 × 300

Low stock

₹21,000

<Grid cols={{ base: 1, sm: 2, lg: 3 }} gap={4}>
  {products.map((product) => (
    <Card key={product.id} interactive padding="none" variant="outline">
      <Image src={product.image} alt={product.name} ratio={4 / 3} />
      <Card.Body style={{ padding: 'var(--vk-space-4)' }}>
        <Heading level={3} size="sm">{product.name}</Heading>
        <Text weight="medium">{product.price}</Text>
        <Button size="sm" variant="outline">Add to basket</Button>
      </Card.Body>
    </Card>
  ))}
</Grid>

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.