SLARIVO / BORDERS

Borders Components

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

• Slarivo Moving Border

  A border that moves around the container. Perfect for making your buttons stand out.

• Slarivo Border Trail

  Animated border effect that moves along the edges of its parent container.

• Slarivo Shine Border

  Shine Border

• Slarivo Moving Border

  Animated gradient border that smoothly travels around any element, from rounded rectangles to perfect circles.

• Slarivo Avatar - Border

  Here is avatar border component

• Slarivo Border Beam

  Here is Border Beam component

• Slarivo Border Beam

  An animated beam of light that travels along the border of a container to highlight cards, buttons, and inputs.

• Slarivo Hover Border Gradient

  A hover effect that expands to the entire container with a gradient border.

• Slarivo Reshaped Table

  Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

• Slarivo Shine Border

  Shine border is an animated background border effect.

• Slarivo Glowing Effect

  A border glowing effect that adapts to any container or card, as seen on Cursor's website

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Beams Background

  Beams Bacground animated with colors

• Slarivo Gradient Button

  A beautiful button component with animated gradient background and border effects, inspired by Aaron Iker's implementation of James design concept. Features - Smooth gradient animations on hover - Glowing border effect - Multiple color variants - Fully accessible - CSS-only animations - Dark mode support

• Slarivo Border Beam

  An animated beam of light which travels along the border of its container.

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Background Boxes

  A full width background box container that highlights on hover

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Wireframe Dotted Globe

  interactive 3D globe that allows you to rotate and zoom in on Earth with intuitive mouse controls

• Slarivo Sign In Card

  A sophisticated sign-in form with subtle animated light beams traveling along the borders, creating an elegant, high-tech aesthetic with minimalist design elements.

• Slarivo GLSL Hills

  The component will use inline styles and accept props for customization.

• Slarivo Border Trail

  Animated border effect that moves along the edges of its parent container.

• Slarivo Border Trail

  Animated border effect that moves along the edges of its parent container.

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Neon Button

  a simple and clean neon bordered button with hover effect

• Slarivo Glowing Shadow

  The component features a rotating, color-cycling glow that responds beautifully to hover interactions with enhanced blur, opacity, and scale effects.

• Slarivo Background Gradient

  An animated gradient that sits at the background of a card, button or anything.

• Slarivo Rainbow Borders Button

  A stunning button component featuring an animated rainbow gradient border with a sleek dark gradient background. The rainbow border cycles through vibrant colors with a smooth animation, creating an eye-catching glow effect. Perfect for call-to-action buttons, gaming interfaces, or any modern web application that needs a bold, dynamic visual element. Built with Tailwind CSS and includes hover animations for enhanced interactivity

• Slarivo dot-pattern

  Quote

• Slarivo Animated Gradient Border

  Animated Border, Border animation, border gradient, animated border gradient, border rotate, border rotate animation, border rotation animation, card

• Slarivo Neon Gradient Card

  A beautiful neon card effect

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Button Border

  Button Border with animation

• Slarivo Hover Border Gradient

  A button with a rotating border gradient that highlights on hover with a blue radial glow.

• Slarivo Switch

  Here is Switch component

• Slarivo Info Card

  A simple card with interactive border. For the credit information, and the Vanilla HTML/CSS/JS version, please visit https://codepen.io/Northstrix/pen/EaYbRxG

• Slarivo Shiny Borders Button

  Shiny Borders Button is a modern, visually rich React component styled with Tailwind CSS. It features a soft inner glow, a radial gradient background, and dynamic green + white lighting effects that respond to hover events. Designed for futuristic UIs and premium user interactions, this button adds depth, polish, and realism to any interface — perfect for landing pages, dashboards, Web3, or portfolio sites.

• Slarivo Gradient Borders Button

  A button with animated radial gradient borders that glow on hover. Pill-shaped with emerald accent.

• Slarivo Gradient AI Chat Input

  Ideal for modern AI-powered applications and chat interfaces where users need a premium, visually appealing input experience. Its sophisticated gradient design with multi-layer borders and smooth animations creates an engaging interface perfect for AI assistants, messaging platforms, or any application requiring file attachments and model selection. The component's responsive design and accessibility features make it suitable for professional dashboards, educational tools, or creative applications where user experience matters.

• Slarivo Yield Card

  A sleek, modern card component featuring a gradient border effect and analytics icon, perfect for your applications. The component showcases mutual funds return with a dark theme, golden accents, and smooth gradient borders. Built with Tailwind CSS for easy customization and includes an animated chart SVG icon.

• Slarivo Gradient Bold Card

  this component is animated with modern glass effect and moving glowing border.

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Animated Review Card

  Here is Animated Review Card components

• Slarivo Ripple Grid

  Ripple Grid

• Slarivo Fancy Card

  Vanilla HTML/CSS/JS version is also available on https://codepen.io/Northstrix/pen/myJaQXK Credit: https://codepen.io/nefejames/pen/NPKQPQB https://ui.aceternity.com/components/canvas-reveal-effect https://www.perplexity.ai/

• Slarivo Shine Border Security Card

  An animated card wrapped in a laser-scanner shine border with a vertical gradient sweep, styled as an identity-verification security card.

• 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 Progressive blur

  A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.

• Slarivo BG Patterns

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

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Logo Cloud 2

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

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

  Here is Footer 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 Warp Background

  A container component that applies a warp animation effect to its children

• Slarivo Background snippets

  Here is Background snippets component

• Slarivo Grid Background

  Grid Background

• Slarivo Space Background

  Space Background with props

• Slarivo Particles BG

  It is a uniquely interactive Particle Background component. It connects the mouse pointer with particles, and on click, it creates more particles

• Slarivo Animated Background

  Reusable animated bg component

• Slarivo Image Masking

  Here is image masking componen

• Slarivo Warp Background

  Here is Warp Background animation

• Slarivo Tabs

  Here is Tabs component

• Slarivo Animated Grid

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

• Slarivo Rounded Box

  Here is Rounded Box component

• Slarivo Vertical Bars

  Here is Vertical Bars component

• Slarivo Interactive Dots

  You can customize colors, spacing, dot size, repel force, and other parameters through props, and it includes proper cleanup and responsive behavior.

• Slarivo Resizable

  Accessible resizable panel groups and layouts with keyboard support.

• Slarivo Interactive Waves

  this Component includes the custom AWaves element, the necessary styling, and the interactive canvas. I also included a standard Perlin noise generator that was needed for the wave effect.

• Slarivo Border Beam Panel

  A card with a light beam that travels its border — conic-gradient trace, configurable speed, colour and dwell.

• Slarivo File Upload

  A drag-and-drop file upload surface with accepted file type icons and a compact file list. Validates accepted file types, shows an animated border beam while dragging, and renders queued files with thumbnails.

• Slarivo Avatar Square

  Here is Avatar Square component

• Slarivo 8bit Resizable

  An 8-bit styled resizable panel group with retro pixel borders and a draggable handle, built on react-resizable-panels. Supports horizontal and vertical layouts with optional grip handles.

• Slarivo Danger Border Spinner

  A circular border loading spinner in a destructive/danger color for indicating in-progress states.

• Slarivo Success Border Spinner

  An animated circular border spinner in a green success color to indicate loading states.

• Slarivo Reshaped Table

  Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

• Slarivo Reshaped Table

  Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

• Slarivo Reshaped Table

  Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

• Slarivo Reshaped Table

  Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

• Slarivo Reshaped Table

  Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

• Slarivo Reshaped Table

  Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

• Slarivo UploadThing Paste

  A clipboard paste zone that accepts pasted images and files, showing upload progress and success states — ideal for quick screenshot uploads.

• Slarivo Warning Border Spinner

  A circular loading spinner with a yellow warning-colored border that rotates to indicate a pending state.

• Slarivo Reshaped Divider

  Separates content horizontally or vertically with the vertical flag. Integrates with the View utility's divided property, supports a neutral color to match form field borders, text or custom content next to the divider lines with configurable position, and a blank mode that removes the 1px line.

• Slarivo Reshaped Divider

  Separates content horizontally or vertically with the vertical flag. Integrates with the View utility's divided property, supports a neutral color to match form field borders, text or custom content next to the divider lines with configurable position, and a blank mode that removes the 1px line.

• Slarivo Spotlight

  A dynamic spotlight effect component that follows cursor movement.

• Slarivo Animated Glow Card

  A React component that renders a visually striking card with an animated, glowing border effect. This component uses an SVG filter (feColorMatrix) to achieve the customizable glow, enhancing UI elements with a modern and interactive feel. It includes a CardCanvas to house the SVG filter definition and a Card component for the main content display, complete with border elements. Ideal for drawing attention to featured content, calls to action, or simply adding a touch of dynamic visual flair to your application.

• Slarivo infinite grid integration

  A reusable component for grid integration animation.

• Slarivo Moving Dot Card

  A dynamic views counter card featuring an animated dot traversing the border, gradient-highlighted count display, and stylized corner lines for a sci-fi UI effect

• Slarivo FAQ Sections

  Here is FAQ Sections 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 Badge Delta

  Badge component in shadcn/ui format inspired by Tremor

• Slarivo Badge Delta

  Badge component in shadcn/ui format inspired by Tremor

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Button

  Neobrutalism-styled button component.

• Slarivo Aurora Button

  The AuroraButton is a customizable React component that creates a button with a beautiful, animated gradient border effect. When you hover over the button, the border glows with an aurora-like effect, using a blend of purple, cyan, and emerald colors. The button itself has a dark glass-like appearance with a transparent background, making it suitable for modern, elegant user interfaces.

• Slarivo Testimonial

  Here is Testimonial component

• Slarivo Grid Background

  Here is Grid Background component

• Slarivo BG GREDIENT

  BG GREDIENT FOR HEROS OR COMPONENTS

• Slarivo Bot Detection

  Here is Bot Detection component

• Slarivo Shine Border

  Here is shine border component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cursor Cards

  Here is Cursor Cards component

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

  Neobrutalism-styled marquee component.

• Slarivo Warp Dialog

  A visually striking dialog component with 3D warp animations and smooth transitions. Features perspective transformations, animated backgrounds, and spring-based motion effects for an immersive user experience.

• Slarivo dock

  Here is dock component

• Slarivo Accordion

  Neobrutalism-styled accordion component.

• Slarivo Star Button

  Here is Star Button component

• Slarivo blue meshy background

  bg for components meshy blue gredient with darker effect

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Clipped Image

  Here is component of clipped image components

• Slarivo Aurora Hero bg

  A stunning hero section component featuring an animated aurora gradient background with smooth color transitions. Perfect for landing pages, product showcases, and marketing sites. Built following shadcn/ui patterns with full theme support, accessibility features, and TypeScript type safety. The component is fully customizable through props and works seamlessly in both light and dark modes.

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Button Ui

  Here is Button Ui components

• Slarivo Text Area

  Here is Textarea component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Accordion 04

  Accordion with bacgkround cross

• Slarivo Scroll Progress

  Here is animated scrolling progress bar

• Slarivo Checkbox

  Neobrutalism-styled checkbox component.

• Slarivo Image Card

  Neobrutalism-styled image card component.

• Slarivo Select

  A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.

• Slarivo Corner Frame Animated Button

  CornerFrameAnimatedButton is a customizable, animated button component that features stylish corner-frame borders and a smooth hover gradient reveal effect. Built with framer-motion and Tailwind CSS, it provides a clean, interactive visual style without compromising accessibility or flexibility.

• Slarivo Avatar

  An avatar component with image, fallback text, multiple sizes, border radius variants, and group stacking. Built on Base UI Avatar primitives.

• Slarivo Blockquote Typography

  A styled blockquote for quotations with a left border and italic text, following typography conventions.

• Slarivo Input

  Neobrutalism-styled input component.

• Slarivo Pagination

  Neobrutalism-styled pagination component.

• Slarivo Country Accordion

  A collapsible international money transfer UI that groups countries by region. Each row expands to reveal additional destinations with a fluid height animation powered by Framer Motion

• Slarivo Shine Border Feature Card

  An interactive mouse-tracking spotlight border that reveals a gradient glow on hover, wrapping a feature highlight card.

• Slarivo Button Rotate

  Button Rotate with gradient background and border

• Slarivo Info Cards Table

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

• Slarivo Alert

  Neobrutalism-styled alert component.

• Slarivo Highlight Button

  A button with a mouse-following highlight that darkens the surface as the cursor moves, fades in a soft border on hover, and bursts a radial ripple from the exact click point. Theme-aware, with overridable highlight color, size, and border color.

• Slarivo File Upload

  A drag-and-drop file upload surface with animated accepted-file-type icons, an animated border beam, and a compact list of selected files.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Interactive Hover Button

  A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.

• Slarivo Globe

  An autorotating, interactive, and highly performant globe made using WebGL.

• Slarivo Flickering Grid

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

• 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 Zoom Parallax

  A smooth scroll effect where images zoom in at different speeds for a cinematic feel. Perfect for hero sections or storytelling layouts that need extra visual depth.

• Slarivo World Map

  A world map with animated lines and dots, programatically generated.

• Slarivo Horizon Hero Section

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

• Slarivo Hero 195

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

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo AI Chat Input

  Animated and interactive AI chat input 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 Orbiting Circles

  A collection of circles which move in orbit along a circular path

• Slarivo Nav Header

  This is a modern, interactive navigation header component built with React, TypeScript, and Framer Motion. Here's a breakdown of its functionality and design: 1. **Main Features**: - An animated navigation menu with a sliding cursor effect - Hover interactions that move a black background pill behind menu items - Mix-blend-difference effect that makes text appear white over the black background - Responsive design with different sizes for mobile/desktop - Rounded pill-style container with a border 2. **Component Structure**: - `Header`: The main component that manages position state - `Tab`: A subcomponent for individual menu items - `Cursor`: An animated motion component that slides behind the active tab 3. **Technical Implementation**: - Uses Framer Motion for smooth animations - Implements mouse event handlers for interactive effects - Uses refs to measure and position elements - Responsive styling with Tailwind CSS - Client-side component (marked with "use client")

• 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 About Us section

  This component is ideal for an "About Us" or "Services" section on a company website, particularly for businesses in design, architecture, or related creative fields. It provides a modern, engaging, and informative presentation of the company's capabilities and achievements. Key Features: Responsive Layout: The component adapts its layout for different screen sizes, arranging content in a single column on small screens and a multi-column grid on larger ones. Parallax Background Elements: Decorative circular elements in the background move and rotate subtly based on scroll position, adding depth and visual interest. "About Us" Header: A clear and concise "About Us" heading is accompanied by a subtitle and an animated underline, effectively introducing the section. Company Introduction: A central paragraph provides a brief overview of the company's mission and values. Service Offerings: Six distinct service items (Interior, Exterior, Design, Decoration, Planning, Execution) are displayed. Each service includes an icon, a title, and a description. Services are strategically placed in left and right columns, flanking a central image. The ServiceItem sub-component features hover animations for icons and titles, along with a "Learn more" link that appears on hover. Central Image with Call to Action: A prominent image (Modern House) serves as a visual anchor. It features a subtle border animation, floating accent elements, and an overlaid "Our Portfolio" button that appears on hover. Animated Statistics (StatCounter): Four key statistics (Projects Completed, Happy Clients, Years Experience, Satisfaction Rate) are displayed with an animated counter format. The StatCounter sub-component uses framer-motion's useSpring and useTransform to animate numerical values as they come into view. Each stat includes an icon, a numerical value with a suffix, and a descriptive label, along with hover effects for the icon and a line underneath. Call to Action (CTA) Section: A clear and inviting call-to-action at the bottom prompts users to "Get Started" and encourages them to transform their space. Framer Motion Integration: The component heavily uses framer-motion for: Orchestrated Entrance Animations: Elements fade in and slide up or across as the section comes into view. Hover Effects: Interactive animations on service items, the central image button, and stat counters. Parallax Scrolling: Dynamic movement of background and accent elements based on scroll. Spring Animations: Smooth counting animation for statistics. Modular Design: The section is composed of reusable sub-components (ServiceItem and StatCounter), promoting organized and reusable code. The AboutUsSection component presents key information about a company—likely an interior design or architectural firm—through a combination of text, service listings, an engaging image, and animated statistics. It's built with a focus on modern aesthetics and user experience, incorporating subtle animations and parallax effects to create an immersive feel.

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

  AuroraHero: Dynamic Gradient & Starfield Hero Section Captivate your audience from the moment they land on your page with AuroraHero, a stunning and interactive hero component for React. This component combines a mesmerizing, animated radial gradient background with a subtle, shimmering starfield, creating an immersive and modern visual experience that grabs attention. Features Animated Aurora Gradient: The background features a beautiful radial gradient that smoothly transitions through a predefined palette of colors, creating a dynamic "aurora" effect that adds depth and visual interest. This animation is handled seamlessly by Framer Motion. Subtle Starfield Background: A captivating 3D starfield, powered by React Three Fiber and Drei, provides a subtle yet engaging backdrop, enhancing the cosmic and futuristic feel of the component. Engaging Call to Action: A prominent headline and descriptive text are accompanied by a call-to-action button that dynamically changes its border and box-shadow color to match the animating background gradient. The button also includes subtle hover and tap animations for improved user feedback. Responsive Design: The component is built with responsiveness in mind, ensuring it looks fantastic and performs well on various screen sizes. How it Works AuroraHero leverages the power of: Framer Motion: For all the fluid animations, including the color transition of the background gradient, button border, and box-shadow. useMotionValue and useMotionTemplate are key here, linking the dynamic color to various CSS properties. React Three Fiber & Drei: For rendering the performant and visually appealing 3D starfield, adding an extra layer of polish to the hero section. This component is ideal for SaaS landing pages, product showcases, or any website where you want to make a bold, modern, and memorable first impression. Its elegant animations and engaging visuals are sure to leave a lasting impact on your visitors.

• 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 Orbiting Skills

  A dynamic and visually appealing component that displays a set of skills or technologies in an orbiting pattern. Perfect for showcasing expertise, proficiency, or areas of interest in a creative and engaging way.

• Slarivo Neon Flow

  Globes component from the 21st.dev community.

• 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 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 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 Avatar Circles

  Overlapping circles of avatars.

• Slarivo Animated Tabs

  Interactive tabs animated using clip path and framer motion

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

  The AnimatedBackground component visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important.

• Slarivo Interactive Text Particle

  A visually engaging canvas-based text effect for React that transforms text into interactive, hover-reactive particles. Designed for modern UI/UX experiences, this component adapts responsively to screen size, supports rich color palettes, and offers fully customizable animation dynamics—all with zero external dependencies. Perfect for landing pages, hero sections, and attention-grabbing banners.

• Slarivo Interactive Neural Vortex Background

  This code creates a dynamic, immersive WebGL background featuring a swirling, organic "neuro" effect that reacts to user interaction

• Slarivo Modern Background Paths

  BackgroundPaths: Dynamic SVG Paths & Animated Hero Section The BackgroundPaths component creates a stunning and subtly animated background using dynamically generated SVG paths. It perfectly complements an engaging, animated hero title and a stylish call-to-action button, making it an excellent choice for a modern header or landing section on any website. What It Is This React component uses framer-motion to generate and animate a series of elegant, flowing SVG paths that gently shift and fade in the background. Overlaying this dynamic backdrop is a customizable title where each letter animates into view with a smooth, spring-like effect. Below the title, a stylish button with interactive hover effects invites user engagement. Key Features Animated SVG Background: Dynamic Paths: The FloatingPaths sub-component creates 36 unique SVG <path> elements. Their shapes, stroke widths, and opacities are all dynamically generated, creating a sense of depth and variation. Continuous Motion: Each path animates infinitely with varying durations, resulting in a mesmerizing, non-repeating flow of lines across the background. Light/Dark Mode Support: The paths automatically adapt their color to match the surrounding text, seamlessly integrating with both light and dark themes. Spring-Animated Hero Title: Letter-by-Letter Entrance: The main title (controlled by the title prop) animates each individual letter into view with a "spring" effect, creating a lively and engaging entrance. Gradient Text: The title text uses a gradient fill that changes based on the theme, providing a modern and polished look. Customizable: Easily change the hero text by passing a different title prop. Stylish Call-to-Action Button: A beautifully designed button, "Discover Excellence," is positioned below the title. It features subtle background gradients, a backdrop-blur effect for a frosted glass look, and a shadow for depth. Interactive Hover Effects: On hover, the button scales slightly, its shadow deepens, and an arrow icon to the right smoothly translates, signaling interactivity. Theme-Aware: The button's colors and hover states work flawlessly in both light and dark modes. Responsive Layout: The component is designed for responsiveness, ensuring the title and button are well-centered and legible across various screen sizes. Framer Motion Integration: Extensive use of framer-motion handles all animations, providing smooth, hardware-accelerated transitions and complex sequence orchestration. Why It's Cool for Developers This component is an excellent demonstration of: Generative SVG Animation: Learn how to programmatically create and animate complex SVG paths for unique background effects. Sophisticated framer-motion Usage: It showcases advanced framer-motion features like pathLength, pathOffset, and spring transitions for precise control over animations. Layered UI Design: See how to combine background elements (SVG paths) with foreground content (text and a button) while maintaining proper z-index for visual hierarchy. Theming and Responsiveness: Implement design that gracefully adapts to different themes and screen sizes. Component Composition: It breaks down a complex UI into smaller, manageable sub-components (FloatingPaths).

• Slarivo Prompt Input dynamic grow

  A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus

• Slarivo Pixel perfect Hero

  Interactive hero section with a Canvas-based pixel ripple animation, shimmering glassmorphism header, and logo marquee. Features dynamic theme-color detection, responsive layout, and prefers-reduced-motion accessibility.

• Slarivo Flip Links

  Get your site some awwwards level link hover animation with pure css, no framer motion.

• Slarivo Animated Dock

  A dock with animated icons that grow on hover.

• Slarivo Animated Scroll

  An animated two-panel scroll adventure

• Slarivo Globe Pulse

  A dark-themed WebGL globe with animated pulsing rings at marker locations. Concentric rings expand and fade out.

• Slarivo 3d orbit gallery

  3d orbit gallery with nice smooth

• 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 Tubes Curor

  A fullscreen WebGL cursor animation built with Three.js that renders animated colorful tube trails and reactive lights; click to randomize tube and light colors. Ideal as an interactive hero background or pointer effect for landing pages and portfolios

• Slarivo Animated Hero Section

  PromptingIsAllYouNeed: Interactive Pixel-Art Pong Canvas Celebrate the spirit of innovation with PromptingIsAllYouNeed, a unique React component that transforms your browser into an interactive, full-screen Pong-like game. This component ingeniously spells out the phrase "PROMPTING IS ALL YOU NEED" using a grid of customizable pixels, which then become breakable blocks in a classic arcade experience. To celebrate the 21st Dev anniversary, here's a description of your PromptingIsAllYouNeed component, perfect for sharing! PromptingIsAllYouNeed: Interactive Pixel-Art Pong Canvas Celebrate the spirit of innovation with PromptingIsAllYouNeed, a unique React component that transforms your browser into an interactive, full-screen Pong-like game. This component ingeniously spells out the phrase "PROMPTING IS ALL YOU NEED" using a grid of customizable pixels, which then become breakable blocks in a classic arcade experience. What It Is: This component renders a dynamic canvas where a bouncy ball navigates the screen, interacting with four paddles positioned at each edge. The core phrase, "PROMPTING IS ALL YOU NEED," is displayed in a retro pixel-art style. As the ball collides with these pixels, they change color, simulating a "hit" effect, much like breaking blocks in a game of Breakout. The paddles on all four sides automatically track and follow the ball's movement, keeping the action continuous and mesmerizing. Key Features: Pixel Art Text: The central message "PROMPTING IS ALL YOU NEED" is rendered using custom pixel maps for each letter, offering a distinct retro aesthetic. Interactive Gameplay: A ball continuously bounces around the screen, changing direction upon hitting the canvas edges, the paddles, or the pixel-art letters. Dynamic Paddles: Four automated paddles (top, bottom, left, right) intelligently track the ball's position, ensuring constant interaction and deflections. Breakable Pixels: Each time the ball hits a pixel in the text, its color changes from white to gray, visually indicating a "hit." Responsive Design: The canvas and all game elements (pixel size, ball radius, paddle dimensions, and speeds) dynamically adjust to fit any screen size, ensuring a seamless experience across devices. Configurable Colors: Easily customize the background, ball, paddle, text, and hit-pixel colors directly within the component's constants. Smooth Animations: Utilizes requestAnimationFrame for fluid game loops, providing a smooth and engaging visual experience.

• Slarivo Isometric Wave Grid Background

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

• Slarivo ASMR background

  a beautiful asmr mouse hover react bg

• Slarivo Vertical Tabs

  Vertical tab navigation with smooth animated transitions.

• Slarivo TubeCursor

  An interactive background component that renders glowing animated tubes powered by Three.js. Designed for Next.js + React, it features customizable tube colors, light palettes, intensity, and text overlays. Includes an option to randomize colors on click for a dynamic user experience.

• Slarivo Floating Chat Widget

  Floating chat widget with AI agent selection dropdown and animations

• 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 Interactive-Gradient-Background

  Interactive Graident Background with pointer movement

• Slarivo Interactive Thermodynamic Grid

  Cursors component from the 21st.dev community.

• Slarivo Globe Interactive

  A WebGL globe with clickable markers that expand to show user counts. Click markers to toggle detail panels.

• Slarivo Cyber Matrix Hero

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

• Slarivo Apple Tahoe Liquid Glass Button

  A high-fidelity Liquid Glass Button engineered for shadcn/ui and Tailwind CSS. It features a hyper-realistic glassmorphism engine driven by an inline WebP SVG displacement map (feDisplacementMap) and backdrop-filter refraction. It utilizes an isolated z-index lens layer to guarantee zero text-ghosting, while an intricate, multi-layered box-shadow stack handles dynamic light and dark reflections. Features fluid scale transforms, oklch color mix customization, and auto-scaling filters. Zero-dependency, fully accessible, and single-file portable.

• Slarivo Interactive Hover Links

  Interactive hover links with fluid cursor tracking, animated typography, and floating preview images.

• Slarivo Interactive Hover Button

  A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo Modern hero section

  HeroGeometric: Elevate Your Digital Vision with Dynamic Shapes The HeroGeometric component creates a striking and modern hero section, combining a sophisticated dark aesthetic with dynamic, animated geometric shapes. It's designed to make a powerful first impression, ideal for showcasing a brand's innovative spirit and digital prowess. What It Is This React component features a full-screen, dark background infused with subtle radial gradients. The main visual appeal comes from several elegantly animated, ethereal shapes that float and rotate behind a central, gradient-filled title. The title itself is designed for impact, with a portion using a unique "Pacifico" font for a touch of distinctiveness. A prominent badge and a descriptive paragraph complete this visually rich and engaging hero section. Key Features Dynamic Geometric Background: Animated Shapes: The ElegantShape sub-component generates multiple "pill-shaped" elements. These shapes are animated with framer-motion to fade in, slide, and rotate into position, then continuously float subtly up and down. Glassmorphism Effect: Each shape features a backdrop-blur effect, a subtle gradient, and a soft border, creating a sophisticated glass-like appearance. Layered Visuals: The shapes are strategically positioned with varying delays and rotations, creating a layered, dynamic, and non-repeating background that adds depth without distraction. Subtle Gradients: The overall background incorporates faint, diffused gradients that add to the high-tech, abstract atmosphere. Animated Hero Title: Staged Entrance: The badge, the first line of the title (title1), the second line (title2), and the descriptive paragraph all animate in sequence from the bottom, creating a smooth and impactful reveal. Gradient Text: The title uses bg-clip-text with gradients, making the text visually pop. title2 specifically uses the elegant "P

• Slarivo Balloons Pop background

  pop balloons when mouse hover

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

  A full-screen, animated hero background that renders a subtle grid overlay and drifting radial glow blobs using HTML Canvas, React, and Framer Motion for a futuristic, immersive effect.

• Slarivo HolographicInterface

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

• Slarivo Interactive Grid

  Interactive Grid with props

• Slarivo frosted-hover

  Immersive navigation showcase that reveals frosted-glass ripples as you hover a grid of interactive hotspots layered over a hero image. Includes the full SVG filter stack for the shimmering displacement effect.

• Slarivo Radio Group Card

  This RadioCard component is a modern, card-based alternative to traditional radio buttons. Instead of small circular inputs, each option is presented as a visually distinct card containing an icon, title, and optional description. When a card is selected, it highlights with a border and background color, and a glowing green dot appears in the top-right corner to clearly indicate the active choice. The design focuses on accessibility and user experience with smooth hover and focus states, responsive layout, and keyboard support (inherited from Radix). This makes it ideal for use cases such as theme selectors, preference panels, or plan pickers, where a more engaging and intuitive selection experience is desired compared to standard radio groups.

• Slarivo Clean Tag Input

  This is a sleek, black-and-white tag input component where users can add multiple tags by typing and pressing Enter. Each tag is displayed as a rounded pill with subtle borders, and pressing Backspace when the input is empty removes the last tag. The component is fully responsive, works in both light and dark themes, and provides smooth hover and focus interactions for a clean, modern user experience.

• Slarivo Pill Calendar

  The CalendarCard component is a shadcn-styled calendar variant that provides a clean, modern way to pick single dates or ranges. Unlike the standard flat grid design, this component is wrapped inside a subtle card with borders and shadow, giving it a distinct visual hierarchy on the page. Days are displayed in pill-shaped cells, making selections look lighter and more elegant, while the current date is emphasized with a thin primary-colored ring. It supports both single-date and range selection modes, with smooth hover, focus, and disabled states built in. Designed with accessibility through react-aria-components, the CalendarCard integrates seamlessly into shadcn UI projects and can be easily extended with theming, dark mode, or dropdown month/year selectors. This makes it a versatile choice for forms, dashboards, and scheduling interfaces where a compact yet visually appealing calendar is needed.

• Slarivo Interactive Hero Backgrounds

  Minimal dark hero section with 3D physics-based floating spheres and a centered email signup for dynamic user engagement.

• Slarivo sneak

  Interactive 3D Text Effect A WebGL text component that creates a dynamic ripple effect when you hover over it. The text "bubbles up" from the surface based on mouse proximity, with smooth animations and automatic light/dark theme support. Features 3D displacement shaders, crisp SVG text rendering, and responsive design. Perfect for modern, interactive hero sections.

• Slarivo Action Toolbar

  The ActionToolbar component is a modern, interactive toolbar built to combine functionality and design elegance. Inspired by the shared-border button style, it presents a unified, polished look with rounded edges, subtle gradients, and smooth hover transitions. Each button can act independently or include dropdown menus for extended actions, making it ideal for editor panels, dashboards, or productivity interfaces. The toolbar supports active states, badges for counts, and an optional compact mode for tighter layouts. With its clean design, responsive behavior, and intuitive interactivity, ActionToolbar offers both practicality and a refined visual experience—perfect for any modern web application interface.

• Slarivo Dotted Surface

  An animated 3D dotted wave background built with Three.js that flows like water. Theme-aware and lightweight, perfect for adding subtle motion depth to your UI.

• Slarivo Wave Path

  An interactive SVG wave line that bends and ripples as you move your mouse across it. Smoothly animates back to rest when the cursor leaves, giving a playful liquid-like feel.

• Slarivo Interactive Ripple Background

  Interactive Ripple Background

• Slarivo Floating paths

  a minimalistic floating paths background

• Slarivo Animated Dots

  Animated Dots with props

• Slarivo Ripple Circles

  The RippleCircles component delivers a smooth and modern ripple-style loading animation using five concentric circles that expand and fade in a staggered sequence. Each circle features subtle gradients, semi-transparent borders, and a gentle backdrop blur, creating a calm, water-like ripple effect that blends seamlessly with both light and dark themes. Its elegant, minimalist design makes it ideal for loading screens, splash pages, or background indicators, offering a visually appealing and soothing way to indicate progress or waiting states without overwhelming the user interface.

• Slarivo BlockLoader

  This Block Loader component is a modern, animated loading indicator designed using React, TypeScript, and Tailwind CSS, with ShadCN integration for class management. It features four square blocks that dynamically scale in sequence, creating a smooth, pulsating effect that visually indicates ongoing activity or loading. The component is highly configurable, allowing developers to adjust the block size, gap, colors, border, and animation speed to match any UI theme, including support for dark and light modes. Its clean, minimal design makes it suitable for dashboards, modals, and full-page loaders, while the flexible Tailwind CSS implementation ensures seamless integration with responsive layouts and modern frontend projects.

• Slarivo Embroidered Word Patches

  Interactive WebGL word-shaped embroidered patches with satin stitching, a merrowed border, fabric depth, and cursor-reactive lighting.

• Slarivo Separator

  Visually or semantically separates content.

• Slarivo LiquidGlass

  Apple Liquid Glass

• Slarivo Blog Cards

  Minimal, text-focused preview of a journal or blog entry. It typically includes a title, publication date, and short description, styled with subtle hover animations and a dashed separator for a clean, editorial aesthetic.

• Slarivo Glass Effect

  Small glass CSS effect that I use on my website for a wow effect.

• Slarivo Toolbar

  Here is Toolbar component

• Slarivo Toolbar

  A container for grouping a set of buttons and controls.

• Slarivo 8-bit Separator

  Pixel-art separator from 8bitcn.com — dashed pixel rule with horizontal and vertical orientations. Self-contained, no radix.

• Slarivo Reshaped Divider

  Separates content horizontally or vertically with the vertical flag. Integrates with the View utility's divided property, supports a neutral color to match form field borders, text or custom content next to the divider lines with configurable position, and a blank mode that removes the 1px line.

• Slarivo Glass Refraction Panel

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

• Slarivo indevuiSeparator

  Here is separator component

• Slarivo SVG Bands

  A collection of wide, viewBox-2400 SVG section bands and ornamental frame shapes—battlement, zigzag, staircase, steep hero edges, and chamfered panels—for decorating section headers, footers, and dividers.

• Slarivo Wave Separator

  A zig-zag divider drawn by masking a solid color with a repeating inline SVG, so it inherits currentColor in light and dark mode and costs no image request. Inspired by Colin Lienard's personal site (colinlienard.com), rebuilt for React from scratch.

• Slarivo Separator

  A thin divider line to visually or semantically separate content, supporting horizontal and vertical orientations.

• Slarivo Item

  A Item component for displaying ordered records, tasks, activity, and repeated content, featuring list, avatar, separator, user profile.

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo HeroUI Separator

  HeroUI v3 Separator — horizontal/vertical divider with content, variants, on-surface usage and a custom render-function API.

• Slarivo HeroUI Separator

  HeroUI v3 Separator — horizontal/vertical divider with content, variants, on-surface usage and a custom render-function API.

• Slarivo HeroUI Separator

  HeroUI v3 Separator — horizontal/vertical divider with content, variants, on-surface usage and a custom render-function API.

• Slarivo Reshaped Divider

  Separates content horizontally or vertically with the vertical flag. Integrates with the View utility's divided property, supports a neutral color to match form field borders, text or custom content next to the divider lines with configurable position, and…

• Slarivo Reshaped Divider

  Separates content horizontally or vertically with the vertical flag. Integrates with the View utility's divided property, supports a neutral color to match form field borders, text or custom content next to the divider lines with configurable position, and…

• Slarivo Liquid Glass boxes

  A Liquid Glass boxes component for framing content with decorative or animated visual boundaries, featuring animated transitions.

• Slarivo Spinning Border Button

  A pill-shaped call-to-action button with a conic-gradient border beam that spins into view on hover.

• Slarivo Broken by Design — Shattered Glass Hero

  Impact-fracture hero built from real shattered glass. Sixteen independent fragments per breakpoint react to the cursor with 3D tilt, parallax and specular light. The title is masked into each shard — physically broken across the pane. Fully responsive,…

• Slarivo Prism Hero

  A scroll-driven hero built around a faceted crystal that genuinely refracts the headline behind it — real transmission with chromatic dispersion, not a blur filter. The headline is rendered to a canvas texture inside the 3D scene, so the glass bends the…

• Slarivo HeroUI Button Group

  HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.