Interactive Tech Stack Layers

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature97.tsx instead.

Usage

The file also exports feature97Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature97, feature97Demo } from "@/components/blocks/feature/feature97";

export default function Page() {
  return <Feature97 {...feature97Demo} />;
}

Props

Types

type TechStackLayer = {
  number: string;
  title: string;
  summary: string;
  details: string;
  tags: string[];
};

Behavior notes

• Real client-side state: clicking a layer's header sets it as the open layer via useState<number | null>; clicking the already-open layer closes it, and opening a different layer closes whichever was previously open, so at most one layer's detail panel is expanded at a time.
• "use client" component, so its demo props live in the sibling feature97.demo.tsx file per this repo's client/demo-file-split rule, not in feature97.tsx itself.
• Layer color is derived purely from the layer's array position against a fixed 5-color palette of semantic chart-N tokens (bg-chart-1 through bg-chart-5), cycling if there are more than 5 layers, so colors stay theme-consistent in light and dark rather than using literal color classes.
• The first layer is expanded by default on mount.
• aria-expanded and aria-controls wire each layer header to its panel for screen readers.