SLARIVO / FILE TREES
File Trees Components
Browse 216 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.
- Slarivo File Tree
A compound file tree with nested folder rows, extension-aware icons, keyboard navigation, hover highlighting, and single or multi-select for browsing file structures.
- Slarivo Tree Folder structure
This is tree folder structure
- Slarivo Tree
Here is Tree component
- Slarivo FileTree
The FileTree component is a lightweight and intuitive file explorer built using shadcn/ui utilities and lucide-react icons. It provides a clear hierarchical structure to represent files and folders, supporting smooth expand and collapse transitions for nested items. With its simple design, it is easy to integrate and customize while maintaining consistency with the shadcn UI style. Ideal for use cases such as dashboards, project explorers, or content management tools, this component ensures both functionality and visual clarity.
- Slarivo File Tree
A component used to showcase the folder and file structure of a directory.
- Slarivo Tree Code Viewer
Interactive file-tree viewer with an expandable folder tree and a synced, syntax-highlighted multi-file code panel for docs and code examples.
- Slarivo FileTree
This File Tree component is a fully interactive explorer built using shadcn/ui and lucide-react icons. It mimics the structure of an IDE file browser, allowing you to expand and collapse folders, select files or folders, and perform quick actions like adding, renaming, or deleting items. The component demonstrates recursive rendering for nested structures, contextual controls with tooltips, and smooth UI styling powered by shadcn. It’s flexible enough to serve as a base for a project navigator, documentation tree, or any hierarchical data display, while remaining consistent with the shadcn design system.
- Slarivo Filesystem Item
Render a filesystem tree of arbitrary depth using a single recursive component.
- Slarivo Tree View
A hierarchical data display component with expand/collapse functionality, perfect for file explorers, organizational charts, or any nested data structure.
- Slarivo File Tree
Collapsible file and folder tree with colored language-specific icons for 24+ file types, path highlighting, and configurable expand/collapse. Zero dependencies — just React and Tailwind. Available in jalco/ui - more variants: https://ui.justinlevine.me/docs/components/file-tree
- Slarivo Breadcrumb
Enchanced shadcn/ui breadcrumb
- Slarivo Breadcrumb
Enchanced shadcn/ui breadcrumb
- Slarivo File Tree
A minimal, dark-themed file tree component with smooth expand/collapse animations, color-coded file icons, and subtle hover glow effects.
- Slarivo 3D Folder
A reusable 3D Folder component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Folder
An interactive folder animation that responds to hover, making file browsing visually engaging. Perfect for dashboards, file managers, and modern UI systems.
- Slarivo Simple Growth Tree
A minimalist tree, elegantly growing with each click.
- Slarivo Breadcrumb
Displays the path to the current resource using a hierarchy of links.
- Slarivo Breadcrumb
Displays the path to the current resource using a hierarchy of links.
- Slarivo Reddit Nested Thread Reply
A responsive and theme-adaptive, Reddit-style nested comment system. It supports voting, replying, collapsing threads, and adding new comments, built with shadcn/ui components.
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Tree
A flexible tree view component with collapsible nodes, selection, and animations.
- Slarivo File Trigger 13
Here is File Trigger component
- Slarivo File Trigger 13
Here is File Trigger component
- Slarivo Fractal Bloom Tree
brand new hero component for you. This one is called "Fractal Bloom." It features a generative, tree-like fractal that grows and blossoms on the screen. The growth is subtly influenced by your mouse position, creating a unique, organic animation every time.
- Slarivo Tree Node Tooltip
This TreeView component is a modern, lightweight file explorer built with React, Framer Motion, and shadcn/ui. It displays a hierarchical structure of folders and files, where users can expand or collapse folders by clicking on either the folder icon or the name. Each item shows a tooltip on hover, making it easy to identify long or truncated file names. The design follows shadcn UI styling principles with clean hover effects, accent colors, and rounded corners, while Framer Motion adds smooth expand/collapse animations. This makes the component both visually appealing and intuitive to use, ideal for dashboards, code editors, or any application that needs a structured tree navigation system.
- Slarivo Tree
A customizable tree component for React.
- Slarivo Tree
A customizable tree component for React.
- Slarivo Tree
A customizable tree component for React.
- Slarivo Tree
A customizable tree component for React.
- Slarivo Dendrogram
here is example of dendrogram
- Slarivo Tree View
Here is Tree View component
- Slarivo Tree View
Here is Tree View component
- Slarivo Table
This is table with filder and sorting
- Slarivo Folder Interaction
An animated folder with interactive open/close mechanics.
- Slarivo File Trigger
Here is FIle Trigger component
- Slarivo MagicTree
The MagicTree component is a visually engaging and interactive file explorer built with shadcn/ui styling and lucide-react icons. It displays hierarchical data with smooth expand and collapse animations, making it easy to navigate nested folders and files. Selected nodes are highlighted with a distinct icon and background, while special nodes can feature a sparkling effect for added visual flair. This component is fully customizable, supports default data, and provides an intuitive interface for exploring and managing files in a creative, magical-themed layout.
- Slarivo GlowTree
The Glow Tree component is a visually engaging and interactive file explorer built with Shadcn UI styling utilities and lucide-react icons. It displays hierarchical data, such as files and folders, with smooth expand and collapse animations using Framer Motion. Each node can optionally have a glowing effect, creating a pulsating highlight that draws attention to important files or folders. The component supports selection, updating the styling of the currently selected node for both light and dark themes. It is fully client-side, lightweight, and designed to provide a futuristic, dynamic experience while remaining easy to integrate and customize.
- Slarivo Interactive Bento Gallery
Interactive Bento Gallery
- Slarivo Sidebar Component
Here is Sidebar Component
- Slarivo Background Components
Here is Background Components component
- Slarivo Background Components
Here is Background Components component
- Slarivo Features
Here is Features Component
- Slarivo Team
Here is Team component
- Slarivo Footer
Here is Footer component
- Slarivo 3D Folder
A beautifully crafted folder with back panel, tab, front panel, and a subtle shine effect that opens smoothly on hover
- Slarivo Project Showcase
A minimal, list-based portfolio section with a cursor-following image preview. On hover, a smooth floating image appears and tracks your mouse using lerp-based animation.
- Slarivo Image Gallery
Here is Image Gallery component
- Slarivo Animated Card Diagram
Here is Animated Card Diagram component
- Slarivo File Viewer
TypeScript-based React component, inspired by Supabase UI, for navigating file trees and previewing code with Shiki syntax highlighting. Perfect for documentation or dev tools, it offers file selection, code copying, and GitHub integration.
- Slarivo Card Carousel
Here is Card Carousel component
- Slarivo Menu Vertical
Here is Menu Vertical component
- Slarivo Pie Chart
Here is Pie Chart component
- Slarivo Pie Chart
Here is Pie Chart component
- 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 Feature Sections
Here is Feature Sections component
- Slarivo Feature Sections
Here is Feature Sections component
- Slarivo Portfolio and Image Gallery
Here is Portfolio and Image Gallery component
- Slarivo 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 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 File Upload
Here is File Upload component
- Slarivo Loading Carousel
Here is Loading Carousel component
- Slarivo Carousel
Shareholder Reports Carousel This component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on the scroll position, providing a clean and intuitive user experience. The component is fully responsive, theme-adaptive, and built to be easily populated with data via props.
- Slarivo Funnel Chart
Here is Funnel Chart component
- Slarivo Funnel Chart
Here is Funnel Chart component
- Slarivo Dot Flow
here is Dot Flow component
- Slarivo Financial Markets Table
The FinancialTable component is a comprehensive data table designed for displaying market indices and financial data with interactive features and smooth animations. It features circular country flag icons, color-coded performance badges, sparkline charts, and responsive grid layout that adapts to different screen sizes while maintaining proper spacing. The component includes hover effects, selection states, and Framer Motion animations for enhanced user experience, making it ideal for financial dashboards, trading platforms, or investment tracking applications where users need to quickly scan and compare market performance data.
- Slarivo Bucket
An animated file bucket component with drag interactions.
- Slarivo dock
Here is dock component
- Slarivo Music Portfolio
A sophisticated React component for displaying music portfolios, discographies, or creative project collections with stunning interactive effects. Features include text scrambling animations on hover using GSAP, dynamic background image transitions, automatic idle animations, and full support for system dark/light themes. Perfect for musicians, record labels, music producers, or creative agencies looking to showcase their work in an engaging, modern interface. The component offers a minimalist grid layout that transforms into an immersive visual experience through smooth animations and hover interactions
- Slarivo File Card Collections
Badges component from the 21st.dev community.
- Slarivo Radar Chart
Here is Radar Chart comopnent
- Slarivo DateTimePicker
This TreeView component is an interactive file and folder explorer designed with React, Framer Motion, and shadcn/ui. It allows users to easily navigate hierarchical data by expanding or collapsing folders with a simple click on the icon or name. Each file and folder includes a tooltip on hover, ensuring clarity even for long names. The component emphasizes a clean and modern UI, leveraging shadcn’s design system for consistent styling and Framer Motion for smooth animations.
- Slarivo Image Cursor Trail
A unique interactive component
- Slarivo Skeleton
File Trees component from the 21st.dev community.
- Slarivo deer-logo
A responsive, interactive SVG animation component featuring a deer silhouette with drawing animation. The component uses Anime.js for smooth path drawing effects and includes paper texture filters for a artistic appearance. Perfect for hero sections, loading screens, or decorative elements.
- Slarivo Discussion
A component for displaying nested discussions or comment threads.
- Slarivo Geode
Here is Geode component
- Slarivo Collapsible
Collapsible
- Slarivo CSV / TSV Viewer
A CSV and TSV viewer with parsing, file upload, search, zoom, and theme-aware grid rendering powered by Glide Data Grid.
- Slarivo CSV / TSV Viewer
A CSV and TSV viewer with parsing, file upload, search, zoom, and theme-aware grid rendering powered by Glide Data Grid.
- Slarivo Expanding Sub-Rows Table
A data table with expandable parent rows that reveal nested child rows for displaying tree-shaped hierarchical data, built with TanStack Table.
- Slarivo Animated File Tree Primitives
Composable, unstyled file-tree primitives with an animated hover highlight, spring folder expand and collapse, and an animated open/close folder icon swap.
- Slarivo Interactive Folder
A dynamic UI component that simulates an interactive folder. Click to 'open' and reveal up to three items inside, which spread out. Items provide a subtle parallax effect on hover when open.
- Slarivo File System (Finder)
A macOS Finder-style file browser for flat object-store manifests (S3 / R2). Derives a folder hierarchy from object keys and switches between icon, list, column and gallery views, with Finder-style keyboard navigation. Thumbnails, URLs and signing stay external.
- Slarivo HeroUI Table
HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.
- Slarivo Folder
An animated folder component that opens and fans out pages when clicked. Features a dark-themed folder with a tab notch, spring-physics page animations, and a tooltip bubble — built with Framer Motion.
- Slarivo Infinite Slider
Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.
- Slarivo Interactive Image Accordion
Interactive Image Accordion
- Slarivo Interactive 3D Robot
3D Interative scene with robot Whobee using Spline scene
- Slarivo Interactive Icon Cloud
An interactive 3D tag cloud component
- Slarivo Interactive Selector
A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout
- Slarivo Interactive Globe
Interactive 3D rotating globe built with pure canvas — zero dependencies. 1,200 Fibonacci-distributed dots form the sphere, glowing arcs connect city markers with traveling light particles, pulsing rings mark locations with labels. Drag to rotate with pointer capture, auto-rotates when idle. Configurable markers, connections, colors, and speed. The demo mirrors the Spline robot layout — dark card, left copy, right interactive 3D.
- Slarivo bento grid 01
A reusable and responsive bento grid layout with animation
- 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 AI Assistant Interface
An AI chat interface, with input, file uploads, suggestions and an animated logo
- Slarivo infinite grid integration
A reusable component for grid integration animation.
- Slarivo FAQ tabs
Replace the boring accordion with these cool animated ones.
- Slarivo Animated Tabs
Interactive tabs animated using clip path and framer motion
- Slarivo File Upload
Interactive and animated file upload component with drag-and-drop and progress animations.
- 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 Woven Light Hero
A fully interactive, theme-aware hero section featuring a 3D object woven from thousands of light particles that react to the user's cursor.
- Slarivo Image Tiles
A playful image layout that tiles three photos in a staggered row and animates them on hover, perfect for showcasing your personality or a quick visual story.
- Slarivo Circular Gallery 2
Scroll Areas component from the 21st.dev community.
- Slarivo argent-loop-infinite-slider
A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a "frictionless" motion logic to create an unending stream of items, reflecting a sense of boundless opportunity and "smart-work" automation. The visual architecture is optimized for high-contrast "Silver" accents—aligning with a premium metal aesthetic—and smooth, heavy-easing transitions that command user attention without being intrusive.
- Slarivo Animated Scroll
An animated two-panel scroll adventure
- Slarivo Rolling List
Animated process list with hover roll text and image preview.
- Slarivo File Upload
This is a client‑side React/Next.js file uploader built on your useFileUpload hook, designed for a polished, accessible UX. It supports drag‑and‑drop or browsing with max size/file limits, and lets users manage uploads in list or grid views with type‑aware icons, thumbnails, inline search/sort, multi‑select, and quick actions (preview, download, copy link, remove). A persistent drop zone, live error messaging, and subtle per‑file size indicators round out the experience—no backend changes required.
- Slarivo Interactive Accordion
A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.
- Slarivo Simple UI
This is a simple UI used for generating images and displaying the image list
- Slarivo Flip Gallery
Flip animation
- Slarivo Stacked Panels Cursor intereactive component
Interactive 3D panel stack built with Framer Motion springs. Mouse position drives per-panel wave lift and scale via a Gaussian falloff curve.
- Slarivo Polaroid flick-through
Automated flicking through of images with (or without text descriptions)
- Slarivo Gallery Grid with Lightbox
Filterable image gallery with animated lightbox and navigation
- Slarivo Interactive Thermodynamic Grid
Cursors component from the 21st.dev community.
- Slarivo Potfolio Text
Elegant animated text component with the rotating diamond visual replacing the "o" character.
- Slarivo Kinetic Team Hybrid
A responsive, Framer Motion–powered team roster featuring a global cursor-follow preview on desktop and tap-to-expand accordion images on mobile for a cinematic talent showcase.
- Slarivo book slider
click to scroll
- Slarivo Aero Hero-1
Buttons component from the 21st.dev community.
- Slarivo Tree
Here is Tree component
- Slarivo Tree
Here is Tree component
- Slarivo Contribution Graph
Here is Contribution Graph component
- Slarivo Breadcrumb
Displays the path to the current resource using a hierarchy of links.
- Slarivo Accordion Multi-level
Here is accordion multi-level component
- Slarivo Interactive Grid
Interactive Grid with props
- Slarivo Executive Impact Carousel
A performance-optimized carousel designed to showcase high-stakes technical solutions. Features a dual-state interaction model (scroll-hover) that highlights system depth and "Smart Work" logic.
- Slarivo Horizontal Bar Chart
Here is horizontal bar chart
- Slarivo Flower menu
Here is modern minimalistic flower menu component
- Slarivo Interactive Image Gallery
The InteractiveImageGallery component is a dynamic, visually engaging layout designed to display images and accompanying text cards in a randomized, floating arrangement. Each time the page loads, images and text elements appear in different positions, creating a fresh, organic feel reminiscent of a modern design showcase or creative portfolio. Built entirely with shadcn/ui components and Tailwind CSS, it’s lightweight, responsive, and seamlessly adapts to both dark and light themes. A standout feature of this component is its hover interaction — when the user hovers over any image, all other images gently blur, bringing the focused item to the forefront while leaving text cards crisp and readable. This subtle depth effect enhances visual hierarchy without distracting from the overall layout. Ideal for creative portfolios, AI-generated art galleries, product showcases, or interactive visual storytelling, the InteractiveImageGallery strikes a balance between motion and clarity, transforming static content into a living, breathing experience that feels both elegant and intelligent.
- Slarivo Spider Cursor
Spider Cursor
- Slarivo Table
A simple table component for displaying tabular data.
- Slarivo Tree
Here is Tree component
- Slarivo Terminal Control Section Animated
Terminal Control Section Animated. Responsive, accessible UI with animated tabs and a code-diff preview powered by Framer Motion.
- Slarivo Animated Weather Icons
12 continuously animated weather icons — each is a living micro-scene, not a static SVG. Sun rays rotate, rain drops fall, lightning flashes randomly, snowflakes drift sideways, wind paths draw themselves, fog layers breathe, rainbow arcs pulse in sequence. All framer-motion driven, zero CSS keyframes. Import individually or use the full set.
- Slarivo Image Showcase
Animated Image Showcase This component displays a title, subtitle, and a fanned-out stack of images. On hover, the images gracefully spread out and scale up, creating an engaging user experience. It's fully responsive and theme-adaptive.
- Slarivo Interactive Dots
Interactive Dots with props
- Slarivo Mouse Following Line
Mouse-Following Line Field Animation A dynamic grid of lines that react and rotate smoothly toward cursor movement, creating an engaging motion effect. Perfect for interactive backgrounds, modern websites, or eye-catching hero sections.
- Slarivo Navigation menu
A collection of links for navigating websites.
- Slarivo Dock
A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.
- Slarivo Tabs
Enchanced shadcn/ui tabs
- Slarivo Dropdown Menu
Enhanced shadcn/ui dropdown menu
- Slarivo Navigation Menu
Upgrade your project with a sleek React + Tailwind CSS Navigation Menu featuring a modern desktop mega menu and a smooth mobile drawer. Perfect for SaaS dashboards, landing pages, and websites that need a professional, multi-level navigation experience.
- Slarivo Modern Mobile Menu
Mobile Menu, Mobile Nav, Mobile Navbar, Mobile navigation, Modern Mobile Menu, Mobile Dock, Dock, Bottom Nav, Navigation, Menu
- Slarivo Commits Grid
Transforms any text into a GitHub-style commits grid, visually representing the text as contribution blocks.
- Slarivo Dock
An implementation of the MacOS dock using react + tailwindcss + framer motion
- Slarivo Cybernetic Bento Grid
This is a modern and highly popular layout style for showcasing features, portfolio items, or key information. I've designed this one with a futuristic, cyberpunk aesthetic, featuring glowing borders that animate on hover, a subtle background grid, and a clean, dark theme.
- Slarivo Breadcrumb
Enchanced shadcn/ui breadcrumb
- Slarivo Gantt
Maps component from the 21st.dev community.
- Slarivo Dynamic Frame Layout
Dynamic Frame Layout
- Slarivo Fluid menu
A fluid circular menu that elegantly expands to reveal navigation items with smooth icon transitions
- Slarivo Tabs in cell for navigation
shadcn/ui tabs in cell for navigation
- Slarivo Modern Timeline
A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/light modes, and rich content like icons, dates, and status badges. Ideal for SaaS roadmaps, onboarding flows, or project timelines. Cleanly structured and highly customizable via props.
- Slarivo Marquee
Inspired by https://x.com/dollargill
- Slarivo Dock
Elegant and minimal dock
- Slarivo Mountain Scene
A dynamic 3D mountain landscape built with Three.js and React. The terrain is generated using layered Perlin noise for natural undulations, rendered as a solid surface (no wireframe gaps). Interactive point lighting follows mouse movement, creating a vivid, immersive environment with fresnel highlights and animated displacement.
- Slarivo 3D Gallery Photography
Modern sleek 3D slideshow that showcases a photo gallery created with v0, react three fiber, webgl
- Slarivo Animated Comman Menu
Animated Comman Menu
- Slarivo 3D Marquee
Here is 3D Marquee component
- Slarivo MacOS Menu Bar
Menus component from the 21st.dev community.
- Slarivo Member List
Here is modern Member list by indev ui
- Slarivo Radix Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- Slarivo Material UI Dropdown Menu
A highly sophisticated Material Design 3 Dropdown Menu built on top of shadcn/ui and Radix UI. Engineered with a custom Dual-Physics Ripple Engine via the Web Animations API for true geometric haptic-like feedback. Features a seamless drill-down navigation system with smooth, dynamic height adjustments using ResizeObserver. Includes SSR-compatible cinematic sweep & staggered entry animations driven by local CSS variables. Fully WCAG compliant, keyboard navigable, and perfectly bundled as a zero-dependency, single-file portable component.
- Slarivo Circular Command Menu
Circular Command Menu, toggled circular menu with default 5 menu components ,easily custamizable animated menu component
- Slarivo Breadcramb
Displays a hierarchy of links to the current page or resource in an application.
- Slarivo Modern animated multi words
Modern animated multi words
- Slarivo Modern Feature Grid
A responsive and theme-able grid component to showcase product features, styled with a modern glassmorphism effect and an interactive spotlight background.
- Slarivo Animated Menu Bar
A modern, responsive menu bar React component featuring animated icon expansion, active state highlighting, and smooth transitions. Supports both dark and light themes out of the box using Tailwind CSS. On mobile, tooltips appear on tap for accessible navigation. Designed for clean code, accessibility, and seamless integration into any Next.js or React project.
- Slarivo ScrollTiltedGrid
An editorial two-column image grid where tiles rise from below tilted forward, snap into focus mid-viewport, then tilt back as they exit, driven by scroll progress via Framer Motion, with an optional infinite-loop mode.
- Slarivo 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 Default
Here is according default component
- 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 Interactive Canvas
Interactive Canvas with dot pattern frid
- Slarivo Box Carousel
Here is Box Carousel component
- Slarivo Vertical Bars
Here is Vertical Bars component
- Slarivo LivingVineBackground
A full-screen, interactive vine simulation that traces the mouse path and autonomously sprouts tendril branches. Built on HTML canvas, this generative art piece evokes organic growth patterns and evolving motion. Ideal for hero backgrounds, ambient UI overlays, or digital art installations.
- Slarivo File Trigger
Here is File Trigger component
- Slarivo Shared Element Gallery
A high-fidelity, premium photo gallery featuring a Shared Element Transition built with Framer Motion. Uses a masonry layout to preserve original aspect ratios natively, ensuring perfectly fluid spatial continuity when opening and closing images. Features physics-based spring animations, drag-to-dismiss gestures, and an elegant frosted backdrop.
- 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 Trail Grid
A high-performance, interactive background grid for React. Tracks cursor movement to create a customizable glowing trail effect using pure DOM elements and CSS Grid. Fully responsive with configurable cell sizes, colors, and fade durations.
- Slarivo Interactive Folder Gallery
A macOS-inspired folder that springs open on click, fanning out photo cards with realistic Framer Motion physics and drag-to-close interactions.
- Slarivo Treemap chart
here is treemap component
- Slarivo Points Chart
Charts & Data Viz component from the 21st.dev community.
- Slarivo Festivity Hero
Interactive 3D sphere animation with dynamic collisions, mouse interactions, and breathing effects. Features a loading animation sequence and responsive particle system perfect for modern hero sections.
- Slarivo Interfaces Breadcrumb
Displays the path to the current resource using a hierarchy of links.
- Slarivo Kinetic Grid
An interactive full-screen canvas background of a warping dot grid that bends toward the cursor and ripples outward on click.
- Slarivo Table of Content
A dependency-free vertical table of content with pointer scrubbing, keyboard navigation, spring-driven tick magnification, and floating section previews.
- Slarivo you can scroll.
you can scroll. component
- Slarivo Checkbox
Here is Checkbox component
- Slarivo File Attachment
File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.
- Slarivo Scroll Area File Explorer
A scrollable file explorer list with type icons, size badges, sticky column headers, and a custom scroll area.
- Slarivo Breadcrumb with Avatar
A breadcrumb navigation trail whose items include small avatar images alongside the label, ideal for showing organization and user context in an app header.
- Slarivo Generative Geometry
A digital recreation of classic Mondrian style, algorithmically generating balanced geometric compositions
- Slarivo Tool Group
Collapsible header summarizing nested tool calls (files / searches / commands). State-driven (completed / pending streaming / interrupted) with shimmer label and elapsed time. Self-contained port from 21st.dev Agent Elements.
- Slarivo Charts
There are charts component
- Slarivo AI Conversation Tree
A compound component that visualizes branching AI conversations as an expandable tree with node type indicators, active path highlighting, and click-to-navigate selection.
- Slarivo Image Mouse Trail
An interactive hero section that reveals a trail of images following the cursor as the mouse moves across the container.
- Slarivo Tree View
An accessible file-explorer tree view with full keyboard navigation, animated expand/collapse disclosure, and single selection.
- Slarivo Github Inline Diff
Hover a diff line to reveal “add comment,” opening a compact inline thread with Open/Resolved chips and a 2‑row editor—fully keyboard-accessible.
- Slarivo Animated File Tree
An interactive directory file tree featuring dynamic SVG branch lines, active-path stroke tracing, collapsible folders, and smooth spring hover glides.
- 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 Nested Tree Checkbox
A multi-level file-tree of checkboxes where each parent node derives its checked or indeterminate state from its children.