Feedback

Chips

Compact tag/filter chips with close button.

Available inreactangular

Preview

Live previewreal component

connectedtools:listtools:callresources:readprompts:getadmin

Install

TerminalBash

$ npx mcp-elements add chips

Usage

chips-example.tsxTSX

import { Chip, Chips } from '@mcp-elements/react'

export function Example() {
  return (
    <Chips>
      <Chip>read</Chip>
      <Chip variant="primary">write</Chip>
      <Chip variant="outline" onRemove={() => {}}>tools:list</Chip>
      <Chip variant="destructive">admin</Chip>
    </Chips>
  )
}

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'outline' \| 'destructive'`	`'default'`	Visual style of the chip (Chip prop)
`onRemove`	`() => void`	—	When provided, renders a remove button; called when it is clicked (Chip prop)
`className`	`string`	—	Additional CSS classes (Chip and Chips)