Pin List

Provides a quick-access bar where users can pin, organize, and reorder favorite items, documents, or shortcuts.

10.9 KB

•

Updated on September 4, 2026

Pinned Items

Commit Zone

Code updates · Closes 9:00 PM

404 Room

Fixing errors · Open 24 hours

All Items3

NPM Stop

Install dependencies · Closes 8:00 PM

Token Lock

Auth & security · Open 24 hours

AI Studio

Generative models · Active now

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-pin-list

pnpm dlx shadcn@latest add @spaceui/components-spaceui-pin-list

Code

<PinList items={ITEMS} />

Prop	Type	Default	Description
items	PinListItem[]	-	Array of items to show in the list. Each item should have id, name, info, icon, and pinned.
labels	{ pinned?: string; unpinned?: string; }	{ pinned: "Pinned Items", unpinned: "All Items" }	Custom labels for the pinned and unpinned sections. Example: { pinned: "Favorites", unpinned: "All" }.
transition	{ stiffness?: number; damping?: number; mass?: number; type?: string; }	{ stiffness: 320, damping: 20, mass: 0.8, type: "spring" }	Spring animation config for item transitions. Controls the movement physics. Example: { stiffness: 320, damping: 20, mass: 0.8, type: "spring" }
labelMotionProps	{ initial?: object; animate?: object; exit?: object; transition?: object; }	{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.22, ease: "easeInOut" } }	Motion props for the section labels. Allows customizing the label enter/exit animation. Example: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.22, ease: "easeInOut" } }
className	string	-	Class name for the outermost container.
labelClassName	string	-	Class name for the section labels.
pinnedSectionClassName	string	-	Class name for the pinned items group.
unpinnedSectionClassName	string	-	Class name for the unpinned items group.
zIndexResetDelay	number	500	Delay (in ms) before resetting z-index after toggle, should match your animation duration if changed.

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

On This Page