Chips / Tags

Chips represent small pieces of information such as tags, categories, or filter values. They support colors, icons, removable state, and active state.

free

Chip

Playground

color

size

removable

disabled

icon

active

removeLabel

HTML

<ply-chip color="primary" size="md" removeLabel="Remove">Chips</ply-chip>

Default Chips

Use color to control the chip's color. Supported colors are primary, success, danger, warning, and accent.

Default

Primary

Success

Danger

Warning

Accent

HTML

<ply-chip color="primary">Primary</ply-chip>
<ply-chip color="danger">Danger</ply-chip>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';

@Component({
  selector: 'app-chips-example',
  imports: [
    ChipComponent
  ],
  template: `...`
})
export class ChipsExampleComponent {}

Install

bash

npx ply-ui-cli add chips

Sizes

Use size to control the chip size. Options are sm, md (default), and lg.

Small

Medium

Large

HTML

<ply-chip size="sm" color="primary">Small</ply-chip>
<ply-chip size="lg" color="primary">Large</ply-chip>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';

@Component({
  selector: 'app-chips-example',
  imports: [
    ChipComponent
  ],
  template: `...`
})
export class ChipsExampleComponent {}

Install

bash

npx ply-ui-cli add chips

Chips with Icons

Use icon to add an icon from our Icon Pack.

Completed

Critical

Info

Featured

Pending

HTML

<ply-chip icon="check" color="success">Completed</ply-chip>
<ply-chip icon="alert-triangle" color="danger">Critical</ply-chip>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';

@Component({
  selector: 'app-chips-example',
  imports: [
    ChipComponent
  ],
  template: `...`
})
export class ChipsExampleComponent {}

Install

bash

npx ply-ui-cli add chips

Removable Chips

Set [removable]="true" to show a close button. Listen for (removed) to handle removal.

Angular

Tailwind

TypeScript

Components

UI Library

HTML

<ply-chip color="primary" [removable]="true" (removed)="onRemove()">
  Tag Name
</ply-chip>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';

@Component({
  selector: 'app-chips-example',
  imports: [
    ChipComponent
  ],
  template: `...`
})
export class ChipsExampleComponent {}

Install

bash

npx ply-ui-cli add chips

Active Chips

Set [active]="true" to highlight the chip with a filled style. Useful for filter selection states.

Default

Active

Primary

Active

Success

Active

HTML

<ply-chip color="primary" [active]="true">Active Chip</ply-chip>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';

@Component({
  selector: 'app-chips-example',
  imports: [
    ChipComponent
  ],
  template: `...`
})
export class ChipsExampleComponent {}

Install

bash

npx ply-ui-cli add chips

Disabled Chips

Set [disabled]="true" to prevent interaction and reduce opacity.

Disabled

Disabled Active

HTML

<ply-chip color="primary" [disabled]="true">Disabled</ply-chip>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';

@Component({
  selector: 'app-chips-example',
  imports: [
    ChipComponent
  ],
  template: `...`
})
export class ChipsExampleComponent {}

Install

bash

npx ply-ui-cli add chips

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add chips

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ChipComponent
  ],
  template: `...`
})
export class YourComponent {}

API for chips — generated from JSDoc in the library source.

API reference for chips
API	Member	Type	Default	Description
`ply-chip`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-chip`	`color`	`ChipColor`	`''`	—
`ply-chip`	`size`	`ChipSize`	`'md'`	—
`ply-chip`	`removable`	`boolean`	`false`	—
`ply-chip`	`disabled`	`boolean`	`false`	—
`ply-chip`	`icon`	`string \| undefined`	`undefined`	—
`ply-chip`	`active`	`boolean`	`false`	—
`ply-chip`	`removeLabel`	`unknown`	`'Remove'`	—
`ply-chip`	`(removed)`	`void`	—	Emits when removed occurs.
`ply-chip`	`(clicked)`	`void`	—	Emits when clicked occurs.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).