Card

pnpm
npm
yarn
bun
pnpm dlx @preskok-org/ui@latest add card
Copy

Copyimport {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/preskok/ui/preskok-ui/card"
 
export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  )
}

Copy<Card>
  <CardContent>
    <p>Simple card with just content.</p>
  </CardContent>
</Card>

Copy<Card>
  <CardHeader
    title="Project Update"
    description="Latest changes to the project"
  />
  <CardContent>
    <p>The project has been updated with new features and bug fixes.</p>
  </CardContent>
</Card>

Copy<Card>
  <CardHeader>
    <div className="flex items-start justify-between">
      <div>
        <CardTitle>Settings</CardTitle>
        <CardDescription>Manage your preferences</CardDescription>
      </div>
      <CardAction>
        <Button size="sm" intent="outline">
          <IconEdit />
        </Button>
      </CardAction>
    </div>
  </CardHeader>
  <CardContent>
    <p>Configure your application settings here.</p>
  </CardContent>
</Card>

Copy<Card>
  <CardHeader>
    <CardTitle>Confirm Action</CardTitle>
    <CardDescription>This action cannot be undone</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Are you sure you want to delete this item?</p>
  </CardContent>
  <CardFooter className="flex gap-2">
    <Button intent="outline">Cancel</Button>
    <Button intent="danger">Delete</Button>
  </CardFooter>
</Card>

Copy<Card>
  <CardHeader>
    <div className="flex items-start justify-between">
      <div>
        <CardTitle>Team Member</CardTitle>
        <CardDescription>John Doe - Developer</CardDescription>
      </div>
      <CardAction>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button size="sm" intent="ghost">
              <IconMore />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>Edit</DropdownMenuItem>
            <DropdownMenuItem>Remove</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </CardAction>
    </div>
  </CardHeader>
  <CardContent>
    <div className="flex items-center gap-4">
      <Avatar src="/avatars/john.jpg" initials="JD" />
      <div>
        <p className="font-medium">John Doe</p>
        <p className="text-muted-foreground text-sm">john@example.com</p>
      </div>
    </div>
  </CardContent>
  <CardFooter>
    <Button size="sm">View Profile</Button>
  </CardFooter>
</Card>

Copy<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  {projects.map((project) => (
    <Card key={project.id}>
      <CardHeader>
        <CardTitle>{project.name}</CardTitle>
        <CardDescription>{project.description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-2">
          <Badge intent={project.status === "active" ? "success" : "secondary"}>
            {project.status}
          </Badge>
          <span className="text-muted-foreground text-sm">
            {project.members} members
          </span>
        </div>
      </CardContent>
      <CardFooter>
        <Button size="sm" className="w-full">
          View Project
        </Button>
      </CardFooter>
    </Card>
  ))}
</div>