Browse components

Feature Chip

Minimal metadata token with an independent icon hover and soft selected bloom.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID
component:product/feature-chip

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSSFramer Motion

Props

PropTypeDescription
iconReactNodeLeading mark — node or string
labelstringChip text
tooltipstringOptional hint revealed on hover/focus
selectedbooleanActive state with a soft bloom
tone'neutral' | 'accent'Color treatment
interactivebooleanEnables click / keyboard selection
onClick() => voidSelection handler
classNamestringStyles for the outer shell

More Product Components

Slackconnected

Integration Badge

Sculptural app mark in a precise tile — muted to full color with a near-imperceptible lift.