@manhphi1309/card

A beautifully designed, accessible card component for your React application.

Subcomponents

This package provides the following components:

• Card
• CardHeader
• CardFooter
• CardTitle
• CardDescription
• CardAction
• CardContent

Dependencies

This package relies on:

• @manhphi1309/button
• @manhphi1309/utils
• clsx
• tailwind-merge

Installation

npm install @manhphi1309/card

Usage Example

import { Button } from "@manhphi1309/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@manhphi1309/card"

export default function Example() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Form goes here...</p>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

Props

All components accept standard HTML div attributes (e.g., className, children, style, etc.) via React.ComponentProps<"div">.

Card

| Prop | Type | Default | Description | | :----- | :------------------ | :---------- | :---------------------------------------------------------------------------- | | size | "default" \| "sm" | "default" | Determines the padding and internal gap spacing of the card and its children. |

CardHeader

| Prop | Type | Default | Description | | :-------------- | :-------- | :------ | :--------------------------------------------------------------------------------------------- | | withSeparator | boolean | false | If true, adds a subtle border to the bottom of the card header along with appropriate padding. |

CardTitle, CardDescription, CardContent, CardFooter, CardAction

These subcomponents do not have any specific custom props. They solely accept standard HTML div attributes.