Pinned List

Open in

Pinned

Item 2

Item 3

Unpinned

Item 1

Item 4

Installation

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

Prop	Type	Default
`children`	`React.ReactNode`	-
`onPinnedChange?`	`(id: string) => void`	-
`...props?`	`HTMLMotionProps<"div">`	-

PinnedListPinned

Prop	Type	Default
`...props?`	`React.ComponentProps<"div">`	-

PinnedListUnpinned

Prop	Type	Default
`...props?`	`React.ComponentProps<"div">`	-

PinnedListLabel

Prop	Type	Default
`hide?`	`boolean`	`false`
`transition?`	`Transition`	`{ duration: 0.22, ease: "easeInOut" }`
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"p">`	-

PinnedListItems

Prop	Type	Default
`...props?`	`HTMLMotionProps<"div">`	-

PinnedListItem

Prop	Type	Default
`id`	`string`	-
`children`	`React.ReactNode`	-
`customTrigger?`	`boolean`	`false`
`transition?`	`Transition`	`{ stiffness: 320, damping: 25, mass: 0.8, type: "spring" }`
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"div">`	-

PinnedListItemTrigger

Prop	Type	Default
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"button">`	-

Credits

Based on @arhamkhnz's Pin List component.

Pinned List

On this page