Aidimension Ui Card

Component

About

Card primitive with header

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aidimension Ui Card to your project and fits it to your theme.

Code

How Aidimension Ui Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/ai-dimensie-card";

const settings = {
  title: "Project Aurora",
  description: "A short description of the project goes here.",
  body: "Cards group related content into a single surface. Use them for dashboards, settings panels and previews.",
  footer: "Last updated today",
};

export default function Demo({
  title = settings.title,
  description = settings.description,
  body = settings.body,
  footer = settings.footer,
}: Partial<typeof settings>) {
  return (
    <div className="flex min-h-[300px] items-center justify-center bg-background p-8">
      <Card className="w-[380px]">
        <CardHeader>
          <CardTitle>{title}</CardTitle>
          <CardDescription>{description}</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">{body}</p>
        </CardContent>
        <CardFooter className="flex justify-end">
          <span className="text-xs text-muted-foreground">{footer}</span>
        </CardFooter>
      </Card>
    </div>
  );
}