Iso Card

Cards 3

About

A card composed like shadcn's Card but drawn as a slab standing on its own isometric depth, with a line-drawn offset outline beneath it.

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

Code

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

Usage.tsx

import {
  IsoCard,
  IsoCardContent,
  IsoCardDescription,
  IsoCardFooter,
  IsoCardHeader,
  IsoCardTitle,
} from "@/components/ui/iso-card";
import { IsoInput } from "@/components/ui/iso-card-utils/iso-input";
import { IsoButton } from "@/components/ui/iso-card-utils/iso-button";

export default function IsoCardDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-10">
      <IsoCard className="w-full max-w-sm">
        <IsoCardHeader>
          <IsoCardTitle>New project</IsoCardTitle>
          <IsoCardDescription>
            Deploy a fresh copy in one step.
          </IsoCardDescription>
        </IsoCardHeader>
        <IsoCardContent className="grid gap-3">
          <IsoInput placeholder="Project name" aria-label="Project name" />
        </IsoCardContent>
        <IsoCardFooter className="justify-end">
          <IsoButton size="sm" variant="outline" depth={3}>
            Cancel
          </IsoButton>
          <IsoButton size="sm" variant="solid" depth={3}>
            Create
          </IsoButton>
        </IsoCardFooter>
      </IsoCard>
    </div>
  );
}