Chip
Installation
Run the following command
npx vibes@latest add chipUsage
import { Chip } from '@/vibes/soul/primitives/chip';function Usage() { return ( <div className="flex h-screen flex-col justify-center gap-4 p-10"> <Chip>Example Chip</Chip> </div> );}API Reference
ChipProps
| Prop | Type | Default |
|---|---|---|
name | string | |
value | string | |
children | ReactNode | |
removeLabel | string | 'Remove' |
onClick | (e: MouseEvent<HTMLButtonElement>) => void |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --chip-focus: var(--foreground); --chip-font-family: var(--font-family-body); --chip-background: var(--contrast-100); --chip-background-hover: var(--contrast-200); --chip-text: var(--foreground);}