v0.8.1

Card

A container component for grouping related content with consistent styling and spacing.

This component's API and documentation are under review and may change. Use with caution in production.

Card is a versatile container component for grouping related content. It provides consistent styling, spacing, and visual hierarchy through its variant and size props.

This is an enhanced version of the Card from Radix Themes.

Playground

Installation

npm install @kushagradhawan/kookie-ui

Usage

import { Card, Text, Heading, Flex, Button } from '@kushagradhawan/kookie-ui';
 
export function MyCard() {
  return (
    <Card>
      <Flex direction="column" gap="2">
        <Heading size="3">Card Title</Heading>
        <Text size="2">Card content goes here.</Text>
        <Button size="2">Action</Button>
      </Flex>
    </Card>
  );
}

Props

PropTypeDefaultDescription
size'1' | '2' | '3' | '4' | '5''1'Controls the padding and spacing inside the card. Supports responsive values.
variant'surface' | 'outline' | 'classic' | 'ghost' | 'soft''outline'The visual style of the card.
material'solid' | 'translucent'-Controls the material appearance. Translucent adds backdrop blur.
flushbooleanfalseWhen true, removes padding for full-bleed content.
asChildbooleanfalseMerge props onto the child element using Radix Slot.

Variants

Surface

A subtle elevated card with a light background.

<Card variant="surface">
  <Text>Surface variant with subtle elevation</Text>
</Card>

Outline

The default variant with a visible border.

<Card variant="outline">
  <Text>Outline variant with visible border</Text>
</Card>

Classic

A solid, opaque card with subtle shadow.

<Card variant="classic">
  <Text>Classic variant with solid background</Text>
</Card>

Ghost

No visible container, useful for grouping content without visual boundaries.

<Card variant="ghost">
  <Text>Ghost variant with no visible container</Text>
</Card>

Soft

A muted background with no border.

<Card variant="soft">
  <Text>Soft variant with muted background</Text>
</Card>

Sizes

Cards support sizes from 1 to 5, controlling padding and internal spacing.

<Flex direction="column" gap="4">
  <Card size="1"><Text>Size 1 - Compact</Text></Card>
  <Card size="2"><Text>Size 2 - Default</Text></Card>
  <Card size="3"><Text>Size 3 - Comfortable</Text></Card>
  <Card size="4"><Text>Size 4 - Spacious</Text></Card>
  <Card size="5"><Text>Size 5 - Generous</Text></Card>
</Flex>

Material

Use the material prop to control the card's material appearance.

<Card material="translucent">
  <Text>Translucent card with backdrop blur</Text>
</Card>

Flush Content

Use the flush prop for full-bleed content like images.

<Card flush>
  <img src="/image.jpg" alt="Full bleed image" />
</Card>

Interactive Cards

Use asChild to make the entire card interactive.

import { Link } from 'react-router-dom';
 
<Card asChild>
  <Link to="/details">
    <Flex direction="column" gap="2">
      <Heading size="3">Clickable Card</Heading>
      <Text size="2">Click anywhere to navigate</Text>
    </Flex>
  </Link>
</Card>

© 2026 Kushagra Dhawan. Licensed under MIT. GitHub.

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background