Card

A versatile container for grouping related content and actions with slot-based composition.

Basic

A versatile container for grouping related content and actions.

Card Title

Card subtitle text

This is the main content area of the card. It can contain any content you need.

<Card>
<CardHeader>
  <h3 className="text-base font-semibold">Card Title</h3>
  <p className="text-sm text-muted-foreground">Card subtitle text</p>
</CardHeader>
<CardBody>
  <p>This is the main content area of the card.</p>
</CardBody>
<CardFooter>
  <Button variant="ghost" size="sm">Cancel</Button>
  <Button variant="primary" size="sm">Save</Button>
</CardFooter>
</Card>

<Card><CardHeader>  <h3 className="text-base font-semibold">Card Title</h3>  <p className="text-sm text-muted-foreground">Card subtitle text</p></CardHeader><CardBody>  <p>This is the main content area of the card.</p></CardBody><CardFooter>  <Button variant="ghost" size="sm">Cancel</Button>  <Button variant="primary" size="sm">Save</Button></CardFooter></Card>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add card

pnpm dlx @work-rjkashyap/unified-ui add card

npx @work-rjkashyap/unified-ui add card

bunx @work-rjkashyap/unified-ui add card

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Card,
	CardHeader,
	CardBody,
	CardFooter,
	Button,
	Badge,
} from "@work-rjkashyap/unified-ui";

Variants

Default

The standard card with a subtle background and border.

Default Card

Subtle background with a standard border. Blends into the page naturally.

<Card>
<CardBody>
  <p>Default Card</p>
  <p>Subtle background with a standard border.</p>
</CardBody>
</Card>

<Card><CardBody>  <p>Default Card</p>  <p>Subtle background with a standard border.</p></CardBody></Card>

Outlined

Transparent background with a stronger border. Use when the card sits on a colored or complex background.

Outlined Card

Transparent background with a stronger border for contrast.

<Card variant="outlined">
<CardBody>
  <p>Outlined Card</p>
  <p>Transparent background with a stronger border.</p>
</CardBody>
</Card>

<Card variant="outlined"><CardBody>  <p>Outlined Card</p>  <p>Transparent background with a stronger border.</p></CardBody></Card>

Elevated

Raised card with shadow to draw attention or lift content above the page surface.

Elevated Card

Uses shadow to create depth and visual prominence.

<Card variant="elevated">
<CardBody>
  <p>Elevated Card</p>
  <p>Uses shadow to create depth and visual prominence.</p>
</CardBody>
</Card>

<Card variant="elevated"><CardBody>  <p>Elevated Card</p>  <p>Uses shadow to create depth and visual prominence.</p></CardBody></Card>

Interactive

Clickable card with hover lift animation, focus ring, and cursor pointer. Ideal for navigation cards.

Interactive Card

Hover to see the lift effect. Includes focus ring for keyboard users.

<Card variant="interactive" as="a" href="/details">
<CardBody>
  <p>Interactive Card</p>
  <p>Hover to see the lift effect.</p>
</CardBody>
</Card>

<Card variant="interactive" as="a" href="/details"><CardBody>  <p>Interactive Card</p>  <p>Hover to see the lift effect.</p></CardBody></Card>

All Variants Side by Side

default

Standard card

outlined

Stronger border

elevated

With shadow

interactive

Hover me!

<Card>
<CardBody>
  <Badge variant="default" size="sm">default</Badge>
  <p>Standard card</p>
</CardBody>
</Card>

<Card variant="outlined">
<CardBody>
	<Badge variant="primary" size="sm">
		outlined
	</Badge>
	<p>Stronger border</p>
</CardBody>
</Card>

<Card variant="elevated">
<CardBody>
	<Badge variant="info" size="sm">
		elevated
	</Badge>
	<p>With shadow</p>
</CardBody>
</Card>

<Card variant="interactive" as="a" href="/details">
<CardBody>
  <Badge variant="success" size="sm">interactive</Badge>
  <p>Hover me!</p>
</CardBody>
</Card>

<Card><CardBody>  <Badge variant="default" size="sm">default</Badge>  <p>Standard card</p></CardBody></Card><Card variant="outlined"><CardBody>	<Badge variant="primary" size="sm">		outlined	</Badge>	<p>Stronger border</p></CardBody></Card><Card variant="elevated"><CardBody>	<Badge variant="info" size="sm">		elevated	</Badge>	<p>With shadow</p></CardBody></Card><Card variant="interactive" as="a" href="/details"><CardBody>  <Badge variant="success" size="sm">interactive</Badge>  <p>Hover me!</p></CardBody></Card>

Slot Composition

Cards use a slot-based pattern with CardHeader, CardBody, and CardFooter sub-components. Each slot automatically inherits the card's padding setting via React context.

Full Composition

Project Settings

Manage your project configuration

Update your project name, description, and visibility settings. Changes are saved automatically.

<Card>
<CardHeader>
  <h3>Project Settings</h3>
  <p>Manage your project configuration</p>
</CardHeader>
<CardBody>
  <p>Update your project name, description, and visibility settings.</p>
</CardBody>
<CardFooter>
  <Button variant="ghost" size="sm">Reset</Button>
  <Button variant="primary" size="sm">Save Changes</Button>
</CardFooter>
</Card>

<Card><CardHeader>  <h3>Project Settings</h3>  <p>Manage your project configuration</p></CardHeader><CardBody>  <p>Update your project name, description, and visibility settings.</p></CardBody><CardFooter>  <Button variant="ghost" size="sm">Reset</Button>  <Button variant="primary" size="sm">Save Changes</Button></CardFooter></Card>

Body Only

A simple card with only a body slot. No header or footer needed.

Without Borders on Slots

No Border Header

The header and footer borders can be removed independently.

<Card>
<CardHeader bordered={false}>
  <h3>No Border Header</h3>
</CardHeader>
<CardBody>
  <p>The header and footer borders can be removed.</p>
</CardBody>
<CardFooter bordered={false}>
  <Button variant="primary" size="sm">Continue</Button>
</CardFooter>
</Card>

<Card><CardHeader bordered={false}>  <h3>No Border Header</h3></CardHeader><CardBody>  <p>The header and footer borders can be removed.</p></CardBody><CardFooter bordered={false}>  <Button variant="primary" size="sm">Continue</Button></CardFooter></Card>

Padding

The padding prop controls the internal spacing of all slot sub-components. Padding is applied to the slots, not the card root, which allows edge-to-edge images or content.

Compact (p-4)

Default padding for dense UIs and smaller cards.

Comfortable (p-6)

More generous padding for prominent content cards.

<Card padding="compact">   {/* p-4 — default */}
<CardHeader>
  <h3>Compact</h3>
</CardHeader>
<CardBody>
  <p>Default padding for dense UIs.</p>
</CardBody>
</Card>

<Card padding="comfortable"> {/* p-6 */}
<CardHeader>
  <h3>Comfortable</h3>
</CardHeader>
<CardBody>
  <p>More generous padding for prominent cards.</p>
</CardBody>
</Card>

<Card padding="compact">   {/* p-4 — default */}<CardHeader>  <h3>Compact</h3></CardHeader><CardBody>  <p>Default padding for dense UIs.</p></CardBody></Card><Card padding="comfortable"> {/* p-6 */}<CardHeader>  <h3>Comfortable</h3></CardHeader><CardBody>  <p>More generous padding for prominent cards.</p></CardBody></Card>

The CardFooter supports horizontal alignment of its content via the align prop.

align="end" (default)

align="between"

Step 2 of 4

align="start"

<CardFooter align="end">      {/* Default — right-aligned */}
<CardFooter align="between">  {/* Space between */}
<CardFooter align="start">    {/* Left-aligned */}
<CardFooter align="center">   {/* Centered */}

<CardFooter align="end">      {/* Default — right-aligned */}<CardFooter align="between">  {/* Space between */}<CardFooter align="start">    {/* Left-aligned */}<CardFooter align="center">   {/* Centered */}

Full Width

This card stretches to fill its container width using the fullWidth prop.

Polymorphic Rendering

The Card root accepts an as prop for polymorphic rendering. This is especially useful with the interactive variant.

{
	/* As a link */
}
<Card variant="interactive" as="a" href="/project/123">
	<CardBody>Click to view project</CardBody>
</Card>;

{
	/* As a Next.js Link */
}
import Link from "next/link";

<Card variant="interactive" as={Link} href="/project/123">
	<CardBody>Navigate to project</CardBody>
</Card>;

{
	/* As a button */
}
<Card variant="interactive" as="button" onClick={handleClick}>
	<CardBody>Clickable card</CardBody>
</Card>;

Props

Prop	Type	Default	Description
`variant`	`"default" \| "outlined" \| "elevated" \| "interactive"`	`"default"`	Visual variant of the card.
`padding`	`"compact" \| "comfortable"`	`"compact"`	Padding scale for slot sub-components.
`fullWidth`	`boolean`	`false`	Whether the card stretches to fill its container.
`as`	`ElementType`	`"div"`	The HTML element or component to render as.
`className`	`string`	—	Additional CSS classes.

CardHeader

Prop	Type	Default	Description
`bordered`	`boolean`	`true`	Whether to show a bottom border separator.
`className`	`string`	—	Additional CSS classes.

CardBody

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.

CardFooter

Prop	Type	Default	Description
`bordered`	`boolean`	`true`	Whether to show a top border separator.
`align`	`"start" \| "center" \| "end" \| "between"`	`"end"`	Horizontal alignment of footer content.
`className`	`string`	—	Additional CSS classes.

Accessibility

Interactive variant includes a visible focus ring for keyboard navigation.
When used as a link (as="a"), the card supports standard link semantics.
Content within cards should maintain proper heading hierarchy — don't skip from h2 to h4.
The interactive variant removes text decoration for anchor usage.

Card

Basic

Card Title

Installation

Or install the full package

Anatomy

Variants

Default

Outlined

Elevated

Interactive

All Variants Side by Side

Slot Composition

Full Composition

Project Settings

Body Only

Without Borders on Slots

No Border Header

Padding

Compact (p-4)

Comfortable (p-6)

Footer Alignment

Full Width

Polymorphic Rendering

Props

Card

CardHeader

CardBody

CardFooter

Accessibility

On this page