Stack Badge

The portfolio flex, done right. Instead of a flat row of grey logos, StackBadge renders your stack as calm monochrome chips that stagger in on scroll, then lift and warm into their full brand color on hover. Batteries-included: reference 20 popular technologies by name, or drop in any custom { name, icon, color }.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/stack-badge.json"

Usage

import { StackBadge } from "@/components/godui/stack-badge";

Reference built-in logos by name:

<StackBadge items={["react", "typescript", "tailwind", "nextjs"]} />

Mix in a fully custom chip — pass any 24×24 SVG and a brand color:

<StackBadge
  items={[
    "react",
    { name: "My API", icon: <MyLogo />, color: "#ff5c00" },
  ]}
/>

Icon-only chips, hairline surface, or a bigger scale:

<StackBadge items={["react", "go", "rust"]} showLabel={false} />
<StackBadge items={["figma", "graphql", "supabase"]} variant="outline" />
<StackBadge items={["react", "typescript"]} size="lg" />

The full built-in set is exported as TECH, so you can inspect or extend it:

import { TECH, type TechKey } from "@/components/godui/stack-badge";

Built-in keys: react, nextjs, typescript, javascript, tailwind, node, python, rust, go, vue, svelte, figma, docker, postgres, graphql, vercel, supabase, redis, sass, framer.

Props

StackBadge forwards every standard <div> attribute. The chips sit still at rest — the enter stagger and hover lift both respect prefers-reduced-motion.