collections
Magazine Index
A numbered editorial content index pairs typographic rows with a shared preview without becoming page navigation.
- collections
- editorial
- index
- content
- typography
Content browsing index with previews; editorial navigation remains a route destination system.
Live preview
Quick usage
import { MagazineIndex } from "@pinky-ui/systems";
<MagazineIndex items={stories} label="Issue contents" />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 magazine-indexPrefer 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 | MagazineIndexItem[] | — | Content entries with number, title, metadata and preview. |
| 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
- One preview surface changes; the index remains a small ordered DOM list.
- Keyboard movement changes selection only at item boundaries.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Editorial collections, journals, releases and design-led indexes
When not to use
- Primary route navigation or dense utility menus
Skill
Purpose
Use a numbered content index when typography, metadata and one shared preview should make a collection feel like a publication. This browses content; it is not page-destination navigation.
Interaction anatomy
- Numbered rows keep the editorial order visible.
- Selection changes one shared preview and its metadata.
- Arrow, Home and End move through content entries.
Good for
Journals, release notes, art direction, case-study issues and design-led archives.
Avoid
Primary navigation, utility menus or indexes where every item must be compared at once.
Usage
<MagazineIndex
label="Issue contents"
items={stories.map((story, index) => ({
id: story.id,
number: String(index + 1).padStart(2, "0"),
title: story.title,
meta: story.category,
preview: <StoryCover story={story} />,
}))}
/>Tune
Let the numbers and titles carry hierarchy before adding motion. Keep metadata short and make the shared preview supplementary.
Accessibility and reduced motion
Rows are buttons with pressed state, not invented tabs or links. Keep title and metadata in the DOM; reduced motion swaps the preview without the editorial slide.