Pinned List
An animated list that lets users pin items to a dedicated section. Items glide between sections with spring-based layout animations, and the pin icon rotates with a tactile color transition.
Preview
Pinned
Design System Tokens
Color, spacing, and typography primitives
Auth Flow
Login, signup, and password reset
All Items
Dashboard Layout
Sidebar navigation with collapsible sections
API Rate Limiter
Token-bucket middleware for Express
Search Indexer
Full-text search with fuzzy matching
Installation
npm install motion lucide-reactAPI Reference
PinnedList
| Prop | Type | Default | Description |
|---|---|---|---|
| items | PinnedListItem[] | — | Array of items to render |
| onTogglePin | (id: string) => void | — | Called when a pin button is clicked |
| className | string | undefined | Additional CSS classes |
| pinnedLabel | string | "Pinned" | Heading for the pinned section |
| unpinnedLabel | string | "All Items" | Heading for the unpinned section |
PinnedListItem
| Field | Type | Description |
|---|---|---|
| id | string | Unique identifier used for layout animation |
| content | React.ReactNode | Content rendered inside the list item |
| pinned | boolean | Whether the item is pinned |
The component is fully controlled — you own the
itemsstate and handle pin toggling viaonTogglePin. The pin accent color uses--primaryso it follows your theme automatically.