HelpTribe.
Home
HT|UI
GitHub

Chip

Compact label for categories, tags, and metadata. Uppercase label font with 0.05em tracking. Functional, not decorative.

Installation

$ npx shadcn@latest add chip

Preview

PRODUCTS

Variants

DefaultActiveGhost

Usage (React/TSX)

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

export default function Example() {
  return (
    <div className="flex gap-3">
      <Chip variant="default">PRODUCTS</Chip>
      <Chip variant="active">ACTIVE</Chip>
      <Chip variant="ghost">META</Chip>
    </div>
  )
}

Usage (HTML/CSS)

<span class="ds-label">PRODUCTS</span>

<style>
  .ds-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #71717a;
  }
</style>

Props

PropTypeDefaultDescription
variant"default" | "active" | "ghost""default"The visual style of the chip.
classNamestring—Additional CSS classes to apply.
childrenReactNode—Content inside the chip.

Design Notes

  • Uppercase label font, 0.05em tracking, ink text on surface background.
  • Electric Violet border on active/selected. No fill, border-only emphasis.
  • Use for metadata, tags, and category labels. Not for primary content.