Chip

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add chip

Usage

1import { Chip } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex flex-wrap gap-2">
6      <Chip>Neutral</Chip>
7      <Chip tone="info">Info</Chip>
8      <Chip tone="success">Success</Chip>
9      <Chip tone="warning">Warning</Chip>
10      <Chip tone="danger">Danger</Chip>
11    </div>
12  )
13}

import { Chip } from "@glinui/ui"
export function Demo() {
  return <Chip variant="glass">Preview</Chip>

1import { Chip } from "@glinui/ui"
2
3export function Demo() {
4  return <Chip variant="glass">Preview</Chip>
5}

Accessibility

• Non-interactive status label element by default.
• Use `aria-label` when chip meaning is not explicit from text.

Reduced Motion

Chip visual transitions are color-only and disabled with reduced motion.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { Chip } from "@glinui/ui"