Chip

Status/delta chips in bold and soft variants across the accent palette.

Colors

Status and delta chips across the palette.

+8.2%−3.1%PendingSyncingActivePreviewDraft

function ChipColors() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip color="lime">+8.2%</Chip>
      <Chip color="rose">−3.1%</Chip>
      <Chip color="yellow">Pending</Chip>
      <Chip color="cyan">Syncing</Chip>
      <Chip color="blue">Active</Chip>
      <Chip color="purple">Preview</Chip>
      <Chip color="neutral">Draft</Chip>
    </div>
  );
}

function ChipColors() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip color="lime">+8.2%</Chip>
      <Chip color="rose">−3.1%</Chip>
      <Chip color="yellow">Pending</Chip>
      <Chip color="cyan">Syncing</Chip>
      <Chip color="blue">Active</Chip>
      <Chip color="purple">Preview</Chip>
      <Chip color="neutral">Draft</Chip>
    </div>
  );
}

Variants

Bold, subtle, and caption.

BoldSubtleCaption

function ChipVariants() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip variant="bold" color="lime">
        Bold
      </Chip>
      <Chip variant="subtle" color="lime">
        Subtle
      </Chip>
      <Chip variant="caption" color="lime">
        Caption
      </Chip>
    </div>
  );
}

function ChipVariants() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip variant="bold" color="lime">
        Bold
      </Chip>
      <Chip variant="subtle" color="lime">
        Subtle
      </Chip>
      <Chip variant="caption" color="lime">
        Caption
      </Chip>
    </div>
  );
}

Installation

npx shadcn@latest add https://boardcn.dev/r/chip.json

npx shadcn@latest add https://boardcn.dev/r/chip.json

BoardCN dependencies

The CLI installs these for you — you do not need to add them yourself.

cx utility

Source

The file the CLI copies into your project.

components/base/badges/chip.tsx

import type { HTMLAttributes, Ref } from "react";
import { cx, sortCx } from "@/utils/cx";

type ChipVariant = "bold" | "subtle" | "caption";
type ChipColor = "lime" | "rose" | "yellow" | "cyan" | "blue" | "purple" | "neutral" | "gray" | "soft";

export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: ChipVariant;
  color?: ChipColor;
  ref?: Ref<HTMLSpanElement>;
}

const styles = sortCx({
  base: "inline-flex items-center justify-center rounded-md px-1.5 whitespace-nowrap transition-[padding,font-size] duration-200 ease",
  variant: {
    bold: "py-0.5 text-body-medium",
    subtle: "py-1 text-body-medium",
    caption: "py-1 text-caption-1-medium",
  },
  color: {
    lime: "bg-status-lime-background text-status-lime-text",
    rose: "bg-status-rose-background text-status-rose-text",
    yellow: "bg-status-yellow-background text-status-yellow-text",
    cyan: "bg-status-cyan-background text-status-cyan-text",
    blue: "bg-status-blue-background text-status-blue-text",
    purple: "bg-status-purple-background text-status-purple-text",
    neutral: "bg-background-tertiary-default text-text-secondary",
    gray: "bg-background-secondary-default text-text-primary",
    soft: "bg-background-secondary-default text-text-secondary",
  },
});

export function Chip({
  variant = "bold",
  color = "neutral",
  className,
  ref,
  ...props
}: ChipProps) {
  return (
    <span
      ref={ref}
      className={cx(styles.base, styles.variant[variant], styles.color[color], className)}
      {...props}
    />
  );
}

import type { HTMLAttributes, Ref } from "react";
import { cx, sortCx } from "@/utils/cx";

type ChipVariant = "bold" | "subtle" | "caption";
type ChipColor = "lime" | "rose" | "yellow" | "cyan" | "blue" | "purple" | "neutral" | "gray" | "soft";

export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: ChipVariant;
  color?: ChipColor;
  ref?: Ref<HTMLSpanElement>;
}

const styles = sortCx({
  base: "inline-flex items-center justify-center rounded-md px-1.5 whitespace-nowrap transition-[padding,font-size] duration-200 ease",
  variant: {
    bold: "py-0.5 text-body-medium",
    subtle: "py-1 text-body-medium",
    caption: "py-1 text-caption-1-medium",
  },
  color: {
    lime: "bg-status-lime-background text-status-lime-text",
    rose: "bg-status-rose-background text-status-rose-text",
    yellow: "bg-status-yellow-background text-status-yellow-text",
    cyan: "bg-status-cyan-background text-status-cyan-text",
    blue: "bg-status-blue-background text-status-blue-text",
    purple: "bg-status-purple-background text-status-purple-text",
    neutral: "bg-background-tertiary-default text-text-secondary",
    gray: "bg-background-secondary-default text-text-primary",
    soft: "bg-background-secondary-default text-text-secondary",
  },
});

export function Chip({
  variant = "bold",
  color = "neutral",
  className,
  ref,
  ...props
}: ChipProps) {
  return (
    <span
      ref={ref}
      className={cx(styles.base, styles.variant[variant], styles.color[color], className)}
      {...props}
    />
  );
}

Props

Generated from the component's TypeScript types. Standard DOM and React Aria props are omitted.

Chip

Prop	Type	Default	Description
color	`"lime" \| "rose" \| "yellow" \| "cyan" \| "blue" \| "purple" \| "neutral" \| "gray" \| "soft"`	`neutral`	—
variant	`"bold" \| "subtle" \| "caption"`	`bold`	—