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.
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>
);
}