SLARIVO / PAGINATIONS
Paginations Components
Browse 260 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.
- Slarivo Pagination
Enhanced shadcn/ui pagination
- Slarivo Pagination
Pagination with page navigation, next and previous links.
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Neobrutalism-styled pagination component.
- Slarivo 8-bit Pagination
Pixel-art pagination control from 8bitcn.com — pixel-corner border on active page, retro chevron prev/next.
- Slarivo Numbered Pagination
- Slarivo Joined Pagination
- Slarivo Reshaped Pagination
Renders the full range of pages from the total count, automatically truncating the display around the currently selected page. Requires aria-labels for the previous/next controls, supports per-page aria-labels, an onChange handler and both controlled and uncontrolled page state.
- Slarivo Table
Shadcn table with enhanced appearance
- Slarivo Table
Shadcn table with enhanced appearance
- Slarivo Table
Shadcn table with enhanced appearance
- Slarivo Placeholders And Vanish Input
Sliding in placeholders and vanish effect of input on submit
- Slarivo Spinner
Indicate an action running in the background. Unlike the loading dots, this should generally be used to indicate loading feedback in response to a user action, like for buttons, pagination, etc.
- Slarivo Pulse Beams
Multiple beams that converge into a single point, as seen on Next.js website
- Slarivo Pagination
Pagination with page navigation, next and previous links.
- Slarivo Pagination
Pagination with page navigation, next and previous links.
- Slarivo usePagination
usePagination hook
- Slarivo Contacts Table With Modal
The ContactsTable component is a production-ready data table that displays a list of contacts with advanced filtering, sorting, and selection capabilities. It features a grid-style layout with multi-select checkboxes, connection strength indicators, Twitter follower counts, and email information, allowing users to quickly browse and identify key contacts. The component includes a detail modal for viewing full contact information, export functionality for CSV and JSON formats, and pagination support, making it ideal for CRM applications, outreach platforms, and contact management systems.
- Slarivo Card
Product Card A sleek, image-centric card component designed to showcase products with a title, description, price, and brand logo. It features a gradient overlay for text readability and pagination dots for visual flair.
- Slarivo Pagination
Enhanced shadcn/ui pagination
- Slarivo Resizable Table
The ResizableTable component is a fully-featured data table with dynamic column resizing, sorting, pagination, and export functionality designed for displaying employee or similar structured data. It includes built-in animations, theme-aware styling, and responsive design that adapts to both light and dark modes while maintaining accessibility standards. This component is ideal for admin dashboards, HR management systems, or any application requiring interactive data visualization with customizable column widths and comprehensive data manipulation capabilities.
- Slarivo Carousel
Carousel with auto animation
- Slarivo Thumbnail Carousel
A reusable and responsive thumbnail carousel
- Slarivo Basic Data Table
A powerful and flexible data table component with sorting, filtering, pagination, and customizable rendering.
- Slarivo Complex Data Table
A data table built with TanStack Table that combines sorting, column filtering, pagination, row selection, a column-visibility toggle, and per-row action menus.
- Slarivo Previous & Next Button Group
A versatile button group component for organizing related actions with consistent spacing and visual connection.
- Slarivo Pagination
A responsive pagination component for navigating through multiple pages of content.
- Slarivo Pagination
A responsive pagination component for navigating through multiple pages of content.
- Slarivo The Pagination
Paginations component from the 21st.dev community.
- Slarivo ProductTable
Animated Product Table is a highly interactive, feature-rich table built with React, TanStack Table, and Framer Motion. It supports global search, pagination, and column toggling, while providing smooth animations for all table interactions. When columns are toggled, they expand or collapse with a fluid transition, and rows fade and slide in/out seamlessly. This ensures a polished, modern user experience where data updates and structural changes are visually appealing, making it ideal for dashboards, admin panels, or any application requiring dynamic table displays.
- Slarivo Leaderboard Card
Paginations component from the 21st.dev community.
- Slarivo Sliding Pagination
This Sliding Pagination component provides a modern, interactive way to navigate through large sets of pages. Instead of instantly switching between page numbers, it features a smooth, spring-animated sliding underline that moves fluidly to the currently active page, giving a responsive and natural feel. For datasets with hundreds of pages, it automatically condenses the pagination using ellipsis/dots in the middle, ensuring the layout remains compact while still showing nearby pages for context. Built with Shadcn UI and Framer Motion, it is fully responsive, works seamlessly with both dark and light themes, and allows users to quickly and visually understand their current position in a multi-page interface. The component is also highly customizable, making it ideal for dashboards, blogs, or any application that requires elegant pagination.
- Slarivo Icon Pagination
This Icon-Based Contextual Pagination component transforms traditional pagination into an interactive, visually intuitive experience. Instead of showing just numbers, each page is represented by an icon or mini preview, giving users a clear visual cue of the content. The active page is highlighted with scale, color, and border effects, making it instantly recognizable. For large numbers of pages, the component intelligently uses ellipsis (...) to keep the interface compact while still showing nearby pages and first/last pages. Hovering over an icon displays a tooltip, providing additional context for that page. Navigation is made easy with previous and next arrows, and a built-in onChange callback allows the parent app to track the current page. Fully light and dark theme compatible, this component is ideal for modern dashboards, creative apps, or any interface where a visual, intuitive pagination system enhances user experience.
- Slarivo GooeyPagination
This Liquid Gooey Smart Pagination component elevates traditional pagination into an interactive, visually engaging experience. Each page is represented by a dot, with the active dot morphing into a gooey blob that smoothly connects to its neighboring dots, creating an organic, fluid motion as users navigate. When the total number of pages is large, the component intelligently inserts ellipsis (...) to indicate skipped pages, keeping the pagination compact and readable. Navigation arrows allow quick movement between pages, while the component remains fully light and dark theme compatible. Built with ShadCN UI and Framer Motion, this pagination transforms a simple UI element into a playful, futuristic interface element, perfect for dashboards, creative apps, or any modern web experience where micro-interactions matter.
- Slarivo UltraQualityDataTable
A modern, responsive React data table built with Tailwind CSS featuring client-side search, sortable columns, pagination, zebra stripes, and dark/light theming for ultra-polished UIs.
- Slarivo Stack Pagination
This 3D Stack Pagination component transforms traditional page navigation into a visually engaging, interactive experience. Each page number is represented as a 3D card in a stacked layout, creating a sense of depth and hierarchy. Hovering over a card lifts it forward, while clicking flips it to reveal the page’s content. For large numbers of pages, the component intelligently displays a limited visible stack with dots, mimicking standard pagination and preventing visual clutter. Prev/Next buttons allow seamless navigation through ranges, while the 3D hover and flip effects remain active for visible cards. Designed with shadcn UI components, it supports both dark and light themes, providing a sleek, modern, and highly interactive way to navigate content.
- Slarivo One Clipboard
Paginations component from the 21st.dev community.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo Data Table Skeleton
A loading placeholder that mirrors a data table layout, with header, avatar rows, badges and pagination shimmer.
- Slarivo Scroll Loop Inception
A scroll section where the page falls into itself: your landing renders inside its own browser window, and scrolling dives through level after level on an exponential zoom path that wraps seamlessly, so the descent never ends. The browser bars stay hidden until the dive starts, copy rotates per level, and it is one transform driven by scroll. Inspired by the inception scroll moment on the Forge landing page by ui8.ai (ui8.ai/forge), taken further into an endless loop.
- Slarivo Infinite Slider
Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.
- Slarivo Infinite Slider
Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.
- Slarivo Infinite Slider
Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.
- Slarivo Gallery with image cards
A carousel gallery of full height image cards with case study text on top.
- Slarivo Zoom Parallax
A smooth scroll effect where images zoom in at different speeds for a cinematic feel. Perfect for hero sections or storytelling layouts that need extra visual depth.
- Slarivo Stepper
Stepper
- Slarivo Carousel
A flexible and easy-to-use carousel with customizable navigation and indicators.
- Slarivo Carousel
A customizable carousel with microinteractions and slider.
- Slarivo Cases with Infinite Scroll
Cases with a carousel of images, suitable for clients, partners, or integration.
- Slarivo Footer
Footer
- Slarivo Data Table
Powerful table and datagrids built using TanStack Table.
- Slarivo Pagination
Pagination with page navigation, next and previous links.
- Slarivo bento grid 01
A reusable and responsive bento grid layout with animation
- 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 Framer Carousel
Carousels component from the 21st.dev community.
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo argent-loop-infinite-slider
A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a "frictionless" motion logic to create an unending stream of items, reflecting a sense of boundless opportunity and "smart-work" automation. The visual architecture is optimized for high-contrast "Silver" accents—aligning with a premium metal aesthetic—and smooth, heavy-easing transitions that command user attention without being intrusive.
- Slarivo PARALLAX SCROLL FEATURE SECTION
PARALLAX SCROLL FEATURE SECTION using framer motion
- Slarivo Card Fan Carousel
Animated image card carousel with a fanned arc layout. Features elastic entrance animation, interactive hover spread, and circular single-card pagination powered by GSAP. Responsive, light/dark mode ready.
- Slarivo Vertical Tabs
Vertical tab navigation with smooth animated transitions.
- Slarivo Magnified Bento
A bento grid with magnification effect on hover.
- Slarivo Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
- Slarivo Morphing Page Dots
The Morphing Page Dots component is a sleek, interactive pagination indicator that replaces traditional numbers with animated dots. Instead of static circles, the active dot dynamically morphs into a pill shape, creating a smooth, modern transition that clearly highlights the current page. A subtle ripple effect enhances the interaction whenever the page changes, adding polish without overwhelming the UI. All inactive dots remain visible in a muted tone, ensuring clarity and accessibility across light and dark themes. Navigation is handled through clean Lucide arrow icons, giving users intuitive control without bulky buttons. This component is especially well-suited for carousels, sliders, or any multi-page content where a minimal yet visually engaging pagination experience is desired.
- Slarivo Wheel Pagination
This Wheel Pagination component provides a modern, interactive way to navigate through multiple pages. Unlike traditional numeric pagination, it shows a range of page numbers at once, highlighting the active page with scale and color, making it immediately recognizable. Users can scroll over the pagination area with the mouse wheel to move between pages, while previous/next arrows offer an alternative click-based navigation. The component intelligently keeps the active page centered within the visible range and supports a customizable number of visible pages, ensuring usability even with dozens or hundreds of pages. Fully compatible with light and dark themes, it also includes an onChange callback, allowing parent components to track the active page, making it ideal for dashboards, data-heavy applications, and modern UI interfaces that require a tactile, visually engaging pagination experience.
- Slarivo Breadcramb
Displays a hierarchy of links to the current page or resource in an application.
- Slarivo Scroller
Display an overflowing list of items.
- Slarivo Scroller
Display an overflowing list of items.
- Slarivo Scroller
Display an overflowing list of items.
- Slarivo Scroller
Display an overflowing list of items.
- Slarivo Scroller
Display an overflowing list of items.
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo Pagination Ant
Here is Pagination component
- Slarivo The Pagination
Navigation Menus component from the 21st.dev community.
- Slarivo The Pagination
Navigation Menus component from the 21st.dev community.
- Slarivo The Pagination
Navigation Menus component from the 21st.dev community.
- Slarivo The Pagination
Navigation Menus component from the 21st.dev community.
- Slarivo The Pagination
Navigation Menus component from the 21st.dev community.
- Slarivo The Pagination
Navigation Menus component from the 21st.dev community.
- Slarivo The Pagination
Navigation Menus component from the 21st.dev community.
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination with text buttons
Pagination with text buttons
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Navigate to the previous or next page.
- Slarivo Pagination
Here is Pagination component
- Slarivo Filters
A Linear inspired component to add / edit filters
- Slarivo Sidebar Component
Here is Sidebar Component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo FAQs Component
Here is FAQs Component
- Slarivo Faq
Here is Faq component
- Slarivo Features
Here is Features Component
- Slarivo Features
Here is Features Component
- Slarivo Features
Here is Features Component
- Slarivo Testimonials
Here is Testimonials components
- Slarivo Parallax Scrolling
Here is Parallax Scrolling component
- Slarivo Footer column
Here is Footer component
- Slarivo Footer
Here is Footer component
- Slarivo Sticky Scroll
Here is Sticky Scroll component
- Slarivo Card Carousel
Here is Card Carousel component
- Slarivo Navigation Menu
Here is Navigation Menu component
- Slarivo Pie Chart
Here is Pie Chart component
- Slarivo Pricing Section
Here is Pricing Section component
- Slarivo Pricing Section
Here is Pricing Section component
- Slarivo Feature Sections
Here is Feature Sections component
- Slarivo Feature Sections
Here is Feature Sections component
- Slarivo Feature Sections
Here is Feature Sections component
- Slarivo Portfolio and Image Gallery
Here is Portfolio and Image Gallery component
- Slarivo Form Layout
Here is Form Layout component
- Slarivo Fallback Card
Here is Fallback Card component
- Slarivo Carousel
Here is Carousel component
- Slarivo Carousel
Here is Carousel component
- Slarivo Carousel
Here is Carousel component
- Slarivo Countdown Number
Here is Countdown Number component
- Slarivo Form
Here is Form component
- Slarivo Feature Carousel
Here is modern feature carousel component
- Slarivo Loading Carousel
Here is Loading Carousel component
- Slarivo Carousel
Shareholder Reports Carousel This component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on the scroll position, providing a clean and intuitive user experience. The component is fully responsive, theme-adaptive, and built to be easily populated with data via props.
- Slarivo Cursor Cards
Here is Cursor Cards component
- Slarivo Dot Flow
here is Dot Flow component
- Slarivo Pricing Component
Pricing Component with sleek design and better handling
- Slarivo Spinner
Here is Spinner component
- Slarivo Joblisting
sleek animation job lisiting model type component
- Slarivo Tabs Component
Here is Tabs component
- Slarivo Tabs Component
Here is Tabs component
- Slarivo Expandable
Here is expandable component
- Slarivo signin-page
A beautifully crafted, production-ready authentication page featuring a split-screen design with form inputs on one side and an animated gradient hero section on the other. This component includes 17+ reusable sub-components, all self-contained in a single file for easy integration.
- Slarivo Accordion Multi-level
Here is accordion multi-level component
- Slarivo Feedback Slider
Here is colored feedback slider component
- Slarivo Pin List
Here is animated Pin List component
- Slarivo Linear Card
Here is linear card component
- Slarivo Button
Enhanced shadcn/ui button
- Slarivo Container Scroll Animation
A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.
- Slarivo Testimonials with Marquee
A dynamic testimonials section with infinite scroll animation featuring a headline, description, and auto-scrolling testimonial cards that pause on hover, inspired by Launch UI. Features: • Infinite scroll animation with hover pause • Responsive, mobile-first design • Gradient fade edges for smooth transitions • Customizable content through props • Dark mode support • Optimized performance using CSS animations
- Slarivo Scroll media expansion hero
A modern, interactive media component for Next.js that expands videos or images as users scroll, creating an engaging and immersive experience.
- Slarivo Logos 3
Client logos scrolling automatically with a Carousel with masked edges
- Slarivo Logo Carousel
Logo Carousel
- Slarivo Interactive Image Accordion
Interactive Image Accordion
- Slarivo 3D Carousel
A 3D image carousel
- Slarivo Scroll Morph Hero
A stunning hero section that morphs from a scattered layout to a circle, and finally to a scroll-driven interactive rainbow arc.
- Slarivo 404 Page Not Found
404 Page Not Found
- Slarivo 3D Testimonails
A marquee component continuously scrolls text, images, or videos in an infinite loop, with customizable speed, direction, and responsive design for engaging displays.
- Slarivo image auto slider
A smooth looping image slider that shows different nature scenes one after the other. The images gently slide from left to right in a continuous flow. Great for adding a calm and modern visual touch to any section.
- 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 Interactive Selector
A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout
- Slarivo Not found
Not found page 05
- Slarivo Feature Carousel
Feature Carousel Interactive showcase for highlighting multiple app features in a swipeable, modern layout. Perfect for engaging users while promoting mobile-friendly tools and experiences.
- Slarivo Circular Gallery
Showcase content in an interactive, rotating carousel that keeps users engaged. Ideal for portfolios, product displays, or immersive visual storytelling.
- 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 Animated Slideshow
- Animated hover slider
- Slarivo Full Screen Scroll FX
React + GSAP full-screen scroll slideshow with animated sidebar navigation and smooth scroll triggered animations, fully customizable through props
- Slarivo Animated Feature Carousel
An animated carousel component for showcasing features with smooth transitions and interactive elements
- Slarivo Animated Gallery
Animated Gallery with scroll trigger animation
- 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 Page Not Found
Page Not Found 404
- Slarivo Parallax Grid Scroll
A grid where two columns scroll in oposite directions, giving a parallax effect.
- Slarivo Motion Footer
A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth "curtain reveal" parallax effect. It features a built-in, physics-based Magnetic Button primitive for interactive glassmorphism pills with overshoot animations. The visual hierarchy includes a theme-adaptive animated aurora glow, dynamic grid patterns, a diagonal scrolling marquee, and giant masked typography. Fully portable in a single file, React Strict-Mode safe, and natively uses shadcn/ui and Tailwind v4 oklch tokens for automatic light/dark mode compatibility.
- Slarivo Smooth Scroll Hero
A React component that creates a smooth-scrolling hero section with parallax background effects. Features responsive images for mobile and desktop, with customizable scroll animations built using Framer Motion.
- Slarivo layout preloader
An animated image preloader with GSAP transitions, featuring sequential image reveals, smooth zoom effects, and grid-based layout animations with interactive restart functionality
- Slarivo FAQ tabs
Replace the boring accordion with these cool animated ones.
- Slarivo Scroll Cards
A smooth gallery where cards stack on scroll, each showing an image, title, and description.
- Slarivo Feature Carousel
An animated feature carousel with smooth slide transitions.
- Slarivo Image Swiper
A dynamic and interactive React image swiper component that displays images as a stack of cards with a smooth, perspective-based swipe animation. Users can swipe through images with touch or mouse gestures. Highly customizable and easy to integrate. Tinder like swipe
- Slarivo Modern Hero
Here's a description for your SmoothScrollHero component, tailored for 21st.dev: SmoothScrollHero: Immersive Parallax & Scroll Effects in React Elevate your web projects with SmoothScrollHero, a React component that delivers a captivating and highly performant smooth scrolling experience. Built with Lenis for silky-smooth scroll animations and Framer Motion for dynamic, interactive visuals, this component is designed to bring your content to life with stunning parallax effects and a responsive layout. Features Effortless Smooth Scrolling: Integrates ReactLenis for a truly fluid and customizable scroll feel, enhancing user engagement and content readability. Dynamic Parallax Imagery: Showcases a large, central image that transforms its clip-path, background-size, and opacity based on scroll position, creating an eye-catching focal point. Layered Parallax Images: Multiple smaller images animate independently with varying scroll speeds and fades, adding depth and a sense of movement to your hero section. Interactive Navigation: A fixed navigation bar with a "Launch Schedule" button provides a smooth scroll-to-section functionality. Animated Content Reveal: Individual schedule items gracefully animate into view as they enter the viewport, drawing attention to key information. Responsive Design: Optimized to look great and perform well across various screen sizes. How it Works SmoothScrollHero combines several powerful libraries to achieve its effects: react-lenis: Provides the core smooth scrolling functionality, ensuring a consistent and pleasant user experience. framer-motion: Powers all the motion and animation, including useScroll, useTransform, and useMotionTemplate hooks to link scroll position to CSS properties like clipPath, backgroundSize, opacity, and translateY. This component is perfect for creating impactful landing pages, portfolios, or any section where you want to create a visually rich and engaging introduction to your content.
- Slarivo Progressive Carousel
Timelines component from the 21st.dev community.
- Slarivo Brand Scoller
An infinite scroller for brands or logos.
- Slarivo Scroll X Carousel
- Carousel transforms on x direction according to current scroll position.
- Slarivo Scroll Progress
Animated scroll progress for your web pages.
- Slarivo Offer Carousel
Offer Carousel This component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling functionality, with cards that animate on hover for an engaging user experience.
- 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 Elegant Carousel
An editorial-style image carousel with a split-panel layout — text content on the left, full-bleed imagery on the right. Features smooth cross-fade transitions, a Ken Burns zoom effect on images, auto-advancing progress indicators with per-slide labels, decorative frame corners, and touch/swipe support. Ideal for fashion lookbooks, portfolio showcases, or luxury brand storytelling.
- Slarivo Animated Scroll
An animated two-panel scroll adventure
- Slarivo Interactive Accordion
A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.
- Slarivo Infinite Text Marquee
Awesome infinite text scrolling effect using framer-motion
- Slarivo Scroll Hero Section
Animated Scroll keywords section with loading and scrolling animation
- Slarivo Immersive Scroll Gallery
A scroll-based image gallery that creates depth and dimension through dynamic scaling animations. As users scroll, images scale up at different rates while a text overlay fades in, creating an engaging visual narrative. Perfect for landing pages, portfolios, and immersive storytelling experiences. Built with React, TypeScript, and Framer Motion.
- Slarivo Scroll Reel Testimonials
Testimonial carousel with a counter-rotating portrait reel and per-character rising text, the middle column scrolls one way while the outer columns slide the opposite direction.
- Slarivo Story scroll
Scroll Areas component from the 21st.dev community.
- Slarivo Gallery Grid with Lightbox
Filterable image gallery with animated lightbox and navigation
- Slarivo Back Button
A stylish animated button component that reveals an arrow icon on hover, perfect for navigation and going back to previous pages.
- Slarivo book slider
click to scroll
- 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 Price
Pricing Card Component This component is designed to be highly reusable and customizable through props. It uses framer-motion for animations, cva for handling style variants (like the "popular" state), and shadcn/ui theme variables for seamless light and dark mode support.
- Slarivo Hero with bg video
here is progressive hero
- 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 Breadcrumb
Here is Breadcrumb component
- Slarivo Accordion
A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.
- Slarivo Animated Number Flip
The Animated Number Flip component brings a sleek, odometer-like animation to number changes, making dashboards, reports, or pagination feel more dynamic and engaging. Instead of numbers simply updating, each value flips with a smooth slot-machine style motion that immediately draws attention to the change. Built with Framer Motion and styled using shadcn/ui, it integrates naturally into both dark and light themes while maintaining a professional look. Its responsive and reusable design makes it ideal for showing page numbers, key performance metrics, or live data updates in any modern web application.
- Slarivo Shadcn Accordion
Accordions are one of those components you don’t think much about until your page gets too long. When used well, they make content easier to scan, reduce visual noise, and help users focus on what they actually care about.
- Slarivo Dynamic Island TOC
A sleek Dynamic Island-inspired Table of Contents component for React and Next.js with animated expansion, scroll spy tracking, reading progress, smooth scrolling, automatic heading detection, and support for custom TOC elements.
- Slarivo Special Card
Here is Special Card component
- Slarivo Parallax Motion
A reusable parallax motion component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Pagination
Here is Pagination component
- Slarivo Default
Here is according default component
- Slarivo Rounded Box
Here is Rounded Box component
- Slarivo Login Card
Here is Login Card component
- Slarivo Next-Gen Pagination: Accessible
Stop shipping clunky pagination. This drop-in React + shadcn/ui pagination component gives you enterprise-grade accessibility, responsive design, and dark mode support out of the box. Fully customizable, lightweight, and built for production at scale — because your users deserve better navigation.” ⚡ Why this works: Title is punchy, modern, and developer-friendly (“Next-Gen”, “Shadcn-ready” trigger interest). Description highlights pain points (clunky pagination) and the solution (accessible, responsive, production-ready). Uses action words: “Stop”, “drop-in”, “built for production” → this makes developers feel it’s urgent and useful.
- Slarivo Table
This is table with filder and sorting
- Slarivo Transaction List
Here is modern minimalistic Transaction List component
- Slarivo Dot Particles
Here is Dot Particles component
- Slarivo Folder Components
A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the prop. Drop it into any React or Next.js project and install directly via the shadcn CLI.
- Slarivo Pagination
Navigation component for splitting content across multiple pages with previous/next controls and page numbers
- Slarivo Menu
Here is Menu component
- Slarivo 8bit 404 Page
A retro 8-bit 404 not-found page with a large pixel headline, decorative pixel-art character, and a retro CTA button linking back home. Built on the 8bit button primitive.
- Slarivo Load More
A load-more button with automatic infinite-scroll via IntersectionObserver, animated idle/loading/error/end states, and a bounded auto-load limit before it hands control back to the user.
- Slarivo Infinite List
A bias-based infinite scroll wrapper and hook that manages pagination and masks child items for progressive "load more" lists.
- 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 Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Data Grid Table
A Data Grid Table component for comparing structured records, attributes, and operational data, featuring data table, data-table, table, pagination.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo Users List Datatable
A user management data table with search, filters, export, pagination, row selection, avatars, role, last-login, two-factor status badges, and per-row action menus.
- Slarivo Filterable Invoices Table
Invoices data table with a client search filter, checkbox row selection, bulk actions (mark as paid, send reminder, download), payment method and due date columns, status badges, and pagination.
- Slarivo Team Members Data Table
Sortable team members data table with search, checkbox row selection, bulk role and remove actions, status badges, row action menus, column visibility, and pagination, built on TanStack Table.
- Slarivo Pagination with Page Info and Page Size
A pagination control that shows the current page range, numbered page links with ellipsis, and a results-per-page select.
- Slarivo Pagination with Ellipsis
A joined pagination control with previous/next arrows, page number buttons, and truncating ellipsis for large page counts.
- Slarivo Pagination
A pagination control with previous/next buttons, numbered page links and truncating ellipsis for navigating multi-page content.
- Slarivo Table Pagination
A table pagination control with a rows-per-page select, an item range label, and previous/next navigation buttons.
- Slarivo Pagination with Ellipsis
A pagination component that uses an ellipsis to truncate long page ranges while keeping navigation controls visible.
- Slarivo Numberless Pagination with Text
A pagination control without page numbers that shows Previous and Next buttons around a current-page text label like "Page 1 of 21".
- Slarivo Numberless Pagination
A compact pagination control with only previous and next buttons joined in a bordered group, without page numbers.
- Slarivo Pagination
A compact, Tron-inspired pagination control with previous/next arrows, truncated page numbers with ellipses, sibling range, and a page-count indicator.
- Slarivo Pagination with Icon and Label
A pagination component with labeled Previous and Next controls using chevron icons.
- Slarivo Bjork Pagination
A styled pagination control with page number links, previous/next buttons, and an ellipsis for skipped pages, for navigating multi-page lists or tables.
- Slarivo Carousel Navigator
A Carousel Navigator component for browsing sequential content, media, products, or stories, featuring carousel, pagination, auto rotation, auto-rotation.