Chip

Presents a compact category, attribute, or filter value.

Preview

Example code

Design system

Playground

Schemescheme

Sets the chip color pair.

Usage

tsx

import { Chip } from "earthling-ui/chip";

export function Example() {
  return (
    <>
      <Chip scheme="primary">Design system</Chip>
    </>
  );
}

Use short nouns or noun phrases so chips remain easy to scan.
Chip renders a div by default; use asChild with an appropriate interactive element for clickable filters.
Choose a scheme that maintains readable foreground contrast at the small text size.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';

export declare const chipVariants: (props?: ({
	material?: "paper" | null | undefined;
	scheme?: "default" | "primary" | "secondary" | "tertiary" | "neutral" | "muted" | "good" | "caution" | "bad" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface ChipProps extends ComponentProps<"div">, VariantProps<typeof chipVariants> {
	asChild?: boolean;
}
export declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

export {};

Runtime dependencies: @radix-ui/react-slot, class-variance-authority, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Chip implementation

tsx

"use client";

import { type ComponentProps, forwardRef } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/cn";
import { schemes } from "@/utils/variants";
import { Slot } from "@radix-ui/react-slot";

const chipVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline focus-visible:ring-offset-2",
  {
    variants: {
      material: {
        paper:
          "border-transparent bg-(--scheme-tint) text-(--scheme-foreground) hover:bg-(--scheme-tint)/80",
      },
      scheme: schemes,
    },
    defaultVariants: { material: "paper", scheme: "primary" },
  },
);

export interface ChipProps
  extends ComponentProps<"div">, VariantProps<typeof chipVariants> {
  asChild?: boolean;
}

const Chip = forwardRef<HTMLDivElement, ChipProps>(
  ({ className, material, scheme, asChild, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";

    return (
      <Comp
        className={cn(chipVariants({ material, scheme }), className)}
        ref={ref}
        {...props}
      />
    );
  },
);
Chip.displayName = "Chip";

export { Chip, chipVariants };