SLARIVO / GRIDS & BENTO

Grids & Bento Components

Browse 421 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.

• Slarivo Bento Grid

  Bento Grid, Bento

• Slarivo bento grid 01

  A reusable and responsive bento grid layout with animation

• Slarivo Bento Grid

  Grids & Bento component from the 21st.dev community.

• Slarivo Bento

  Beautifully designed, fully responsive, expertly crafted Bento section

• Slarivo Magnified Bento

  A bento grid with magnification effect on hover.

• Slarivo Bento Grid

  A skewed grid layout with Title, description and a header component

• Slarivo Bento Grid

  A nice Bento Grid with hover items and shadow.

• Slarivo Bento Product Features

  Grids & Bento component from the 21st.dev community.

• Slarivo Aurora Bento Grid

  A visually dynamic grid layout featuring animated gradient backgrounds and interactive hover effects. Ideal for showcasing features, services, or dashboard modules with flair and clarity.

• Slarivo Bento Grid

  All-in-one tools for automation, content management, scheduling, and AI-powered efficiency.

• Slarivo Flickering Grid

  A flickering grid background made with SVGs, fully customizable using Tailwind CSS.

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Commits Grid

  Transforms any text into a GitHub-style commits grid, visually representing the text as contribution blocks.

• Slarivo Cybernetic Bento Grid

  This is a modern and highly popular layout style for showcasing features, portfolio items, or key information. I've designed this one with a futuristic, cyberpunk aesthetic, featuring glowing borders that animate on hover, a subtle background grid, and a clean, dark theme.

• Slarivo Features 4

  features section

• Slarivo Logo Cloud

  Here is Logo Cloud Blocks

• Slarivo Hover Effect

  Hover over the cards and the effect slides to the currently hovered card.

• Slarivo infinite grid integration

  A reusable component for grid integration animation.

• Slarivo Background snippets

  Here is Background snippets component

• Slarivo Background snippets

  Here is Background snippets component

• Slarivo Background snippets

  Here is Background snippets component

• Slarivo Tetris Loader

  A minimalist, high-contrast Tetris-inspired loading animation built with React and TypeScript. This component delivers a clean, pure black-and-white aesthetic with full dark mode support, creating a striking visual loading experience. Key Features: Pure Monochrome Design: Exclusively uses black and white colors - no grays or intermediate shades Dark Mode Native: Seamlessly switches between black-on-white (light) and white-on-black (dark) themes Authentic Tetris Mechanics: All 7 Tetriminos with proper rotation, stacking, and line clearing Configurable Options: Size: Small (8×16), Medium (10×20), or Large (10×20 with bigger blocks) Speed: Slow (150ms), Normal (80ms), or Fast (40ms) drop rates Loading Text: Customizable message or hide completely Smooth Performance: 60fps animations using requestAnimationFrame Auto-Reset: Intelligently clears the grid when pieces stack too high

• Slarivo Grid Background

  Grid Background

• Slarivo Customers Section

  Customers Section with Moption Primitives

• Slarivo Animated Loading Skeleton

  Animated Loading Skeleton

• Slarivo Bento Grid

  A bento grid of cards with a feature card and smaller cards below. Minimal design and dotted backgrounds.

• Slarivo Testimonials

  Testimonials Section A responsive and animated component to showcase customer testimonials in a clean, grid-based layout.

• Slarivo Testimonials Section

  A modern testimonial grid with animations, customer photos, and quotes — perfect for SaaS, startups, and business websites to showcase client success stories and build trust.

• Slarivo GitHub calendar

  GitHub-style calendar component for Next.js that displays a contribution-like heatmap.

• Slarivo Background Grid Beam

  Background Grid Beam

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo Vercel Hero

  Vercel Hero with grid pattern

• Slarivo Blog Section

  Blog Section with 4 cards

• Slarivo Color Change Card

  This is an animated card component that uses framer motion and has a color-changing animation on hover. Use for feature sections.

• Slarivo Feature 72

  A grid of feature cards

• Slarivo Animated Group

  A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.

• Slarivo BG Patterns

  A versatile background pattern component for React, it supports six visual styles and eight customizable mask effects. You can easily add subtle texture or visual flair to any section using pure CSS gradients—no images or external assets required.

• Slarivo Testimonial Card

  A versatile card component for displaying user testimonials with avatars and social links inspired by Launch UI. It supports both linked and non-linked variants, custom styling, and responsive design. Features: • Avatar with user image • Name and social handle • Testimonial text • Optional link wrapper • Gradient background with hover effects • Dark mode support

• Slarivo Grid Pattern

  A background grid pattern made with SVGs, fully customizable using Tailwind CSS.

• Slarivo Grid Pattern

  Grids & Bento component from the 21st.dev community.

• Slarivo Card

  BlogPostCard This component is designed to display blog post information. It features two main variants: featured (large with an image) and default (compact, text-focused). It's responsive and theme-aware right out of the box.

• Slarivo Tweet Grid

  A masonry grid full of tweets

• Slarivo Retro Grid

  A stunning animated retro grid component with customizable colors, scanlines, and neon glow effects. Perfect for synthwave, vaporwave, and cyberpunk UI designs. Features smooth 3D perspective animation, dynamic gradient sky, and interactive color controls. Built with React, TypeScript, and Canvas API. Fully responsive and optimized for performance. Ideal for landing pages, hero sections, and nostalgic 80s-inspired web applications. Easy to integrate with customizable props for grid color, CRT scanlines, and glow effects.

• Slarivo Achievement Cards

  Achievement Cards – Visual recognition component. Highlights awards, partnerships, features, and milestones with branded icons and concise labels. Ideal for startup landing pages, portfolios, or pitch decks to build trust and showcase credibility.

• Slarivo Set of Animations 4

  Here is Set of Animations

• Slarivo Responsive Masonry Layout

  A beautiful, responsive masonry component that adapts seamlessly to various screen sizes.

• Slarivo Tech Solutions Hero Section

  A responsive, grid-based showcase component for HAOS Tech Solutions with a customizable registry-ad background slot, dark-mode support, and accessible controls.

• Slarivo Blogs

  A vertically stacked set of interactive headings that each reveal a section of content.

• Slarivo Card Grid

  Article Card Grid This component displays a title and a responsive grid of article cards. It's designed to be easily populated with data via props, making it highly reusable for different sections of your application, such as blog post listings, feature showcases, or resource centers.

• Slarivo Circle Animations Collection 3

  Here is Circle Animations Collection 3

• Slarivo Neon Matrix Loader

  The Neon Matrix Loader is a modern, futuristic loading animation built with a 3×3 grid of animated squares.

• Slarivo Icon Set

  Icon Set Grid Clean, minimal collection of social and productivity icons arranged in a grid layout. Enhances navigation and quick access to platforms. Ideal for dashboards, portfolios, or landing pages.

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Seat Selection

  Seat Selection Description: A highly customizable and accessible movie theater seat selection component. It's built with framer-motion for fluid animations and styled using shadcn/ui theme variables for seamless light/dark mode integration. The component accepts a structured layout prop, making it reusable for any seating arrangement.

• Slarivo Spread sheet

  A comprehensive spreadsheet component with all the essential features you'd expect from a spreadsheet application. The component includes cell selection, editing capabilities, keyboard navigation, and a clean Excel-like interface. You can customize the number of rows and columns, and it handles all the standard spreadsheet interactions seamlessly.

• Slarivo Interactive Canvas

  Interactive Canvas with dot pattern frid

• Slarivo Animated Toggle Layout Container

  - Container toggling and animating between multiple layouts, useful for your ecommerce store and large lists to enhance user experience.

• Slarivo Grid Loading

  A compact animated grid loader with 9 pulsing squares that adapts to light and dark themes.

• Slarivo Follower Counter

  Here is follower counter card

• Slarivo Boxy App Icons

  A React component built with Tailwind CSS that renders a grid of six interactive SVG icons representing popular applications (PayPal, GitLab, Instagram, Telegram, Spotify, and Discord). Each icon features a 3D hexagonal design with a smooth hover effect that triggers a vertical lift and color change specific to each app's branding (e.g., Instagram's gradient, Spotify's green). The component maintains the original SVG structure and styling from the provided code, ensuring visual consistency with hover transitions for an engaging user experience. Ideal for use in social media links, app showcases, or navigation menus.

• Slarivo smiley

  Interactive grid of animated smiley faces that respond to mouse movement with 3D transforms and morph from sad to happy expressions on hover

• Slarivo Article Cards

  Article Card This component displays a visually rich card for articles, featuring a background image with a gradient overlay, category, title, and a call-to-action button. It's designed to be responsive and includes a subtle lift and scale animation on hover.

• Slarivo Integration Logos Grid

  A centered flexbox grid of company or product logos with grayscale hover effects, ideal for showcasing customers, integrations, or partners.

• Slarivo Infinite Bento Pan

  A camera diagonally drifts across an oversized bento grid behind a soft vignette.

• Slarivo Product Grid Skeleton

  Loading placeholder skeleton for a product grid showing image, title, star rating and price cards.

• Slarivo Twin Orbit

  Animated dot-matrix loading spinner where two counter-rotating rings of dots orbit around a still center.

• Slarivo FlickeringGridDemo2

  Inspired by magic ui

• Slarivo Offer Card

  Offer Card This component displays an image, title, and offer text in a clean, card-style layout with a hover animation. It's designed to be easily reused with different content.

• Slarivo Game of Life Loader

  A tiny React canvas component for ambient loading states. Renders a softly fading Conway's Game of Life simulation behind your content — deterministic seeding, reduced-motion support, theme-aware color, and pause-when-hidden. Fully typed props for cell size, density, fade, and step interval.

• Slarivo Pixelated Image Reveal

  An image card that reveals a second image through a randomized pixel grid on hover, powered by Motion.

• Slarivo Zima Blue!

  Generated cube animation, inspired by my favorite Love, Death & Robots episode "zima blue"

• Slarivo Menu Animations

  Here is Menu Animations

• Slarivo Patterns

  Animated pattern showcase

• Slarivo Achievement Grid

  Grids & Bento component from the 21st.dev community.

• Slarivo Apple Emoji Picker

  A premium, production-ready, interactive Apple-style Emoji Picker component for React and Tailwind CSS. Supports dark mode, instant search, voice search, and recent emojis.

• Slarivo Background Shapes

  An SVG background that fills a mirrored grid with randomly changing geometric cells (lines, circles, squares) for an animated decorative backdrop.

• Slarivo Pulse Ladder

  An animated dot-matrix loading spinner whose lit dots trace a clockwise snake route column by column across a 5x5 grid.

• Slarivo Spend Migrator

  Here is spend migrator component

• Slarivo Generative Geometry

  A digital recreation of classic Mondrian style, algorithmically generating balanced geometric compositions

• Slarivo Grid

  A simple minimalistic grid

• Slarivo Apple Color Picker

  A pixel-perfect Apple-style color picker with Grid, Spectrum, and Slider tabs, opacity control, swatches, and recent colors.

• Slarivo Stagger Reveal Grid

  Grid that reveals its items with a wave-like stagger animation on scroll, with configurable columns and timing.

• Slarivo Gate Shift

  Animated circular dot-matrix loader whose scanning gate alternates between vertical and horizontal sweeps, producing a crisp shutter rhythm across a masked grid of dots.

• Slarivo Wave Spinner

  An animated loading spinner made of pulsing dots with configurable wave patterns, grid layouts, colors, sizes, and dot shapes.

• Slarivo UploadThing Image Grid

  A multi-image upload grid with preview thumbnails, hover-to-remove buttons, upload progress spinners, and configurable columns.

• Slarivo Grid Feature Cards

  Minimal Features Section using Grid Feature Cards

• Slarivo Fullscreen Calendar

  A clean and responsive fullscreen calendar component for React applications. Built with TypeScript and Tailwind CSS, it provides a spacious layout perfect for displaying events or navigating through dates. Features Fullscreen layout with generous day cells for content Easy month navigation with previous/next controls "Today" quick access button Responsive grid layout that adapts to screen size Visual highlighting for current date and selected dates Built with TypeScript and Tailwind CSS Perfect for building event dashboards, scheduling interfaces, or any application requiring a prominent calendar view.

• Slarivo Retro Grid

  An animated scrolling retro grid effect Add the following animations to your tailwind.config.js file: extend: { animation: { grid: "grid 15s linear infinite", }, keyframes: { grid: { "0%": { transform: "translateY(-50%)" }, "100%": { transform: "translateY(0)" }, }, }, },

• Slarivo Navigation Menu

  Upgrade your project with a sleek React + Tailwind CSS Navigation Menu featuring a modern desktop mega menu and a smooth mobile drawer. Perfect for SaaS dashboards, landing pages, and websites that need a professional, multi-level navigation experience.

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Icons

  shadcn/ui icons

• Slarivo Feature Section with Bento Grid

  Feature Section with Bento Grid

• Slarivo Hero Gallery Scroll Animation

  ℹ️ Hero section with scroll trigger animation, that animate images on scroll, 🧩 <ContainerScroll /> : React html attributes🧩 <BentoCell /> : variants: default: 5 cells | threeCells | fourCells 🧩 <BentoCell /> : motion attributes <ContainerScale /> : scale back and fade out fourCells ✅ Fully responsive

• Slarivo The Infinite Grid

  Grid cursor infinity grid

• Slarivo Feature Section with Bento Grid

  Feature section with Bento Grid, like product pics, YouTube videos, and a globe.

• Slarivo Testimonial-v2

  A reusable testimonial component block

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Testimonials

  This Username Testimonial Displays user testimonials with profile images, usernames, feedback text, and a link to their social media.

• Slarivo Logo Cloud 2

  Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual layout.

• Slarivo Pixel Trail

  You can customize the individual pixels by passing a pixelClassName prop. 1. The component operates by dividing the container into a grid of pixels and dynamically recoloring them as you move your cursor. Each pixel is represented by a single div element, so perf may be impacted when using a large number of pixels, especially on the first render. 2. Keep the z-index of the effect's container lower than the rest of your content, so the pointer-events will captured by all of your other elements.

• Slarivo Blog 7

  Classic 3 card blog post layout, great for blog sections, featured blog posts and related blog posts. Uses shadcn/ui Card component

• Slarivo Features 11

  Bento features section

• Slarivo Feature Section with Grid

  Feature Section with Grid

• Slarivo Layout Grid

  A layout effect that animates the grid item on click, powered by framer motion layout

• Slarivo Focus Cards

  Hover over the card to focus on it, blurring the rest of the cards.

• Slarivo testimonial

  Professional testimonial components featuring customer reviews, client feedback, social proof displays, and trust-building layouts designed to showcase credibility and increase customer confidence

• Slarivo Ruixen Bento Cards

  Ruixen UI is built to make your job easier. These bento cards highlight what really matters when you're building modern UIs: beautiful components, smart layouts, performance, and flexibility. Whether you're working solo or with a team, Ruixen gives you a solid foundation that just works — clean code, great defaults, and the kind of polish that makes your product feel professional out of the box.

• Slarivo Card with Grid Ellipsis Pattern

  A sophisticated card component featuring a grid pattern with ellipsis dots at intersections. The pattern combines rectangular grid sections with prominent dots, creating a modern and structured visual texture that's perfect for feature sections, pricing cards, or any content requiring a premium feel. Features - Grid-based pattern with ellipsis dots at intersections - Semi-transparent grid sections for added depth - Distinct patterns for dark/light modes - Smooth gradient overlay for content legibility - Responsive design - Built with shadcn/ui theme system - Framer Motion entrance animation

• Slarivo Shuffle Grid

  An eye-catching presentation element which you can use to showcase your clients, users, features or whatever you like.

• Slarivo Sticky Scroll

  Here is Sticky Scroll component

• Slarivo Dynamic Frame Layout

  Dynamic Frame Layout

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Parallax Grid Scroll

  A grid where two columns scroll in oposite directions, giving a parallax effect.

• Slarivo Bento Gallery

  Interactive Image Bento Gallery Description: A responsive, horizontally draggable bento-style gallery designed exclusively for images. It features smooth animations powered by Framer Motion, a clean shadcn/ui aesthetic, and an elegant full-screen modal for viewing individual images.

• Slarivo lumina-interactive-list

  A sophisticated, hover-responsive showcase block designed for high-end creative portfolios and luxury brand websites. This component features a minimalist vertical navigation list (01–06) that dynamically updates a featured image preview. It balances "Quiet Luxury" typography with high-impact visuals, creating a "premium" user experience that feels both authoritative and mysterious. It is optimized for developers who want to display "Featured Creations" with an air of exclusivity and artistic depth.

• Slarivo Bento Pricing

  A clean and responsive pricing table with a bento-style layout, feature checklists, and call-to-action buttons. Ideal for SaaS apps, startups, and subscription websites, it makes plan comparison simple and visually engaging.

• Slarivo Calendar [react-aria-components]

  A calendar displays one or more date grids and allows users to select a single date. There is no standalone calendar element in HTML. <input type="date">is close, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. Calendar helps achieve accessible and international calendar components that can be styled as needed.

• Slarivo cta section with gallery

  call to action section with stagger animation and image gallery

• Slarivo Anomaly heatmap

  Anomaly heatmap

• Slarivo Integrations Section

  This component is a hero section for RUIXEN UI that introduces the product with a clear heading, supporting text, and call-to-action buttons.

• Slarivo Image Testimonial Grid

  Pinterest-style testimonial cards featuring user profile images, names, and quotes over scenic backgrounds. Ideal for showcasing customer stories, social proof, or community highlights in a visually engaging way.

• Slarivo Infinite Drag + Scroll Gallery

  This component is a vertically scrollable and infinitely draggable image gallery built for a seamless and interactive browsing experience. Users can scroll through content using the mouse wheel or drag the gallery freely in both directions. The gallery is designed to be smooth, responsive, and visually engaging, making it suitable for portfolios, showcases, or creative landing pages.

• Slarivo Circular Gallery 2

  Scroll Areas component from the 21st.dev community.

• Slarivo Blog Posts

  A responsive and adaptive grid layout component designed for displaying blog posts or articles in an elegant card format. Features a hero-style layout with one large primary card and smaller secondary cards. This component is highly flexible and can be adapted to display any type of data or cards beyond blog posts.

• Slarivo Bento Monochrome

  Here is Bento Monochrome component

• Slarivo Flip Reveal

  Here is Flip Reveal component

• Slarivo Footer

  A modern, sticky footer built with Framer Motion, featuring smooth animations, reusable components, and a responsive grid layout. Includes dynamic navigation links, social media icons with hover effects, and a gradient background with animated blobs for a visually engaging, scroll-triggered design.

• Slarivo Colorful Bento Grid

  A section with live and coming soon pages to show on your landing page, no matter if you're a SaaS (show features) or an Agency.

• Slarivo Blog Section

  A modern blog grid with lazy-loaded images, smooth hover effects, and clean typography. Showcases articles with author, date, and read-time in a polished card layout.

• Slarivo Team Showcase

  A magazine-style team section featuring a three-column staggered photo grid paired with an interactive member list. Photos default to grayscale; hovering a photo or a name entry simultaneously reveals the portrait in full color and highlights the corresponding name row. Includes social link icons (X, LinkedIn) that animate in on row hover.

• Slarivo Animated State Icons

  12 icons that continuously morph between two meaningful states — loading→checkmark, hamburger→X, play→pause, lock→unlock, copy→copied, bell→notification, heart fill/unfill, download→done, send→fly, toggle switch, eye→hidden, volume→mute. Each cycles on its own timer with spring physics and smooth transitions. Import individually and control the toggle programmatically.

• Slarivo Bento Card

  An interactive bento card with animated tabs and workspace preview.

• Slarivo Diced Hero Section

  A customizable hero section with diced image grid, gradient text, and responsive design for showcasing content. Credit: https://codepen.io/kristen17/pen/GRXgqaB https://codepen.io/t_afif/pen/LEPBYvK Credit for images is available on https://namer-ui.netlify.app/

• Slarivo Stats Section with Text

  Statistics Section with Text

• Slarivo Image loading

  A customizable image loader component that displays an animated grid overlay while the image loads. The grid cells blink initially, then fill with colors sampled from the image, expand to cover gaps, and fade out to reveal the final image with smooth transitions.

• Slarivo Analytics Bento

  Polished budget bento card with smooth interactions.

• Slarivo Emoji Picker

  A lightweight, unstyled, and composable emoji picker for React.

• Slarivo Simple UI

  This is a simple UI used for generating images and displaying the image list

• Slarivo Expanding Cards

  An interactive, responsive card grid where one card expands on hover, focus, or click to reveal its content, while the others collapse. It is fully responsive, transitioning from a vertical layout on mobile to a horizontal grid on desktops.

• Slarivo Service Card

  Service Card A visually engaging card component designed to showcase services or features. It includes a title, a call-to-action link, and a decorative image. The card features a subtle, fluid animation on hover to draw user attention.

• Slarivo Isometric Wave Grid Background

  "Retro-futuristic isometric wave grid with real-time mouse distortion physics and ambient breathing animation. Features canvas-based rendering with gradient fade effects, smooth bezier interpolation, and vignette depth overlay. Mouse-reactive repulsion field creates dynamic 3D-depth illusion with non-linear force falloff. Customizable color (RGB), speed multiplier, and grid density. Zero-dependency, single-file portable. Built for shadcn/ui with TypeScript type safety. Ideal for hero sections, sci-fi dashboards, and cyberpunk interfaces."

• Slarivo News Cards

  This is a full-featured, interactive News Feed Component with expandable cards, animated transitions, bookmark toggling, and live content rendering. It supports a three-tier visual priority system via status bars, uses LayoutGroup and AnimatePresence for shared layout animations, and conditionally disables motion for accessibility. Each card opens into a full-screen modal with detailed content, image overlays, and contextual metadata. Perfect for AI news agents, editorial dashboards, political data platforms, or any high-fidelity news experience requiring real-time interactivity and immersive storytelling.

• Slarivo Cards

  Here is Blog Card Component

• Slarivo How We Do It - Process Overview

  How We Do It – Agile-driven process overview. Displays each stage from ideation to launch using bold cards and icons. Each block outlines a key phase (e.g., Brainstorming, QA, Release). Ideal for explaining workflow clearly and visually.

• Slarivo React Tailwind Image Gallery

  A responsive React component for displaying an image gallery with hover-zoom effects, customizable grid spans, and a fullscreen modal lightbox—built with Tailwind CSS.

• Slarivo Services

  I crafted this services section to clearly showcase what the business offers, making it easy for visitors to understand our value at a glance.

• Slarivo Feature Modern

  Here is Feature component

• Slarivo Clip Path Links

  The LinkBox component displays either an icon or image inside a styled grid item. On hover, it animates a dark overlay from the nearest edge using clip-path with Framer Motion. It's used for linking to external platforms and opens the target URL in a new tab

• Slarivo Icons

  Extension of Shadcn icons with Prism UI logo, chevron right, book, and component icons.

• Slarivo Testimonial

  Animated Testimonial Grid This component displays a visually engaging testimonial section with a dynamic, floating grid of images in the background. It is designed to be highly reusable, allowing you to easily customize the text, images, and call-to-action through props.

• Slarivo Integration Showcase

  Integration Showcase This component displays a title, subtitle, an illustration, and a responsive grid of integrations. It's designed to be easily populated with your own data.

• Slarivo XScroll

  Responsive Horizontal Scroll Area

• Slarivo Gallery Grid with Lightbox

  Filterable image gallery with animated lightbox and navigation

• Slarivo Pricing

  A simple minimal grid pricing block

• Slarivo Ai Models Preview

  Ai Models Preview with dialog details smooth sleek animation designed block with props

• Slarivo Bento Monochrome 1

  Here is Bento Monochrome 1 componehnt

• Slarivo Interactive Thermodynamic Grid

  Cursors component from the 21st.dev community.

• Slarivo Footer

  A clean and structured footer with social links, quick navigation groups, and legal info. Designed with responsive grids and subtle styling to keep everything clear and accessible.

• Slarivo 3D Marquee

  A 3D perspective marquee that displays a grid of images with continuous scrolling animation.

• Slarivo EmojiPicker

  A customizable emoji picker for React, built with shadcn/ui. Features a searchable, scrollable grid of emojis organized by categories, skin tone support, and device-aware rendering. Supports onSelect, className, and disabled props for seamless integration.

• Slarivo Music Portfolio

  A sophisticated React component for displaying music portfolios, discographies, or creative project collections with stunning interactive effects. Features include text scrambling animations on hover using GSAP, dynamic background image transitions, automatic idle animations, and full support for system dark/light themes. Perfect for musicians, record labels, music producers, or creative agencies looking to showcase their work in an engaging, modern interface. The component offers a minimalist grid layout that transforms into an immersive visual experience through smooth animations and hover interactions

• Slarivo Feature Grid

  Feature Grid A responsive grid component designed to showcase a list of features or services. Each item in the grid consists of an image, a title, and a description, presented in a clean, card-like format. It's fully responsive, theme-adaptive, and includes a subtle animation on hover to enhance user interaction.

• Slarivo Animated Tiles

  Animated Tiles with image prop

• Slarivo CalendarLume

  The CalendarLume component is a modern, three-level date picker that allows users to navigate seamlessly from years to months and then down to individual days. Unlike a standard calendar, it begins with a scrollable year grid ranging from 1900 to 2100, letting users quickly select a year. Once a year is chosen, the component transitions smoothly into a month grid, and selecting a month reveals the familiar day calendar. Breadcrumb-style buttons for Year and Month are positioned in the header, making it easy to jump directly between levels without needing back navigation. With a clean layout, subtle animations, and intuitive flow, CalendarLume offers a clear and user-friendly way to explore dates across large ranges of time.

• Slarivo Image Mask

  Here is image mask component

• Slarivo Animated 3D Card

  This is animated 3D card

• Slarivo Card

  Cashback Partners Card This component displays a card with a title and a grid of partner logos, names, and cashback percentages. It's designed to be responsive and theme-aware, adapting to both light and dark modes.

• Slarivo Profile Selector

  Profile Selector Component This component, named ProfileSelector, displays a grid of user profiles for selection. It's built to be data-driven, accepting an array of profiles and handler functions via props, making it extremely reusable for any application requiring a "who's watching?" style interface.

• Slarivo Product Card

  Product Card A visually polished ProductCard component designed to showcase products in a grid layout. It features a clean design, accepts various product details via props for maximum reusability, and includes a subtle hover animation. The accompanying demo showcases a responsive grid with a staggered entrance animation for a modern user experience.

• Slarivo Dark Grid

  Here is Dark Grid component

• Slarivo Vignette Grid Background

  Renders a full-screen grid background with an optional radial vignette effect, customizable in size, position, and intensity.

• Slarivo Vignette Grid Background

  Renders a full-screen grid background with an optional radial vignette effect, customizable in size, position, and intensity.

• Slarivo Swapy Draggable Card

  A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.

• Slarivo Loader

  Block Grid Loader – Reflective Animation Minimal loader animation using stacked green squares with a smooth gradient reflection effect. Perfect for modern dashboards, portfolio sites, or data-driven apps to provide a clean and futuristic loading experience.

• Slarivo Sortable

  A drag and drop sortable component for reordering items.

• Slarivo Feature 73

  Feature cards in grid layout with Featured card at the top.

• Slarivo Bento Features

  Here is Bento Features componhent

• Slarivo Heatmaps

  here is interactive heatmaps

• Slarivo timeline-animation

  A timeline animation using Framer Motion that animates items one by one as you reach each specific section

• Slarivo HolographicInterface

  A futuristic Bento grid with 3D tilt, spotlight tracking, and animated aurora background. Each card responds to mouse movement with perspective transforms and radial glow effects. Ideal for immersive dashboards, sci-fi control panels, or interactive UI showcases.

• Slarivo Vector Pad

  Interactive radar pad with smooth-tracking crosshairs, lock states, and real-time coordinates.

• Slarivo Interactive Grid

  Interactive Grid with props

• Slarivo Executive Impact Carousel

  A performance-optimized carousel designed to showcase high-stakes technical solutions. Features a dual-state interaction model (scroll-hover) that highlights system depth and "Smart Work" logic.

• Slarivo Team Section

  Team section showcasing staff members with multiple scroll animations.

• Slarivo Masonry Grid

  Masonry Grid A responsive, animated, and customizable masonry grid layout component, perfect for displaying items of varying heights in a visually appealing way.

• Slarivo Fluid Expanding Grid

  A fluid grid that expands items with smooth motion animations.

• Slarivo Block Game

  Block Game

• Slarivo Service Grid

  ServiceGrid A responsive grid component designed to showcase a list of services or features. Each item in the grid consists of an image and a title. The component features a staggered fade-in animation for the grid items and a subtle hover effect, all while being fully theme-adaptive using shadcn/ui CSS variables.

• Slarivo Hover Testimonial Card

  A sophisticated testimonial card component featuring smooth hover animations, supporter avatars grid, and elegant typography. Perfect for showcasing customer feedback with visual impact and professional polish.

• Slarivo Cards Grid

  Resource Cards Grid A responsive grid of cards, perfect for displaying links to key resource sections like documentation, contracts, or policies. Each card features an icon, title, update timestamp, and a clear call-to-action arrow. The grid uses framer-motion for smooth, staggered loading animations and hover effects.

• Slarivo Cards

  Hover Reveal Cards Description: A responsive grid of cards that highlights the card currently being hovered or focused. The other cards subtly blur and fade into the background, creating a smooth and engaging user experience. The component is fully accessible via keyboard navigation.

• Slarivo Suffle Hero

  ShuffleHero: Dynamic Image Grid with Engaging Headline Elevate your landing pages with ShuffleHero, a captivating React component that combines a compelling headline and call to action with a mesmerizing, auto-shuffling image grid. This component is perfect for drawing immediate attention and showcasing visual content in a dynamic and unique way. Features Dynamic Image Grid: A 4x4 grid of images that automatically shuffles and re-arranges itself every three seconds. This subtle, continuous animation creates an engaging visual effect without being distracting. Smooth Transitions: Powered by Framer Motion, the image shuffling includes smooth, spring-like transitions, ensuring a polished and professional feel as the images re-position. Prominent Call to Action: The hero section includes a clear headline, a supportive paragraph, and a stylish button, designed to immediately convey your message and encourage user interaction. Responsive Layout: The component adapts gracefully to different screen sizes, displaying the text and image grid effectively on both mobile and desktop devices. How it Works ShuffleHero uses a combination of React's state management and Framer Motion for its animations: Image Shuffling Logic: A shuffle utility function randomly reorders the array of image data. useState and useEffect: These React hooks manage the state of the image grid, triggering re-renders and the shuffling animation at regular intervals. motion.div with layout: Framer Motion's motion.div and the layout prop are crucial for animating the position changes of the grid items when the squares state updates, creating the smooth shuffle effect. This component is an excellent choice for websites looking to make a strong visual impact, such as portfolios, creative agencies, or product landing pages that benefit from showcasing a variety of images.

• Slarivo Feature Section

  Feature Grid A responsive grid layout designed to showcase different product features, use cases, or categories. It includes a header with a title and illustration, a grid of categorized items with icons, and a call-to-action button. The component is animated using framer-motion to engage the user as they scroll.

• Slarivo ScrollTiltedGrid

  An editorial two-column image grid where tiles rise from below tilted forward, snap into focus mid-viewport, then tilt back as they exit, driven by scroll progress via Framer Motion, with an optional infinite-loop mode.

• Slarivo counter loader

  A visually engaging counter animation component using CSS grid and keyframe animations.

• Slarivo Cybernetic Team Showcase

  creative and interactive "Cybernetic Team Showcase" section. It displays your team members in a futuristic grid. When you hover over a card, a "cybernetic" scanning effect animates over their photo, and their social links appear with a glitchy animation.

• Slarivo BentoItem

  A React UI component that adds a 3D tilt-and-scale hover effect to any child element, perfect for building interactive bento-style grids.

• Slarivo Mentor Section

  Mentor Section A responsive and animated component to display a filterable grid of mentors. It features smooth layout animations for filtering and subtle hover effects on each card, built with Framer Motion.

• Slarivo StackFlow Integrator

  Glassmorphic, diamond-layout tech-stack showcase with subtle hover motion—drop-in, dual-mode, zero config.

• Slarivo Data Card Display

  This React component efficiently displays data in a visually appealing and responsive grid of cards. It's designed to present key metrics or information concisely, making it ideal for dashboards or summary views. The component leverages the shadcn/ui library for styling and accessibility, ensuring a consistent and professional look and feel across light and dark themes. Each card displays a title, value, description, and optionally an icon and an action button. The component handles various scenarios, including cases with no data, and provides clear ARIA attributes for accessibility. The `CardDisplay` component accepts an array of `CardDisplayItem` objects, each defining the content of a single card. Each `CardDisplayItem` includes properties for `id`, `title`, `value`, `description`, an optional `icon` (which can be a React component or function), an optional `actionLabel`, a boolean `isDisabled` flag for the action button, and an `onActionClick` callback function. The component dynamically renders the cards in a responsive grid layout, adjusting the number of columns based on the screen size. It uses the `cn` utility function (likely from shadcn/ui) to efficiently manage CSS classes. For example, it can be used to display key performance indicators (KPIs) on a dashboard, showing metrics like active users, revenue, or task completion rates. Each card could link to a more detailed view using the optional action button. The component's use of ARIA attributes ensures it is accessible to users of assistive technologies. The component gracefully handles the case where no data is provided, displaying a user-friendly message. This allows for flexibility and robustness in different application contexts.

• Slarivo Masonry Grid with Scroll Animation

  Masonry Grid with Scroll Animation This component arranges items in a responsive masonry layout. As the user scrolls, each item animates into view with a subtle slide-and-rotate effect, creating an engaging visual experience.

• Slarivo Pixel Logo Grid

  A "trusted by" showcase with character. 14 brand logos arranged in a 5-column grid with a centered headline. Each card runs a canvas-driven pixel shimmer in the brand's actual signature color on hover , Slack purple, Stripe violet, Spotify green. Muted at rest, full color on touch. Tailwind 4 + shadcn tokens, light & dark mode out of the box.

• Slarivo Gallery Grid Skeleton

  A 3-column grid of square tiles used as a loading placeholder for an image gallery.

• Slarivo Kinetic Scroll Gallery

  A responsive image grid that dynamically skews each photo based on your scroll velocity, creating a tactile, kinetic distortion effect powered by Framer Motion.

• Slarivo Testimonial

  Testimonial Section This component renders a title and a grid of testimonial cards. It's designed to be highly reusable, accepting an array of testimonial objects to dynamically generate the content. It supports two types of cards: a standard user testimonial with an avatar and a featured quote card.

• Slarivo Bento Pricing Component

  A responsive pricing section displaying multiple subscription plans in a bento-style grid layout, featuring a monthly/yearly billing toggle, highlighted "most popular" plan, and custom grid spanning for cards.

• Slarivo Generative Art Gallery

  Let's build something different. Here is a creative and interactive "Generative Art Gallery" component. It showcases a collection of items in a clean grid. When you hover over a card, a unique, generative art pattern animates in the background, and the card tilts with a subtle 3D effect.

• Slarivo Bioluminescent Grid

  An interactive grid layout where items emit a futuristic, organic glow and an animated border that tracks the user's mouse movement.

• Slarivo Gradients

  here is gradients component

• Slarivo Animated Grid

  The component features a customizable grid with color interpolation and staggered border-radius animations. You can adjust the grid size, cell dimensions, and animation timing through props, making it flexible for different use cases.

• Slarivo Calendar Planner

  The CalendarPlanner component is a modern, monochrome-styled calendar built for clarity and utility. Designed to display two months side by side, it offers a clean black-and-white aesthetic that adapts seamlessly to both dark and light themes. Unlike traditional calendars, CalendarPlanner provides an additional layer of context by allowing short notes or event details to appear directly under each date, making it ideal for planning schedules, tracking tasks, or highlighting availability. With its toggleable year-grid view, users can easily jump across years without endless navigation. Minimal yet functional, CalendarPlanner is perfect for dashboards, booking systems, or productivity tools where both elegance and information density are essential.

• Slarivo Job Slider

  The JobSlider component is a modern, responsive carousel designed to showcase trending AI and Computer Vision job roles in an interactive and visually appealing way. Built with Next.js, Shadcn UI, and Tailwind CSS, it adapts seamlessly to both light and dark themes, ensuring a consistent user experience across devices and preferences. The component displays a two-column grid of job cards inside a smooth sliding panel, with intuitive navigation arrows for exploring multiple slides. Each card highlights the role name and the number of available jobs, making it ideal for career portals, hiring platforms, or AI-focused job boards. With its minimal code, smooth transitions, and theme-aware design, the JobSlider enhances both usability and aesthetics for modern web applications.

• Slarivo Heat Map

  Here is Heat Map small component

• Slarivo Pixel Image

  Here is Pixel Image components

• Slarivo Ripple Grid

  Ripple Grid

• Slarivo Resizable

  Accessible resizable panel groups and layouts with keyboard support.

• Slarivo Pixel Grid

  Pixel Grid with props

• Slarivo Splitter

  Here is Splitter component

• Slarivo HUD Area Chart

  This is a stylized HUD-style area chart component with an SVG-based sci-fi frame, interactive data hover, and dynamic theming support. It overlays a custom dot-matrix grid, uses a clipped polygon container to shape the graph, and reacts to pointer movement by displaying real-time data feedback in the corner. Perfect for futuristic dashboards, HUDs, gaming overlays, trading UIs, or any app that needs immersive data visualization with retro-tech or cyberpunk aesthetics.

• Slarivo Resizable

  Accessible resizable panel groups and layouts with keyboard support.

• Slarivo Resizable

  Accessible resizable panel groups and layouts with keyboard support.

• Slarivo Collapsible

  A minimal show/hide primitive built on Base UI's Collapsible. A trigger toggles a height-animated panel — perfect for read-more text, FAQ rows, nested groups and expandable log output. Controlled or uncontrolled via open / defaultOpen, with data-panel-open styling hooks. Ships Collapsible, CollapsibleTrigger and CollapsiblePanel (also exported as CollapsibleContent).

• Slarivo Disclosure

  A collapsible section with a header trigger and animated panel content.

• Slarivo AI Generate Overlay

  Animated AI-generation overlay that blurs a source image under a shimmering dot grid and a pulsing "Generating…" pill before fading in a freshly generated image.

• Slarivo Vector Tilt Scene

  A spring-driven 3D tilt glass panel that follows the cursor, for hero cards and feature highlights.

• Slarivo Glass Refraction Panel

  A physically-inspired glass panel: edge refraction, chromatic dispersion and a moving specular highlight that tracks the pointer.

• Slarivo Spinner Pixel Grid

  An animated pixel-grid loading spinner with 20+ motion variants, square or circle dots, optional neon glow and rainbow hue cycling.

• Slarivo Serpent Zip

  An animated dot-matrix loading indicator where a stepped snake traces a serpentine zigzag path with a soft trailing tail across a triangle-shaped grid.

• Slarivo Dot Matrix Loader

  A grid of dots that animate with ripple, wave, or rain patterns to indicate a loading state.

• Slarivo Logo Cloud Grid

  A responsive grid of company logos that turns from grayscale to full color and shows a name tooltip on hover.

• Slarivo Flux Columns

  Animated dot-matrix loader where alternating columns of dots snake up and down in opposite directions.

• Slarivo Popover

  An accessible popover panel anchored to a trigger button, with title, description, and optional compact tooltip styling, built on Base UI.

• Slarivo Logo Cloud

  Here is Logo Cloud Blocks

• Slarivo Sortable

  A drag-and-drop sortable component designed for seamless item organization across customizable columns.

• Slarivo Navbar with Dropdowns

  A classic shadcn style navbar with dropdowns and mobile slide in menu.

• Slarivo AI prompt Box

  AI prompt Box, AI chat Input, AI chat box, with search, with think, with thinking, with canvas, with audio recording

• Slarivo Header 2

  Elegant responsive header with scroll-based styling, mobile drawer menu, and smooth transitions.

• Slarivo Navbar Menu

  A navbar menu that animates its children on hover, makes a beautiful bignav

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Header 3

  Feature-rich responsive header with scroll blur, animated mobile drawer, and nested navigation menus.

• Slarivo Interactive Image Accordion

  Interactive Image Accordion

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo Carousel

  A flexible and easy-to-use carousel with customizable navigation and indicators.

• Slarivo Floating Icons Hero Section

  Playful and tech-savvy. Centered bold headline with subtext, surrounded by floating soft-shadowed app icons. Creates a futuristic, ecosystem vibe. Ideal for SaaS, tech platforms, or integration-focused products

• Slarivo Interactive Selector

  A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Minimalist Hero

  Minimalist Hero Section – "Less is More" Bold visual storytelling. High-contrast monochrome portrait with a vibrant yellow circle creates strong focus. Typography is large, minimal, and clear. Ideal for brands emphasizing simplicity, elegance, or personal identity.

• Slarivo Drawer

  A flexible and beautifully styled Drawer component built using Vaul (Radix-based) primitives. It supports all drawer directions (top, bottom, left, right) with smooth animations, backdrop blur, and slots like header, body, and footer—making it ideal for responsive menus, sidebars, or modal-like panels in modern React apps.

• Slarivo Testimonials

  Here is Testimonials components

• Slarivo Sterling Gate: Kinetic Navigation

  An authoritative full-screen navigation component designed for high-end digital experiences. This menu utilizes a "Reveal" logic—where the interface transitions from a focused view to an immersive, typography-heavy navigation layer. Inspired by the "Silver" Paya and "Jalchar" (Water) elements, the transitions are fluid and heavy-weighted, providing a tactile sense of depth. It features interactive hover states that "ripple" across the menu items, perfect for agencies and luxury brands that prioritize a "Quiet Luxury" aesthetic.

• Slarivo Team

  Here is Team component

• Slarivo Footer

  Here is Footer component

• Slarivo FlickeringGridHero

  Inspired by magic ui

• Slarivo 3D Folder

  A beautifully crafted folder with back panel, tab, front panel, and a subtle shine effect that opens smoothly on hover

• Slarivo Arc Gallery Hero Component

  "Arc Gallery - Interactive Image Showcase": A stunning interactive image gallery featuring a curved arc layout with smooth animations and responsive design

• Slarivo Interactive Globe

  Interactive 3D rotating globe built with pure canvas — zero dependencies. 1,200 Fibonacci-distributed dots form the sphere, glowing arcs connect city markers with traveling light particles, pulsing rings mark locations with labels. Drag to rotate with pointer capture, auto-rotates when idle. Configurable markers, connections, colors, and speed. The demo mirrors the Spline robot layout — dark card, left copy, right interactive 3D.

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo Fluid menu

  A fluid circular menu that elegantly expands to reveal navigation items with smooth icon transitions

• Slarivo Dock

  This Dock component is a modern, glassmorphic navigation bar inspired by the elegance of macOS but with a unique twist. Instead of sitting flat, the dock is displayed with a slight 3D arc effect using perspective transforms, which makes the layout feel more dynamic and futuristic. Each icon is wrapped with shadcn/ui Buttons and Tooltips for accessibility and consistency, while Framer Motion adds natural hover animations. When you hover over an item, the icon subtly tilts, scales up, and gains a glowing border ring, creating a magnetic feel that draws the eye. Clicking an icon highlights it with a small glowing dot beneath, serving as a minimal but effective active state indicator. The combination of tilt, glow, blur, and arc design makes this component stand out as both functional and visually engaging, perfect for dashboards, apps, or landing pages where you want a unique, premium navigation experience.

• Slarivo Image Sphere

  A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-rotate, momentum physics, auto-rotation, and modal image viewing.

• Slarivo Kanban

  A drag-and-drop kanban component designed for seamless item organization across customizable columns.

• Slarivo 3D Folder

  A reusable 3D Folder component

• Slarivo Combined Featured Section

  The combined section component serves as a spotlight area to showcase the core strengths or highlights of our platform. It brings together key offerings

• Slarivo Bottom Nav Bar

  A highly animated, touch-friendly mobile/navigation bar component for dashboard or finance applications. Built with Next.js, TypeScript, TailwindCSS v4, and Framer Motion, it delivers a visually appealing pill-style layout with seamless in-out label animation for active tabs. Each tab displays its icon and label only when active, with transition effects fully powered by responsive Tailwind utilities and Framer Motion—no inline styles. The component supports shadcn/ui theming, integrates accessibility best practices, and offers a sticky bottom mode via a single prop (stickyBottom). Designed and coded to meet 21st.dev's UI/UX and code standards, it’s ready for production integration, with dark theme support and easy configuration for icon and label sets.

• Slarivo flow-gradient-heroSection

  An authoritative UI component featuring fluid liquid gradients and kinetic typography. Designed for premium dark-mode experiences, it combines a sophisticated grainy texture with bold messaging that commands attention. This section captures a modern, leadership-focused aesthetic, ideal for high-stakes tech brands or creative agencies looking for a "smart," professional edge.

• Slarivo In view

  Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo LumaBar

  This is a futuristic floating navigation bar designed for modern web and mobile interfaces. It features a glassmorphism pill-shaped container, with a glowing gradient indicator behind the active icon. Icons scale up smoothly when active, and tooltips appear on hover to show their labels. The component is fully responsive, visually striking, and provides a dynamic, interactive navigation experience.

• Slarivo Glass Calendar

  A sleek, animated calendar component with a glassmorphism effect. It's interactive, theme-adaptive, and now features a smooth horizontal scroll to navigate the days of the month.

• Slarivo Kanban

  here is interactive kanban board

• Slarivo Modern Hero Section

  Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.

• Slarivo Interactive Accordion

  A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.

• Slarivo Emoji Picker

  A lightweight, unstyled, and composable emoji picker for React.

• Slarivo Radial Menu

  A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction.

• Slarivo Spotlight Card

  A modern, interactive card component featuring a mouse-following gradient spotlight effect. Perfect for highlighting features, bento grids, and dark-themed interfaces.

• Slarivo Stats

  Here is Stats component

• Slarivo Stats

  Here is Stats component

• Slarivo Funnel Chart

  Here is Funnel Chart component

• Slarivo File Upload

  Here is File Upload component

• Slarivo Dot Flow

  here is Dot Flow component

• Slarivo Stacked Panels Cursor intereactive component

  Interactive 3D panel stack built with Framer Motion springs. Mouse position drives per-panel wave lift and scale via a Gaussian falloff curve.

• Slarivo Circle Menu

  A circular navigation menu that expands items in a circle around a central button with smooth animations and hover effects.

• Slarivo Dashboard Sidebar

  A premium, dual-theme dashboard & sidebar shell featuring the Charcoal Ink (dark) and Alabaster (light) architectural palettes. Includes collapsible multi-tiered navigation, workspace content frames, and micro-contrast layout spacing. Fully responsive scaffolding for SaaS or AI p

• Slarivo Accordion

  Neobrutalism-styled accordion component.

• Slarivo Cyber Matrix Hero

  as you move your mouse across the screen, the grid of characters will react to your cursor. The characters near your mouse will glow brighter, change color, and scale up, creating a dynamic "spotlight" or "ripple" effect. This adds the continuous, engaging interactivity you were looking for.

• Slarivo Material UI Dropdown Menu

  A highly sophisticated Material Design 3 Dropdown Menu built on top of shadcn/ui and Radix UI. Engineered with a custom Dual-Physics Ripple Engine via the Web Animations API for true geometric haptic-like feedback. Features a seamless drill-down navigation system with smooth, dynamic height adjustments using ResizeObserver. Includes SSR-compatible cinematic sweep & staggered entry animations driven by local CSS variables. Fully WCAG compliant, keyboard navigable, and perfectly bundled as a zero-dependency, single-file portable component.

• Slarivo Team

  Team Sections component from the 21st.dev community.

• Slarivo dropdown 01

  A reusable component for dropdown

• Slarivo Scroller

  Display an overflowing list of items.

• Slarivo Modern animated multi words

  Modern animated multi words

• Slarivo Accordion 04

  Accordion with bacgkround cross

• Slarivo Vertical accordion

  here is interactive vertical accordion

• Slarivo Interactive Dots

  Interactive Dots with props

• Slarivo Ai chat input

  A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spring-physics transitions (cubic-bezier engine) for height scaling, state-morphing typography, an integ

• Slarivo Rounded Box

  Here is Rounded Box component

• Slarivo Interfaces Button

  A versatile button component from Interfaces DS with six visual variants and six size combinations per variant.

• Slarivo Grid Hero Animated

  Grid Hero Animated

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Infinite scroll container

  to used to manage large list and to automatically trigger next request when reaching the bottom of page #### Props - `items`: Array of data - `isPending`: Boolean for loading state - `itemsCount`: Total number of items available on the server ("COUNT" aggregation function in sql) - `loadMore`: Function to call when more items need to be loaded - `className`: Optional CSS class names - `children`: React children elements

• Slarivo Ruixen Footer 03

  This pricing component showcases three tailored plans from the Ruixen UI library, designed for different user needs—from freelancers to growing teams. Each plan highlights key AI-driven features like automated content workflows, team collaboration, and brand tone training. With clear pricing, feature lists, and call-to-action buttons, it's built for conversion and clarity.

• Slarivo 8bit FAQ 2 — Card Grid

  An 8-bit styled FAQ block: a responsive two-column grid of retro card tiles, each pairing a question with a short answer. Built on the 8bit card primitive with the Press Start 2P pixel font.

• Slarivo 8bit Team Grid

  An 8-bit styled team grid block. Responsive card grid of team members with pixel avatars, name, role, and an optional corner badge. Built from retro avatar, badge, and card primitives.

• Slarivo Logo Cloud

  A responsive brand logo grid for showing partner, customer, or technology logos as social proof.

• Slarivo Staggered Testimonials Grid

  Staggered grid of testimonial cards with quote icons, avatars, and decorative corner marks.

• Slarivo React Aria Emoji Picker

  Here is React Aria Emoji Picker component

• Slarivo Info Cards Table

  This component is a clean, responsive card layout designed to showcase different sections in a structured way. Each card is styled with subtle borders (border border-gray-200 dark:border-gray-800) to adapt across light and dark themes, giving it a modern and minimal look. The layout is perfect for presenting features, categories, or highlights side by side, making it easy for users to scan and interact with the content.

• Slarivo Card

  Availability Slot Card This component displays a card with a title and a grid of selectable date slots. It is fully responsive and uses framer-motion for smooth animations.

• Slarivo Integrations Logos Section

  A centered marketing section that displays a grid of integration brand logos with a heading and a "more integrations" button.

• Slarivo Integrations Card Grid

  A marketing section that showcases third-party integrations as a responsive grid of logo cards with title and description.

• Slarivo Interactive Image Selector

  An animated image gallery grid with a toggle selection mode for selecting, sharing, and deleting multiple photos.

• Slarivo Features Grid

  A responsive grid of product feature cards with icons, titles and descriptions for landing page sections.

• Slarivo Icon Grid Button

  The Button with Embedded Icon Grid is a shadcn/ui component designed for compact action menus or mini pickers, like emoji selectors or quick actions. When clicked, the button opens a grid of icons, each representing a distinct action that can be executed individually. The component supports configurable sizes (sm, md, lg) and ensures the grid closes automatically when clicking outside, maintaining a clean interface. Its design leverages shadcn/ui primitives for accessibility and consistent styling, making it highly reusable, visually appealing, and practical for dashboards, messaging interfaces, or any interface requiring quick, icon-based actions.

• Slarivo Input Bar

  Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, etc. Self-contained port from 21st.dev Agent Elements.

• Slarivo Infinite List

  A bias-based infinite scroll wrapper and hook that manages pagination and masks child items for progressive "load more" lists.

• Slarivo Testimonial Section

  A responsive bento-grid testimonial section with animated quote cards showing customer names, roles, and avatars.

• Slarivo CSV / TSV Viewer

  A CSV and TSV viewer with parsing, file upload, search, zoom, and theme-aware grid rendering powered by Glide Data Grid.

• Slarivo Cinematic Logo Cloud

  A logo cloud that reveals brand logos with a staggered blur-fade entrance, with grid and marquee layout variants.

• Slarivo Feature Bento

  A responsive bento-grid feature section with a hero card, stat tiles, and CTA blocks for product landing pages.

• Slarivo Corporate Clip Path Gallery

  An image gallery that masks photos into corporate notched card shapes using SVG clipPath with a hover zoom effect.

• Slarivo 3D Parallax Unfurling Gallery

  A cinematic, scroll-driven image grid gallery with deep 3D matrix rotations, smooth multi-column parallax translation offsets, and responsive fluid boundaries for landing showcases

• Slarivo BeUI Bouncy Accordion

  Accordions component from the 21st.dev community.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• Slarivo TerminalBentoGrid

  A retro-themed Bento grid styled like a classic CRT terminal. Features scanline overlays, blinking cursors, and green phosphor glow. Ideal for dashboards, status panels, or nostalgic UI layouts. Fully responsive and hover-animated using pure CSS.

• Slarivo featuresgrid

  Features component from the 21st.dev community.

• Slarivo Integrations Section

  Marketing section that showcases app integrations as a grid of branded logo cards next to a headline and call-to-action.

• Slarivo Stat Cards Skeleton

  A responsive grid of KPI stat card placeholders with label, value, and trend line skeletons for loading states.

• Slarivo Filter Grid

  An accessible, animated grid that filters its items with segmented radio chips, showing live per-filter counts and smoothly reflowing cells as the selection changes.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo Animated Footer

  Responsive footer component with cool animations

• Slarivo UltraQualitySpreadsheet

  A never-before-seen, ultra-rich React spreadsheet component built with Tailwind CSS. Supports editable cells, sticky headers, keyboard navigation, basic formulas (=SUM(range)), copy/paste, and smooth scrolling for endless grids.

• Slarivo BeUI Tilt Card

  Tables component from the 21st.dev community.

• Slarivo BeUI Expandable Tabs

  Navigation Menus component from the 21st.dev community.

• Slarivo Infinite Grid

  A draggable, infinitely-scrolling grid canvas that renders custom items in an expanding spiral with momentum-based panning and inertia.

• Slarivo Integrations Grid

  A split section with a heading and a masked grid of scattered rounded cards displaying integration logos.

• Slarivo Expanded Map

  An interactive location card with a subtle 3D tilt that expands on click to reveal real map tiles, coordinates, and a location marker.

• Slarivo Magnet Lines

  An interactive grid of lines that rotate to point toward the cursor, creating a magnetic field effect.

• Slarivo Logo Cloud 2

  A marketing logo cloud section that displays customer or partner brand logos in a responsive grid with a hover-reveal "Meet Our Customers" link.

• Slarivo AI Suggested Actions

  Responsive grid of suggestion buttons that display quick chat prompts users can click to start or steer a conversation.

• Slarivo Item

  Here is Item component

• Slarivo QR Code

  Here is QR Code component

• Slarivo QR Code

  Here is QR Code component

• Slarivo Skeleton

  Grids & Bento component from the 21st.dev community.

• Slarivo Skeleton

  Grids & Bento component from the 21st.dev community.

• Slarivo QR Code

  QR code generator with rounded finder patterns and dot-style data modules.

• Slarivo Card

  Flexible container component for grouping related content and actions.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo HeroUI Calendar

  HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

• Slarivo Range Calendar

  A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges, read-only and disabled states, per-day indicators, and multiple visible months. Month names are rendered in English.

• Slarivo Astryx Aspect Ratio

  Maintains a fixed width-to-height ratio for its children, regardless of screen size, from Meta's Astryx design system. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions. Supports rectangle and ellipse shapes.

• Slarivo Records Table

  A compact CRM-style data table with colored tag chips, a sticky first column, row selection, sortable columns, connection-strength indicators, and a calculations footer.

• Slarivo Constellation Grid

  Interactive canvas-based kinetic mesh grid with Hooke's Law physical spring-mass physics, cursor velocity shockwaves, spatial radar readouts, and theme detection.

• Slarivo Aurora Credit Card Bento

  An interactive bento card carrying an animated credit card: colour bands, caustics and grain flow across the face, and the chip sits where ISO 7816 puts it on a real card.

• Slarivo Bento Dashboard

  Neo‑brutalist animated dashboard showcasing system load, weekly traffic, health radar, and interactive metrics using React, Tailwind, and Framer Motion.

• Slarivo Drawer

  Display content in a separate view from the existing context.

• Slarivo Splitter

  A Splitter component for arranging mixed content in responsive modular layouts, featuring resizable, panel, split, drag and drop.

• Slarivo Splitter

  A Splitter component for arranging mixed content in responsive modular layouts, featuring resizable, panel, split, layout.

• Slarivo Resizable

  Accessible resizable panel groups and layouts with keyboard support.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring floating, panel, audio player, audio-player.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring floating, panel, note, search.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring panel, floating, settings, toggle.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring floating, panel, task, drag and drop.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring chat, floating, panel, message.

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection,…

• Slarivo HeroUI Table

  HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition…

• Slarivo Frame

  A framed container for grouping related information with header, panels, and footer sections.

• Slarivo Voxel Topography Grid

  An interactive, high-performance 3D canvas topography grid featuring dynamic wave math, smooth cursor physics, elevation shading, and zero-allocation frame optimization.

• Slarivo Voxel Matrix

  Dynamic 3D isometric heightmap grid oscillating with sine wave harmonics and interactive smooth mouse elevation fields.

• Slarivo PillarGrid

  Interactive 3D isometric hexagonal pillar grid rendered on HTML5 Canvas.

• Slarivo Stats Bento

  A responsive bento-grid stats section that highlights key metrics like market share, growth, awards, and ratings in mixed-size cards.

• Slarivo About Bento

  A responsive bento-grid about section showcasing company impact stats, growth metrics, and a community call-to-action.

• Slarivo Condition Grid

  A responsive projects showcase grid with alternating column spans, animated cards, and overlaid title and link badges.

• Slarivo Switchboard Card

  A card with an animated light-grid illustration that renders random or patterned glowing dots above a title and subtitle.

• Slarivo Members Grid Block

  A team members section with a header, search and invite actions, and a responsive grid of member avatars with names and roles.

• Slarivo Hover events only

  The naive approach: lighting grid cells on pointerenter, which skips cells on a fast cursor. The counter-example to swept collision detection in Motion for React.

• Slarivo Multidimensional reorder

  An example of creating a multidimensional drag-to-reorder grid with Reorder in Motion for React.

• Slarivo Bobble hover

  A 3x3 grid of tiles that bobble with a spring when hovered, with the bounce scaled to how fast the pointer was moving, using Motion for React.

• Slarivo Drawer (Base UI)

  A panel that slides in from any edge of the screen with swipe-to-dismiss gestures, built on Base UI primitives.

• Slarivo Quick Actions Grid Drawer

  A bottom drawer that reveals a 4-column grid of quick action buttons (edit, share, download, delete and more) with a destructive variant and a cancel footer.

• Slarivo Weekly Availability Checkbox Grid

  A weekly availability grid with a checkbox for each day and time slot that tracks how many slots are selected.

• Slarivo Bjork Tabs

  A styled tabbed panel switcher for toggling between two or more related content views in the same space.

• Slarivo Draggable Widget Grid

  A draggable and rearrangeable widget grid for building customizable dashboards. Move widgets freely while the layout automatically adapts around them.

• Slarivo Cyber Matrix Retro Grid

  3D perspective-projected retro wireframe synth terrain with continuous horizon acceleration, custom angles, and speed warping.

• Slarivo Information Drawer

  Team profile grid that opens a full-height detail drawer per member. GSAP-tweened slide + staged bio fade-in, native scroll lock, reduced-motion fallback.

• Slarivo FAQ Snapshot Grid

  A two-column FAQ grid that displays numbered question-and-answer cards with a call-to-action button below, for product or pricing pages.

• Slarivo Feature Overview Bento

  A bento-grid feature section that mixes a customer quote with avatar, two metric tiles, a product-update card with an action button, and a checklist of steps, all laid out on a hairline grid.

• Slarivo Gallery Grid with Captions

  A two-column responsive image gallery section where each tile displays a title and subtitle caption beneath a gradient thumbnail, used for showcasing product screens or portfolio work.

• Slarivo Bento Grid Hero

  A three-tile asymmetric bento grid section with a wide hero tile featuring a headline and CTA button above two feature tiles with icons, used for landing page feature highlights.

• Slarivo Bento Feature Grid

  A 2x2 grid section of feature tiles, each with an icon, heading, and short description, used to highlight product pillars on a landing page.

• Slarivo Builder OS Bento

  Animated developer command center with project activity, AI usage, build stack, deployment logs, uptime, collaborators, and current focus. Built with Framer Motion for subtle interactive motion.

• Slarivo Layered Stack

  An interactive card stack that fans children into a shuffled deck and re-stacks them into a neat grid on hover, using GSAP for the transition.

• Slarivo Dotted Grid

  A Dotted Grid component for arranging mixed content in responsive modular layouts, featuring pointer-responsive feedback, responsive behavior.

• Slarivo Pixel Text Fill

  Headline that fills in via a pixelated dissolve, each glyph resolving from a coarse pixel grid to crisp type. Theme-aware, respects reduced motion.

• Slarivo FFT ocean surface

  A displaced ocean surface driven by a real inverse FFT. A Phillips spectrum evolves in frequency space, two compute passes run a shared-memory radix-2 IFFT into a displacement field, and a procedural grid rides it with per-pixel normals, foam and a Fresnel…

• Slarivo Icon with Title Tabs

  A tabbed interface where each trigger stacks an icon above its label, with a distinct visual content panel below each tab.

• Slarivo Alqemist Cta

  Alqemist homepage call-to-action block with workforce messaging, conversion buttons, and animated brand grid.

• Slarivo What Saa SChat Inbox

  Reusable WhatsApp-style inbox component with chat list, conversation pane and CRM side panel.

• Slarivo Builder OS Bento

  Animated developer command center with project activity, AI usage, build stack, deployment logs, uptime, collaborators, and current focus. Built with Framer Motion for subtle interactive motion.

• Slarivo Grid Pulse

  A hairline grid that lights up in a spectrum wherever the pointer passes, then fades a moment later.