Components

Chip

Flat capsule tag for skills, stacks, and dates — neutral metadata only.

Preview

components/core/Chip.jsx

PythonAI/MLSwiftUIDecember, 2025Active

Chip is neutral by design. If the tag needs to signal status or category, that's a Badge.

Usage

src/components/ui/Chip.tsx

tsx

import { Chip } from "@/components/ui/Chip";

{project.stack.map((tech) => (
  <Chip key={tech}>{tech}</Chip>
))}

<Chip active onClick={() => setFilter("design")}>Design</Chip>

API

props

Prop	Type	Default	Description
active	boolean	false	Hold the lit (hover) state — brighter border, hover fill.
onClick	() => void	—	Makes the chip interactive (pointer cursor).
children	ReactNode	—	Tag content.

Tokens consumed

semantic only

--color-bg-elevated--color-bg-hover--color-border--color-border-hover--color-fg--color-fg-muted--radius-pill