Pinned List

A list where selected items pin to the top and animate out of the flow into a pinned section. It renders items with visual feedback for pinned status and animates transitions. Use it to highlight important items during user interaction.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/pinned-list

npx layro-cli add @educlopez/pinned-list

npx layro-cli add @educlopez/pinned-list

bunx layro-cli add @educlopez/pinned-list

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { Pin } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { KeyboardEvent, ReactNode } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

const DEFAULT_MAX_PINNED = 5;

/* -------------------------------------------------------------------------- */
/* Motion tokens                                                              */
/* -------------------------------------------------------------------------- */