Pin List

Pinnable list: items glide between groups. Pro · Animated components › Lists and people

A list whose items can be pinned to a group on top: the moved item slides into place and the rest close ranks (one layout animation per change, no render per frame). Keyboard focus follows the item.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add pin-list

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { PinList } from 'valyro-ui-pro';

Props

Prop	Type	Default
`items` *	`readonly PinListItem[]`		Items in their natural order; pinned ones are shown first in the order they were pinned.
`pinned`	`string[]`		Ids of the pinned items. Saving them between sessions is up to the app.
`defaultPinned`	`string[]`	`[]`	Initial `pinned` when uncontrolled.
`onPinnedChange`	`(pinned: string[]) => void`		Called with the new `pinned` when it changes.
`animation`	`'spring' \| 'none'`	`'spring'`	`spring` (default): an item slides into its new group and the others close ranks; `none`: instant.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the two group headings (default 3).
`labels`	`Partial<PinListLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Notification Stack — Notification stack that expands into a list
Todo List — Checklist with a wavy strike-through on done items
Presence Avatars — Who’s online: avatars rearrange as status changes
Toggle — Toggle button with a springy response
Flip Button — Two-sided button that flips on a spring
Liquid Button — Button that fills with “liquid” on hover
Theme Toggler — Light/dark switch with a View Transitions reveal
GitHub Stars Button — Repository link with a rolling star count
Share Button — Button that fans out social icons
Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
Number Wheel — Number on a spinning wheel with neighboring values
Radial Menu — Ring-shaped context menu on right-click

Previous: Number Wheel · Next: Notification Stack · All Animated components