Components

Collapse

Shows as many items as fit on one line, and the rest behind "+N".

GroceriesRentTransportDining outSubscriptionsTravelGiftsHealthBooks

Import

import { Collapse } from '@rinzai/zen';

API reference

<Collapse>

A row showing as many items as fit on one line, and the rest behind a "+N" button that opens them in a popover. It measures the items as rendered (any content, font or style), and fits again whenever the row resizes. Its width is the room it's given, not its items': size the row with className (e.g. w-full, max-w-md, gap-1).

Prop	Type	Default
`children`Required Renders one item (in the row, or in the popover when it doesn't fit).	`(item: string, index: number, itemData?: TData \| undefined) => ReactNode`	`—`
`items`Required	`string[]`	`—`
`badgeClassName` Classes for the "+N" badge.	`string`	`—`
`badgeVariant`	`"default" \| "outline" \| "secondary" \| null`	`secondary`
`className` Classes for the row: its width, and the gap between items.	`string`	`—`
`data` Extra data per item, passed to `children` with it.	`TData[]`	`—`
`moreLabel` Text after the count on the "+N" button, e.g. "tags".	`string`