SLARIVO / AVATARS

Avatars Components

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

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Avatar

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

• Slarivo Avatar

  An image element with a fallback for representing the user.

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

  Display user profile images with customizable fallback content.

• Slarivo Basic Avatar

  Here is Avatar component

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

  An image element with a fallback for representing the user

• Slarivo User Avatars

  Here is User Avatars

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Canvas

  Canvas effect

• Slarivo Animated Beam

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

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Card

  Containers for displaying content and actions about a single subject.

• Slarivo Modern Hero

  Modern Hero

• Slarivo X Gradient Card

  A nice gradient Card displaying a post from X (Twitter)

• Slarivo User Profile Card

  User Profile Card

• Slarivo Kanban

  A drag-and-drop kanban component designed for seamless item organization across customizable columns.

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Kanban Board

  Here is Kanban Board component

• Slarivo Blog Section with Rich Preview

  Blog Section with Rich Preview

• Slarivo Scrolling animation

  Scrolling animation, Profile images

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

  Display placeholder content while loading to improve perceived performance.

• Slarivo Messaging Conversation

  A simple Messaging Conversation block to display messages

• Slarivo Post Card

  An Example card component of social media post.

• Slarivo Spring Element

  A flexible, animated spring component that attaches a draggable element (avatar, text, icon, or any React node) to its origin with a spring line.

• Slarivo Sliding Testimonial

  Beautifully designed, fully responsive, expertly crafted Testimonial with sliding animation.

• Slarivo Testimonal Slider

  Here is Testimonal Slider component

• Slarivo Split Testimonial

  This is a testimonial component which changes text and image with next testimonial.

• Slarivo 3D Book Testimonial

  Here is 3d book testimonial

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Skeleton

  Here is Skeleton component

• Slarivo Radial Intro

  A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.

• Slarivo Avatar

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

• Slarivo Chat Preview

  A dynamic chat preview component for showcasing real-time messages in channels. Supports gradient backgrounds, customizable messages, and responsive design.

• Slarivo Basic Chat

  basic chat with shacn

• Slarivo Tweet

  Embed Twitter/X posts with custom styling.

• Slarivo Email Client Card

  Email Client Card A responsive card component for displaying and replying to messages, designed in the style of modern email clients. It features customizable slots for actions, reactions, and a reply input.

• Slarivo Avatar with name

  Avatar component that displays a name tooltip on hover with directional animations.

• Slarivo Avatar Hover Card

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

• Slarivo Card

  Review Card A visually polished card component to display user reviews or testimonials, complete with an avatar, rating, and review text. It features a subtle entrance animation and is fully themeable using shadcn/ui variables.

• Slarivo Avatar

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

• Slarivo First Place Leaderboard

  Here is First Place Leaderboard component

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Leaderboard Podium

  Avatars component from the 21st.dev community.

• Slarivo Assignee User

  Here is user assignation component by indev ui

• Slarivo Animated Review Card

  Here is Animated Review Card components

• Slarivo List

  Activity List The ActivityList component is designed to display a feed of recent transactions or activities. It features a clean, card-based layout with animated list items that gracefully fade in. The component is fully responsive and uses shadcn theme variables for seamless integration into light and dark modes.

• Slarivo Spring Element

  Here is animated Spring Element

• Slarivo Issue Kanban

  Here is IssueGrid component

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Chat Bubble

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

• Slarivo Avatar

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

• Slarivo Avatar

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

• Slarivo Avatar

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

• Slarivo 8-bit Avatar

  Pixel-art avatar from 8bitcn.com — chunky pixel frame around image with retro variant. Replaces Radix Avatar with native primitives.

• Slarivo Avatar Badge

  Here is avatar badge component.

• Slarivo Avatar

  Here is Avatar component

• Slarivo Avatar

  Here is Avatar component

• Slarivo Avatar

  Here is Avatar component

• Slarivo Avatar

  Here is Avatar component

• Slarivo Fallback Avatar

  A unique gradient avatar generated from a name string.

• Slarivo Fallback Avatar

  A unique gradient avatar generated from a name string.

• Slarivo New Card

  This is card component

• Slarivo Skeleton

  Used to show a placeholder while content is loading.

• Slarivo Coming Soon Waitlist Page

  A centered coming-soon page with a headline, email waitlist capture form, avatar social proof, and social links.

• Slarivo Email Inbox Skeleton

  A loading placeholder skeleton for an email inbox list with avatars, subject lines, and unread indicators.

• Slarivo Avatar

  Display user profile images with customizable fallback content.

• Slarivo Avatar

  Display user profile images with customizable fallback content.

• Slarivo Avatar

  Display user profile images with customizable fallback content.

• Slarivo Avatar

  Display user profile images with customizable fallback content.

• Slarivo Avatar

  Display user profile images with customizable fallback content.

• Slarivo Avatar Square

  Here is Avatar Square component

• Slarivo Avatar Square

  Here is Avatar Square component

• Slarivo Avatar Square

  Here is Avatar Square component

• Slarivo Avatar One

  Here is avatar component.

• Slarivo Aurora Background

  A subtle Aurora or Southern Lights background for your website.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo Beams Background

  Beams Bacground animated with colors

• Slarivo AI prompt Box

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

• Slarivo Globe

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

• Slarivo Logos 3

  Client logos scrolling automatically with a Carousel with masked edges

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Marquee

  An infinite scrolling component that can be used to display text, images, or videos. Add the following animations to your tailwind.config.js file: extend: { animation: { marquee: "marquee var(--duration) linear infinite", "marquee-vertical": "marquee-vertical var(--duration) linear infinite", }, keyframes: { marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(calc(-100% - var(--gap)))" }, }, "marquee-vertical": { from: { transform: "translateY(0)" }, to: { transform: "translateY(calc(-100% - var(--gap)))" }, }, }, },

• Slarivo Testimonial Card

  A versatile card component for displaying user testimonials with avatars and social links inspired by Launch UI. It supports both linked and non-linked variants, custom styling, and responsive design. Features: • Avatar with user image • Name and social handle • Testimonial text • Optional link wrapper • Gradient background with hover effects • Dark mode support

• Slarivo Stagger Testimonials

  Testimonial Component that stands apart from the boring boxes of quotes. Dark mode compatible, no frame motion used.

• Slarivo Avatar

  An image element with a fallback for representing the user.

• Slarivo 3D Carousel

  A 3D image carousel

• 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 Google Gemini Effect

  An effect of SVGs as seen on the Google Gemini Website

• Slarivo 3D Testimonails

  A marquee component continuously scrolls text, images, or videos in an infinite loop, with customizable speed, direction, and responsive design for engaging displays.

• Slarivo Chat Bubble

  The ChatBubble component chat-bubble.tsx is the main component in this library. It is used to display a chat bubble along with its message, avatar and other content. Wrap the ChatBubble component with ChatMessageList to properly show the chat bubbles.

• 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 Testimonial-v2

  A reusable testimonial component block

• Slarivo Testimonials

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

• Slarivo Testimonials

  Testimonials with a carousel of reviews

• Slarivo Link Preview

  Dynamic link previews for your anchor tags

• Slarivo Team

  Here is Team component

• Slarivo Testimonial Cards

  Draggable Testimonial Cards with Glassmorphism

• 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 Arc Gallery Hero Component

  "Arc Gallery - Interactive Image Showcase": A stunning interactive image gallery featuring a curved arc layout with smooth animations and responsive design

• Slarivo Image Trail

  A component that creates a trail effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.

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

  a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for SaaS dashboards with multi-tenant support.

• Slarivo Testimonial

  Dragable testimonial, where user can swap to change

• Slarivo Avatar Circles

  Overlapping circles of avatars.

• Slarivo AI Image Generator Hero

  Images component from the 21st.dev community.

• Slarivo Table

  Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.

• Slarivo Testimonial Slider

  Adaptive Layout: Automatically adjusts visible testimonials (1-3) based on screen size Smooth Animations: Spring-based transitions with drag-and-drop functionality Auto-Play: Rotates testimonials every 4 seconds with pause on interaction Interactive Controls: Navigation buttons and dot indicators with hover effects Mobile Optimized: Touch-friendly swipe gestures with reduced swipe threshold Visual Feedback: Animated user avatars and active slide indicators Accessible: ARIA labels and keyboard-navigable controls Modern Design: Gradient accents, card shadows, and clean typography Performance: Optimized image loading with error fallbacks

• Slarivo Stories Carousel

  Here is Stories Carousel component

• Slarivo Notifications Menu

  A sleek, ultra-minimal notifications menu focused on clarity and function, just the essentials, no clutter.

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

  Marquees component from the 21st.dev community.

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Pill

  Tags component from the 21st.dev community.

• Slarivo Testimonials Section

  A modern testimonial grid with animations, customer photos, and quotes — perfect for SaaS, startups, and business websites to showcase client success stories and build trust.

• Slarivo Testimonial Slider

  Carousels component from the 21st.dev community.

• Slarivo Clean Testimonial

  Clean testimonial component with unique features.

• Slarivo Avatar Group

  A component that displays a group of avatars.

• Slarivo Testimonial Carousel

  Testimonial Carousel with company logo and avatar

• Slarivo Animated Profile Card

  Animated Profile Card

• Slarivo Message

  Layout wrapper that arranges a single conversation message with avatar, alignment, header, and footer for chat and AI messaging interfaces.

• Slarivo Shimmer Skeleton

  A subtle animated shimmer skeleton placeholder for loading cards, lists, and table rows.

• Slarivo Chat Thread Skeleton

  A chat conversation loading placeholder with avatar, message bubbles, and input bar built from shimmer skeletons.

• Slarivo Interactive Changelog With Dialog

  Interactive Changelog With Dialog

• 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 Typewriter Testimonial

  Here is Typewriter Testimonial component

• Slarivo Minimal Testimonial

  A clean, minimal testimonial with just the essentials - a beautifully typeset quote with smooth fade/blur transitions.

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

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

• Slarivo Team Section

  TeamSection A responsive team showcase section with member profiles, designations, social media links, and an animated hover effect for individual member cards.

• Slarivo story-viewer

  Timelines component from the 21st.dev community.

• Slarivo Story

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

• Slarivo Testimonials 1

  Simple testimonials section with minimal cards

• Slarivo File Upload

  Here is File Upload component

• Slarivo Message

  Here is Message component

• Slarivo Testimonial Card

  Testimonial Card Section – Social proof showcase. Displays client reviews, star ratings, and impact stats in a clean grid layout with strong visual hierarchy. Perfect for building trust on portfolio sites, agency pages, or product landing screens.

• 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 Audio Chat

  Polished voice chat component with smooth expand/collapse animations.

• Slarivo Floating Chat Widget

  Floating chat widget with AI agent selection dropdown and animations

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

  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 RuixenMonoChat

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

• Slarivo Glassmorphism Portfolio

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

• Slarivo Hero

  Hero Section with Animated Text This component provides a full hero section layout. It features a title, an animated subtitle that cycles through a list of phrases with a typewriter effect, a descriptive paragraph, an information badge, a primary call-to-action button, and a social proof element with stacked avatars.

• Slarivo Member Selector

  Team Sections component from the 21st.dev community.

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Basic Avatar

  Here is Avatar component

• Slarivo Animated Profile Card

  Here is Animated Profile Card component

• Slarivo List

  List views are a great way to show a list of tasks grouped by status and ranked by priority.

• 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 Text Arc Effect

  Text curving tool for creative typography. Bends text along circular or custom arc paths. Ideal for creating logos, badges, or decorative text elements with some customizable animated motion.

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

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

• Slarivo Stacked Dialog

  Here is Stacked Dialog component

• Slarivo User Profile Dropdown

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

• Slarivo Avatar Picker

  Animated avatar picker.

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

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

• Slarivo Notification Alert Dialog

  Here is Notification Alert Dialog component

• Slarivo Team Section Block

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

• Slarivo Orbiting Carousel with Animated Icons

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

• Slarivo Smart Popover

  This SmartPopover gives you a mobile-first popover/drawer combo that auto-adapts based on screen size. It wraps Radix Popover and Vaul Drawer with a shared context, so you write it once and it just works—perfect for menus, filters, or actions on both mobile and desktop.

• Slarivo Aero Hero-2

  Buttons component from the 21st.dev community.

• Slarivo Marquee Card

  Marquee Card, card, testimonials

• Slarivo Aero Hero-1

  Buttons component from the 21st.dev community.

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

  Modern hero with subtle background grid, stacked avatars & CTA buttons

• 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 Messaging people list

  A simple messaging component to display people list

• Slarivo Hero Scrub

  Cinematic scroll-scrubbed hero with an image sequence rendered on canvas. The central card scales from a thumbnail to cover the viewport while scrubbing through your video frames, then shrinks back symmetrically. GSAP ScrollTrigger powered, pin-based choreography, mobile-aware, respects prefers-reduced-motion. Ideal for luxury, automotive, editorial and product landing pages.

• Slarivo Testimonial Slider

  Testimonial Slider A modern, animated testimonial slider component that showcases user feedback with an image, quote, rating, and navigation controls. It's designed to be easily integrated and customized by passing an array of testimonial data.

• Slarivo Moving Border

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

• Slarivo Voice Picker

  Here is Voice Picker component

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

  Here is animated tooltip component

• Slarivo Hover Testimonial Card

  A sophisticated testimonial card component featuring smooth hover animations, supporter avatars grid, and elegant typography. Perfect for showcasing customer feedback with visual impact and professional polish.

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

  A centered call-to-action section with a heading, email subscribe input, and a stack of member avatars with social proof.

• Slarivo Radial Social Menu

  Radial Social Menu

• Slarivo Animated List

  Here is animated list component

• Slarivo Avatar

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

• Slarivo Menu

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

• Slarivo Avatar - Border

  Here is avatar border component

• Slarivo Card

  Incoming Call Notification This component displays an incoming call notification card. It's designed to be highly reusable, with props for caller information and action handlers. It uses framer-motion for smooth enter/exit animations and a subtle pulsing effect to draw attention.

• Slarivo Community Hub Card

  Community Hub Card This card provides a centralized view of a community's key information, including member stats, an invite system, book progress, and an upcoming reading list.

• Slarivo Avatar Group

  Here is Avatar Group component

• Slarivo Leaderboard Card

  Paginations component from the 21st.dev community.

• Slarivo Swipe Row

  A swipe row for providing actions of swipe of left and right

• Slarivo Base Avatar

  An easily stylable avatar component built with Base UI components.

• Slarivo Testimonial

  Testimonial Section This component renders a title and a grid of testimonial cards. It's designed to be highly reusable, accepting an array of testimonial objects to dynamically generate the content. It supports two types of cards: a standard user testimonial with an avatar and a featured quote card.

• Slarivo Avatar Group with Tooltip

  A visually interactive avatar group with hover effects and tooltips, allowing users to easily view and highlight avatars with smooth animations.

• Slarivo Avatar Notifications

  This Avatar Notifications with Blinking Indicator component is a refined and modern way to handle user alerts. Instead of relying on plain badges, it introduces a subtle status dot at the top-right corner of the notification icon. When there are new messages, the dot blinks green to draw attention, and when there are none, it switches to a calm static gray state. The popover is neatly centered below the icon, keeping the interaction natural and balanced. Each notification is presented with an avatar, sender name, message, and timestamp, making it easy to recognize at a glance.

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

  A clean and responsive project card that displays key project milestones alongside team member details. It uses a two-column layout with a timeline on the left and a list of contributors on the right, each with status indicators. Fully supports dark mode and adapts to different screen sizes.

• 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 comment reply

  this is a comment reply component designed for modern and minimilist social apps

• Slarivo Avatar

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

• Slarivo Presence Avatars

  Animated overlapping avatar stack that shows who is currently present, with an overflow count, image fallbacks to initials, and polite screen-reader announcements.

• Slarivo indevuiSkeleton

  Here is modern animated skeleton by indevui

• Slarivo Agent Avatar

  Canvas-based generative pixel avatar for AI agents, deterministic per seed and gently breathing while the agent works. Respects prefers-reduced-motion.

• Slarivo Tweet Card

  A polished tweet-style card built with React, Framer Motion, and Tailwind, featuring interactive actions, hover-based lighting, and support for avatars, rich media, and live-like stats.

• Slarivo Workspaces

  a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for SaaS dashboards with multi-tenant support.

• Slarivo Navbars

  Here is Navbars component

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  Here is Data Grid Table component

• Slarivo Data Grid Table

  A Data Grid Table component for comparing structured records, attributes, and operational data, featuring data table, data-table, table, pagination.

• Slarivo Basic Avatar

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

• Slarivo Basic Avatar

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

• Slarivo Item

  A Item component for revealing contextual actions, options, and navigation, featuring dropdown, menu item, menu-item, avatar.

• Slarivo Item

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

• Slarivo Item

  A Item component for displaying ordered records, tasks, activity, and repeated content, featuring list, avatar, invite teammate, invite-teammate.

• Slarivo Card Studio

  A Card Studio component for grouping related information, actions, and media into reusable surfaces, featuring card, note, avatar, list.

• Slarivo Card Studio

  A Card Studio component for grouping related information, actions, and media into reusable surfaces, featuring testimonial card, testimonial-card, card, rating.

• Slarivo First Place Leaderboard

  A First Place Leaderboard component for representing people, teams, and account identity, featuring leaderboard, profile card, profile-card, avatar.

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

  A Animated Review Card component for presenting reviews, customer outcomes, and social proof, featuring testimonial card, testimonial-card, review, rating.

• Slarivo Animated Review Card

  A Animated Review Card component for presenting reviews, customer outcomes, and social proof, featuring testimonial card, testimonial-card, review, rating.

• Slarivo Skeleton

  Skeleton loading placeholder with avatar, title, text, and media variants.

• Slarivo The Dialog

  A The Dialog component for representing people, teams, and account identity, featuring invite teammate, invite-teammate, invite member, invite-member.

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

  A Collapsible component for displaying ordered records, tasks, activity, and repeated content, featuring collapsible, list, avatar, task.

• Slarivo Reshaped Autocomplete

  Renders a TextField and a list of suggested values using Autocomplete.Item compound components. The list is shown when the user focuses the field and hidden once they select a value. Supports filtering, custom item composition with slots, multiline start…

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, dashboard, tabs, search.

• Slarivo HeroUI Table

  HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.

• Slarivo Reshaped Badge

  Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a…

• Slarivo The Item one

  A The Item one component for revealing contextual actions, options, and navigation, featuring dropdown, account, user profile, user-profile.

• Slarivo Avatar Square

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

• Slarivo Images Badge

  A stacked avatar/image pill that fans open on hover, for team badges, social proof, avatar groups and template galleries.

• Slarivo Badge with Avatar

  A dismissible outline badge that shows a user avatar with name and a remove button, useful for selected users or tags.

• Slarivo Members Grid Block

  A team members section with a header, search and invite actions, and a responsive grid of member avatars with names and roles.

• Slarivo Payments Table with Cell Selection

  A payments data table showing customer avatars, product, price, status badges, and highlighted selected cells.

• Slarivo Select with Avatar

  A select dropdown user picker that shows each person's avatar, name, and email in both the trigger and the options.

• Slarivo Team Invitation Alert

  A notification alert card showing a team invitation with an avatar, online status, and accept/decline actions.

• Slarivo card-hover

  A card-hover component for grouping related information, actions, and media into reusable surfaces, featuring card, hover effect, hover-effect, image card.

• 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 User List Accordion

  An accordion listing team members with avatars, names, and role badges that expand to reveal each member's permission details.

• Slarivo Favicon Badge

  Circular website favicon badge with optional label text, spring entrance animation, and automatic favicon resolution from a domain or URL.

• Slarivo Builders Community Hero

  ommunity hero section with animated-style orbit visuals, member avatars, social activity badges, key metrics, and category pills.

• Slarivo Testimonials with Carousel

  A full-width testimonials section with an animated headline and an auto-advancing avatar carousel for showcasing customer feedback.

• Slarivo Type Testimonial

  Hover over an avatar to reveal a testimonial with a smooth typewriter animation and optional voice playback.

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