Dev Design LibraryAnimated List Components
Dev Design Library indexes 56 Animated list components from 27 open-source UI libraries, with the most coming from UI Lab, Watermelon UI, uselayouts, Spectrum UI and Kinetics. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the list components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. List components belong to the Data display group.
Animated ListReact Bits · ReactList items enter with staggered motion variants for polished reveals.
Animated ListMagic UI · ReactA list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
Sortable ListCult UI · ReactDrag-and-drop sortable list component with smooth animations and reordering
Delete With Smoky Dissolvetransitions.dev · HTML/CSSList item that dissolves into smoke when deleted.
Scroll TextKokonut UI · ReactScroll-driven text list that highlights the active word as you scroll, using IntersectionObserver with React, Tailwind…
Swipeable ListbeUI · ReactMobile-style list rows that swipe left or right to reveal contextual action buttons.
Task ListRare UI · ReactA checklist that strikes out completed tasks and moves them to the bottom of the list.
Nav List CardSpectrum UI · ReactA compact navigation card that lists links with icons, with a spring slide on hover.
Image Reveal ListVengeance UI · ReactHover-based image reveal tooltip list
LeaderboardPanel UI · React NativeEntries ranked by a value, with the top three on a podium.
Animated List 01 - DefaultShadcn Space · ReactAnimated List component
Animated Collectionuselayouts · ReactA collection of items with smooth layout transitions and animations.
Activity LedgerKinetics · HTML/CSSFresh events arrive sharply while older entries compact- List AnimationShadcn Dashboard · React
Animated ListAnimations (Svelte) · SvelteA component that animates list items with smooth layout transitions, revealing items one by one from top to bottom.
Animated ListBadtz UI · ReactA sophisticated animation component that creates dynamic column-based transitions with scaling effects. Perfect for…
Swipe Action RowSona UI · ReactA coordinated list-row interaction with two-sided actions, keyboard opening, outside dismissal, and action-owned full…
Pin ItemWatermelon UI · React
Notification centerArc Library · ReactA home for updates with read state, grouped information, and animated disclosure.
Activity TimelineUI Lab · ReactNew events slide in at the top as the line grows to meet them.
Activity feedCojeev UI · ReactAn ordered, date-grouped history in three looks (a living thread, a quiet ledger or gathered bursts), with readable…
Animated ListVelora UI · ReactLooping feed that springs each item in, newest on top.
Session ListPin UI · React
Liquid Sortable ListSpaceUI · ReactSmooth drag-and-drop sortable team list with generative avatars and spring reordering.
Liquid ListLiquefy UI · ReactList in liquid glass style. Lista em estilo vidro líquido.
Todo ListEaseUI · ReactA collapsible agent task plan with morphing status marks and a completion count.
Kanban BoardReactFrame · ReactA drag-and-drop task board with a hand-rolled pointer-based drag engine, velocity tilt, edge autoscroll, ghost…
Swipe RowReact Bits · ReactList row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the…
Drag Drop With Physicstransitions.dev · HTML/CSS
Todo ListbeUI · ReactShows which planned work is paused by the decision.
Recent ActivitySpectrum UI · ReactAn activity feed card that lists agent runs with duration and recency chips.
SortablePanel UI · React NativeA list whose rows can be dragged into a different order.
Product Category 01 - Horizontal ListShadcn Space · ReactA horizontal category list displaying product groups with icons, item counts, and quick links, enabling users to scan…
Filter Interactionuselayouts · ReactInteractive list items with hover and focus effects.
Stagger EntranceKinetics · HTML/CSSList items rise in sequence on scroll into view
Pin Item BaseWatermelon UI · React
Reorderable listArc Library · ReactOrganize items with direct drag and drop.
Filter ListUI Lab · ReactRows fade out of the way while the rest slide up to close the gap.
Item adornmentCojeev UI · ReactColoured organic shapes for list items, with deterministic automatic selection and custom icon or no-icon options.
Notification ListSpaceUI · ReactDisplays an interactive feed of incoming notifications with unread indicators, timestamps, and swipe-to-dismiss actions.
Nothing SavedSpectrum UI · ReactAn empty saved list that teaches the gesture on three real rows.
Liquid Indexuselayouts · ReactA feature list whose hover badge is a WebGL liquid gradient that tracks the row.
Swipe To RevealKinetics · HTML/CSSDrag an item horizontally to expose action buttons
Pin ListWatermelon UI · React
Swipe actionsArc Library · ReactReveal row actions with a swipe, or from the same actions in a menu.
Kanban BoardUI Lab · ReactLift a card and the others slide aside to make room for it.
Pin ListSpaceUI · ReactProvides a quick-access bar where users can pin, organize, and reorder favorite items, documents, or shortcuts.
Swipe to DeleteSpectrum UI · ReactAn iOS-style swipeable list-item wrapper that reveals a delete action on drag, pops the icon at the commit threshold…
Stacked Listuselayouts · ReactAn expandable list widget with a stacked layout and smooth morphing transitions.
Vector RecallKinetics · HTML/CSSNearest embeddings drift in as a query ring sweeps the space
Shuffle Pinned ItemWatermelon UI · React
LeaderboardUI Lab · ReactPlayers glide past each other to their new ranks.
Shuffle Pinned Item BaseWatermelon UI · React
Reorder ListUI Lab · ReactPicks rows up by the handle and slides the rest out of the way.
Sortable GridUI Lab · ReactDrag an app tile and the others slide out of its way.
Stagger VisualizerUI Lab · ReactShows what per-item delay actually does to a list entrance.
Libraries with Animated list components
Related categories
- List Components
- React List Components
- Tailwind CSS List Components
- shadcn/ui List Components
- Animated Data Display Components
- Animated Card Components
- Animated Chart Components
- Animated Carousel Components
- Animated Accordion Components
- Animated Stat Components
- Animated Collapsible Components
- Animated Card Stack Components
- Animated Counter Components
- Animated Avatar Components
- Animated Table Components
- Animated Tree View Components
- Animated Avatar Group Components
- Animated Line Chart Components
- Animated Timeline Components
- Animated Testimonial Components