collections
Progressive Collection
One active item receives real layout space and context while the rest remain compact and scannable.
- collections
- collection
- focus
- progressive
- reflow
Progressive spatial disclosure through real grid allocation, not another accordion.
Live preview
Quick usage
import { ProgressiveCollection } from "@pinky-ui/systems";
<ProgressiveCollection items={items} label="Capabilities" />Presets
Default
Restrained production behaviour.
Default behaviour
Quiet
Reduced intensity for dense product screens.
disabled={true}
Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add progressive-collectionPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ProgressiveCollectionItem[] | — | Peer items with compact summaries and active content. |
| className | string | — | Styles the outer interaction surface. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- The active column changes grid allocation; there is no scale-only emphasis.
- Only active content is rendered in its expanded reading state.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Feature, capability and project collections where one item should lead without hiding peers
When not to use
- A simple accordion or a collection that needs equal comparison
Skill
Purpose
Use a progressive collection when one active item should gain real layout space and context while inactive peers remain compact and scannable. It is spatial disclosure, not another accordion.
Interaction anatomy
- The active column receives a larger grid track.
- Inactive items keep their labels and short summaries.
- Mobile becomes a readable stacked collection with one active content block.
Good for
Capabilities, project families and curated feature collections with one current emphasis.
Avoid
Equal comparison, huge datasets or a simple one-row disclosure.
Usage
<ProgressiveCollection
label="Capabilities"
items={capabilities.map((item) => ({
id: item.id,
label: item.title,
summary: item.summary,
content: <CapabilityDetail item={item} />,
}))}
/>Tune
Keep the number of peers small enough for the grid to redistribute space. Do not rely on scale as the active signal.
Accessibility and reduced motion
Use a button with pressed state for each item and keep inactive summaries readable. Reduced motion keeps the new grid allocation but removes interpolation.