Icon Stack

Component

About

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.

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

Code

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

Usage.tsx

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