SLARIVO / ONBOARDING

Onboarding Components

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

• Slarivo Onboarding

  Onboarding Card A visually engaging, animated card component for user onboarding flows. It includes fields for profile picture upload and username entry, designed to be easily integrated into any welcome or setup screen.

• Slarivo Onboarding Checklist

  An Interactive Onboarding Checklist that guides users step-by-step through key actions in your app, with a slide-out checklist panel, progress indicator, and coachmarks that spotlight targeted UI elements.

• Slarivo Onboarding Card

  Product Onboarding Card This component provides a structured layout for a feature or step in a process, guiding the user with a clear title, description, and call-to-action.

• Slarivo Onboarding Form

  Onboarding Form A visually engaging, animated onboarding form with a glassmorphism effect. It includes fields for avatar upload and display name, designed for reusability in any sign-up or profile creation flow.

• Slarivo Onboarding / Welcome Screen

  Onboarding / Welcome Screen used to greet new users and introduce the app’s purpose. It features a hero image for visual appeal, a clear welcome title, a short description highlighting the app’s value, and two calls-to-action — a primary button (“Let’s get started”) for new users and a secondary link (“Login Now”) for returning users. It’s ideal for first-time app launches to drive sign-ups or logins.

• Slarivo Onboarding Checklist

  Onboarding Checklist Description: A visually engaging card component that displays a checklist of required items alongside a video guide. It's designed to prepare users for an onboarding process, ensuring they have all necessary documents and information ready. The component is fully responsive, theme-adaptive, and includes subtle animations to enhance user experience.

• Slarivo Onboarding Dialog

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

• Slarivo Onboarding Stages

  This is a dynamic, themed onboarding checklist component that visually breaks down setup stages with animated progress indicators, completion badges, and a customizable action button. It supports detailed theming, staged animations via framer-motion, and responsive layout variants for compact or expanded views. Perfect for onboarding flows, setup wizards, user education dashboards, or milestone-driven tasks where visual clarity and motivation matter.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Onboarding Steps Carousel

  A compact multi-step onboarding carousel with a progress bar, per-step icons, and Back/Next navigation that finishes on the last step.

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Starfall portfolio landing

  Starfall portfolio landing page hero

• Slarivo Minimal Auth Page

  A sleek authentication page with social login buttons, background effects, and responsive design. Perfect for login screens, signup flows, and onboarding experiences.

• Slarivo Sign-in

  Hero section with social login prompt. Welcomes returning users and offers multiple sign-in options. Ideal for modern apps aiming for seamless authentication with Google, Email, or GitHub.

• Slarivo Onboard Card

  Animated onboarding progress card showing three steps with visual loaders, transitions, and completion indicators.

• Slarivo How We Do It - Process Overview

  How We Do It – Agile-driven process overview. Displays each stage from ideation to launch using bold cards and icons. Each block outlines a key phase (e.g., Brainstorming, QA, Release). Ideal for explaining workflow clearly and visually.

• Slarivo Premium Auth

  A modern, animated authentication component with a beautiful glass-morphism design. Features include: Toggle between Login and Sign Up modes Form validation with error handling Password visibility toggle Social login options (Google and GitHub) Loading states and smooth animations Success/error message handling Responsive design with mobile support Beautiful background effects and particle animations Built with React, Framer Motion, and Tailwind CSS Component Type: UI Component Tags: authentication login signup modal glass-morphism animation form social-login premium tailwind framer-motion Cover Image Description: The cover image should showcase the component's glass-morphism design with: The main authentication modal with a blurred background The neural network pattern and moving gradient orbs The login form with input fields and social login buttons The premium badge with sparkle animation A dark theme with purple/indigo gradients Video Preview Description: The video should demonstrate: Opening animation of the modal Switching between Login and Sign Up modes Form validation and error states Password visibility toggle Loading states during authentication Success message animations Social login button interactions Background particle animations Hover effects on buttons and inputs Closing animation Technical Requirements: React 16.8+ Framer Motion Tailwind CSS Lucide React icons Usage Example: import { PremiumAuth } from './premium-auth'; function App() { return ( <PremiumAuth onClose={() => { // Handle modal close console.log('Modal closed'); }} /> ); } Features: Authentication: Email/Password login User registration Social login (Google & GitHub) Form validation Error handling UI/UX: Glass morphism effect Animated background Floating particles Smooth transitions Loading states Success/Error messages Responsive Design: Mobile-friendly Adaptive layout Touch-friendly inputs Proper spacing Accessibility: Keyboard navigation ARIA labels Focus management Error announcements Performance: Optimized animations Lazy loading Efficient state management Minimal dependencies This component is perfect for: Premium SaaS applications Modern web applications Authentication flows User onboarding Premium feature access Subscription-based services The component is designed to be: Easy to integrate Highly customizable Well-documented Performance-optimized Accessible Mobile-responsive

• Slarivo Tour

  Make your own product tour with shadcn/tour.

• Slarivo Dialog Stack

  Stacked dialog component inspired by Radix UI Dialog. Accessible. Customizable. Open Source. Pre-styled for shadcn/ui. Features • Stacked dialog interface with smooth transitions • Keyboard navigation support • Accessible by default • Customizable styling • Previous/Next navigation controls • Responsive design • Fully typed with TypeScript Props DialogStack • open?: boolean - Controls the open state • onOpenChange?: (open: boolean) => void - Callback when open state changes • clickable?: boolean - Enables clicking on previous dialogs to navigate back DialogStackTrigger • asChild?: boolean - Merges props onto child element instead of rendering button DialogStackContent • className?: string - Additional CSS classes • children: ReactNode - Dialog content • index?: number - Dialog position in stack (auto-populated) • offset?: number - Visual offset between stacked dialogs DialogStackNext/Previous • asChild?: boolean - Merges props onto child element • children?: ReactNode - Button content • className?: string - Additional CSS classes Example Use Cases • Multi-step forms • Onboarding flows • Wizards • Sequential content presentation • Guided tutorials

• Slarivo Success Login Card

  The Card with Micro-Animations on Success is a polished and configurable login card built with shadcn UI components, designed to provide users with instant, professional feedback. Instead of plain static messages, this card delivers subtle success animations such as a checkmark drawing itself or a smooth background color shift, creating a sense of accomplishment without unnecessary clutter. Developers can pass in customizable props like fields, onChange, onSubmit, and even choose the animationType (checkmark, color-shift, or none) depending on the brand’s tone. By keeping the layout clean and minimal while offering meaningful micro-interactions, this component improves user trust and makes the authentication flow feel more modern and engaging, all while remaining versatile enough to adapt to different applications.

• Slarivo Transition Panel

  Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustments, or any interactive content that requires a visual transition between states.

• Slarivo Transition Panel

  Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustments, or any interactive content that requires a visual transition between states.

• Slarivo login

  Here is minimalistic advanced login page

• Slarivo FinTech Landing Page

  A modern minimal landing page for Fintech startups.

• Slarivo Warning Graphic

  This component renders an animated SVG warning graphic with a triangle, exclamation mark, stripes, and path outlines, using framer-motion for a layered entrance sequence with configurable animation speed and color. It supports motion-reduction detection, progressive draw effects, and modular fade/scale transitions for accessibility and customization. Perfect for alert banners, system status messages, onboarding visuals, HUD, sci-fi or gaming themes, or any UI needing a bold, animated warning indicator.

• Slarivo Auth UI

  Authentication, sign in, sign up, signin, signup, login, create account

• Slarivo Personal Landing

  A modern, responsive landing component with avatar, headline, social links, and a live message input with validation and toast notifications. Ideal for personal portfolios or digital profiles.

• Slarivo Gamified Login Card

  The Gamified Login Card is a playful and interactive login component designed to boost user engagement while maintaining a clean, modern look. Built strictly with shadcn UI components, it features micro-interactions such as input hover scaling and button animations, providing instant visual feedback. On successful login, a confetti animation celebrates the user’s action, while the login text dynamically updates to a welcoming message. Fully responsive and theme-aware, this component works seamlessly in both light and dark modes, offering a fun and rewarding login experience that aligns with apps aiming for a gamified or playful brand identity.

• Slarivo Enable 2FA Card

  A structured Two-Factor Authentication Card that guides users through enabling 2FA with step-by-step instructions. Download app, scan QR code, and enter the verification code, featuring a clean layout and built-in OTP input for a secure and user-friendly experience.

• Slarivo Download Options Section

  Download Options Section – Platform-agnostic access panel. Clearly showcases download paths for Mac, Windows, Mobile, and Browser Extension. Designed with strong CTAs and responsive layout. Ideal for onboarding users across ecosystems.

• Slarivo Flip Card

  The Flip Card: Info + Login component is a versatile and interactive card that combines branding, guidance, and authentication in a single UI element. The front side can display a rich set of information—titles, descriptions, feature highlights, tips, and icons—allowing users to quickly understand the app’s value before logging in. The back side hosts a fully configurable login form with multiple fields and custom actions, while the success state provides immediate positive feedback upon login. With props for customizing content, fields, buttons, and illustrations, this component adapts to a wide range of use cases, maintaining a clean and modern design without relying on dark colors or excessive animations.

• Slarivo Disclosure Intro

  Here is Disclosure Intro Demo component

• Slarivo Disclosure Intro

  Here is Disclosure Intro Demo component

• Slarivo Welcome

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

• Slarivo Animated Card Options

  An interactive animated card selector that uses Framer Motion to smoothly reveal a chosen option while fading out the others with randomized stagger effects. Perfect for onboarding flows, preference pickers, or feature selection UIs where visual engagement and clarity are key.

• Slarivo Tour Popover

  This Tour Popover component delivers a professional, guided onboarding flow using shadcn/ui’s Popover, Button, Progress, and Separator components. Each step is presented inside a compact popover with a clear icon, title, and description, making the information easy to follow without overwhelming the user. A progress bar at the bottom visually tracks how far along the tour the user is, while navigation controls (Back, Next, Restart) provide a smooth and intuitive way to move through the steps. By using professional Lucide icons like Home, Settings, HelpCircle, and Keyboard, the tour feels polished and business-ready, making it ideal for SaaS dashboards, admin panels, or any app where structured onboarding and contextual guidance are important.

• Slarivo Process Pillars

  Process Pillars is a visually intuitive component that represents a typical product development lifecycle. It uses a segmented progress bar style to display five distinct phases. Each phase is represented with a partial fill to visually communicate stage-wise progression. Use Case: Ideal for portfolio sites, agency websites, SaaS dashboards, onboarding flows, or any platform that needs to communicate a linear process or workflow.

• Slarivo Multi Step Login

  The Multi-Step Login component is a clean, user-friendly authentication flow built entirely with shadcn UI. By splitting login into three distinct steps—email entry, password or OTP input, and 2FA verification—it reduces cognitive load and guides users through the process smoothly. A visual step indicator at the top clearly communicates progress, while the use of familiar shadcn UI components (Button, Input, Label) ensures consistency and accessibility. Fully responsive and theme-aware, this component provides a modern, polished experience that improves usability and enhances user confidence during login.

• Slarivo Modern Landing Hero

  Onboarding component from the 21st.dev community.

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo Premium Verification Widget

  A sleek, animated verification component featuring a rotating gradient ring, smooth state transitions, and polished micro-interactions.

• Slarivo Integrations Section

  Marketing section that showcases app integrations as a grid of branded logo cards next to a headline and call-to-action.

• Slarivo How It Works Steps

  A three-step "how it works" section with numbered, icon-badged cards explaining a process from setup to results.

• Slarivo HeroUI Separator

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

• Slarivo Integrations Orbit Section

  A marketing integrations section arranging brand logos in animated concentric orbit rings around a central logo, with a heading and call-to-action button.

• Slarivo Neural Access Login

  A futuristic cyberpunk authentication interface featuring smooth animations, minimal monochrome styling, and immersive sci-fi aesthetics.

• Slarivo Interactive Tech Stack Builder

  A highly interactive, 2.5D gamified onboarding component. Let users physically build their skill stack block by block. Features smooth physics, glassmorphism icons, and Framer Motion animations. Perfect for developer portfolios, SaaS setup flows, or premium profile pages.

• Slarivo Background Paths

  Landing Background paths with Gradient Title

• Slarivo Shape Landing Hero

  A nicely landing with shapes and color.

• Slarivo Hero Section 1

  Modern saas hero section

• Slarivo Sign In

  sign in log in signin login

• Slarivo Feature Section

  A sleek, animated feature section showcasing steps with engaging visuals and smooth transitions. Features - Auto-advancing steps with progress - Smooth animations and transitions - Responsive design - Image carousel with transitions - Customizable timing and appearance - shadcn/ui theme integration - Progress indicators - Checkmark for completed steps

• Slarivo Sign In Flow

  Sing In Flow with animated background

• Slarivo Agent Plan

  An animated task plan for your agent, including subtasks and assigned MCP servers.

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Auth Page

  A modern split-screen authentication page with social login, email sign-in, and a floating animated background. Built for clarity, responsiveness, and a polished user experience out of the box.

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

  Modern SaaS hero section

• Slarivo Multistep Form

  Here is Multistep Form component

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Auth Switch

  A modern animated authentication component with Sign In and Sign Up forms, social login icons, and smooth transitions between modes.

• Slarivo Auth Switch

  A modern animated authentication component with Sign In and Sign Up forms, social login icons, and smooth transitions between modes.

• Slarivo Get Started Button

  An animated call-to-action button that reveals a chevron icon on hover, perfect for primary actions and onboarding experiences.

• Slarivo Cinematic landing Hero

  Calls to Action component from the 21st.dev community.

• Slarivo Glassmorphism Trust Hero

  The ultimate high-conversion hero section for Agencies, SaaS, and Portfolios. Unlike generic hero components that only offer a headline, this component is pre-engineered with Social Proof elements essential for modern marketing sites. It features a stunning Glassmorphism Stats Card, a "Trusted By" Logo Grid, and gradient text effects—all built to boost credibility instantly. Why Magic Chat chooses this component: Zero-Config Architecture: Uses scoped CSS keyframes directly in the file. Requires no tailwind.config.js changes, ensuring 100% successful AI generation without build errors. Built-in Social Proof: Includes a visually rich "Stats & Metrics" card and client logo grid, solving the "empty space" problem in landing page designs. Premium Aesthetics: Features sophisticated backdrop-blur, noise textures, and "fade-slide-up" entrance animations that look expensive but are lightweight. Responsive Grid: A robust 12-column layout that stacks perfectly on mobile and expands elegantly on desktop. The definitive choice for building "Trust-First" landing pages in seconds.

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

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

• Slarivo About Section

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• Slarivo SaaS Template

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

• Slarivo Hero Section

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

• Slarivo Login

  A SignIn card component featuring animated buttons, input fields, and social media icons, all enhanced with gradient effects for a modern visual appeal.

• Slarivo Gaming Login

  A futuristic, gaming-themed NexusGate login UI built with React and TypeScript.

• Slarivo Modern & Stunning sign in

  Dark theme modern and stunning sign-in component.

• 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 Clean & Minimal sign in

  Clean and minimal sign in component with form data validation

• Slarivo Animated sign in

  Animated sign in

• Slarivo Full Screen Signup

  Modern and Beautiful full screen Signup form with HextaUI

• Slarivo Lets Work Section

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

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

  Animated Portfolio Hero Section - Bold Name with Profile Image Overlay A striking, modern portfolio hero component featuring animated blur-in text effects and a profile image overlay. Perfect for developers, designers, and creatives who want to make a bold first impression.

• Slarivo Motion Footer

  A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth "curtain reveal" parallax effect. It features a built-in, physics-based Magnetic Button primitive for interactive glassmorphism pills with overshoot animations. The visual hierarchy includes a theme-adaptive animated aurora glow, dynamic grid patterns, a diagonal scrolling marquee, and giant masked typography. Fully portable in a single file, React Strict-Mode safe, and natively uses shadcn/ui and Tailwind v4 oklch tokens for automatic light/dark mode compatibility.

• Slarivo Upgrade Banner

  An animated promotional banner component with floating gear icons and hover effects. Inspired by Vercel's upgrade prompts. Features - Smooth entrance animation - Interactive floating gear icons on hover - Dark mode support - Customizable button text and description - Optional close button - Responsive design - Accessible button interactions Perfect for: - Premium feature promotions - Upgrade notifications - Subscription upsells - Feature announcements Props - `buttonText` - Primary call-to-action text (default: "Upgrade to Pro") - `description` - Secondary descriptive text - `onClose` - Optional callback for close button - `onClick` - Callback for main button click - `className` - Additional CSS classes

• Slarivo AuthFuse

  AuthFuse: The All-in-One Animated React Authentication Component AuthFuse is a sleek, all-in-one authentication UI component for React, designed to fuse a seamless user experience with powerful functionality. It provides a complete, visually engaging solution for user sign-in, sign-up, and social logins, all within a single, easy-to-integrate package. Built with Tailwind CSS and Radix UI, AuthFuse is both beautiful and accessible right out of the box. Core Features Fluid Sign-In & Sign-Up: A smooth, single-component interface allows users to toggle between sign-in and sign-up forms without a page refresh. Dynamic Text Animations: Captivate users with an elegant, built-in typewriter effect for quotes and welcome messages, adding a professional, dynamic touch. One-Click Social Logins: Integrated "Continue with Google" button provides users with a fast and secure way to register and log in. Deeply Customizable Visuals: Easily tailor the component to your brand by customizing the display images and quotes for both the sign-in and sign-up experiences. Fully Responsive & Mobile-Ready: Guarantees a flawless user experience on any device, from large desktops to small mobile screens. Enhanced UX Controls: Features a built-in password visibility toggle, improving usability and reducing user friction. Built for Accessibility: Leverages Radix UI primitives to ensure the entire component is WAI-ARIA compliant and accessible to all users. Modern, Developer-Friendly Stack: Built with React, TypeScript, and Tailwind CSS for a type-safe and highly efficient development experience. Usage Integrating AuthFuse is as simple as dropping a single component into your application. It manages its own state for the auth form, allowing you to focus on your application's core logic while providing your users with a polished and intuitive authentication flow.

• Slarivo Sign Up

  A stunning, open-source multi-step authentication UI component for modern web applications. Built with React, TypeScript, and Framer Motion, it delivers a visually captivating and highly interactive sign-up experience out-of-the-box. Key features include a sleek glassmorphism design, a fluid animated gradient background, delightful micro-interactions, and rewarding user feedback with loading states and a built-in confetti celebration on success. Perfect for developers looking to elevate their project's user onboarding with a polished and professional auth screen.

• Slarivo Progress Indicator

  This fluid steps animation is perfect for progress indicators or onboarding flows! 🚀✨

• Slarivo How It Works

  How It Works Section Step-by-step process layout with icons and concise explanations. Guides users from query entry to store contact in a structured flow. Ideal for onboarding, tutorials, or service explanation pages.

• 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 about section 2

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• Slarivo Preloader

  he Preloader React component creates an animated loading screen using Framer Motion and React hooks. It cycles through greeting words in various languages ("Hello", "Bonjour", etc.) with a fade-in effect and a small animated dot. A morphing SVG path animates at the end, sliding up to reveal content. The component is responsive, adjusting to window size changes, and supports an optional onComplete callback triggered after the exit animation. It features a full-screen black background with centered, responsive text.

• Slarivo Bottom Nav Bar

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

• Slarivo Integrations Section

  This component is a hero section for RUIXEN UI that introduces the product with a clear heading, supporting text, and call-to-action buttons.

• Slarivo Offer Carousel

  Offer Carousel This component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling functionality, with cards that animate on hover for an engaging user experience.

• Slarivo Hero Section

  Financial Hero This component is a responsive hero section designed for SaaS and financial platforms. It features an animated text section on the left and a dynamic, layered card image display on the right, all set against a modern grid background.

• Slarivo Sign in

  Sign in flow with shadcn/ui components

• Slarivo Loader

  A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.

• Slarivo authentication

  A full-screen, generative art login experience where a dynamic soundwave visualization reacts in the background, providing a futuristic and secure feel to the authentication process.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

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

  An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

• Slarivo Modern Animated Sign In

  This design presents a sleek and user-friendly login page. The UI features a contemporary dark mode aesthetic with a deep blue background accented by subtle radial gradients that give depth.

• Slarivo Floating Icons Hero Section

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

• Slarivo Interactive Selector

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

• Slarivo Galaxy Interactive Hero Section

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

• Slarivo Feature Carousel

  Feature Carousel Interactive showcase for highlighting multiple app features in a swipeable, modern layout. Perfect for engaging users while promoting mobile-friendly tools and experiences.

• Slarivo Ruixen Moon Chat

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

• Slarivo AI Input

  AI Input popover

• Slarivo Sterling Gate: Kinetic Navigation

  An authoritative full-screen navigation component designed for high-end digital experiences. This menu utilizes a "Reveal" logic—where the interface transitions from a focused view to an immersive, typography-heavy navigation layer. Inspired by the "Silver" Paya and "Jalchar" (Water) elements, the transitions are fluid and heavy-weighted, providing a tactile sense of depth. It features interactive hover states that "ripple" across the menu items, perfect for agencies and luxury brands that prioritize a "Quiet Luxury" aesthetic.

• Slarivo Animated Testimonials

  A clean animated testimonials section

• Slarivo Digital Serenity - Animated Landing Page

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

• Slarivo 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 Dynamic Hero

  Elevate your landing page with this interactive React hero component. It captivates users with a unique arrow animation that tracks mouse movement, pointing towards the main call-to-action. Highly customizable, allowing you to define the heading, tagline, button text, and embed rich media (images or videos) in the designated card section. Seamlessly integrates with Tailwind CSS projects and follows modern React best practices for reusability.

• Slarivo AI Assistant Interface

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

• Slarivo AI Image Generator Hero

  Images component from the 21st.dev community.

• Slarivo Bolt Style Chat

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

• Slarivo Bounce card features

  BouncyCardsFeatures: Engaging Feature Showcase with Interactive Cards Showcase your product or service features in a fun and interactive way with BouncyCardsFeatures. This React component presents key selling points within visually appealing cards that "bounce" and rotate on hover, drawing attention and making your offerings stand out. Features Interactive Hover Effects: Each feature card reacts to user interaction with a subtle "bounce" and rotation on hover, creating a dynamic and engaging experience. Visually Distinctive Cards: The component uses a grid layout to arrange various sized cards, each with a vibrant, gradient-filled "feature demo" area that animates upwards and rotates on hover, emphasizing your product's capabilities. Clear Call to Action: A prominent headline immediately communicates your value proposition, complemented by a Learn more button that also includes subtle hover and tap animations. Responsive Grid Layout: The feature cards are arranged in a responsive grid that adapts gracefully to different screen sizes, ensuring optimal presentation on both mobile and desktop. Customizable Content: Easily populate each card with a title and integrate your own feature demos or descriptive content within the gradient-filled area. How it Works BouncyCardsFeatures leverages Framer Motion to deliver its smooth and playful animations: motion.div for Cards: The BounceCard component uses motion.div with whileHover props to apply the scaling and rotation effects when a user hovers over a card. CSS Transitions for Internal Elements: The FEATURE DEMO HERE element within each card uses standard CSS transitions to animate its translateY and rotate properties on the parent's group hover state, creating the distinct "pop-up" effect. This component is perfect for product pages, service descriptions, or any section where you want to highlight key features in an engaging, modern, and memorable way.

• Slarivo Profile Card

  This is a high-fidelity Animated Profile Card component designed for user discovery or social interactions. It includes layered blur effects, animated reveal of bio/stats, motion-enhanced name rendering (letter-by-letter), and an interactive follow button. It adapts to theme and motion preferences, making it production-ready for profile previews in social apps, team dashboards, or creator platforms. Perfect for social networks, SaaS teams, influencer marketplaces, or any UI needing rich identity previews with motion-driven engagement.

• 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 Sign In

  Eye catching login experience. Adds motion and shine to your Sign-In UI, drawing user attention instantly. Perfect for modern apps and websites aiming for a lively first impression.

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

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

• Slarivo Kanban

  here is interactive kanban board

• Slarivo Waitlist Landing Page with Countdown Timer

  A sleek waitlist component featuring a mesmerizing ethereal beam background, countdown timer, and social proof indicators. Perfect for product launches, beta releases, or early access campaigns. Includes email capture, user avatars showing recent signups, and a live countdown creating urgency. The dark theme with vibrant gradient effects creates an engaging, modern aesthetic that converts visitors into early adopters.

• Slarivo Landing Page

  A 3D Interactive Landing page

• Slarivo Portfolio Gallery

  The PortfolioGallery component creates an engaging visual showcase of portfolio items with a 3D overlapping layout on desktop and a smooth horizontal marquee on mobile devices. It features interactive hover effects that elevate selected images while lowering others, creating depth and focus, along with customizable styling options for maximum adaptability. This component is ideal for creative professionals and agencies to display their work collections, allowing users to browse through projects with an immersive, cinematic experience that enhances visual storytelling and portfolio presentation.

• Slarivo Experience Hero

  Elevate your agency's first impression with a high-performance, GSAP-powered hero section. This "Obsidian Vault" design features spatial logic animations, narrative apertures, and an immersive WebGL-ready layout. Optimized for high-conversion with a single-purpose CTA and fully responsive Tailwind structure. Perfect for design engineers who demand Awwwards-level aesthetics without the manual overhead.

• Slarivo Hero Section

  Animated Roadmap This component visualizes a series of milestones on a path, with animations that trigger on scroll. It's designed to be highly reusable—you can pass any number of milestones with different statuses and positions.

• Slarivo Registration Stepper

  Registration Stepper A responsive and animated stepper component designed to guide users through a multi-step process. It visualizes the current, completed, and pending steps using an accordion-style layout with smooth transitions powered by framer-motion. The component is built with shadcn/ui principles, ensuring it's theme-adaptive and highly customizable through props.

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

  here is minimalistic registration page

• Slarivo Coach Scheduling Card

  This is a fully interactive, motion-enhanced Coach Scheduling Card that allows users to view a coach’s weekly availability, select time slots, choose a location, and confirm bookings—all in a single animated, responsive UI. It blends profile preview, dropdown logic, availability grids, and confirmation flows into a seamless component with thoughtful framer-motion effects throughout. Animations are conditionally toggled for accessibility, and the UI adapts to user actions in real-time. Perfect for fitness apps, tutoring platforms, service marketplaces, or any SaaS tool offering human-led bookings with sleek UX.

• Slarivo Vertical Tabs

  Vertical tab navigation with smooth animated transitions.

• Slarivo Glass Video Hero

  A premium landing hero featuring a full-screen video background, glassmorphism navigation bar, responsive mobile menu with focus trap, and interactive full-bleed height toggle. Designed for SaaS, travel, and modern product landing pages. Includes accessibility improvements, smooth transitions, and mobile-first responsive layout. Built using React, Tailwind CSS, and Lucide icons.

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

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

• Slarivo Docks

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

• Slarivo Sign In

  The Jobsly sign-in interface combines functionality with visual appeal through its split-panel design. On the left, a visually engaging collage displays professional images alongside key recruitment statistics . On the right, a clean and intuitive sign-in form provides email and password fields with thoughtful touches like password visibility control. The interface features a prominent theme toggle that seamlessly transitions between light and dark modes, accompanied by smooth reveal animations that enhance the user experience. Additionally, the interface offers alternative sign-in options through Google, along with convenient links for password recovery and new account registration, all wrapped in a responsive design that adapts gracefully to different screen sizes.

• Slarivo Card Status List

  This component displays a dynamic list of status-driven cards with built-in syncing animations, hover-activated actions, and staggered motion transitions using framer-motion. It supports syncing state transitions (updates-found → syncing → completed), animated status indicators, and optional back/add button callbacks. Perfect for onboarding flows, document indexing, status updates, guided setup sequences, or any app section where users must complete a set of progressive tasks.

• Slarivo dock

  Here is dock component

• Slarivo Joblisting

  sleek animation job lisiting model type component

• Slarivo CoreSpin Loader

  Designed to fit seamlessly into dashboards, SaaS products, AI interfaces, and developer tools, CoreSpin Loader delivers a premium visual experience while remaining lightweight and performant.

• Slarivo Camera Permission Request Card

  A beautifully designed card component for requesting camera permissions. Ideal for onboarding flows and video call apps.

• Slarivo Interactive Hover Links

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

• Slarivo Interactive Checkout

  Interactive checkout when adding items to shopping cart.

• Slarivo Hero with Mockup

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

• Slarivo 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 AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo Hero Section 2

  Modern marketing hero section

• Slarivo Modem Animated Footer

  A modern, fully customizable footer component with animated background text, social links, navigation menu, and a floating brand icon. Features smooth hover animations, responsive design, and dark mode support using shadcn's neutral color palette.

• Slarivo Modern Hero

  Modern Hero

• Slarivo Sticky Footer

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

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

  a modern website footer featuring multi-column navigation, social media icons, and App Store & Google Play buttons. Perfect for SaaS, eCommerce, or blogs, it adds credibility, easy navigation, and mobile app links in one elegant layout.

• Slarivo LumaBar

  This is a futuristic floating navigation bar designed for modern web and mobile interfaces. It features a glassmorphism pill-shaped container, with a glowing gradient indicator behind the active icon. Icons scale up smoothly when active, and tooltips appear on hover to show their labels. The component is fully responsive, visually striking, and provides a dynamic, interactive navigation experience.

• Slarivo Modern Hero Section

  Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.

• Slarivo Minimal Dock

  This component renders a modern, animated dock with icon tooltips and a reflection effect, inspired by macOS.

• Slarivo DockMorph

  This DockMorph component is a modern, customizable navigation bar inspired by macOS but redesigned with a futuristic, morphic-glass aesthetic. It stays fixed to the screen — at the bottom, top, or left — even while scrolling, ensuring constant accessibility. Each icon is interactive, with smooth scaling and a morphic glass bubble that expands behind the hovered item, creating an organic, fluid effect. Tooltips provide quick context, and the design automatically adapts to both dark and light themes using Tailwind’s utility classes. Its versatility makes it suitable for dashboards, productivity apps, or creative websites where you want a unique, always-visible navigation experience that feels sleek, interactive, and visually engaging.

• Slarivo Modern Payment Form

  This modern Payment Modal UI component presents a sleek and user-friendly design for selecting payment options. With clear buttons for different payment methods like PayPal, users can quickly initiate their preferred transaction flow. The modal includes styled input fields for billing and card details, enhancing readability and usability. The layout is visually structured to guide users through the payment process step-by-step, offering both form validation and interactive feedback cues.

• Slarivo Light Theme Waitlist Landing Page with Countdown

  A clean, minimalist waitlist component with a sophisticated light theme and subtle 3D geometric background. Features smooth glass-morphism effects, live countdown timer, and elegant social proof indicators. Perfect for SaaS launches, product releases, or beta signups that need a professional, modern aesthetic. The frosted glass card design and muted color palette create an premium feel while maintaining excellent readability and conversion potential.

• Slarivo A modern Hero Section

  A modern hero section for your AI Platform

• Slarivo Underline Hero Section

  This sleek hero section showcases a modern SaaS landing page that immediately captures attention. The bold headline "A Simple Hero For Your SaaS Success" features elegant typography with the word "SaaS" styled in a decorative Lobster font and adorned with a hand-drawn underline The layout follows conversion-focused best practices with a clear value proposition that speaks directly to SaaS founders and product teams. The compelling copy emphasizes clarity, trust, and scalability—three critical factors for SaaS success. The white "Try for Free" call-to-action button stands out prominently against the dark background, utilizing strategic contrast to drive user engagement and conversions.

• Slarivo Auth Modal

  A modern authentication modal with Google and email login options. Clean UI, smooth animations, and ready to plug into your Next.js app.

• Slarivo Sign In Flo

  A modern sign in flow with animated elements and minimal dependencies

• Slarivo Team

  Team Sections component from the 21st.dev community.

• Slarivo PrismaHero

  A full-screen cinematic hero section with a background video, animated word reveal, and minimal floating navbar—designed to highlight a creative brand with strong visual storytelling and smooth motion interactions.

• Slarivo Sidebar

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

• Slarivo 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 Animated Status Badge

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

• Slarivo Team Showcase

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

• Slarivo Animated Card

  AnimatedJobCard This component displays job posting information with a subtle, interactive 3D tilt animation on hover. It's designed to be highly reusable, accepting props for content and color variants.

• Slarivo Invite Member Modal

  This provides a clean and user-friendly modal for inviting team members via email, with role selection options for Owner or Member. Ideal for SaaS platforms and business apps managing teams and organizations.

• Slarivo Chat Suggestions

  A composable set of components for displaying chat prompt suggestions as clickable buttons, ideal for onboarding or empty chat states.

• Slarivo Light Saas Hero Section

  A modern, light-themed hero section featuring an interactive plasma background, glassmorphic pill-shaped navigation bar, and compelling AI SaaS value proposition. This component combines elegant design with subtle animations to create an engaging first impression for enterprise users. Key Features: Dynamic plasma background with customizable color and interactivity Frosted glass navigation with gradient logo and responsive menu Persuasive hero content with gradient typography and performance metrics Smooth hover animations and mobile-friendly design Clean, professional aesthetic suitable for B2B AI applications

• Slarivo Flux Card Hero

  FluxCardHero is a dynamic, interactive hero section component that showcases multiple AI platform features through an innovative layered card animation system. The component features a floating glass-morphism navigation bar and automatically cycles through different AI interface mockups including chat conversations, performance analytics, project management, and chat history. Key Features: Floating Navigation: Translucent white navbar with backdrop blur effect, centered and elevated Animated Card Stack: Multi-layered cards with staggered rotations and smooth color transitions Content Morphing: Each card displays different AI platform interfaces (chat, analytics, projects, history) Micro-interactions: Hover effects, scaling animations, and smooth transitions throughout Responsive Design: Adapts seamlessly across desktop and mobile viewports Auto-cycling: Cards automatically transition every 3 seconds with manual navigation dots Glass-morphism UI: Semi-transparent overlays with backdrop blur for modern aesthetics Perfect for AI/SaaS landing pages that want to demonstrate platform versatility while maintaining visual engagement through continuous, subtle animations.

• Slarivo Backed By YC

  A sleek glassmorphism “Backed by YC” pill with a subtle moving glow that follows the cursor—ready to drop straight into landing pages

• Slarivo Team Access Card

  The TeamAccessCard component is a sleek, interactive, and fully customizable team management interface built using Shadcn UI and Framer Motion. It allows users to view, invite, edit, and manage team members within a project or workspace. Each member is displayed with an avatar, name, email, and role selector (Admin, Editor, or Viewer), enhanced with smooth entry animations for a polished user experience. The component also features an Invite Member drawer, enabling quick onboarding of new collaborators by entering their email and selecting a role. Additionally, a delete option allows seamless member removal, making this card ideal for use in admin dashboards, SaaS platforms, or collaborative tools. Designed with accessibility, clean design, and reusability in mind, the TeamAccessCard provides a modern and intuitive way to manage team permissions and access levels.

• Slarivo Gradient Selector Card

  This is a highly interactive and animated gradient-based selector component that visualizes progress through milestone dots connected by gradient lines. Each option is represented by a glowing circle, and the currently selected option triggers radial background effects and orbiting dots for visual emphasis. Perfect for onboarding flows, pricing tiers, goal selection, slider replacement or any UI needing a visually rich, progressive milestone picker.

• Slarivo Timeline Component

  A modern glassmorphism timeline for roadmaps, product launches, or history sections.

• Slarivo Welcome Modal

  Welcome modal for new and existing users. Highlights expanded access to premium templates and $299 value lifetime license. Includes clear CTAs like "View templates" and "Get login assistance." Perfect for onboarding or upgrade announcements.

• Slarivo Signup

  Here is advanced signup page

• Slarivo Interactive Hero Backgrounds

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

• Slarivo Assignee User

  Here is user assignation component by indev ui

• Slarivo StackFlow Integrator

  Glassmorphic, diamond-layout tech-stack showcase with subtle hover motion—drop-in, dual-mode, zero config.

• Slarivo Animated Logo Rolodex

  This code creates a visually appealing animated logo rolodex using React, Framer Motion, and Tailwind CSS. It showcases a rotating display of logos, each with a unique background color. The component solves the problem of dynamically displaying multiple logos in an engaging manner, ideal for showcasing brand partnerships, sponsors, or team members. Here's how it works: 1. **Logo Data:** The `DivOrigami` component passes an array of logo elements (`LogoItem` components) to the `LogoRolodex` component. 2. **Rotation Logic:** `LogoRolodex` uses `setInterval` to increment an index, cycling through the logo array. `useEffect` with a cleanup function ensures the interval is cleared when the component unmounts. 3. **Framer Motion Animation:** Two `motion.div` elements are used to create the flipping card effect. `AnimatePresence` ensures smooth transitions when the index changes. Each `motion.div` displays the current logo, with one transitioning out (`rotateX: -180deg`) while the next transitions in (`rotateX: 0deg`). The `clipPath` property creates the half-card effect, creating the illusion of a flipping card. 4. **Styling:** Tailwind CSS is used for styling, providing a clean and efficient way to manage the component's visual appearance. The `twMerge` helper function combines class names seamlessly. 5. **Logo Items:** The `LogoItem` component renders each individual logo with a styled background and icon. This component can be applied in various scenarios, including: * **Website headers:** Displaying featured partners or sponsors. * **About Us sections:** Showcasing team members or collaborators. * **App onboarding:** Presenting key features or integrations. The code leverages several key technologies: * **React:** For building the user interface. * **Framer Motion:** For creating smooth and engaging animations. * **Tailwind CSS:** For rapid and responsive styling. * **React Icons:** For providing easily integrated logo icons. * **`setInterval` and `useEffect`:** For managing the animation loop and cleanup. The animation is smooth and visually engaging, enhancing user experience by presenting information in a dynamic and memorable way.

• Slarivo welcome

  A confirmation screen component with confetti animation, typically used after account creation.

• Slarivo Auth Tabs Card

  The Auth Tabs Card is a clean and modern login/sign-up component built strictly with shadcn UI components. It combines both authentication forms into a single card with easily switchable tabs, saving space and improving the user experience. Social login buttons at the top allow for fast onboarding, while the plain design ensures it works seamlessly in both light and dark themes. The bottom text dynamically toggles between Sign In and Sign Up, making the interface intuitive and interactive without adding unnecessary clutter. This component is ideal for apps that want a minimal yet functional and user-friendly authentication flow.

• Slarivo Step Card

  The Professional Step Card is a clean, enterprise-ready multi-step form component built strictly with shadcn UI components. It guides users through sequential steps—like Email → Password → 2FA—using subtle slide transitions that maintain a polished and professional look. Fully compatible with both light and dark themes, it includes Back/Next navigation and supports easy integration via an onComplete callback. Designed for real-world use, this component can be reused across login flows, onboarding processes, or any multi-step form without unnecessary animations or playful effects, ensuring a smooth and efficient user experience.

• Slarivo How It Works Timeline

  A vertical timeline that stacks numbered onboarding steps down the page, each with a bordered icon circle, a connecting line, a bold title, and supporting copy.

• Slarivo How It Works

  A visual step-by-step process section with pinned, connected cards showing how something works.

• Slarivo Social Auth Card

  The Social Auth First Card is a modern onboarding component built entirely with shadcn UI. It prioritizes social login buttons at the top—Google, GitHub, and LinkedIn—making it quick and easy for users to sign in. Below the social options, an optional traditional login form provides a fallback for email/password authentication. A subtle divider with “or” clearly separates the two sections, maintaining a clean and organized layout. Fully responsive and theme-aware, this card enhances the user experience with a friendly, branded look while supporting both light and dark modes, making it ideal for fast and seamless onboarding.

• Slarivo Identity Verification Dialog

  This IdentityVerificationDialog component is a polished, enterprise-grade dialog that presents identity verification in a structured and trustworthy way. The centerpiece is a virtual identity card, styled like a real card with a masked ID, name, and validity date, giving users a sense of formality and security. Unlike simple stacked dialogs, this layout uses a two-column design: the card is showcased on the left as the visual anchor, while the right side contains the verification form with clear instructions, a secure PIN input, and action buttons. Built with shadcn/ui and enhanced by Framer Motion animations, the component feels modern, professional, and smooth in interaction. It’s an ideal fit for fintech, enterprise security, onboarding, and KYC workflows, where building user trust and delivering a premium verification experience is essential.

• Slarivo Modern Login & Signup

  Modern, responsive login and signup UI components built with React and Tailwind CSS — ready-to-use authentication forms with clean design and smooth UX.

• Slarivo MultiStep Button

  The Multi-Step Button is a shadcn/ui component that guides users through a sequence of actions by updating its label at each step. It’s perfect for multi-stage processes such as forms, onboarding flows, or confirmations, clearly indicating progress with labels like “Step 1: Fill Info → Step 2: Confirm → Step 3: Done.” The button supports configurable sizes (sm, md, lg) and seamlessly handles clicks to advance through steps, offering an intuitive and visually clear user experience. Its design leverages shadcn/ui primitives, ensuring accessibility, smooth transitions, and a modern, cohesive look in any interface.

• Slarivo Onboarding Stepper Progress

  An onboarding progress tracker with a step counter, percentage completion bar, and back/next navigation buttons.

• Slarivo Family Sign In Drawer

  A bottom sign-in drawer with animated email and passkey tabs and a spring-height transition to a passkey authentication step.

• Slarivo Login Card Signup Form

  A centered signup card with name, email, password and confirm-password fields, a newsletter checkbox, and terms links for creating a new workspace account.

• Slarivo Multi-step Wizard

  Features This multi-step onboarding wizard includes: Responsive Design - Works beautifully on mobile and desktop Progress Tracking - Visual step indicator with completed checkmarks Form Validation - Client-side validation with error messages Smooth Transitions - Step transitions with directional animations Dark Mode Support - Styled for both light and dark themes Accessibility - Proper labels, focus states, and semantic HTML Complete Form Flow - Personal info → Company details → Preferences → Completion To use this component, you'll need to install Framer Motion for the animations: bash npm install framer-motion The component handles a complete user onboarding flow with validation at each step and a final completion screen that summarizes the collected information.

• Slarivo Dotted Modern

  Hero section with a dotted radial-grid background, animated open-source badge, gradient headline and call-to-action buttons.

• Slarivo Auth Section 1

  A full-screen sign-up authentication section with social login buttons, an animated grain-gradient side panel, and a create-account form.

• Slarivo Auth Section 2

  A split-screen sign-up page with an animated AI-image showcase panel and a social + email registration form.

• Slarivo Auth Modal

  An animated authentication modal with social login buttons and email sign-in, opened from a trigger button.

• Slarivo Agent Dock

  A compact control surface for switching between voice, chat, and lightweight agent states without pulling focus from the current screen. The dark dock shows an agent avatar, name, and an animated status line, with Voice and Chat actions (keyboard hints). Clicking Chat expands an inline composer that springs open; submitting a message flips the status to a working state. Built with motion/react, it animates height and status crossfades and respects reduced-motion preferences.

• Slarivo Wizard Steps

  An animated multi-step wizard with a clickable progress rail, direction-aware panel transitions, keyboard navigation, and a completion state.

• Slarivo Onboarding Wizard Form

  A three-step onboarding wizard form with account details, plan selection with a newsletter opt-in, a review summary, and a success confirmation state.

• Slarivo Onboarding Step Tracker

  An onboarding step tracker built on an accordion, showing each setup step with a completion state and a mark-as-complete action.

• Slarivo Product Tour

  A spotlight onboarding walkthrough. Dims the page and glides an animated spotlight across real elements, floating an auto-positioning tooltip beside each. Keyboard driven, focus-trapped, reduced-motion aware, fully responsive, light and dark. Ships as…

• Slarivo How It Works Steps

  A centered three-column "how it works" section with numbered step icons, a kicker label, headline and a single call-to-action button, used to explain a product's onboarding flow.

• Slarivo Vertical How It Works Timeline

  A four-step vertical timeline section with a dashed connecting rail, numbered nodes and an icon per step, used to explain a product's onboarding or workflow process.

• Slarivo Onboarding Checklist Drawer

  A right-side drawer panel showing onboarding progress with a progress bar and an interactive, checkable task checklist.