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 { ShoppingBag } from "lucide-react";

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

<PinnedList items={items} />;

API Reference

PinnedList

PropTypeDefault
items
PinnedListItem[]
-
className?
string
-

PinnedListItem

PropTypeDefault
id
string
-
name
string
-
subtitle
string
-
icon
React.ReactNode
-

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.