║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Pinned List description: A pin list component that allows you to pin items to the top of the list. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-animate-pinned-list" />

Installation

<ComponentInstallation name="primitives-animate-pinned-list" />

Usage

<PinnedList>
  <PinnedListPinned>
    <PinnedListLabel>Pinned</PinnedListLabel>

    <PinnedListItems>
      <PinnedListItem />
      <PinnedListItem customTrigger>
        <PinnedListItemTrigger />
      </PinnedListItem>
    </PinnedListItems>
  </PinnedListPinned>

  <PinnedListUnpinned>
    <PinnedListLabel>Unpinned</PinnedListLabel>

    <PinnedListItems>
      <PinnedListItem />
      <PinnedListItem customTrigger>
        <PinnedListItemTrigger />
      </PinnedListItem>
    </PinnedListItems>
  </PinnedListUnpinned>
</PinnedList>

API Reference

PinnedList

<TypeTable type={{ children: { description: 'The children of the PinnedList.', type: 'React.ReactNode', required: true, }, onPinnedChange: { description: 'The callback function to be called when a pinned item is changed.', type: '(id: string) => void', required: false, }, '...props': { description: 'The props of the PinnedList.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

PinnedListPinned

<TypeTable type={{ '...props': { description: 'The props of the PinnedListPinned.', type: 'React.ComponentProps<"div">', required: false, }, }} />

PinnedListUnpinned

<TypeTable type={{ '...props': { description: 'The props of the PinnedListUnpinned.', type: 'React.ComponentProps<"div">', required: false, }, }} />

PinnedListLabel

<TypeTable type={{ hide: { description: 'Whether to hide the label.', type: 'boolean', required: false, default: 'false', }, transition: { description: 'The transition of the PinnedListLabel.', type: 'Transition', required: false, default: '{ duration: 0.22, ease: "easeInOut" }', }, asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the PinnedListLabel.', type: 'HTMLMotionProps<"p">', required: false, }, }} />

PinnedListItems

<TypeTable type={{ '...props': { description: 'The props of the PinnedListItems.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

PinnedListItem

<TypeTable type={{ id: { description: 'The id of the PinnedListItem.', type: 'string', required: true, }, children: { description: 'The children of the PinnedListItem.', type: 'React.ReactNode', required: true, }, customTrigger: { description: 'Whether to use a custom trigger with the PinnedListItemTrigger component.', type: 'boolean', required: false, default: 'false', }, transition: { description: 'The transition of the PinnedListItem.', type: 'Transition', required: false, default: '{ stiffness: 320, damping: 25, mass: 0.8, type: "spring" }', }, asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the PinnedListItem.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

PinnedListItemTrigger

<TypeTable type={{ asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the PinnedListItemTrigger.', type: 'HTMLMotionProps<"button">', required: false, }, }} />

Credits

• Based on @arhamkhnz's Pin List component.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║