SLARIVO / DASHBOARDS

Dashboards Components

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

• Slarivo Dashboard Overview

  Dashboard overview for the admin dashboard

• 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 Sidebar

  Business-Ready Interface: Real-time stats cards with trend indicators Activity feed with categorized actions and timestamps Quick action buttons with color-coded categories Comprehensive layout that scales across screen sizes Professional Details: Status indicators (online/offline states) Role-based information (Senior Administrator) Consistent iconography throughout the interface Accessibility features (proper ARIA labels, tooltips)

• Slarivo AnalyticsDashboard

  A responsive React UI component that presents key performance metrics (revenue, subscriptions, sales, active users) in styled cards, each with a mini line chart and custom tooltip, built with Tailwind CSS and Recharts.

• Slarivo Dashboard Card With Modal

  A versatile dashboard card component featuring a modal overlay for data management, designed to display user information alongside interactive elements like copy-to-clipboard functionality and update confirmations. This component excels at presenting structured data in a clean, accessible format while providing smooth blur-based transitions that enhance user experience without disrupting workflow. Ideal for administrative interfaces, policy management systems, or any application requiring organized data display with intuitive modal interactions.

• Slarivo Efferd Dashboard 2

  Dense KPI dashboard grid with revenue charts, channel sales, invoices, billing health, and activity feed.

• Slarivo Dashboard

  Marketing Dashboard Description: An animated dashboard card to display marketing activities and team statistics. It features a main header, two distinct stat cards, and a call-to-action banner. The component uses framer-motion for smooth, engaging animations on load and hover.

• Slarivo Analytics Dashboard

  This is a professional Analytics Dashboard

• Slarivo Dashboard Configuration

  Dashboard Configuration Toggle widget visibility and manage your dashboard layout settings.

• Slarivo Workbench Sidebar

  A dense glassmorphic sidebar navigation with animated hover for dashboards and internal tools.

• Slarivo Features 6

  features section

• Slarivo Digital Serenity - Animated Landing Page

  Component creates a visually immersive and calming landing page. It features a dark UI with animated text quotes appearing word by word, a dynamic grid background, subtle floating elements, corner decorative accents, and interactive effects like a mouse-following gradient and click ripples. 

• 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 Project Data Table

  Project Data Table This component provides a responsive, animated table for displaying a list of projects. It features a clean, modern design inspired by your image, with status badges and contributor avatars. The rows gracefully animate into view using framer-motion.

• Slarivo Acme Hero

  Animated hero section and nav

• Slarivo Login Activity

  Login Activity

• Slarivo Hero

  Hero sections are the first thing users see when they visit your site. They are a great way to showcase your product and its features.

• Slarivo Features 7

  features section

• Slarivo NotificationIn box Popover

  This Notification Inbox Popover provides a clean, inbox-style experience for managing alerts directly within the app. Users can toggle between All and Unread notifications using tabs, while each notification is displayed with a relevant Lucide icon, bold styling for unread items, and a timestamp for context. A small dot indicator reinforces which items are new. The design now also includes a “Mark all as read” option in the header, allowing users to quickly clear unread items in one click. Combined with the footer’s “View all notifications” action, this layout balances clarity and efficiency, making it well-suited for SaaS dashboards, admin panels, or productivity apps where streamlined notification handling is essential.

• Slarivo API Rate Limiting Card

  API Rate Limiting Card

• Slarivo Schema Card with Animated Wave Visualizer

  Schema Card with Animated Wave Visualizer. This component renders a full-screen, procedurally generated wave visualizer in the background and overlays a “glassmorphic” database schema card in the center.

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo N8N Workflow Block

  Visual workflow automation builder with animated nodes, connections, and real-time execution monitoring

• Slarivo Leads Data Table

  This leads table component displays sales prospects with comprehensive data visualization including deal sizes, source tracking, status indicators, interest trend sparklines, and probability scoring. It features smooth micro-interactions like hover-triggered action buttons, row selection with bulk operations, and a sliding bottom action bar that appears when leads are selected. The component is ideal for CRM dashboards, sales management interfaces, and lead tracking systems where users need to quickly assess and act on potential business opportunities.

• Slarivo Line Charts 6

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• 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 Animated Dashboard Card

  Perfect for financial dashboards and employee reward systems, this animated bonuses and incentives card displays total compensation with sophisticated dot patterns and smooth entrance animations. The component features theme-aware design that adapts seamlessly to both light and dark modes, making compensation data feel engaging and important. It includes interactive elements with hover states, professional data presentation, and premium blur-in effects that enhance the user experience for tracking bonuses and incentives.

• Slarivo Kanban

  here is interactive kanban board

• Slarivo Landing Page

  A 3D Interactive Landing page

• Slarivo Bento Card

  An interactive bento card with animated tabs and workspace preview.

• Slarivo HeroSectionWithGradient

  This component is a visually elegant and content-focused hero section designed for the Ruixen brand, featuring a soft pastel gradient background that transitions from white to peach, pink, and lavender shades. It includes bold, large typography for the main heading — “Innovation Meets Simplicity” — followed by a supporting paragraph that introduces Ruixen as a platform offering cutting-edge, modern digital solutions. The layout ensures readability with responsive text sizes, a subtle design aesthetic, and a structured container with rounded corners and hidden overflow, making it ideal for landing pages or introductory sections of Ruixen’s interface.

• Slarivo Control Knob

  Physics-driven rotary knob with snap ticks, energy glow, and digital readout.

• Slarivo Animated Table rows

  This is a table component with animated rows with delete row effects

• Slarivo Weather Card

  Here is Weather Card component

• Slarivo Dashboard Activities

  Dashboard Activities Admin Dashboard Activities Recent activity

• 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 Stats Card

  Crypto Stats Card This component provides a comprehensive overview of the crypto market, including market cap, dominance distribution, and individual coin prices, all within a single, visually polished card.

• Slarivo Timesheet Confirmation

  This file contains the reusable Timesheet Confirmation component. It's designed to be highly customizable through props, uses shadcn/ui theme variables for styling, and includes animations for a modern feel.

• Slarivo Area Chart Medium

  Here is Area chart multi series component

• Slarivo Card

  Sentiment Analysis Card A visually engaging card component to display sentiment analysis results with an animated, segmented progress bar. It's built to be fully reusable by accepting data through props.

• Slarivo Core Header Navbar

  CoreHeader – A sleek top navigation bar for dashboards and apps. Displays the page title, user identity, and avatar, with a subtle background pattern for a modern look.

• Slarivo StatusBadge – Beautiful, Accessible Status Indicators

  “Give your app instant clarity with plug-and-play status indicators. The StatusBadge component comes with six built-in states (success, error, warning, info, pending, default), sleek monochrome design, and WCAG-ready accessibility. Fully responsive, dark-mode friendly, and customizable out of the box — perfect for dashboards, system monitors, or anywhere status matters.” ⚡ Why this works: “Beautiful” + “Accessible” → hits design + inclusivity pain points. Calls out React + shadcn/ui → instantly attracts the right audience. Highlights features upfront: 6 states, dark mode, responsive, WCAG-ready. Shows use cases → dashboards, monitors, state labels.

• Slarivo Financial Dashboard

  Financial Dashboard This component provides a comprehensive overview of financial activities, including quick actions, recent transactions, and available services. It is designed to be the central hub of a financial application.

• Slarivo Statistics Card 8

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Real time Analytics

  Real-time Activity Live server performance metrics, UI component

• Slarivo Hero with Product Mockup

  Showcase your product in front of users and shine

• Slarivo Card

  Stat Card This card is designed to display a key metric, its title, and a percentage change from a previous period. It features a count-up animation for the main value and uses theme-aware colors for positive and negative trends.

• Slarivo ScreenTimeCard

  A beautiful, animated screen time statistics card component inspired by macOS Screen, Time widget design. Displays usage patterns with an interactive bar chart and top app breakdown.

• Slarivo Pin List

  Here is animated Pin List component

• Slarivo Sidebar

  Expandable sidebar that expands on hover, mobile responsive and dark mode support

• Slarivo Sparkles

  A configurable sparkles component that can be used as a background or as a standalone component.

• Slarivo Container Scroll Animation

  A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.

• Slarivo Hero Section 1

  Modern saas hero section

• Slarivo Bento Grid

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

• Slarivo Hero Section

  A powerful hero section component built with shadcn/ui. Create stunning hero sections with multiple variants including illustration-based layouts, glowing effects, and mobile app showcases. Each variant is designed to make a strong first impression while maintaining shadcn's signature aesthetic. Built with Tailwind CSS, this component delivers pixel-perfect, responsive hero sections that adapt beautifully across all devices. The clean, modern design principles ensure your hero section effectively communicates your message while maintaining visual harmony with other shadcn components.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Hero Section Dark

  Hero

• Slarivo Dock

  A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.

• Slarivo Bento Grid

  A nice Bento Grid with hover items and shadow.

• Slarivo Sidebar

  Sidebar

• Slarivo Hero 195

  A modern hero section with tabs, animated border and crisp fading background lines framing the hero images.

• Slarivo Sidebar

  A hover sidebar, inspired by Supabase's sidebar.

• Slarivo Hero Section 9

  Modern hero section

• Slarivo Hero with Mockup

  A modern, animated hero section with mockup display and gradient effects inspired by Launch UI. It features a large headline, description, dual CTAs, and a floating mockup image. Features: • Responsive design with a mobile-first approach • Staggered fade-in animations • Gradient text and button effects • Floating glow background • Dark mode support • Customizable CTAs • Optimized image loading

• 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 Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Dashboard with Collapsible Sidebar

  This React code implements a dashboard with a collapsible sidebar featuring various options, a dark mode toggle, and displays various statistics and recent activity. It uses Lucide-React for icons and manages a dark/light theme via CSS class manipulation.

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Hero Video Dialog

  A hero video dialog component.

• Slarivo Chart

  Beautiful charts. Built using Recharts. Copy and paste into your apps. Note: If you are using charts with React 19 or the Next.js 15, see the note here - https://ui.shadcn.com/docs/react-19#recharts

• Slarivo Hero Section 2

  Modern marketing hero section

• Slarivo Message Dock

  This is an animated, expandable message dock component that allows users to select a character and send contextual messages through a sleek, reactive UI. It supports emoji-based avatars, online indicators, gradient themes, and smooth transitions using framer-motion, with auto-collapse, outside-click handling, and full customization options via props. Perfect for AI assistant selectors, chat applications, work dashboards, character chatbots, onboarding helpers, or interactive UI mascots in apps or games.

• Slarivo Statistics Card 15

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Course Design Cards

  Here is Course Design Cards component

• Slarivo Crypto Dashboard

  Crypto dashboard with real time price update using a coincecko api with time and new card design

• Slarivo Area Chart

  Here is area chart multiple series medium size

• Slarivo InlineAnalyticsTable

  This Data Trends Table component introduces a highly interactive way of exploring information by combining traditional tabular data with mini inline charts inside each row. Unlike standard tables, which only rely on static numbers, this table enriches the experience by visually highlighting patterns and trends within each column, helping users quickly spot outliers, growth, or decline. Built entirely with shadcn UI, it ensures a clean, modern design that seamlessly adapts to both light and dark themes. The inline visualizations remain lightweight and unobtrusive, allowing the table to preserve readability while offering more depth at a glance. It’s an ideal component for dashboards, analytics platforms, and data-heavy applications where users need both numbers and context to make better decisions.

• Slarivo Conversion Funnel Area Chart

  A sleek area chart component that visualizes key steps in the conversion funnel. Perfect for e-commerce dashboards to track where users drop off and optimize checkout flow.

• Slarivo Area Chart Analytics Card

  A compact card component that displays ad spend over the last 28 days with a mini area chart. Perfect for dashboards and marketing analytics.

• Slarivo Health Stat Card

  The HealthStatCard component is a modern, reusable, and fully customizable Shadcn UI–based card designed for displaying health and performance metrics in an engaging, data-driven way. Built with Framer Motion for smooth, spring-based animations and Shadcn tooltips for contextual insights, it features bubble-style bars that animate in 3D on hover to make data visualization more interactive and appealing. Each bar can display a tooltip with a short description and value, making it perfect for dashboards that track metrics such as sleep quality, hydration, fitness, nutrition, or productivity. With flexible props for configuring icons, statistics, colors, legends, and animations, this component provides a clean, professional, and visually rich way to represent health-related data across any Next.js application.

• Slarivo Trend Card

  Interactive Trend Card A visually polished card component for displaying time-series data with an interactive bar chart. It's built to be responsive and theme-adaptive, using shadcn variables for styling.

• Slarivo Wallet Card 2

  wallet card account balance deposit

• Slarivo Card

  Analytics Card This component encapsulates the entire visual element, including the header, total amount, and the animated bar chart. It is designed to be highly reusable and theme-adaptive.

• Slarivo InsuranceSummaryCard

  The InsuranceSummaryCard component is a sleek, modern, and fully configurable Shadcn UI–based card designed to display key insurance details in a clean and interactive way. It features a dynamic gradient header, animated hover effects, and smooth progress visualization to represent coverage usage. Each card can show the policy number, insured and premium amounts, expiry details, and policy type, with optional tooltips for quick explanations. Built using Framer Motion for subtle motion and Shadcn UI components for consistent styling, it fits perfectly into modern dashboards or client portals. The component is reusable across multiple insurance categories—like car, health, or travel—and can easily be customized with icons, colors, and tooltips, making it ideal for professional, data-driven insurance applications.

• Slarivo Incident Report Large

  Here is incident report large component

• Slarivo Conversion Stats Card

  ConversionStatsCard This card component is designed to display a title, a composite progress bar, and a list of key statistics. It's built to be highly reusable by accepting its data through props.

• Slarivo Card

  Quick Links Card A card component that displays a title, subtitle, and a set of actionable icon buttons for quick access to common tasks.

• Slarivo Folder Card

  Folder Card A visually appealing card component to display folder information, including a title, size, and a decorative icon, with built-in animations.

• Slarivo Minimisable Table

  This component is a Minimisable Table with Column Controls built using Shadcn UI and Lucide icons, designed for clean and configurable data presentation. Unlike traditional tables, it allows users to shrink specific columns into compact icon-only views, reducing clutter while keeping essential information accessible. A dropdown menu provides control over which columns are minimized, with a checkmark indicator to clearly show active selections. This makes the table both highly interactive and customizable, enabling quick adjustments for different use cases like dashboards, reports, or comparison views. The plain styling ensures it adapts seamlessly to both light and dark themes, maintaining clarity without unnecessary visual noise. This balance of simplicity, usability, and configurability makes it a reusable solution for modern applications.

• Slarivo Incident Bar Chart

  here is incident bar chart middle size

• Slarivo ZoomDepthTabs

  The Zoom + Depth Tabs component gives a modern, interactive feel to tab navigation by introducing subtle 3D-inspired animations. When a tab becomes active, it slightly zooms in and brightens, while inactive tabs tilt back and fade, creating the illusion of depth on the interface. This effect makes switching between sections feel more dynamic and engaging compared to standard flat tab bars. It works especially well for creative dashboards, analytics pages, or modern applications where user experience and aesthetics are equally important. By supporting props for labels, content, and default values, the component is flexible enough to adapt to different use cases while maintaining a sleek, professional style.

• Slarivo Incident Report Middle

  Here is a incident Report middle

• Slarivo Floating Panel

  Here is Floating Panel component

• Slarivo Card Frame Table

  A data table rendered inside a rounded card frame, with status badges and a totals footer row.

• Slarivo Interpolation Chart

  Here is Interpolatioon Chart medium

• 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 Dashboard Stats Skeleton

  A loading skeleton placeholder that shows a row of three dashboard stat cards while data is fetching.

• Slarivo Skills Progress Dashboard

  A compact skills overview card with color-coded, animated progress bars and an entrance fill effect.

• Slarivo Section With Mockup

  responsive React component for displaying a section with text (title, description) and a styled image mockup. Features optional layout reversal and subtle scroll-triggered animations using framer-motion, including a parallax effect for the mockup and its background.

• 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 Hero 2

  Beautiful, grainy hero component for an email-related website

• Slarivo macOS Dock

  An authentic, responsive React dock component that replicates the macOS dock experience with smooth magnification effects, GSAP animations, and real macOS-style interactions. Perfect for portfolios and desktop-style applications.

• Slarivo Bento Product Features

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

• Slarivo SaaS Template

  Modern Hero Section with Navigation - Dark Theme Landing Page Component A sleek, production-ready hero section with fixed navigation bar, perfect for SaaS landing pages and modern web applications. Features a stunning gradient text headline, announcement badge, and dashboard preview mockup with glowing effects.

• Slarivo Server Management Table

  This server management table component is ideal for cloud service providers and IT administrators who need to monitor and control multiple servers across different geographical locations. It could be integrated into web-based admin dashboards for hosting companies, enterprise server management systems, or DevOps monitoring platforms where users need real-time visibility of server performance and status. The interactive controls allow operators to efficiently manage server lifecycle operations like starting, stopping, pausing, and restarting services with a clean, responsive interface that works well in both light and dark themes.

• Slarivo Gantt

  Maps component from the 21st.dev community.

• Slarivo Shuffle Grid

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

• Slarivo bento grid 01

  A reusable and responsive bento grid layout with animation

• Slarivo features

  A dynamic, scrollable feature showcase with auto-progress animation, * built using React, Framer Motion, and Tailwind CSS. * Highlights multiple features with icon support, images, and a visual progress indicator.

• Slarivo Navbars

  Here is Navbars component

• Slarivo Focus Rail

  A 3D, drag-and-swipe carousel with depth, autoplay, and animated context panel, designed for showcasing rich visual stories in a single, immersive focus rail.

• 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 Feature Showcase

  The FeatureShowcase component is a responsive, theme-aware section built entirely with shadcn/ui primitives that blends storytelling and interaction. It pairs an informative left panel—featuring a headline, description, subtle stats, step-by-step accordion, and clear call-to-action buttons—with a dynamic right panel that displays tab-based media. Each tab reveals a full-bleed image that automatically fills the container, making the layout visually balanced and immersive. Ideal for product introductions or feature highlights, this component lets designers combine concise narrative content with interactive visuals to engage users across light and dark themes.

• Slarivo Spatial Product Showcase

  A high-fidelity hero section designed for displaying dual-state products or variations. Features fluid layout transitions powered by Framer Motion, reactive background gradients that adapt to the active item, and a sleek floating control dock. Fully responsive, accessible, and data-driven.

• Slarivo Table

  Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Area Charts 1

  Area charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• 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 Interactive Logs Table

  Observability logs panel with animated filters, search, and expandable rows

• Slarivo Donut Chart

  Donut Chart – Visual data distribution widget. Displays categorized insights with a clean circular layout and color-coded segments. Perfect for analytics dashboards and performance summaries.

• Slarivo Activity Chart Card

  Activity Chart Card This component displays activity data in a bar chart format. It's designed to be reusable, accepting props for the title, total value, and chart data. The bars animate into view sequentially for a polished user experience.

• Slarivo FeaturesDetail

  This FeaturesDetail component showcases product features through an animated, auto-sliding dashboard carousel with smooth GSAP transitions. It combines scroll-triggered effects and interactive tab navigation for a visually engaging feature preview.

• Slarivo Line Charts 9

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• 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 Featured Section Stats

  This component showcases a modern CRM/dashboard statistics section with a clean, responsive layout. It highlights key business metrics alongside a smooth blue-gradient area chart for visual impact.

• Slarivo Line Charts 2

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Hero 3

  Left-aligned hero with dashboard screenshot preview

• Slarivo Statistics Card 1

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Visualize Booking

  Here is bookings vizualizationg component

• Slarivo Line Charts 1

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Statistics Card 5

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and

• Slarivo Project Detail View

  Project Detail View A comprehensive view component designed to display the details of a project or a complex task. It includes sections for status, assignees, dates, tags, description, attachments, and a detailed task list. The component is built to be highly reusable and is styled using shadcn/ui theme variables for seamless light and dark mode support. It incorporates animations with framer-motion for a more dynamic user experience.

• Slarivo Stats Cards

  shadcn stats cards

• Slarivo Simple UI

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

• Slarivo Hero Section

  A comprehensive UI component for a landing page hero section. It includes responsive navigation, a headline content area, and a structured application preview section with filters and a data table. Designed to be populated dynamically with data.

• Slarivo Banner

  Place the element at the top of your root layout to display announcements. By default, the banner uses a style tag to modify Fumadocs layouts, such as reducing the sidebar height. You can disable this feature with: To enable users to close the banner, assign it an ID. The state will be automatically saved.

• Slarivo Loading Carousel

  Here is Loading Carousel component

• Slarivo Area Charts 2

  Area charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Featured Image Section

  This feature section highlights Ruixen’s core strengths with an interactive tab layout. Each tab showcases a unique capability—like a user-friendly dashboard, smart keyword generation, and one-click SEO optimization. Designed with clean visuals and intuitive icons, it helps users quickly understand Ruixen’s value.

• Slarivo Member List

  Here is modern Member list by indev ui

• 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 Funnel Chart

  Here is Funnel Chart component

• Slarivo Ruixen Stats

  A bold, asymmetric analytics section where a hero CountUp figure overlays a live area chart, instantly drawing focus. Floating side stats and a clean CTA create a premium, dashboard-inspired Ruixen UI showcase.

• Slarivo FeaturedCrmDemoSection

  This component displays a CRM preview card that can switch between a thumbnail image and an autoplaying video. It uses a play button overlay that appears on hover to start the video. The card layout is responsive, filling available height and width while maintaining rounded corners for a polished look.

• Slarivo Line Graph Statistics

  This UI displays mobile vs desktop usage trends over June, with mobile consistently higher. A sidebar lets users toggle data for the last 7 days, 30 days, or 3 months.

• Slarivo Docks

  This minimal and responsive theme toggle component lets users effortlessly switch between Light and Dark modes while offering quick access to settings. Designed with accessibility and clarity in mind, it features clean icons, smooth interactions, and full keyboard support. Perfect for dashboards, web apps, or portfolios, it enhances user experience and gives instant control over personalization. Built with React and TailwindCSS, it's easy to integrate, style, and extend as needed.

• Slarivo Stats cards with links

  Here is Stats cards with links

• Slarivo Total Sales Chart

  A compact total sales chart, showing revenue trends with an interactive line chart, quick period filters, and channel breakdowns for clear insights at a glance.

• Slarivo Statistics Card 7

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Stats Card

  Freelancer Stats Card A comprehensive card component for displaying key statistics, rankings, and availability. It features a clean layout, theme-adaptive styling, and a subtle animation for the availability chart to draw user attention to their capacity.

• Slarivo A modern Hero Section

  A modern hero section for your AI Platform

• Slarivo Line Charts 8

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Statistics Card 10

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Statistics Card 13

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Statistics Card 2

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Progress

  Vo2 Max Card A visually polished card for displaying a key metric with an animated radial progress indicator. It's ideal for dashboards, fitness trackers, or any application needing to represent progress or a value within a range.

• Slarivo ContributorsOverviewTable

  The ContributorsOverviewTable component presents a clean, structured, and interactive summary of contributors within a team or project. Designed for clarity and ease of use, this table highlights essential details like contributor names, email addresses, geographic locations, account status, and individual payout balances. Visual cues such as colored status badges enhance readability, while responsive hover states provide a polished user experience

• Slarivo Performance Benchmark Card

  Performance Benchmark Card This component provides a comprehensive view of a key metric against benchmarks and competitors. It's designed to be highly reusable, allowing you to feed it any data structure for titles, values, competitors, and performance levels.

• Slarivo Radar Chart

  Here is Radar Chart comopnent

• Slarivo Stats Card

  Stats Card This is a reusable card component designed to display a key metric, a descriptive summary, and a mini bar chart for trend visualization. It features animations that trigger when the component enters the view.

• 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 Hero Section

  Here is Hero Section component

• Slarivo Animated Status Badge

  This interactive status card features an animated "Running" badge with smooth transitions and a delayed "Completed" confirmation, triggered by a single action button. Perfect for displaying real-time process feedback in dashboards, onboarding flows, or transactional UI components.

• Slarivo KPI Card

  Here is KPI card component

• Slarivo Calendar With Presets

  This improved BetterCalendar component is a polished and modern variant of the default React DayPicker, styled strictly with shadcn/ui design principles. Instead of using harsh strikethroughs for disabled dates, it introduces a more refined approach by dimming and muting unavailable days, while clearly signaling them with a not-allowed cursor. Selected dates are highlighted with strong, high-contrast backgrounds that adapt to light and dark themes, ensuring maximum clarity for both single-date and range selections. The range highlight uses a pill-like design with softer accents in the middle, giving users a smooth visual flow when choosing date ranges. Today’s date is subtly emphasized with a small dot, following modern calendar UI patterns found in apps like Apple Calendar and Google Calendar. Navigation is intuitive with floating, circular arrow buttons that provide clear hover states without overwhelming the layout. Overall, this component feels premium, accessible, and user-friendly, making it ideal for dashboards, booking systems, and analytics interfaces.

• Slarivo System Status Block

  Displays real-time or simulated system/service status with incident history.

• Slarivo Line Charts 5

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Crypto Dashboard

  Crypto dashboard with real time price update using a coincecko api with time and new card design

• 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 Horizontal Bar Chart

  Here is horizontal bar chart

• Slarivo Category Bar Chart

  A clean, responsive category bar chart component for visualizing sales channel performance. Perfect for dashboards and analytics pages.

• Slarivo Stats

  Here is minimalistic beautiful stats component

• Slarivo Block Game

  Block Game

• Slarivo Line Charts 4

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Glassmorphism Minimal Metrics

  Focused metric cards with glass surfaces, subtle motion, and concierge insight CTA banner

• Slarivo Progress Metric Card

  A KPI stat card pairing a large headline figure with a data-driven chart, rendered with Recharts and switchable between a smooth progression curve and bars.

• Slarivo Dashboard

  Storage Dashboard A clean usage tracker with category breakdowns, progress bar, and upgrade prompts. Ideal for cloud storage apps to monitor space and encourage plan upgrades.

• Slarivo Stats Card

  Stats Card This component is designed to display a single, key statistic. It includes a title, a primary value, an icon, and a percentage change indicator that is color-coded for positive or negative trends.

• Slarivo Stock Portfolio Card

  Stock Portfolio Card This component provides a comprehensive view of a user's stock portfolio, including total gain, individual holdings, and related news. It's designed to be highly reusable, accepting all data through props.

• Slarivo Area Chart

  here is area chart small

• Slarivo Onboarding Dialog

  A multi-step onboarding dialog with carousel navigation, animated progress dots, and cross-fading content. Built with Embla Carousel and Motion.

• Slarivo Detailed Normalized Incident Report

  detailed normalized area chart component

• Slarivo Glass Real time crypto Chart

  Glass Real time crypto Chart

• Slarivo Badge Tabs

  The Badge Tabs component is a dynamic, interactive tab system that displays badges alongside each tab label, making it ideal for real-time dashboards, notifications, or admin panels. Each tab can show a number or alert, and badges can animate as they change, providing a clear visual cue of updates. Selecting a tab highlights it distinctly, while inactive tabs remain subdued, ensuring users always know which tab is active. The component supports rich content for each tab, allowing for detailed displays such as messages, tasks, or alerts, all within a compact and visually engaging interface.

• Slarivo Advanced Normalized Incident Report

  here is example of advanced-normalized-incident-report

• Slarivo Multi Series Bar big

  Here is multi series bar chart big size

• 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 Scatter Chart

  Here is Scatter Chart component

• Slarivo Hero Section Note

  Here is Hero Section component

• Slarivo Funnel Chart Big

  Here is funnel chart big sized

• Slarivo Heat Map XL

  Here is heat map xl sized

• Slarivo EmptyState – Beautiful, Accessible ‘No Data’ States

  “Stop leaving your users in the void. The EmptyState component gives you elegant, accessible, and responsive UI for no-data moments. With built-in icons, customizable CTAs, and dark mode support, it turns empty screens into clear guidance and actionable UX. Perfect for dashboards, search pages, and error states.” ⚡ Why this works: Problem framing: “Stop leaving users in the void” → instantly relatable. Solution promise: “Elegant, accessible, responsive UI for no-data moments.” Feature highlights: Icons, CTA, dark mode, flexible usage. Use cases: Dashboards, search results, error/config screens.

• Slarivo Welcome

  Workspace Welcome This component provides a welcoming dashboard view for users, featuring a personalized greeting, quick action buttons, and an introductory video card. It's designed to be easily configured via props.

• Slarivo App Menu Bar

  The AppMenuBar component is a versatile, fully-featured navigation menu designed for modern web applications. It combines a clean, horizontal menubar layout with intuitive nested menus, allowing users to easily access projects, teams, calendar events, notifications, and files. Each menu item is enhanced with clear Lucide icons, and nested submenus are implemented using MenubarSub, ensuring that hover interactions are smooth and the parent menu stays open when navigating into submenus. The component supports multiple levels of navigation without closing unexpectedly, maintains consistent spacing between icons and text, and leverages subtle hover effects for better visual feedback. Its modular structure makes it highly customizable, making it ideal for dashboards, admin panels, or collaborative tools where organized and accessible

• Slarivo Statistics Card 12

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Activity Stats Card

  Activity Stats Card A visually polished card component to display a key metric with an icon, title, and subtext. It features a count-up animation for the primary metric and is built to be easily customized through props.

• Slarivo Nested Dashboard Menu

  This component is a nested menubar designed for complex dashboards, where each top-level menu (like Dashboard, Projects, Team, Tasks, Reports, Settings) can have submenus for additional options. It allows users to quickly access detailed sections without leaving the main navigation, keeping the interface organized, compact, and user-friendly. By using submenus, it supports multi-level navigation in a clean and intuitive way, making it ideal for admin panels or productivity apps.

• Slarivo Stock Trends Carousel

  StockTrendsCarousel A responsive and animated carousel to display trending stock information. It features a clean header, a horizontally scrollable list of stock cards, and a navigation button.

• Slarivo Tooltip Chart

  Here is Tooltip Chat component

• Slarivo Hero Section

  Here is Hero Section component

• Slarivo Heat Map middle

  Here is heat map middle sized

• Slarivo Animated Hero

  Beautifully designed, fully responsive, expertly crafted with amazing jelly animation.

• Slarivo Incident Report

  Incident report bar

• Slarivo Layered Funnel Chart

  Here is Layered Funnel Chart small

• Slarivo Layered Chart XL

  Here is Layered Chart XL sized

• Slarivo Stats

  Here is minimalistic stats with progress bar

• Slarivo Hero with Dashboard Mockup

  A left-aligned serif hero section with a media panel showing an image backdrop and a floating dashboard mockup, plus an animated call-to-action.

• Slarivo Bar Chart Medium

  here is bar chart component medium size

• Slarivo Horizontal Bar big

  Here is horizontal bar chart big size

• Slarivo Sleep Tracker Card

  Sleep Tracker Card A visually polished card component for displaying sleep analysis data, including key statistics, an animated sleep-stage graph, and a detailed breakdown of sleep cycles.

• Slarivo Shine Border Stats Card

  An animated conic-gradient shine border wrapping a business stats dashboard card with live metrics and a call-to-action button.

• Slarivo Hero AI Value Proposition

  A hero section that presents an AI product's value proposition with an animated headline, CTA, social proof avatars, and a dashboard mockup preview.

• Slarivo NestedTabs

  The Nested Tabs (Multi-Level Tabs) component introduces a structured way to organize complex content within your application. Unlike traditional flat tabs, it supports hierarchical navigation where each main tab can reveal its own set of sub-tabs, allowing users to dive deeper into related sections without overwhelming the interface. Smooth animations ensure that transitions between parent and child tabs feel natural and engaging. This makes it ideal for dashboards, documentation portals, and settings panels, where users often need to navigate across multiple categories and subcategories. With built-in support for both light and dark themes, the component adapts seamlessly to modern UI designs while keeping content neatly organized and highly accessible.

• Slarivo Sidebar Dashboard Skeleton

  Loading placeholder that mirrors a sidebar dashboard layout with a nav rail, header actions, stat cards, and list rows.

• Slarivo Area Chart

  Here is Area chart small sized component

• Slarivo Incident Report

  Incidenet Report

• Slarivo Interpolation Chart middle

  Here is Interpolation Chart BIG sized

• Slarivo Hexagon map

  Hexagon map large sized

• Slarivo Advanced Stats

  Analytics dashboard stats section with an animated area chart, KPI cards, and scroll-triggered timeline reveals.

• Slarivo Stacked Bar XL

  Here is stacked bar xl sized component

• Slarivo Funnel Chart

  Here is funnel chart small

• Slarivo Stats

  Here is minimalistic stats component

• Slarivo 8-bit Stats Dashboard

  KPI metrics dashboard with stat cards and 8-bit progress bars, in the retro pixel style.

• Slarivo Area Chart Small

  Here is area chart small

• Slarivo settings

  here is modern settings component

• Slarivo clipped-video-tab

  A cinematic clipped video section built with React, TailwindCSS, and Framer Motion for modern UI experiences.

• Slarivo Features Card

  Stats & KPIs component from the 21st.dev community.

• Slarivo Page Header with Breadcrumbs

  An application page header with breadcrumbs, a status badge, and action buttons.

• Slarivo Trello Kanban Board

  Trello Kanban Board drag and drop material component, project overview tasks boards

• Slarivo Kanban

  Kanban board with the number of tasks in each stage. Here's a professional and user-friendly description for that board layout:

• Slarivo UltraQualityKanbanBoard

  A never-before-seen, ultra-rich React Kanban board built with Tailwind CSS. Supports dynamic columns, inline editing, HTML5 drag-and-drop of cards between lanes, add/remove columns & cards, persistent layout via localStorage, and responsive scrolling for infinite lanes.

• Slarivo Kanban Board Skeleton

  Animated loading placeholder that mimics a three-column kanban board with card, avatar and tag skeletons.

• Slarivo Status Selector

  Here is modern Status Selector component

• Slarivo ReUI Gantt

  ReUI Gantt with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Trigger to Action

  A two-step automation recipe card that stacks a "When" trigger row and a "Then" action row connected by a downward arrow, each with a brand-colored app icon tile and event label.

• Slarivo Wallet Card 1

  wallet card balance account

• Slarivo Circuit Board

  An interactive circuit board layout with labeled nodes and animated electricity pulses that travel along right-angle traces between connected nodes.

• Slarivo Glare Cards

  A premium, interactive dashboard component featuring dynamic 3D tilting, cursor-responsive radial glare, and animated data visualizations.

• Slarivo Line Chart

  Here is Line Chart 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 Neo-Brutalist Kinetic Deck

  A physics-based interactive card system featuring free-form dragging, realistic 3D flips, and a custom context menu. Built with Framer Motion and Tailwind CSS, it uses spring physics to create a tactile, "heavy" feel perfect for retro-modern portfolios or…

• Slarivo Bento Dashboard

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

• Slarivo Login Card

  A Login Card component for displaying ordered records, tasks, activity, and repeated content, featuring task, checklist, card, badge.

• Slarivo Segment Group

  A Segment Group component for switching between related views without leaving the current context, featuring segmented control, segmented-control, tabs, filter.

• Slarivo Floating Panel

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

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, dashboard, tabs, search.

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, search, theme toggle, theme-toggle.

• Slarivo ReUI Gantt

  ReUI Gantt with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Gantt

  ReUI Gantt with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Gantt

  ReUI Gantt with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Gantt

  ReUI Gantt with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Kanban Board

  A fully interactive, multi-column Kanban board featuring native HTML5 drag and drop, inline task creation, rich card metadata, and a clean minimalist aesthetic.

• Slarivo Kanban Board

  A fully interactive, multi-column Kanban board featuring native HTML5 drag and drop, inline task creation, rich card metadata, and a clean minimalist aesthetic.

• 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 Sidebar with Browser like Tabs

  A Sidebar with Browser like Tabs component for monitoring workflows, operational data, and product activity, featuring layout, dashboard, chrome, tabs.

• Slarivo Path to Resilience Workflow Grid

  A reusable six-card capability grid for AI, product, and service delivery pages.

• Slarivo API Key Manager

  A responsive API key management panel with masked credentials, scopes, inline revocation, and a secure one-time secret reveal flow.

• Slarivo Kanban Board

  A task board that survives real data: long titles, six assignees, a column with forty cards in it. Columns, drag between them, assignees, priority and progress per card. Pointer-based drag, so it works on a trackpad and a phone. More at layro.vercel.app.

• 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 Welcome Banner

  A dashboard hero banner that announces a redesigned interface with a headline, short pitch, download CTA and illustration, used as the first widget on an admin/app homepage.

• Slarivo Chart Tooltip

  A styled tooltip content block for data charts that shows labeled values with colored dot, line, or dashed indicators next to each series.

• Slarivo Stat Card

  A compact KPI card showing a metric value with an icon and a tinted trend badge comparing to a previous period.

• Slarivo Tabs with Icons

  A tabs component with icon-labeled triggers switching between card panels for dashboard overview, analytics, and settings views.

• 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.