kagadmodyaa

Card

AlertTooltip

A container for grouping related content and actions.

Create project
Deploy your new project in one click.
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

export default function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one click.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          <div className="grid gap-1.5">
            <Label htmlFor="card-demo-name">Name</Label>
            <Input id="card-demo-name" placeholder="My project" />
          </div>
        </div>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/card.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Card imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'

<Card>
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>

API Reference

NameTypeDefaultDescription
CardReact.HTMLAttributes<HTMLDivElement>—The outer container — border, radius, padding.
CardHeaderReact.HTMLAttributes<HTMLDivElement>—Holds CardTitle and CardDescription.
CardTitleReact.HTMLAttributes<HTMLDivElement>—The card’s heading.
CardDescriptionReact.HTMLAttributes<HTMLDivElement>—Muted supporting text under the title.
CardContentReact.HTMLAttributes<HTMLDivElement>—The card’s main content area.
CardFooterReact.HTMLAttributes<HTMLDivElement>—Actions, usually right- or full-width aligned.