Tech Stack

A hover-expandable stack of overlapping pills for displaying a list of technologies, languages, or tools animated with framer-motion.

Installation

$ pnpm dlx shadcn@latest add https://krishnapaulraj.com/r/tech-stack.json

Usage

import TechStack from "@/components/tech-stack";
import { SiReact, SiNextdotjs, SiTypescript } from "react-icons/si";

<TechStack
  items={[
    { icon: SiReact, label: "React", color: "#61DAFB" },
    { icon: SiNextdotjs, label: "Next.js" },
    { icon: SiTypescript, label: "TypeScript", color: "#3178C6" },
  ]}
/>

API Reference

TechStack

Prop	Type	Description
items*	TechItem[]	Array of tech items to display. Each renders as an overlapping pill that expands on hover.

TechItem

Shape of each item passed to the items array.

Prop	Type	Description
icon*	React.ElementType	Icon component to render inside the pill.
label*	string	Text revealed when the pill is hovered.
color	string	CSS color applied to the icon. Defaults to currentColor.