galleries
Badge shelf with row packing
A shelf of mixed-size badges placed without overlaps by a real shelf-packing pass with variable row heights: each badge takes the first row it fits in and a new row only opens when none accepts it, so the small badges fill the space the big ones leave. Changing the width control or the container size (ResizeObserver) repacks everything and the badges FLIP to their new slots, and a toggle shows the naive wrap with the used-space percentage for each mode.
See it live and copy its promptWhat you can adjust
- Shelf width
- Badge spacing
- Accent color
- Featured badge color
- Badge radius
- Base badge size
- Show space usage
- Reflow speed
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
