UI · Application UI
Chip bar
YouTube-style single-select horizontal filter chip bar with edge fade and scroll affordance.
@byronwade/foundation@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
1 example
Default.
Tagged for youtube, video, tier:intermediate
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | - | Filter chip labels. |
| value | string | - | Controlled selected chip. |
| onValueChange | (value: string) => void | - | Fired when selection changes. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/chip-bar.tsx |
| Default example | content/examples/chip-bar/default.tsx |