Chip group

Filter by a few facets with chips that morph as you pick them.

npx shadcn@latest add @silicon-ui/chip-group
chipsfiltertoggle
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/chip-group

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/chip-group/chip-group.tsx
    • components/silicon-ui/chip-group/chip-group.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { ChipGroup } from "@/components/silicon-ui/chip-group/chip-group";

API reference

PropTypeDefault
options*ChipOption[]—
value*string[]—
onValueChange*(value: string[]) => void—
label*

Accessible name of the group, such as “Topics”.

string—
multiple

Allow several chips at once. In single mode the selected chip can still be cleared.

booleantrue
maxVisible

Chips shown before the rest fold behind a “+N more” chip. Chips selected when it folds stay in view.

numberInfinity
classNamestring—

Dependencies

npm
motion
Registry
silicon-motion-tokens