# Dev Stack

> The tools you reach for, grouped by family.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/dev-stack).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/dev-stack
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/dev-stack-light-9a75f9722311ddd9.png
- Registry item: https://blockforge.terravidhal.me/r/dev-stack.json
- Categories: developer
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/dev-stack.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/blocks/dev-stack.tsx`

```tsx
const groups = [
  {
    title: "Languages",
    items: ["TypeScript", "Rust", "Python", "Go", "SQL"],
  },
  {
    title: "Frontend",
    items: ["React", "Next.js", "Tailwind", "Astro", "Svelte"],
  },
  {
    title: "Backend & data",
    items: ["Node", "Postgres", "Redis", "gRPC", "Kafka"],
  },
  {
    title: "Platform",
    items: ["Docker", "Terraform", "AWS", "Vercel", "GitHub Actions"],
  },
];

export default function DevStack() {
  return (
    <section className="border-y border-border/60 bg-muted/20">
      <div className="mx-auto w-full max-w-5xl px-6 py-20 sm:py-24">
        <div className="mb-12 max-w-md">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            The tools I reach for
          </h2>
          <p className="mt-2 text-muted-foreground">
            Opinionated, boring on purpose, and battle-tested in production.
          </p>
        </div>

        <div className="grid gap-px overflow-hidden rounded-xl border border-border/60 bg-border/60 sm:grid-cols-2">
          {groups.map((group) => (
            <div key={group.title} className="bg-background p-6">
              <h3 className="font-mono text-xs uppercase tracking-wide text-muted-foreground">
                {group.title}
              </h3>
              <ul className="mt-4 flex flex-wrap gap-2">
                {group.items.map((item) => (
                  <li
                    key={item}
                    className="rounded-lg border border-border/60 bg-card px-2.5 py-1 text-sm"
                  >
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```