SLARIVO / SIDEBARS

Sidebars Components

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

• Slarivo Sidebar

  A hover sidebar, inspired by Supabase's sidebar.

• Slarivo Sidebar

  Sidebar

• Slarivo Sidebar

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

• Slarivo Sidebar 1

  A searchable component navigation sidebar with grouped, scrollable sections and item counts.

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

  Animated vertical sidebar navigation with a spring hover highlight, an animated active indicator bar, collapsible groups, per-item dash accents, and drag-to-resize.

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo SidebarShowcase

  This custom sidebar component is a fully responsive, interactive navigation panel built using ShadCN UI, Framer Motion, and React. It features a team switcher at the top, allowing users to quickly toggle between different teams using a dropdown menu. The sidebar is divided into categories such as “Main” and “Work,” where each category contains individual navigation items. The Work category supports collapsible sub-labels with smooth animations for nested items, while some items can remain as single links without dropdowns. Each navigation item can display a status badge (like “New,” “Updated,” or “Coming Soon”) to indicate priority or updates. At the bottom, the sidebar includes a user profile dropdown with options for profile management, settings, billing, and logout, fully leveraging ShadCN UI’s DropdownMenu. The component combines clean typography, muted default text, hover effects, and smooth motion animations, offering a polished and professional navigation experience suitable for modern web applications.

• Slarivo Sidebar Light

  Lightweight sidebar navigation with nested items, icons, and active route highlighting.

• Slarivo Workbench Sidebar

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

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Spotlight New

  A new spotlight component with left and right spotlight, configurable and customizable.

• Slarivo Navbars

  Here is Navbars component

• Slarivo Sticky Footer

  A modern, animated sticky footer with multi-column navigation, social media icons, Perfect for SaaS, fintech, startups, and business websites to enhance branding and user engagement.

• Slarivo Bottom Nav Bar

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

• Slarivo Chat template

  This component provides a complete chat interface with a sidebar for navigation, a contact list, and a chat window for messaging.

• Slarivo Whatsapp Sidebar

  this is a replica of whatsapp desktops's sidebar

• Slarivo Spotlight Card

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

• Slarivo 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 Safari

  The Safari_01 component is a sleek, macOS-style browser window mockup designed to showcase images or content within a realistic browser frame. At the top, it features the familiar red, yellow, and green "traffic light" buttons on the left—used for closing, minimizing, and maximizing the window—while a subtle icon on the right adds a modern touch for actions like settings or sharing.

• Slarivo Spotlight Button

  A modern and minimal bottom navigation bar with smooth spotlight effects on hover. Simple icons and subtle motion give it a polished feel that's perfect for clean UI designs.

• Slarivo RuixenMonoChat

  MonoChat is a sleek, minimalist chat interface designed with clean black & white and dark mode support. It features an intuitive sidebar for selecting chat participants, dynamically filtering messages to focus conversations, and a polished input area for seamless messaging. Perfect for professional and creative teams who value simplicity and clarity in communication.

• Slarivo Social Links

  A fully responsive and theme-aware social media links component that displays a vertical sidebar on desktop and a floating expandable dock on mobile. Each link is styled with platform-specific gradients and consistent white icons for both light and dark themes. The floating dock includes an interactive toggle button that adapts its icon color based on theme mode.

• Slarivo Splitter

  Here is Splitter component

• Slarivo Scroll Legend

  A sleek, interactive scroll legend component inspired by the elegant UI of Raycast. Built with accessibility and performance in mind, this component enhances user experience by providing clear visual guidance during scroll interactions. Fully responsive, theme-aware (light/dark), and easy to integrate into any React or Next.js project. Perfect for dashboards, documentation sites, or any interface where progressive scrolling needs a little extra magic.

• Slarivo Message Design Card List

  Here is Message Design Card List component

• Slarivo Toggle nav

  here is toggle nav component

• Slarivo Sidebar Dashboard Skeleton

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

• Slarivo Resizable

  Accessible resizable panel groups and layouts with keyboard support.

• Slarivo Resizable

  Accessible resizable panel groups and layouts with keyboard support.

• Slarivo Resizable

  Accessible resizable panel groups and layouts.

• Slarivo Document Viewer Sidebar

  A collapsible thumbnail sidebar for document and PDF viewers, with a loading skeleton.

• Slarivo Email Categories

  Email categories component for building email client app.

• Slarivo Help Popper

  Sidebar help button with a promo card that glides into it when hidden: the button then wears a blue dot and bounces, and its menu keeps the docked card plus what's new.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Sparkles

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

• Slarivo Footer section

  Basic footer section with theme toggle

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Dock

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

• Slarivo Footer

  Footer

• Slarivo Bento Grid

  A nice Bento Grid with hover items and shadow.

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Horizon Hero Section

  3d hero section component with interactive animations, 3d elements, parallax, post processing, scroll animation, and animated sidebar menu

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Background Boxes

  A full width background box container that highlights on hover

• Slarivo Spotlight

  A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Mini Navbar

  Minimalist 'Mini Navbar' Responsive UI component featuring subtle animations for top web page headers and navigation.

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

  Cool Animated Dock

• Slarivo Sticky Scroll Reveal

  A sticky container that sticks while scrolling, text reveals on scroll

• Slarivo Hero Video Dialog

  A hero video dialog component.

• Slarivo Card Spotlight

  A card component with a spotlight effect revealing a radial gradient background

• Slarivo Limelight Nav

  A sleek and modern navigation bar with a unique "limelight" effect that follows the active tab. This component is designed to be both highly functional and visually appealing, providing a smooth and intuitive user experience. Part of the EaseMize UI library, it's incredibly easy to integrate into your projects and customize to fit your brand's aesthetic. The component is built with TypeScript and is fully typed for a better developer experience

• Slarivo Footer

  Footer

• Slarivo Features

  Here is Features Component

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

  A stackable news card component that displays updates in an interactive card format. Built for Dub.co's notification system. Features - Stacked card layout with hover animations - Swipe-to-dismiss functionality - Touch-friendly mobile interactions - Completion animation state - Progressive card reveal on hover

• Slarivo Bottom menu

  original by @raunofreiberg icons by @nucleoicons

• Slarivo Gantt

  Maps component from the 21st.dev community.

• Slarivo Navbars

  Here is Navbars component

• Slarivo Spotlight

  A dynamic spotlight effect component that follows cursor movement.

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

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

• Slarivo Sidebar

  Animated and responsive sidebar component with multiple categories section and mobile device support

• Slarivo Feature Section

  Here are three lines you can use for this Featured Section: A clean two-column layout highlighting features with icons and descriptions on the left, and a smooth scrollable options list on the right. Designed with shadcn/ui cards, borders, and fade effects, ensuring both clarity and modern aesthetics. Perfect for showcasing key product highlights or services while keeping user engagement with continuous scrolling options.

• Slarivo SearchBar

  The component combines practical functionality with playful visual effects, making it perfect for applications where you want to add a touch of creativity to the user experience. It's built with React, Framer Motion, and Tailwind CSS, making it highly customizable and easy to integrate.

• 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 PARALLAX SCROLL FEATURE SECTION

  PARALLAX SCROLL FEATURE SECTION using framer motion

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

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Efferd Dashboard 2

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

• Slarivo Curved Menu

  A modern React navigation component with an animated curved sidebar, interactive menu items, and social media footer. with smooth animations

• Slarivo Apple Spotlight

  A beautiful search component inspired by macOS Spotlight.

• Slarivo Feature Spotlight

  Feature Spotlight A responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and call-to-action, with a dynamic visual element. The component includes subtle, continuous animations on floating images to draw user attention and add a modern feel. It is fully theme-adaptive, using shadcn/ui variables for colors and styling.

• Slarivo PDF Viewer

  A basic PDF viewer, using shadcn components + react-pdf

• Slarivo dock

  Here is dock component

• Slarivo Announcement

  Announcement in Sidebar

• 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 book slider

  click to scroll

• Slarivo Menu

  Account Menu – Manage with ease. Quick access to orders, reviews, addresses, favorites, and settings in one place.

• Slarivo Hero Section

  Here is Hero Section component

• Slarivo Sidebar Nav Skeleton

  A loading placeholder for a sidebar navigation, with a logo header, a list of icon-and-label nav rows, and a user profile row at the bottom.

• Slarivo Reshaped Menu item

  Building block for menus and navigation that renders its main area from children and works with both href and onClick. Supports critical and neutral colors, selected and disabled states, three sizes, startSlot/endSlot composition, built-in icon support and a MenuItem.Aligner utility for aligning with surrounding text.

• Slarivo Menu

  Here is Menu component

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Sheet

  A flexible React + Tailwind CSS Sheet (Drawer) component built with Radix UI, featuring animated slide-in panels from any side. Perfect for dashboards, modals, mobile menus, and responsive UI layouts.

• Slarivo Floating Header

  a sleek, sticky navigation bar that stays visible while you scroll, ensuring quick access to essential links. With a rounded glass-like design, mobile-friendly drawer menu, and smooth hover effects, it delivers a premium user experience. Perfect for landing pages, SaaS apps, or blogs, it combines elegance and usability in one compact 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 Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Stack Feature Section

  This component is a React + Tailwind CSS hero section with a heading, subtext, and call-to-action buttons on the left, plus an animated multi-orbit icon display on the right.

• Slarivo Hero Section

  Hero Section Component This component creates a dynamic and engaging hero section, perfect for landing pages. It features a two-column layout with animated text, actionable buttons, social proof statistics, and a visually appealing image collage.

• Slarivo Footer column

  Here is Footer component

• Slarivo Footer

  Here is Footer component

• Slarivo Lets Work Section

  A minimal, standout "Let's Work Together" component with a hover effect and smooth micro-interactions

• Slarivo Apple Liquid glass switcher

  Here is Apple Liquid glass switcher component

• Slarivo Navbar

  This MinimalChatBox component is a lightweight, interactive chat interface built with React, Framer Motion, and Tailwind. It provides a clean toggleable chat box that smoothly animates in and out of view. The design is simple yet functional, featuring an input field for typing messages and quick-access icons for opening, closing, and sending. Its minimal styling makes it easy to embed into any application while maintaining a modern, distraction-free look.

• Slarivo Hero Section

  Here is Hero section components

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Navigation Menu

  Here is Navigation Menu component

• Slarivo Navigation Bar

  Here is Navigation Bar component

• Slarivo Banner

  he Banner component is a flexible notification element for showing messages, alerts, or announcements. It supports multiple variants (success, warning, info, premium, etc.), different sizes, optional icons, action buttons, and a closable option. It also includes an autoHide feature to dismiss the banner automatically after a set time and an optional shimmer shade effect for extra visual emphasis.

• Slarivo Menu Vertical

  Here is Menu Vertical component

• Slarivo Pie Chart

  Here is Pie Chart 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 Feature Sections

  Here is Feature Sections component

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Kanban Board

  Here is Kanban Board component

• Slarivo Sign In

  A simple sign in component

• Slarivo Login

  Auth Form Split Screen This component provides a full-page, two-column layout for user authentication. The left panel contains the form, and the right panel displays a promotional image. It's built to be highly reusable, allowing you to customize the logo, titles, image, and form submission logic via props.

• Slarivo FAQ Section

  The FAQSection component is a fully responsive and configurable FAQ layout built with Shadcn UI and Tailwind CSS. It features a clean two-column grid with collapsible accordions, allowing users to explore answers to common questions without clutter. Each section is data-driven — meaning you can easily customize the titles, descriptions, and FAQ content using props. Designed for modern web apps, this component provides a smooth, consistent experience across devices while preventing layout shifts when expanding or collapsing items. Ideal for product pages, help centers, and support sections.

• Slarivo Toast

  Here is Toast component

• Slarivo Login

  Here is Login component

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo Profile Dropdown

  Here is profile dropdown component

• Slarivo Financial Score Cards

  This is a beautiful financial score card component with animated half-circle progress indicators, strength badges, and staggered entrance animations.

• Slarivo Testimonals Carousel

  Here is Testimonals Carousel component

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Card

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

• Slarivo Profile Selector

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

• Slarivo dropdown 01

  A reusable component for dropdown

• Slarivo Expandable

  Here is expandable component

• Slarivo Side Panel Video

  Here is Video Side Panel component

• Slarivo Navbars

  Here is Navbars component

• Slarivo Vertical Bars

  Here is Vertical Bars component

• Slarivo Expandable Tabs

  A set of expandable tabs that show both icon and text when selected. Tabs animate smoothly to expand or collapse on click, and clicking outside collapses any open tab. Features - Animated Expansion: Smooth animations when revealing tab labels - Space Efficient: Collapses to icons-only when not in use - Click Outside: Automatically collapses when clicking outside - Separator Support: Optional separators between tab groups - Customizable: Supports custom colors and styling - Shadcn/UI Theme: Fully integrated with shadcn/ui theming system - Dark Mode: Built-in dark mode support - Accessible: Keyboard navigation and screen reader friendly Example Use Cases - Navigation Menus: Compact sidebar navigation - Toolbars: Feature-rich toolbars that save space - Mobile Interfaces: Touch-friendly navigation - Settings Panels: Grouped settings controls - Dashboard Controls: Quick access to main features

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo AI prompt Box

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

• Slarivo Animated AI Chat

  An AI chat interface with glass-morphism design and smart command features. Built with React and Framer Motion for smooth animations and professional interactions.

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Anime Navbar

  The AnimeNavBar is a responsive, animated navigation bar built with React, Framer Motion, and Tailwind CSS. It supports hover effects, active state highlighting, and animations for both desktop and mobile views, creating an engaging and visually appealing user experience.

• Slarivo Background Components

  Here is Background Components component

• Slarivo Floating Icons Hero Section

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

• Slarivo Interactive Selector

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

• Slarivo 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 Galaxy Interactive Hero Section

  A dynamic and visually engaging hero section featuring a Spline 3D background, a responsive navigation bar with blurred effects and dropdowns, a prominent content overlay with parallax scrolling text, buttons, and a follow-up screenshot section with parallax. Fully responsive and includes mobile navigation

• 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 Ruixen Moon Chat

  This RuixenMoonChat component is a visually minimalistic AI chat-style interface designed to sit just below the center of the screen against a full-screen moon-themed background image. The interface is inspired by the first empty-chat look of modern AI tools like ChatGPT, keeping the design lightweight, monochromatic (black, white, and neutral grays), and distraction-free. At the top center, there’s a bold white heading with a short tagline encouraging users to start typing. The main chat input box appears closer to the lower half of the screen and includes an auto-resizing textarea for smooth typing without manual resizing. A row of Quick Action buttons below the input provides ready-to-use prompts such as Generate Code, Launch App, UI Components, and more—ideal for developers exploring new ideas quickly. These buttons are styled as rounded, subtle pills with borders and icons from Lucide to keep the experience consistent and professional. The design avoids scroll bars and dark/light theme toggles, offering a clean black-and-white look that emphasizes the background image and central chat input. Overall, this component works well as a starting point for an AI-powered coding assistant or creative brainstorming tool.

• Slarivo Globe Feature Section

  The Featured_05 component is a modern hero section designed to spotlight Ruixen UI’s core value proposition. On the left, it presents a bold heading and supporting text that communicates the simplicity, scalability, and performance of the UI library. A prominent call-to-action button encourages users to engage immediately. On the right, a visually striking animated globe subtly anchors the section, reinforcing the product’s global relevance and modern aesthetic. The layout is fully responsive, ensuring that content and visuals remain balanced across devices.

• Slarivo Claude-style Chat Input

  A replica of the Claude AI chat interface featuring a polished, auto-resizing text input, file attachment previews, and quick action chips. Includes smooth animations, dark mode support, and a refined "swoosh" underline aesthetic.

• Slarivo FAQ Chat Accordion

  FAQ Accordion component is a versatile and interactive UI element designed to display frequently asked questions in a collapsible format. It enhances user experience by allowing users to expand and collapse sections to view answers, making it ideal for FAQs, help sections, and more. Features - Collapsible Sections: Users can expand or collapse sections to view or hide answers. - Animated Transitions: Smooth animations using Framer Motion for opening and closing sections. - Customizable Icons: Supports custom icons for each question, with flexible positioning. - Theming Support: Fully integrated with shadcn/ui theming for consistent styling. - Responsive Design: Adapts to different screen sizes for a seamless experience. - Accessible: Keyboard navigation and screen reader friendly. - Customizable Styles: Easily customize question and answer styles with className props. Example Use Cases - FAQ Sections: Display frequently asked questions in a compact, user-friendly format. - Help Centers: Organize help topics and answers for easy navigation. - Product Details: Provide detailed product information in a structured manner. - Educational Content: Present educational material in a question-and-answer format.

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

  The IntegrationHero component is a visually engaging section designed to showcase integrations with popular tools. It features two horizontal rows of app icons that continuously scroll in opposite directions, creating a dynamic carousel effect. The component includes a central call-to-action with a headline, description, and a “Get Started” button, encouraging users to explore integrations.

• Slarivo AI Assistant Interface

  An AI chat interface, with input, file uploads, suggestions and an animated logo

• 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 FAQ tabs

  Replace the boring accordion with these cool animated ones.

• Slarivo Bolt Style Chat

  A Bolt inspired hero chat interface with a prompt input, model selector, glowing ray background, and modern dark UI for AI product landing pages.

• Slarivo Category List

  An interactive and theme-adaptive list component used to display and navigate through different categories or features. Each item provides visual feedback on hover, revealing more details and an icon, making it ideal for guiding users through key sections of an application.

• Slarivo Interactive Logs Table

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

• Slarivo Dotted Dialog

  A customized dialog component based on shadcn/ui Dialog with a dotted background pattern inspired by Motion.dev website. Features: • Dotted background pattern with blur effect • Dark/light theme support • Fully accessible (based on Radix UI) • Smooth animations for open and close states • Responsive design • Includes all standard dialog components (header, footer, title, description)

• Slarivo Interactive Changelog With Dialog

  Interactive Changelog With Dialog

• Slarivo Kanban

  here is interactive kanban board

• Slarivo Floating Action Panel

  A versatile floating action panel component with support for multiple triggers and modes. Features: • Multiple trigger buttons with different modes • Smooth animations using Framer Motion • Backdrop blur effect • Keyboard navigation and accessibility • Dark mode support • Responsive design • Form handling for note-taking • TypeScript support Notes: • Built with Framer Motion for smooth animations • Uses Lucide React for consistent iconography • Supports multiple panel modes (actions and notes) • Includes keyboard navigation (Escape key to close) • Click outside the panel to close • Fully typed with TypeScript • Customizable styling using Tailwind CSS • Mobile-friendly design

• Slarivo Bento Card

  An interactive bento card with animated tabs and workspace preview.

• Slarivo Social Icons

  This is a social icons navigation like icons hover with a tooltip.

• Slarivo Interactive Accordion

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

• Slarivo Animated Project Cards

  This component renders a list of animated, expandable project cards with smooth framer-motion transitions, hover/tap effects, dynamic chevron toggling, and staggered child animations for category tags, metadata, and descriptions. Can be easily customizable for any accordion style component. Perfect for freelance dashboards, gig marketplaces, or any project listing interface where you want rich interactivity and polished microinteractions.

• Slarivo Activity Dropdown

  Activity Dropdown: Features a staggered reveal animation where each notification item fades in sequentially, a rotating chevron indicator, and full light/dark theme support.

• Slarivo Floating Chat Widget

  Floating chat widget with AI agent selection dropdown and animations

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

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

• Slarivo 3D Icon Tabs

  Animated tabs, inspired by Airbnb's latest design update.

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

  Here is Hero Section component

• Slarivo Social Media

  Interactive social media icon row with a smooth hover effect that highlights the active icon, changes its background color, and reveals a matching label below. Ideal for minimalist portfolios, landing pages, or personal websites to elegantly showcase social links.

• Slarivo Orbiting Carousel with Animated Icons

  This variation of the Orbiting Carousel adds a layer of interactivity with animated icons. Each item in the carousel not only orbits but also features its own animation, drawing attention and adding a playful touch to your UI.

• Slarivo Team Showcase

  Team Showcase A responsive and animated component to showcase team members or featured profiles in a visually engaging, overlapping card layout. It features staggered entrance animations for the cards and subtle hover effects.

• Slarivo Tech Solutions Hero Section

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

• Slarivo 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 Feature Accordion Section

  This component provides an interactive and visually engaging way to present key features in an organized layout. The left section highlights important items with clear icons, images, and counts, while an accordion ensures that detailed information can be expanded or collapsed as needed.

• Slarivo AI Prompt Box

  An animated AI prompt input with expanding textarea, keyboard shortcuts, model selector, and file attachments.

• Slarivo Feedback Slider

  Here is colored feedback slider component

• Slarivo Referral Card

  Referral Card This component provides a visually appealing and interactive card for referral programs. It uses framer-motion for smooth animations and is built with reusability in mind, allowing you to easily customize its content through props.

• Slarivo Executive Impact Carousel

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

• Slarivo Stock Card

  Stock Card This component, StockCard, displays stock information with a smooth hover animation. It's designed to be highly reusable, accepting props for the logo, ticker, name, price, and percentage change.

• Slarivo Feature Card

  Feature Card A versatile, theme-adaptive card component with built-in animations to showcase product features elegantly.

• Slarivo Feature Section

  Feature Section A responsive and theme-adaptive component designed to showcase a product's key features. It includes a main title, a subtitle, a grid of features with icons, and a final call-to-action card. It's built to be highly reusable by accepting all content through props.

• Slarivo Dynamic Island

  Here is Dynamic Island component

• Slarivo Toast

  Here is Toast component

• Slarivo Alert Dialog Icon

  Here is Alert Dialog Icon component

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

  A reusable card 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 Bar Visualizer

  Here is Bar Visualizer component

• 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 Vertical accordion

  here is interactive vertical accordion

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

  Here is Special Card 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 Ai chat input

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

• Slarivo Box Carousel

  Here is Box Carousel component

• Slarivo Vertical Bars

  Here is Vertical Bars component

• Slarivo Chat Bubble

  Voice Chat Bubble A responsive, theme-adaptive component that displays a collapsed list of user avatars for a voice chat. Clicking it opens an animated modal with the full participant list and a call-to-action button.

• Slarivo Folder Interaction

  An animated folder with interactive open/close mechanics.

• 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 Settings Card with Sidebar

  A settings card with a vertical sidebar of icon-labeled sections that swap the panel content when selected.

• Slarivo Branching Tree Nav

  A precision documentation and sidebar tree view featuring continuous dynamic SVG branch lines, animated folder collapsing, and smooth physics-driven spring hover/selection glide pills.

• Slarivo Sidebar Nav Group

  A collapsible sidebar navigation with grouped sections, sub-item links, and a chevron that rotates when a group expands.

• Slarivo Settings Sidebar Accordion

  A settings sidebar navigation built from an accordion, with icon-labeled sections that expand to reveal grouped links.

• Slarivo File Tree View

  A collapsible file tree explorer that shows nested folders and files with per-file hover actions like download and delete.

• Slarivo Multi-level Collapsible Menu

  A nested, multi-level collapsible navigation menu inside a card, with expandable folders, animated chevrons, and selectable items.