SLARIVO / PROFILES

Profiles Components

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

• Slarivo Profile Peek

  Here is profile peek component

• Slarivo Profile Card

  Clean identity showcase. Features a rounded, shadowed layout to highlight user details in a minimal, floating style. Ideal for portfolios, team sections, or contact cards on modern websites.

• Slarivo ProfileCard

  An interactive, 3D-tilt profile card component featuring an animated status cycle, tier-based glow effects, a sliding glass panel, and a customizable action button.

• Slarivo Profile Card

  A compact, hover-to-expand profile microcard with elastic motion, glowing avatar, and GitHub link support, designed for clean light/dark interfaces.

• Slarivo Profile-Card

  A sleek, modern profile card UI showcasing a user’s name, avatar, username, and recent activity time. Includes a call-to-action button to add the member. Designed with rounded corners, a clear content layout, and shadowed depth for a minimal, friendly feel.

• Slarivo Profile Card

  This is a nice, clean and reusable profile card.

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• 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 Profile Selector

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

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Features 1

  features section

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Animated Profile Card

  Animated Profile Card

• Slarivo Info Card

  The information card includes the name, designation, followers, a premium user button, and a message button.

• Slarivo Profile Card

  profile card neon animation

• Slarivo Features

  Profiles component from the 21st.dev community.

• Slarivo Profile Card

  A responsive, production-ready team or leader profile card for Next.js, featuring a prominent photo, bio, and social links. Built with Tailwind CSS, Framer Motion, Lucide React icons, and Next.js best practices, it supports both light and dark themes out of the box.

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Freelancer Profile Card

  Freelancer Profile Card A responsive and animated profile card component, ideal for showcasing freelancers, team members, or user profiles. It features a banner, avatar, user details, stats, and a call-to-action, all powered by props.

• Slarivo Account Settings

  A fully responsive React + Tailwind CSS Account Settings component with sections for avatar upload, name, and email updates. Perfect for modern dashboards, SaaS apps, and profile management UIs.

• Slarivo Profile Dropdown

  Here is profile dropdown component

• Slarivo Glassmorphism Profile Card

  Glassmorphism profile Card

• Slarivo Connoisseur Stack Interactor

  A high-performance, motion-managed section designed to showcase complex professional hierarchies with technical elegance. Built for users who value "Smart Work" over brute force.

• Slarivo Glassmorphism Portfolio

  Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Animated Profile Card

  Here is Animated Profile Card component

• Slarivo Animated Profile Card

  Here is Animated Profile Card component

• Slarivo Animated Profile Card

  Here is Animated Profile Card component

• Slarivo Kinetic Team Hybrid

  A responsive, Framer Motion–powered team roster featuring a global cursor-follow preview on desktop and tap-to-expand accordion images on mobile for a cinematic talent showcase.

• Slarivo Login Card

  Here is Login Card component

• Slarivo Skeleton

  Profiles component from the 21st.dev community.

• Slarivo Insurance Card

  Insurance Card A modern, animated card component to display insurance policy details, complete with a scannable QR code and quick actions.

• Slarivo Base Avatar

  An easily stylable avatar component built with Base UI components.

• Slarivo Base Avatar

  An easily stylable avatar component built with Base UI components.

• Slarivo Card

  Profile Card Compact card with user avatar, name, role, and media preview. Includes a simple text section for descriptions or notes. Ideal for portfolios, testimonials, or social feed layouts.

• Slarivo Card

  Profile Card A visually polished card component to display user profile information, including statistics and action buttons. It features a subtle entrance animation and adapts seamlessly to light and dark themes.

• Slarivo RuixenCard02

  This section contains a set of responsive action buttons — Portfolio, Connect, and Share — allowing users to view the developer’s work, connect for opportunities, or share the profile easily. The layout adjusts gracefully across screen sizes for a clean, accessible experience.

• Slarivo Animated Profile Card

  Animated Profile Card A modern, animated profile card to showcase user details, stats, and skills. It features a subtle hover effect and staggered animations on load, built with Framer Motion.

• Slarivo Telegram Profile Header

  An animated profile header component inspired by Telegram's mobile interface. It was originally made as a non-reusable component by @alisamadi__ This reusable component features: - Expandable avatar with smooth animations - Responsive layout transitions - Customizable action button - Animated text color changes - Gradient overlay in expanded state Perfect for social media profiles, user settings pages, or any interface requiring an elegant profile header with image preview functionality.

• Slarivo Social Stories

  Here is social stories component

• Slarivo Avatar

  Here is Avatar component

• Slarivo Avatar

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

• Slarivo DoctorLiveChatCard

  A modern, responsive UI component to showcase a doctor’s profile for live consultation. It highlights real-time availability, rating, specialty, and enables patients to instantly join a chat or bookmark the doctor. Built for both light and dark modes with a sleek, accessible design.

• Slarivo Avatar

  Here is Avatar component

• Slarivo Avatar

  Here is Avatar component

• Slarivo Card

  Profile Card A visually polished card for displaying a user's profile, including an avatar, name, title, key statistics, and call-to-action buttons. It is designed to be highly reusable by accepting all content via props.

• Slarivo Card

  Profile Card This card component is designed to display user or profile information in a structured and visually appealing way. It accepts props for the image, name, age, description, and a list of tags, making it highly reusable.

• Slarivo Avatar

  An image element with a fallback for representing the user. Built with Radix UI Avatar primitives.

• Slarivo Avatar

  Display user profile images with customizable fallback content.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Timeline

  A timeline component with sticky header and scroll beam follow.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• 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 Features 8

  features section

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Animated Tooltip

  A cool tooltip that reveals on hover, follows mouse pointer Features: - Mouse Following: The tooltip moves and rotates with your cursor. - Spring Animation: Enjoy smooth, springy animations for a natural feel. - Hover Effects: Tooltips pop up with fade and scale effects when you hover. - Avatar Display: Circular profile pics with a stylish border. - Gradient Accents: Cool gradient lines add flair to the tooltip. - Group Layout: Stack avatars for a neat overlapping look. - Responsive Images: Next.js Image takes care of loading and optimizing images. Example Use Cases: - Team Member Display: Show team info when you hover. - User Lists: Highlight user details in social features. - Contributor Sections: Feature project contributors. - Member Grids: Showcase community or organization members. Props: - id: A unique identifier. - name: The display name. - designation: The role or title. - image: The avatar image URL.

• Slarivo Features 10

  features section

• Slarivo Claude Style AI Input

  Claude style dynamic chat input that adapts its preview based on content type - showing code snippets for programming files, content previews for documents, and traditional previews for media.

• Slarivo About Section

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

• Slarivo Link Preview

  Dynamic link previews for your anchor tags

• Slarivo Feature

  Badges component from the 21st.dev community.

• Slarivo Features 4

  features section

• Slarivo Features 6

  features section

• Slarivo testimonial

  Professional testimonial components featuring customer reviews, client feedback, social proof displays, and trust-building layouts designed to showcase credibility and increase customer confidence

• Slarivo User Dropdown

  A comprehensive user profile dropdown menu with avatar trigger, status management, and organized navigation sections. Features dark/light mode support, customizable user data, and grouped menu items for profile settings, premium features, support resources, and account management. Built with React, Tailwind CSS, and Iconify icons. Key Features: Avatar-triggered dropdown with user info display Status indicator with update submenu (Online, Focus, Offline) Organized menu sections (Profile, Premium, Support, Account) Full dark/light theme compatibility Configurable props for user data and event handlers Modern UI with icons, badges, and responsive design Perfect for SaaS platforms, dashboards, and applications requiring professional user account management interfaces.

• Slarivo Features 9

  features section

• Slarivo Project Showcase

  A minimal, list-based portfolio section with a cursor-following image preview. On hover, a smooth floating image appears and tracks your mouse using lerp-based animation.

• Slarivo RuixenContributorsTable

  a comprehensive overview of RUIXEN’s open-source projects, teams, and contributors. Designed for maintainers and team leads, it offers dynamic column selection, real-time filtering by project status and technology, and contributor tooltips with role and contact details. Users can customize their view to focus on specific data points—such as project timelines, technologies used, or team compositions—making it easy to manage internal development efforts or showcase team contributions publicly. The interface is clean, responsive, and optimized for both quick scanning and deep inspection.

• Slarivo Profile Card Testimonial Carousel

  A responsive testimonial carousel component featuring profile cards with avatars, descriptions, and social links. Built with smooth fade animations, bottom navigation controls, and supports both light and dark themes for seamless integration.

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

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

• Slarivo about section 2

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

• Slarivo Features 5

  features section

• Slarivo User Profile Card

  User Profile Card

• Slarivo Spatial Product Showcase

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

• Slarivo Features 7

  features section

• Slarivo CaseStudies

  This component is a pricing plan selector built with React and ShadCN UI. It displays three subscription options—Free, Pro, and Enterprise—each inside a styled card. The plans include a title, price, base units, and a list of features. A toggle button allows switching between showing the base units included in each plan or the per-unit pricing. The design ensures clarity by neatly aligning text, removing decimals

• 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 Profile Dropdown

  A profile dropdown for Users.

• Slarivo Basic Dropdown

  Here is Basic Dropdown component

• Slarivo story-viewer

  Timelines component from the 21st.dev community.

• Slarivo Feature Spotlight

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

• Slarivo Stats Card

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

• Slarivo 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 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 Avatar Picker

  Animated avatar picker.

• Slarivo Avatar

  Avatars represent a user or a team. Stacked avatars represent a group of people

• Slarivo Team Member Card

  An animated team member card with hover effects revealing social links and role details.

• Slarivo Fallback Avatar One

  Here is fallback avatar component.

• Slarivo The Item one

  Here is The Item components

• Slarivo Astryx Avatar

  Avatar represents a person or team with a profile photo, initials, or a default icon, from Meta's Astryx design system. Use it in comment headers, contact lists, chat messages, user cards, and anywhere you need to identify someone visually. Includes AvatarStatusDot and AvatarGroup with overflow.

• Slarivo Astryx Avatar

  Avatar represents a person or team with a profile photo, initials, or a default icon, from Meta's Astryx design system. Use it in comment headers, contact lists, chat messages, user cards, and anywhere you need to identify someone visually. Includes AvatarStatusDot and AvatarGroup with overflow.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.

• Slarivo Skeleton Swap

  A loading placeholder that crossfades skeleton bars into real content with zero layout shift, holding a reserved box until data is ready.

• Slarivo Hero Section 1

  Modern saas hero section

• Slarivo Hero Section

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

• Slarivo 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 Feature 108

  A versatile section with 3 features inside a tabs 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 Sidebar Component

  Here is Sidebar Component

• Slarivo Card Spotlight

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

• 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 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 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 Stack Feature Section

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

• Slarivo Hero Section

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

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

  Hero component with sleek animation

• Slarivo Pricing Interaction

  A reusable pricing selector component that supports three plans (Free, Starter, Pro) with toggles between monthly and annual pricing, and highlights the selected plan dynamically.

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

  The combined section component serves as a spotlight area to showcase the core strengths or highlights of our platform. It brings together key offerings

• Slarivo Image Testimonial Grid

  Pinterest-style testimonial cards featuring user profile images, names, and quotes over scenic backgrounds. Ideal for showcasing customer stories, social proof, or community highlights in a visually engaging way.

• Slarivo Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo Avatar Group

  A component that displays a group of avatars.

• Slarivo Featured Section Stats

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

• Slarivo 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 Project Detail View

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

• Slarivo Feature Card

  Animated Feature Card This component displays a feature or benefit in a visually engaging card format. It's designed to be highly reusable, accepting props for its content, image, and color theme. The hover animation, powered by framer-motion, adds a delightful interactive element.

• Slarivo Basic Dropdown

  Here is Basic Dropdown component

• Slarivo Particle Hero

  The component includes all the stunning visual effects like animated particles, rotating spotlights, and the gold mode toggle functionality,

• Slarivo SidebarShowcase

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

• Slarivo Feature Spotlight

  This component is a feature spotlight card where you can showcase in any landing page.

• Slarivo Elite Plan Card

  The ElitePlanCard is a sleek and interactive UI component designed to showcase premium offerings, subscription tiers, or featured products in a visually compelling way. It combines smooth Framer Motion hover animations with a bold, modern card layout to highlight essential details such as an eye-catching image, a concise subtitle, a descriptive overview, and a customizable list of key highlights. With its dark theme, gradient overlays, and a strong call-to-action button, the ElitePlanCard draws attention to top-tier plans or flagship products, making it ideal for pricing sections, promotional showcases, and landing pages that aim to convert visitors into customers.

• Slarivo Popover

  Here is Popover component

• Slarivo Field

  Here is Field component

• Slarivo Joblisting

  sleek animation job lisiting model type component

• Slarivo Music Portfolio

  A sophisticated React component for displaying music portfolios, discographies, or creative project collections with stunning interactive effects. Features include text scrambling animations on hover using GSAP, dynamic background image transitions, automatic idle animations, and full support for system dark/light themes. Perfect for musicians, record labels, music producers, or creative agencies looking to showcase their work in an engaging, modern interface. The component offers a minimalist grid layout that transforms into an immersive visual experience through smooth animations and hover interactions

• Slarivo Member Selector

  Team Sections component from the 21st.dev community.

• Slarivo Hero Block

  Personal portfolio hero section with animated avatar, staggered text, social links, and scroll indicator

• Slarivo Author Form Card

  AuthorFormCard A responsive and theme-adaptive card component for creating or updating author profiles. It features an image upload area, input fields with tooltips, and integrated animations using framer-motion.

• Slarivo User Profile Dropdown

  UserProfileDropdown Component This component displays a user's avatar and details, along with a dropdown menu containing customizable actions.

• Slarivo MultiMedia Testimonial

  The TestimonialCard component is a responsive, theme-adaptive UI element built with shadcn/ui that elegantly displays client testimonials. It supports text, images, and videos within a unified card layout featuring smooth transitions and dark/light mode compatibility. Each card includes a header, scrollable content area, and profile section, while video testimonials open inside a modal dialog with auto-play and reset controls. Designed for scalability, every card manages its own state independently—preventing global re-renders or hydration issues—making it ideal for showcasing multiple user reviews or success stories in modern web applications.

• Slarivo Skills Showcase

  This component can be used in portfolio to showcase the skills.

• Slarivo Team Section Block

  Animated team member cards with avatars, roles, and social links

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

  This component is a beautifully styled "Edit Profile" dialog box built using ShadCN UI and Tailwind CSS. It features a gradient header background, a rounded avatar image upload section, and a responsive, scrollable form layout. Users can update their full name, role, email, portfolio, and bio, with live character count feedback for the bio section. The design uses a modern radial gradient and smooth layout, ensuring a pleasant user experience across devices.

• Slarivo Testimonial

  Professional testimonial components featuring customer reviews, client feedback, social proof displays, and trust-building layouts designed to showcase credibility and increase customer confidence

• Slarivo Feedback Slider

  Here is colored feedback slider component

• Slarivo Expandable Skill Tags

  Expandable Skill Tags component, which displays a collection of skills with a "View all" / "View less" toggle, complete with smooth animations using framer-motion.

• Slarivo Public Stats

  Here is Public Stats component

• Slarivo Avatar - Border

  Here is avatar border component

• Slarivo Cybernetic Team Showcase

  creative and interactive "Cybernetic Team Showcase" section. It displays your team members in a futuristic grid. When you hover over a card, a "cybernetic" scanning effect animates over their photo, and their social links appear with a glitchy animation.

• Slarivo Editable Components

  Here is Editable Components

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Radial Orbital Timeline

  A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.

• Slarivo Bento Grid

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

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

  Modern hero section with video background

• Slarivo Hero Section 9

  Modern hero section

• Slarivo Futuristic Hero

  This component renders an interactive 3D scene with a scanning effect and depth map using React Three Fiber and Three.js (WebGPU). It features:

• 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 Circular Testimonials

  An animated testimonial section that displays user feedback in a visually engaging way. For the disclaimer, credit information, and the Vanilla HTML/CSS/JS version, please visit https://codepen.io/Northstrix/pen/QwWoYzZ Vue Version https://namer-ui-for-vue.netlify.app/components/circular-testimonials This component (Next.js version) is also available on Namer UI https://namer-ui.netlify.app

• Slarivo Modern Mobile Menu

  Mobile Menu, Mobile Nav, Mobile Navbar, Mobile navigation, Modern Mobile Menu, Mobile Dock, Dock, Bottom Nav, Navigation, Menu

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud 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 Hero Section 2

  Modern marketing hero section

• Slarivo Message Dock

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

• Slarivo Minimalist Hero

  Minimalist Hero Section – "Less is More" Bold visual storytelling. High-contrast monochrome portrait with a vibrant yellow circle creates strong focus. Typography is large, minimal, and clear. Ideal for brands emphasizing simplicity, elegance, or personal identity.

• Slarivo Testimonials

  This Username Testimonial Displays user testimonials with profile images, usernames, feedback text, and a link to their social media.

• Slarivo Modal

  This smart Modal component auto-switches between a Dialog and Drawer based on screen size using context. It gives you a seamless, unified API for building mobile-friendly popups, side panels, or modals with full Radix/vaul support—super handy for responsive UIs.

• Slarivo Logo Cloud 2

  Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual 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 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 Claude-style Chat Input

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

• Slarivo Features 11

  Bento features section

• Slarivo Modern Hero

  Modern Hero

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

  A clean animated testimonials section

• Slarivo Design Testimonial

  A completely unique asymmetric layout testimonial. Features include a vertical left column with rotated "Testimonials" text and an animated progress bar.

• Slarivo IntegrationHero

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

• Slarivo AI Assistant Interface

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

• Slarivo lumina-interactive-list

  A sophisticated, hover-responsive showcase block designed for high-end creative portfolios and luxury brand websites. This component features a minimalist vertical navigation list (01–06) that dynamically updates a featured image preview. It balances "Quiet Luxury" typography with high-impact visuals, creating a "premium" user experience that feels both authoritative and mysterious. It is optimized for developers who want to display "Featured Creations" with an air of exclusivity and artistic depth.

• Slarivo Features 2

  features section

• Slarivo Avatar Circles

  Overlapping circles of avatars.

• Slarivo Card With Lines Patter

  A modern card component featuring a diagonal lines pattern. The pattern creates a dynamic visual texture through intersecting diagonal lines, perfect for creating a sense of movement and sophistication in your UI. Features - Diagonal lines pattern with consistent spacing - Clean, minimalist aesthetic - Dark/Light mode support - Smooth gradient overlay - Responsive design - Built with shadcn/ui theme system - Framer Motion entrance animation

• 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 Modern Timeline

  A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/light modes, and rich content like icons, dates, and status badges. Ideal for SaaS roadmaps, onboarding flows, or project timelines. Cleanly structured and highly customizable via props.

• Slarivo Marquee

  Inspired by https://x.com/dollargill

• Slarivo flow-gradient-heroSection

  An authoritative UI component featuring fluid liquid gradients and kinetic typography. Designed for premium dark-mode experiences, it combines a sophisticated grainy texture with bold messaging that commands attention. This section captures a modern, leadership-focused aesthetic, ideal for high-stakes tech brands or creative agencies looking for a "smart," professional edge.

• Slarivo Interactive Logs Table

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

• Slarivo 3D Gallery Photography

  Modern sleek 3D slideshow that showcases a photo gallery created with v0, react three fiber, webgl

• Slarivo Unique Testimonial

  A minimal testimonial component featuring a centered quote with smooth fade/blur transitions when switching between testimonials.

• Slarivo Avatar Group

  An avatar group component made with framer-motion and Tailwind CSS

• Slarivo layered text

  Layered text with 3D perspective and smooth hover animations

• Slarivo Avatar Uploader

  An interactive avatar uploader with image cropping and preview that supports custom aspect ratios, size limits, and file validation. Perfect for profile pictures, user onboarding flows, and account settings pages.

• Slarivo Testimonial

  An animated testimonials slider, pairing a person's image on the left with their quote, name, and title on the right. Users can navigate through entries with arrow controls, and the component features a subtle animated grid background with both light and dark modes.

• Slarivo Process Timeline

  process section with scroll trigger animations showing process step depending on current scroll position

• Slarivo Scrolling animation

  Scrolling animation, Profile images

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

  Here is Progressive Blur

• Slarivo Story

  - story similar to IG and facebook, you can also use it as a autoplay carousel

• Slarivo FeaturedCrmDemoSection

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

• Slarivo 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 Feature Modern

  Here is Feature component

• Slarivo Feature Modern

  Here is Feature component

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

  Interactive Graident Background with pointer movement

• Slarivo HyperText with Decryption

  Interactive hypertext bio card where specific keywords decrypt into animated highlights on hover, perfect for personal sites or “about me” sections.

• Slarivo Potfolio Text

  Elegant animated text component with the rotating diamond visual replacing the "o" character.

• 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 Social Media

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

• Slarivo Classy Hero

  Classy Hero is a premium hero section with a black-and-white animated background, elegant typography, and interactive elements—perfect for a modern, high-end digital presence.

• Slarivo Globe

  Modern animated globe component with flowing orbital trails and adaptive theme support.

• Slarivo Orbiting Avatars

  Orbiting Avatars CTA Description: A visually engaging Call-to-Action (CTA) component that displays a central message, a button, and a configurable set of avatars that gently float and orbit around the content. It's designed to highlight community, contributors, or users in a dynamic way.

• Slarivo Modern animated multi words

  Modern animated multi words

• Slarivo Executive Impact Carousel

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

• Slarivo Text

  Display text using well-defined typographic styles.

• Slarivo Modern Feature Grid

  A responsive and theme-able grid component to showcase product features, styled with a modern glassmorphism effect and an interactive spotlight background.

• Slarivo Avatar Hover Card

  Avatar card that expands on hover to reveal profile information with smooth animations.

• Slarivo Avatar Smart Group

  The Avatar Smart Group component is a versatile and reusable UI element designed to elegantly display a group of user profile images with interactive tooltips. It supports two layout variants — uniform, where all avatars are equal in size, and centered, where the middle avatar is highlighted to draw focus. Each avatar includes hover animations, smooth scaling effects, and customizable features such as size, overlap spacing, ring color, tooltip background, and hover scale intensity. Built with React and Tailwind CSS, it maintains a clean aesthetic while remaining highly configurable for any project — from team displays and contributor sections to community dashboards or collaboration tools. The component ensures a visually engaging and professional way to showcase team members or user groups.

• Slarivo Timeline Component

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

• Slarivo Perspective Marquee

  A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.

• Slarivo Password Input

  Here is modern Password Input

• Slarivo Hero with bg video

  here is progressive hero

• Slarivo Modern Retro Button

  An unusual button that employs modern and retro styles at the same time. Credit: https://codepen.io/jdillon/pen/qEWOGxm

• Slarivo Interactive Hero Backgrounds

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

• Slarivo background plus

  bg background

• Slarivo SocialPostCard

  SocialPostCard is a sleek, modern, and fully responsive social media post component designed to showcase user posts with author details, content, and an optional link preview. It features interactive action buttons for liking, commenting, sharing, and bookmarking, providing seamless user engagement. Built with a clean glassmorphism style and optimized for both light and dark modes, this component adapts beautifully to different screen sizes, making it perfect for community platforms, social feeds, or dashboards where user interaction and readability are key.

• Slarivo Elegant Dark Pattern

  Sophisticated gradients meet subtle textures for modern interfaces.

• Slarivo Perspective Book

  Here is Perspective Book component

• Slarivo Basic Avatar

  A Basic Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Base Avatar

  An easily stylable avatar component built with Base UI components.

• Slarivo Base Avatar

  An easily stylable avatar component built with Base UI components.

• Slarivo Avatar

  A Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Avatar

  A Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Avatar

  A Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Avatar

  A Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Avatar

  A Avatar component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, profile.

• Slarivo Edit Profile Dialog

  An edit-profile dialog with an avatar, name, email and bio fields opened from an ellipsis menu button, built on Base UI primitives.

• Slarivo User Profile Dropdown Menu

  A user profile dropdown menu with avatar, online status indicator, and grouped links for profile, subscription, settings, and sign out.

• Slarivo Vertical Settings Tabs

  A settings panel with vertical underline tabs for switching between profile, security, notifications, and integrations sections.

• Slarivo Edit Profile Sheet

  A slide-out sheet panel containing a profile edit form with labeled inputs, a header description, and footer save/cancel actions.

• Slarivo Flip Card

  A 3D profile card that flips on hover or tap to reveal a bio, stats, and social links.

• Slarivo Reshaped Avatar

  Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with automatic typography scaling, and a squared shape.