Card

Cards 17

About

A flexible container component for displaying content in a card layout with header, content, and footer sections.

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

Code

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

Usage.tsx

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

export default function DemoOne() {
  return (
    <>
      <Card className="w-full max-w-sm space-y-6">
        <CardHeader>
          <CardTitle>Welcome to HextaUI</CardTitle>
          <CardDescription>
            Beautiful components for modern web applications with elegant design
            and smooth interactions.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            Experience the perfect blend of aesthetics and functionality with our
            comprehensive component library.
          </p>
        </CardContent>
        <CardFooter>
         <a href="#" className="underline font-medium">Check out</a>
        </CardFooter>
      </Card>
    </>
  );
}