Animated Grid Components

Dev Design Library indexes 39 Animated grid components from 19 open-source UI libraries, with the most coming from Vengeance UI, Aceternity UI, uselayouts, Badtz UI and Velora UI. 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 grid components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Grid components belong to the Layout group.

• Magic BentoReact Bits · ReactInteractive bento grid tiles expand + animate with various options.
• Widget GridKokonut UI · ReactDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
• Infinite MasonrybeUI · ReactResponsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
• Bento GridSpectrum UI · ReactA premium interactive Bento Grid component
• Agent Bento GridVengeance UI · ReactMulti-agent workspace grid layout
• Web Day GridPanel UI · React Native
• Blog 01 - Latest Blog & News GridShadcn Space · ReactA modern blog section with featured posts, large thumbnails, publish dates, and headlines, ideal for sharing agency…
• Photo Magnet GridPixel Perfect · ReactA tidy grid of photos that scatters away from the cursor like same-pole magnets, each tile leaning away in 3D as it…
• Animated Collectionuselayouts · ReactA collection of items with smooth layout transitions and animations.
• Bento ExpandKinetics · HTML/CSSHover focuses one tile; the rest quietly recede
• Animated Card 1Badtz UI · React
• Sortable GridUI Lab · ReactDrag an app tile and the others slide out of its way.
• Content 04FLX UI · ReactTwo-column card grid with a serif section header and copy above each image.
• Bento feature gridVelora UI · ReactFive-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe.
• Magnetic Dot GridAtelier UI · React
• Image Density GridSkecher UI · ReactA percentage-controlled image grid with animated density changes, soft focus, and optional controls.
• Fisheye Chromatic Card GridCue Foundations · React
• Glass Bento GridOpaline · ReactFeature tiles on glass in a bento layout, with a pointer light and a call to action that slides in.
• Features Section Demo 3Aceternity UI · React
• MasonryReact Bits · ReactResponsive masonry layout with animated reflow + gaps optimization.
• Lightbox GridKokonut UI · ReactA photo grid whose thumbnails grow into a full view and fly back to their slot when you drag them down.
• Research Bento GridVengeance UI · ReactAnimated developer-service showcase with interactive pricing and pause states
• Portfolio 01 - Clean Portfolio GridShadcn Space · ReactA modern portfolio section displaying featured projects with tags, visuals, and categories, ideal for agencies or…
• Bento Carduselayouts · ReactAn interactive bento card with animated tabs and workspace preview.
• Animated Card 2Badtz UI · React
• Content 05FLX UI · ReactA focus grid with items that can be focused and dimmed.
• Layout GridVelora UI · ReactBento grid of image tiles that expand in place to reveal rich content.
• Stacker Style Bento GridCue Foundations · React
• Layout GridAceternity UI · React
• Staggered GridVengeance UI · ReactOffset card grid composition
• Team 02 - Modern Team GridShadcn Space · ReactA clean team grid with large profile cards, roles, and social icons, ideal for agencies or SaaS companies to introduce…
• Magnified Bentouselayouts · ReactA bento card component with a draggable magnifying lens effect over scrolling chips.
• Animated Card 3Badtz UI · React
• Content 09FLX UI · ReactTwo-column icon card grid with serif section header and subtle entrance motion.
• Parallax GridVelora UI · ReactGallery columns drifting at different rates for depth.
• Parallax ScrollAceternity UI · React
• Expandable Bento GridVengeance UI · React
• Parallax Scroll 2Aceternity UI · React
• Why Us BentoVengeance UI · React

Libraries with Animated grid components

• Vengeance UI
• Aceternity UI
• uselayouts
• Badtz UI
• Velora UI

Related categories

• Grid Components
• React Grid Components
• Tailwind CSS Grid Components
• shadcn/ui Grid Components
• Animated Layout Components
• Animated Stack Components
• Animated Bento Grid Components
• Animated Sticky Scroll Components
• Animated Container Components
• Animated Window Frame Components
• Animated Scroll Area Components
• Animated Split Pane Components