Pin List

A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups.

Pinned Items

Code Your Dreams

Every keystroke counts · Never stop building

Debug Your Limits

Break barriers · You got this!

All Items

Ship It Studio

Turn ideas into reality · Closes 8:00 PM

Focus Mode

Deep work zone · Flow state all day

Syntax Sanctuary

Find beauty in code · Until 9:00 PM

Installation

pnpm dlx shadcn-ui@latest add "https://narakcode.vercel.app/r/pin-list.json"

<PinList items={ITEMS} />

Prop	Type	Default	Description
`items`	`PinListItem[]`	(required)	The array of items to display in the list.
`className`	`string`	`""`	Additional CSS classes for the root component element.
`labelClassName`	`string`	`""`	Additional CSS classes for the section labels.
`pinnedSectionClassName`	`string`	`""`	Additional CSS classes for the wrapper of the pinned items.
`unpinnedSectionClassName`	`string`	`""`	Additional CSS classes for the wrapper of the unpinned items.
`labels`	`{ pinned?: string; unpinned?: string; }`	`{ pinned: "Pinned", ... }`	Custom text for the pinned and unpinned section labels.
`transition`	`Transition`	`{ type: "spring", ... }`	Framer Motion transition object for item layout animations.
`labelMotionProps`	`HTMLMotionProps<"p">`	`{ initial: ..., ... }`	Framer Motion props for the section label animations.
`zIndexResetDelay`	`number`	`500`	Delay in ms to reset z-index after an animation.