Card

Convenience card wrapper with optional title, description, icon, action, and content sections.

Project overview

Updated a few minutes ago

Three tasks are ready for review.

Installation

bash

pnpm dlx shadcn@latest add @cs/card

Usage

tsx

import { Card } from "@/components/cs/card";

tsx

<Card
  title="Project overview"
  description="Updated a few minutes ago"
  action={<button type="button">Edit</button>}
>
  <p>Card content</p>
</Card>

Compact action card

A small card containing a flexible row of three actions.

tsx

import { Button } from "@/components/ui/button";
import { Card } from "@/registry/cs/ui/card";

export default function CardSmallPreview() {
  return (
    <Card small contentClassName="flex gap-2">

        <Button >Save</Button>
        <Button  variant="outline">
          Share
        </Button>
        <Button  >
          Delete
        </Button>

    </Card>
  );
}

API Reference

Card

Convenience card wrapper with optional title, description, icon, and action.

Props

Name	Type	Default	Description
action	ReactNode	-	Content displayed in the card header action area.
children	ReactNode	-	Content displayed in the card header action area.
contentClassName	string	-	Additional CSS classes applied to the card content.
description	ReactNode	-	Supporting text below the title.
headerClassName	string	-	Additional CSS classes applied to the card header.
icon	ReactNode	-	Icon displayed before the title.
small	boolean	-	Reduces the card's vertical and horizontal padding.
title	ReactNode	-	Card header title.

CardHeader

Card header that adapts its layout for an icon, description, and action.

Props

Name	Type	Default	Description
children	ReactNode	-	Content displayed in the card header action area.
description	ReactNode	-	Supporting text below the title.
icon	ReactNode	-	Icon displayed before the title.
title *	ReactNode	-	Card header title.

Dependencies

cn @shadcn/utils @shadcn/card