Components

Chip

Selectable or dismissible pills for filters, tags, and compact choices with touch-friendly padding.

Source Registry

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Removable

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Install the component

Run the registry command below to add chip to your project.

watermelon add chip

Import the component

Import Chip from your local UI registry output.

Import

import { Chip } from "@/components/ui/chip";

Import

import { Chip } from "@/components/ui/chip";

Usage

Use string children for simple labels, or pass custom nodes. Toggle selected for filter state, variant="outline" for outlined chips, and onRemove for a trailing remove affordance.

prop	type	default	description
selected	boolean	false	Highlights the chip as active.
onRemove	() => void	-	Shows a remove control beside the chip.

PreviousCheckbox

NextCollapsible