RRezi UI

Card

Surface with header, content and a tinted footer for actions.

Create project
Deploy a new project in one click.

Installation

npx shadcn@latest add @reziui/card

Usage

app/page.tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy a new project in one click.</CardDescription>
      </CardHeader>
      <CardContent>…</CardContent>
      <CardFooter>
        <Button variant="secondary">Cancel</Button>
        <Button>Create</Button>
      </CardFooter>
    </Card>
  );
}

Examples

Content only

Requests · 24h+12.4%
1,284,031vs 1,142,557 the previous day

Every part is optional. A card with only CardContent is a padded surface.

API reference

ComponentNotes
CardRounded surface with a 1px ring and a light shadow.
CardHeaderStacks CardTitle and CardDescription.
CardTitle16px semibold.
CardDescription13px, muted.
CardContent20px padding.
CardFooterRight-aligned actions on a slightly elevated surface with a hairline above.

All parts forward the native props of their <div>.