Pinned List

A list of items that animate smoothly to a pinned section using Framer Motion layout animations.

Installation

File Structure

pinned-list.tsx

Usage

import { PinnedList } from "@/components/unlumen-ui/pinned-list";
import { ShoppingBag01Icon as ShoppingBag } from "hugeicons-react";

const items = [
  {
    id: "1",
    name: "Apple Store",
    subtitle: "Electronics · Closes 9:00 PM",
    icon: <ShoppingBag size={16} />,
  },
];

<PinnedList items={items} />;

API Reference

PinnedList

PropTypeDefaultDescription
itemsPinnedListItem[]-Array of items to display in the list.
className?string-Additional className for the outer wrapper.

PinnedListItem

PropTypeDefaultDescription
idstring-Unique identifier used as the motion layoutId.
namestring-Display name shown in bold.
subtitlestring-Secondary line shown below the name, e.g. "Category · Detail".
iconReact.ReactNode-React node rendered inside the icon container.

Notes

  • Layout: each item card is a motion.div with layoutId and layout props, so when an item moves between sections it animates its real DOM position rather than being unmounted and remounted.
  • LayoutGroup scopes all layout animations to avoid interference with other animated elements on the page.
  • AnimatePresence wraps the "Pinned Items" heading so it fades in when the first item is pinned and fades out when the last item is unpinned.
  • Pin state is managed internally. Pass a controlled pinnedIds set and an onToggle callback if you need to lift the state out.

Credits

This components is inspired by the Pinned list from @alisamadi__. Thanks for the awesome demo and inspiration!

Built by léo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.