collections
Focus Strip Collection
A horizontal or vertical strip redistributes space so one selected content item becomes the readable focus.
- collections
- strip
- focus
- collection
- reflow
All items remain in one content strip; active width, not scale, carries focus.
Live preview
Quick usage
import { FocusStripCollection } from "@pinky-ui/systems";
<FocusStripCollection items={items} orientation="horizontal" label="Studies" />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 focus-strip-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 | FocusStripCollectionItem[] | — | Peer content surfaces that can gain or yield layout space. |
| 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
- Flex basis carries the hierarchy; transform scale is not used as the main response.
- Small screens use a touch-scroll strip with a clear active item.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Short studies, chapters and content previews with one active emphasis
When not to use
- Large galleries or a primary tab panel with different semantics
Skill
Purpose
Use a focus strip when peer content should stay in one horizontal or vertical band while the selected item receives more width and neighbours yield it.
Interaction anatomy
- Active and inactive items use different flex basis, not transform scale.
- Pointer, focus and tap choose the same item.
- Small screens become a touch-scroll strip with a clear active entry.
Good for
Short studies, chapters, product capabilities and content previews.
Avoid
Large galleries, tab panels with separate semantics or collections where equal card width is the point.
Usage
<FocusStripCollection
label="Selected studies"
orientation="horizontal"
items={studies.map((study) => ({
id: study.id,
label: study.title,
meta: study.year,
content: <StudySummary study={study} />,
}))}
/>Tune
Keep the strip short and give active content enough room to read. Use a vertical orientation only when the surrounding layout supports it.
Accessibility and reduced motion
Each item is a labelled button with pressed state and touch-safe dimensions. Reduced motion changes flex basis immediately and preserves the active item.