Isometric stack of plates with an icon skewed onto the front face, for feature headers and empty states. Layer count is a prop, and the plates take their color from the surrounding text.
'use client';
import { IconStack, IconStackContent } from '@/components/ui/icon-stack';
import { Boxes, Database, Layers, Server } from 'lucide-react';
export default function IconStackDemo() {
return (
<div className="grid w-full max-w-2xl gap-10">
<div className="grid gap-3">
<p className="text-xs text-muted-foreground uppercase">Default stack</p>
<div className="flex flex-wrap items-end gap-8">
{[Database, Server, Boxes].map((Icon, index) => (
<IconStack key={index}>
<IconStackContent>
<Icon className="size-6" strokeWidth={1.5} />
</IconStackContent>
</IconStack>
))}
</div>
</div>
<div className="grid gap-3">
<p className="text-xs text-muted-foreground uppercase">One to four layers</p>
<div className="flex flex-wrap items-end gap-8">
{[1, 2, 3, 4].map((layers) => (
<IconStack key={layers} layers={layers} className="w-24">
<IconStackContent>
<Layers className="size-6" strokeWidth={1.5} />
</IconStackContent>
</IconStack>
))}
</div>
</div>
<div className="grid gap-3">
<p className="text-xs text-muted-foreground uppercase">Tinted, above a caption</p>
<div className="flex flex-wrap gap-8">
<div className="grid max-w-45 justify-items-center gap-2 text-center">
<IconStack>
<IconStackContent>
<Database className="size-6 text-primary" strokeWidth={1.5} />
</IconStackContent>
</IconStack>
<p className="text-sm font-medium text-foreground">Managed databases</p>
<p className="text-sm text-muted-foreground">Every engine on the same control plane.</p>
</div>
<div className="grid max-w-45 justify-items-center gap-2 text-center">
<IconStack>
<IconStackContent>
<Server className="size-6 text-accent-cool" strokeWidth={1.5} />
</IconStackContent>
</IconStack>
<p className="text-sm font-medium text-foreground">Live regions</p>
<p className="text-sm text-muted-foreground">Deploy close to the people using it.</p>
</div>
</div>
</div>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.