Component · <div>

Card

The surface everything sits on: pinstripes in Aqua, liquid glass in Now.

Weekly digest

A summary of what changed in your projects.

12 new comments, 3 merged pull requests.

Install

npx @lazizbekio/mitame add card

Usage

import { Button } from "@/components/mitame/ui/button";
import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/mitame/ui/card";

export default function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Weekly digest</CardTitle>
        <CardDescription>A summary of what changed in your projects.</CardDescription>
      </CardHeader>
      <CardBody className="text-sm">12 new comments, 3 merged pull requests.</CardBody>
      <CardFooter>
        <Button>Later</Button>
        <Button variant="primary">Open</Button>
      </CardFooter>
    </Card>
  );
}

Props

Prop	Type	Default	Description
`Card`	`HTMLAttributes<div>`	—	The surface.
`CardHeader / CardBody / CardFooter`	`HTMLAttributes<div>`	—	Layout slots.
`CardTitle`	`HTMLAttributes<h3>`	—	Heading.
`CardDescription`	`HTMLAttributes<p>`	—	Muted supporting text.

Styling

Every part has a data-slot starting with card, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.