Bucket column

component

A single inventory bucket: a collapsible labeled header with a capacity counter, an optional equipped slot, and the stored items in an ItemGrid.

Install

npx shadcn@latest add @engram/bucket-column

Registry item: /r/bucket-column.json — the machine-readable definition agents install from.

Example

510

500

495

501

500

503

502

Props

Prop	Type	Default	Description
`title`*	`ReactNode`	`—`	Bucket name (e.g. "Kinetic Weapons", "Helmet").
`equipped`	`ReactNode`	`—`	The equipped item, rendered above the stored grid.
`count`	`number`	`—`	Stored item count (the filled slots).
`capacity`	`number`	`—`	Bucket capacity — shown as `count / capacity`; turns "bad" when over.
`collapsible`	`boolean`	`true`	Whether the column collapses. Default true.
`defaultOpen`	`boolean`	`true`	Initial open state when collapsible. Default true.
`columns`	`number`	`—`	Grid columns (passthrough to ).
`min`	`number`	`—`	Responsive min tile width (passthrough to ).
`gap`	`number`	`—`	Grid gap (passthrough to ).
`children`	`ReactNode`	`—`	The stored item tiles.
`className`	`string`	`—`	—

Composition

pulled in on install

bucket-columncomponent
- collapsible-sectioncomponent
- item-gridcomponent

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.