Project Stack

Cards

About

A tabbed stack of three portfolio project cards that rotates forward on click or arrow-key navigation, each with its own accent color, artwork and external link.

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

Code

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

Usage.tsx

import ProjectStack from "@/components/ui/project-stack";

export default function ProjectStackDemo() {
  return (
    <div
      className="flex min-h-screen w-full items-center justify-center p-10"
      style={{
        background: "radial-gradient(ellipse at 50% 40%, #22232a, #0e1014 65%)",
      }}
    >
      <ProjectStack
        items={[
          {
            title: "Orbit",
            tag: "BRAND & WEB",
            description: "A home for your next big idea.",
            href: "https://example.com/#orbit",
            accent: "#7ee0b8",
          },
          {
            title: "Forma",
            tag: "DESIGN SYSTEM",
            description: "A small system for making things feel consistent.",
            href: "https://example.com/#forma",
          },
          {
            title: "Echo",
            tag: "DIGITAL PRODUCT",
            description: "A quieter place for your favourite sounds.",
            href: "https://example.com/#echo",
          },
        ]}
      />
    </div>
  );
}