SLARIVO / BADGES

Badges Components

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

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge Delta

  Badge component in shadcn/ui format inspired by Tremor

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Badge

  A customizable badge component with various styles and animations.

• Slarivo Certificate

  Certificate, Award, Badge

• Slarivo Astryx Badge

  Badge highlights a short status, count, or category label, from Meta's Astryx design system. Ships semantic variants (neutral, info, success, warning, error) plus a full color palette (blue, purple, pink, teal, orange, cyan, green, red, yellow) for tags and counts.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Badge

  A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

• Slarivo Feature

  Badges component from the 21st.dev community.

• Slarivo Product Hunt Badge

  Product Hunt Badge Inspired by https://gethorse.com/

• Slarivo Landing Page

  Landing Page

• Slarivo Hero with text and two button

  Hero section with text and two button

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo Hero Designali

  Your complete platform for the Design.

• Slarivo Faq 5

  Center aligned FAQ with numbers and expanded text.

• Slarivo Dropdown Menu

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

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

• Slarivo Award

  Award Component that stamp, award, certificate, badge, id-card and more.

• Slarivo Status Badge

  Status Badge inspired by Tremor

• Slarivo Product Reveal Card

  This Product Reveal Card is a premium interactive e-commerce component that blends high-quality visuals with micro-interactions to increase conversion. It supports live hover reveals, animated star ratings, favorite toggling, discount badges, and a sliding overlay panel showcasing product details, features, and purchase actions. Perfect for modern e-commerce stores, AI-powered marketplaces, or drop-in Shopify/Headless CMS product listings where sleek UX and conversion-driven design are a priority.

• Slarivo Filter Badge

  Filter Badge inspired by Tremor

• Slarivo Filter Badge

  Filter Badge inspired by Tremor

• Slarivo Filter Badge

  Filter Badge inspired by Tremor

• Slarivo Product Card

  The ProductCard component is a fully customizable e-commerce card built with shadcn/ui, Tailwind CSS, and Framer Motion. It provides a modern, responsive, and theme-aware product showcase with interactive features, designed to work seamlessly in both light and dark modes. Key Features: -> Image carousel with smooth fade animations -> Dynamic badges for New, Best Seller, or Discount labels -> Wishlist toggle with visual feedback -> Selectable color swatches and size options -> Rating & reviews display with free shipping indicator -> Add to Cart button with loading and success states -> Light & dark mode support using shadcn’s theme system -> Polished UI with hover shadows, rounded corners, and fluid transitions This component is ideal for online stores, product listings, and landing pages, where both visual quality and user experience matter. It follows the shadcn/ui design pattern of separating reusable logic from demo usage, ensuring scalability and maintainability.

• Slarivo Animated Badge

  An animated badge component with customizable text, color, and optional link functionality featuring a pulsing dot and smooth entrance animations.

• Slarivo Financial Markets Table

  The FinancialTable component is a comprehensive data table designed for displaying market indices and financial data with interactive features and smooth animations. It features circular country flag icons, color-coded performance badges, sparkline charts, and responsive grid layout that adapts to different screen sizes while maintaining proper spacing. The component includes hover effects, selection states, and Framer Motion animations for enhanced user experience, making it ideal for financial dashboards, trading platforms, or investment tracking applications where users need to quickly scan and compare market performance data.

• Slarivo Gradient Card

  Gradient Card This component is a flexible card with a status badge, title, description, call-to-action link, and a decorative background image. The gradients, colors, and content are all controlled via props to ensure maximum reusability.

• Slarivo Financial Score Cards

  This is a beautiful financial score card component with animated half-circle progress indicators, strength badges, and staggered entrance animations.

• Slarivo Expandable

  Here is expandable component

• Slarivo Product Card

  Product Card A visually polished ProductCard component designed to showcase products in a grid layout. It features a clean design, accepts various product details via props for maximum reusability, and includes a subtle hover animation. The accompanying demo showcases a responsive grid with a staggered entrance animation for a modern user experience.

• Slarivo HeroSection – Enterprise-Ready Landing Page Hero with Dual CTAs

  “Make your product unforgettable at first glance. The HeroSection gives you a bold, responsive, and theme-aware hero block with headline, subtext, and dual CTAs. Perfect for SaaS, startup, or enterprise landing pages — designed with accessibility, shadcn/ui, and dark mode support baked in. Just plug in your copy, and you’ve got a Fortune-500-ready hero section.” ⚡ Why this works: Problem hook: “Make your product unforgettable at first glance.” Solution promise: “Bold, responsive, theme-aware hero block.” Audience targeting: SaaS, startup, enterprise. Tech stack credibility: shadcn/ui, accessibility, dark mode. Viral appeal: “Fortune-500-ready” feels premium and aspirational.

• Slarivo File Card Collections

  Badges component from the 21st.dev community.

• Slarivo CTA Card

  Simple, minimal call to action card

• Slarivo Base Badge

  A customizable badge component built with Base UI and useRender hook for composition.

• Slarivo Card

  Opportunity Card A visually polished and responsive card component to display project opportunities or job offers, complete with user details, project specifications, and action buttons. It's designed to be easily populated with dynamic data.

• Slarivo Animated Status Badge

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

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

  A comprehensive pricing section component that combines animated tabs and pricing cards. Originally built for Dub.co's pricing page. Features - Monthly/yearly frequency toggle with discount badge - Animated tab selection - Four-tier pricing layout - Highlighted and popular tier states - Grid background pattern with mask effect - Dark mode support - Responsive grid layout (1 column on mobile, 2 on tablet, 4 on desktop)

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Animated Card

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

• Slarivo Status

  Here is Status component

• Slarivo Status Badge

  Here is Status Badge component

• Slarivo Table

  A simple table component for displaying tabular data.

• Slarivo Inflected Card

  A versatile card component with an unorthodox shape. For the disclaimer, credit information, and Vue version, please visit https://namer-ui-for-vue.netlify.app/components/inflected-card This component (Next.js version) is also available on Namer UI https://namer-ui.netlify.app

• Slarivo Bubble Button

  Usage badge for free plan tracking. Displays remaining quota (e.g., 20/20 left) with a database icon. Ideal for freemium apps to show user limits transparently.

• Slarivo Beautiful Simple Badges

  Simple, and beautifully styled badges that support both light and dark themes. Inspired by Shadcn/UI.

• Slarivo Status Dot

  Display an indicator of deployment status.

• Slarivo Stamp

  Stamp, Award, Badge

• Slarivo Statistics Card 12

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Label Badges

  Here is modern Label Badges component

• Slarivo New Badge

  This is a new badge component

• Slarivo Tech Stack

  Here is Tech Stack component

• Slarivo Membership Card

  Membership Card

• Slarivo Stack Overflow Q&A Interface

  A feature-rich, responsive Q&A component that emulates the Stack Overflow interface. It includes voting on questions and answers, accepting answers, bookmarking, a Markdown editor with a live preview, and user reputation badges. The component is built with shadcn/ui and is theme-adaptive.

• Slarivo 8-bit Badge

  Pixel-art badge from 8bitcn.com — wraps shadcn/ui Badge with a retro variant (Press Start 2P font, hard-edge pixel borders). Drop-in API-compatible replacement.

• Slarivo 8bit Changelog

  An 8-bit styled changelog block. Vertical list of release entries with date, title, description, an optional version badge, and pixel separators between entries. Built from retro badge, card, and separator primitives.

• Slarivo Timestamp

  badge style component for timestamp

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Chip

  Small informational badges for displaying labels, statuses, and categories.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Badge

  A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

• Slarivo Interfaces Badge

  Rounded pill badge component from Interfaces DS with default, secondary, destructive, and outline variants.

• Slarivo Interfaces Badge

  Rounded pill badge component from Interfaces DS with default, secondary, destructive, and outline variants.

• Slarivo Interfaces Badge

  Rounded pill badge component from Interfaces DS with default, secondary, destructive, and outline variants.

• Slarivo Interfaces Badge

  Rounded pill badge component from Interfaces DS with default, secondary, destructive, and outline variants.

• Slarivo Feature Gate Tooltip

  A tooltip toolbar of icon buttons where locked Pro features show a rich tooltip with a Pro badge, description, and upgrade link.

• Slarivo Badge

  Compact label with solid and dot variants, Tailwind color palette, and three sizes.

• Slarivo Achievement badge

  This is achievement badge

• Slarivo Astryx Badge

  Badge highlights a short status, count, or category label, from Meta's Astryx design system. Ships semantic variants (neutral, info, success, warning, error) plus a full color palette (blue, purple, pink, teal, orange, cyan, green, red, yellow) for tags and counts.

• Slarivo Points Badge

  Badges component from the 21st.dev community.

• Slarivo Verified Badge

  Badges component from the 21st.dev community.

• Slarivo BeUI Animated Badge

  Badges component from the 21st.dev community.

• Slarivo Avatar

  Enchanced shadcn/ui avatar

• Slarivo Feature 108

  A versatile section with 3 features inside a tabs component

• Slarivo Canvas

  Canvas effect

• Slarivo Animated Shiny Text

  A light glare effect which pans across text making it appear as if it is shimmering.

• Slarivo Flickering Footer

  Flickering Footer Component

• Slarivo Card

  Containers for displaying content and actions about a single subject.

• Slarivo Pricing Tab

  An animated tab component with support for discount badges. Originally built for Dub.co's pricing frequency selector. Features - Smooth layout animations using Framer Motion - Optional discount badge support - Selected state with animated background - Dark mode support - Customizable text and callbacks

• Slarivo Agent Plan

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

• Slarivo Animated Gradient Text

  An animated gradient background which transitions between colors for text. Add the following animations to your tailwind.config.js file: extend: { animation: { gradient: "gradient 8s linear infinite", }, keyframes: { gradient: { to: { backgroundPosition: "var(--bg-size) 0", }, }, },

• Slarivo useMediaQuery

  useMediaQuery hook

• Slarivo Feature with Image Comparison

  Feature block with Image Comparison

• Slarivo Pricing Section

  Pricing section

• Slarivo CTA with Rectangle

  A powerful Call-to-Action component built with shadcn's design system. This component features multiple styles including box layouts and beam effects, all following shadcn's minimalist aesthetic. Each variant is designed to create compelling call-to-action sections that drive user engagement. Built with Tailwind CSS, it ensures responsive design and seamless integration with other shadcn components. The component maintains high accessibility standards while providing flexibility in how you present your calls to action.

• Slarivo Hero with group of images, text and two buttons

  Hero with group of images, text and two shadcn/ui buttons

• Slarivo Call to action

  Call to action block for landing page

• Slarivo Creative Pricing

  A nice creative design

• Slarivo Hero 1

  Centered hero with radial gradient background and announcement badge

• Slarivo Hero Badge

  A versatile, animated badge component for highlighting new features, announcements, or important links. Features: • Smooth entrance animations • Icon rotation on hover • Multiple size variants • Multiple style variants • Link and button functionality • Customizable icons • Responsive design • Accessibility features Notes: • Built with Framer Motion for smooth animations • Uses React Server Components (RSC) with the "use client" directive • Employs a responsive design with a mobile-first approach • Includes interactive hover animations • Supports TypeScript with proper types • Allows for custom styling and theming • Optimized performance through proper usage of hooks

• Slarivo Feature with advantages

  Feature section with list of advantages

• Slarivo Hero with image, text and two buttons

  Hero with image, text and two shadcn/ui buttons

• Slarivo Hero Pill

  A stunning and interactive announcement banner featuring smooth animations and customizable content. Features: • Fluid entrance animations • Customizable content and styling options • Mobile-responsive design for optimal viewing on all devices • Support for icons and links • Accessible design with ARIA attributes • TypeScript support for enhanced development experience • Server-Side Rendering (SSR) compatibility Notes: • Powered by Framer Motion for seamless animations • Fully typed using TypeScript for improved code quality and maintainability • Implemented as a Server Component with client-side hydration for optimal performance • Designed with a mobile-first approach to ensure responsiveness across devices • Customizable through props for easy integration and reusability • Optimized bundle size for efficient loading and performance • Reusable across various contexts and projects

• Slarivo Features

  Here is Features Component

• Slarivo Footer Taped Design

  A minimalistic Responsive Footer Navigation with Active and Coming Soon Elements That can Be used now but also be prepped for the future.

• Slarivo Responsive Hero Banner

  A stunning full-screen hero section featuring a cinematic background image, glassmorphic navigation bar with backdrop blur, animated badge, elegant serif typography, dual call-to-action buttons, and a partner logos grid. Fully responsive with smooth fadeSlideIn animations.

• Slarivo Feature Section with Grid

  Feature Section with Grid

• Slarivo Pricing Card

  A sleek, component-based Card system with glass effects, pricing layouts, and flexible sections like header, body, and list items. Perfect for modern SaaS pricing tables, feature lists, or product showcases with consistent, stylish UI.

• Slarivo Feature with Image Carousel

  Feature block with Image Carousel

• Slarivo Server Management Table

  This server management table component is ideal for cloud service providers and IT administrators who need to monitor and control multiple servers across different geographical locations. It could be integrated into web-based admin dashboards for hosting companies, enterprise server management systems, or DevOps monitoring platforms where users need real-time visibility of server performance and status. The interactive controls allow operators to efficiently manage server lifecycle operations like starting, stopping, pausing, and restarting services with a clean, responsive interface that works well in both light and dark themes.

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

  Quote

• Slarivo Animated Card Chart

  Here is Animated Card Chart component

• Slarivo Feature with image

  Feature block with image and text

• Slarivo Line Chart

  Here is Line Chart component

• Slarivo Kanban

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

• Slarivo Feature Section

  Here are three lines you can use for this Featured Section: A clean two-column layout highlighting features with icons and descriptions on the left, and a smooth scrollable options list on the right. Designed with shadcn/ui cards, borders, and fade effects, ensuring both clarity and modern aesthetics. Perfect for showcasing key product highlights or services while keeping user engagement with continuous scrolling options.

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

  Place Card A visually polished card component for displaying travel destinations or listings. It includes an image carousel, rating, tags, and booking information, with smooth animations powered by framer-motion.

• Slarivo Marquee

  Marquee, Scroll infinite

• Slarivo Pricing Base

  Here is Pricing compoenent

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

• Slarivo NotificationIn box Popover

  This Notification Inbox Popover provides a clean, inbox-style experience for managing alerts directly within the app. Users can toggle between All and Unread notifications using tabs, while each notification is displayed with a relevant Lucide icon, bold styling for unread items, and a timestamp for context. A small dot indicator reinforces which items are new. The design now also includes a “Mark all as read” option in the header, allowing users to quickly clear unread items in one click. Combined with the footer’s “View all notifications” action, this layout balances clarity and efficiency, making it well-suited for SaaS dashboards, admin panels, or productivity apps where streamlined notification handling is essential.

• Slarivo Hero Pill

  A pill-shaped component for highlighting key features or messages with optional icons and animations. Features - Optional leading icon - Smooth entrance animation - Dark mode support - Customizable styles and animations - Hover effects

• Slarivo Interactive Logs Table

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

• Slarivo PulseFit hero

  A responsive, animated hero component with header, floating blurred gradient backgrounds, badge support, configurable navigation and auth buttons, gradient-styled title, description, and primary/secondary CTA buttons.

• Slarivo Hero Button Expendable

  Hero Button Expendable

• Slarivo FAQ with Categories

  A comprehensive FAQ section component that features categorized questions using shadcn/ui primitives, including accordion items with category badges. Features - Header Section - Large title with custom styling - Optional description text - Centered layout - FAQ Items - Category badges for each item - Accordion-style expansion - Smooth transitions - Custom hover states - Card-like appearance - Shadow effects - Categories - Visual category indicators - Color-coded badges - Optional category display - Semantic grouping

• Slarivo Pricing Section

  Here is Pricing Section component

• Slarivo Radar Chart

  Here is Radar Chart component

• Slarivo Offer Carousel

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

• Slarivo Badge Delta

  Badge component in shadcn/ui format inspired by Tremor

• Slarivo Badge Delta

  Badge component in shadcn/ui format inspired by Tremor

• Slarivo Hero 45

  A hero section with 3 features underneath

• Slarivo Pill

  Tags component from the 21st.dev community.

• Slarivo Hero Section

  Hero section with staggered text and button reveal

• Slarivo ruixen-hero-section-02

  This hero section is a visually striking, interactive introduction component designed to showcase a ruixen UI. It features a dynamic background with soft gradients, animated floating dots, and glowing blur effects to create a futuristic aesthetic.

• Slarivo Hero

  animated hero

• Slarivo Kanban Board

  Here is Kanban Board component

• Slarivo Leads Data Table

  This leads table component displays sales prospects with comprehensive data visualization including deal sizes, source tracking, status indicators, interest trend sparklines, and probability scoring. It features smooth micro-interactions like hover-triggered action buttons, row selection with bulk operations, and a sliding bottom action bar that appears when leads are selected. The component is ideal for CRM dashboards, sales management interfaces, and lead tracking systems where users need to quickly assess and act on potential business opportunities.

• Slarivo Contacts Table With Modal

  The ContactsTable component is a production-ready data table that displays a list of contacts with advanced filtering, sorting, and selection capabilities. It features a grid-style layout with multi-select checkboxes, connection strength indicators, Twitter follower counts, and email information, allowing users to quickly browse and identify key contacts. The component includes a detail modal for viewing full contact information, export functionality for CSV and JSON formats, and pagination support, making it ideal for CRM applications, outreach platforms, and contact management systems.

• Slarivo Profile Dropdown

  A profile dropdown for Users.

• Slarivo Statistics Card 1

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Bento Grid

  Grids & Bento component from the 21st.dev community.

• Slarivo Changelog 1

  Modern Changelog view with versions, dates, description images. An array of changelog entries with stick scroll effect.

• Slarivo Countdown Number

  Here is Countdown Number component

• Slarivo Stats Section with Text

  Statistics Section with Text

• Slarivo Product Detail Page

  Product Detail Page This component displays the full details of a product, including an image gallery, pricing, description, and seller information. It is designed to be highly reusable, with all content passed in via props.

• Slarivo Button

  Advanced button component with extended options and variants.

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

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

• Slarivo Carousel

  Shareholder Reports Carousel This component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on the scroll position, providing a clean and intuitive user experience. The component is fully responsive, theme-adaptive, and built to be easily populated with data via props.

• Slarivo Features

  Profiles component from the 21st.dev community.

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

  Beautiful 3D marketing badges with smooth interactions.

• Slarivo Statistics Card 7

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo 3D Icon Tabs

  Animated tabs, inspired by Airbnb's latest design update.

• Slarivo Statistics Card 10

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo RuixenPricing05

  This feature section highlights Ruixen UI's powerful tools for content optimization and SEO growth. With a user-friendly dashboard, one-click automation, and a smart keyword generator, it simplifies complex tasks for creators and marketers. Designed with modern icons and animations, it ensures an intuitive and engaging user experience.

• Slarivo Notifications Filter

  This Notifications with Category Filter component provides a clean and efficient way for users to organize and browse through their alerts. Instead of showing all notifications in a single stream, it introduces category filters such as All, Updates, Alerts, and Reminders, allowing users to quickly narrow down what matters most. The interface is minimal, using only Lucide icons and neutral theme styles, ensuring it fits seamlessly in both light and dark modes.

• Slarivo Sortable

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

• Slarivo hero-section

  Animated Blocks Hero

• Slarivo Scroll Area

  Augments native scroll functionality for custom, cross-browser styling.

• 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 Statistics Card 2

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Shuffle Number

  Here is Shuffle Number component

• Slarivo ContributorsOverviewTable

  The ContributorsOverviewTable component presents a clean, structured, and interactive summary of contributors within a team or project. Designed for clarity and ease of use, this table highlights essential details like contributor names, email addresses, geographic locations, account status, and individual payout balances. Visual cues such as colored status badges enhance readability, while responsive hover states provide a polished user experience

• Slarivo Badge Variants

  Badge color and appearance variants

• Slarivo useItemOverflow

  Responsive and dynamically calculates the number of items that can fit within a container without overflowing, while accounting for a "+X" overflow indicator. It automatically adjusts to container resizes and provides utilities to render responsive lists (e.g., tags, avatars, or badges) that gracefully handle overflow.

• Slarivo Date Badge

  Badge to display date shorten.

• Slarivo Hero Section 06

  This HeroSection_06 component is a highly interactive and visually dynamic landing section built with Next.js, Tailwind CSS, and custom animations. It combines eye-catching elements like animated orbiting circles, glowing gradients, and animated badges to draw the user’s attention immediately upon landing. The section highlights a compelling headline and subtext, promoting AI-powered growth tools,

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo StatusBadge – Beautiful, Accessible Status Indicators

  “Give your app instant clarity with plug-and-play status indicators. The StatusBadge component comes with six built-in states (success, error, warning, info, pending, default), sleek monochrome design, and WCAG-ready accessibility. Fully responsive, dark-mode friendly, and customizable out of the box — perfect for dashboards, system monitors, or anywhere status matters.” ⚡ Why this works: “Beautiful” + “Accessible” → hits design + inclusivity pain points. Calls out React + shadcn/ui → instantly attracts the right audience. Highlights features upfront: 6 states, dark mode, responsive, WCAG-ready. Shows use cases → dashboards, monitors, state labels.

• Slarivo Footer

  The Footer component is a fully configurable, responsive, and theme-aware UI element built with Next.js and Shadcn-style design. It supports dynamic navigation columns, customizable social media links with Lucide icons, and optional badges for highlighting features like “Pro,” “New,” or “Hiring.” The component adapts seamlessly to light and dark modes using Tailwind CSS, ensures accessibility with proper aria-labels, and leverages Next.js Link for client-side navigation. Designed for flexibility, it allows developers to easily extend columns, add additional social platforms, and include extra content like legal links or community sections, making it ideal for professional SaaS, product, or corporate websites.

• Slarivo CTA Section

  A call-to-action marketing section with a headline, badge, action buttons, and resource cards for documentation and video tutorials.

• Slarivo Messaging people list

  A simple messaging component to display people list

• Slarivo Globe Live Badge

  A WebGL globe with live streaming badges showing real-time viewer counts at each marker location.

• Slarivo Onboarding Stages

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

• Slarivo Quantam Mysh Hero

  A sleek, futuristic hero section component inspired by an AI studio landing page design. It features a dark theme with purple gradients, a badge-style tagline, bold headlines, subtitle text, dual CTA buttons, an infinite scrolling logo carousel with fade effects, and bottom navigation elements. Built responsively with Next.js and Tailwind CSS for easy integration into modern web applications. Ideal for tech or innovation-focused websites.

• Slarivo Task List

  Task List This component renders a list of tasks in a table format. It features a staggered animation for list items, making the UI feel dynamic and modern. It's designed to be highly reusable, accepting a title and an array of tasks as props.

• Slarivo Statistics Card 8

  Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Notifications Toggle

  This Lucide-based Notifications component is a clean, professional solution for handling user alerts with both dark and light theme support. It offers two distinct views inside a popover: a carousel mode, where users can browse notifications one at a time with smooth navigation controls, and a vertical list mode, which displays multiple notifications in a scrollable stack. Each notification includes a Lucide icon, title, description, and timestamp, providing clear context without relying on colors or emojis.

• Slarivo Referral Card

  Referral Card This component provides a visually appealing and interactive card for referral programs. It uses framer-motion for smooth animations and is built with reusability in mind, allowing you to easily customize its content through props.

• Slarivo Notification Button

  The Notification Button is a shadcn/ui-based component designed to display real-time alerts or counts for messages, tasks, or cart items. It combines a button with an icon (defaulting to a bell) and a dynamic badge that shows the count, making it highly visible and actionable. The component supports multiple sizes (sm, md, lg) and ensures that the badge scales proportionally with the icon and button, maintaining a clean, modern, and responsive design. Its flexibility allows developers to replace the icon or integrate it into dashboards, navbars, or overlays, making it a practical solution for interactive UIs that require user attention to notifications.

• Slarivo Backed By YC

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

• Slarivo RuixenCarouselWave

  This component is a sleek, GSAP-powered horizontal carousel that showcases Ruixen-style UI cards with a wave-like animation. It highlights one card at the center by dipping it slightly downward and scaling it up, creating a dynamic focus effect. Users can navigate through the cards using arrow buttons, and the carousel loops infinitely for a smooth, continuous experience. Each card includes an image, title, subtitle, and a badge, making it perfect for showcasing features, projects, or templates in a visually engaging way.

• Slarivo Notifications

  This Notifications component is a reusable UI element built with shadcn/ui and TypeScript (TSX) that displays a bell icon with a notification count badge. When the user clicks the bell, a popover card opens directly beneath the icon, aligned to its center, containing a scrollable list of notifications. Each notification shows a title, description, and timestamp in a clean, structured layout.

• Slarivo Alert Badge

  Alert Badge inspired by Tremor

• Slarivo Adaptive Pricing Section

  A theme-adaptive pricing component that maintains stunning visual appeal in both light and dark modes. Features glassmorphism cards, gradient elements, and proper contrast ratios for accessibility across all themes.

• Slarivo spotlight-table

  Search Bars component from the 21st.dev community.

• Slarivo Price

  Pricing Card Component This component is designed to be highly reusable and customizable through props. It uses framer-motion for animations, cva for handling style variants (like the "popular" state), and shadcn/ui theme variables for seamless light and dark mode support.

• Slarivo Dropdown Multi Calendar

  The DropdownMultiCalendar is a powerful and user-friendly date selection component that enhances the traditional multi-date calendar with intuitive navigation controls. Built entirely with shadcn/ui, it features dropdown menus for quickly selecting a specific year and month, allowing users to jump instantly to any point in time without scrolling through the calendar. Once dates are chosen, they are displayed as interactive badges that can be individually removed for fine-grained control. The structured card layout, combined with a confirmation action, makes it ideal for applications like booking systems, event planners, and scheduling dashboards where efficient navigation and multi-date management are essential.

• Slarivo Project Badge

  Here is modern project badge component

• Slarivo CountDown Numbers

  Here is CountDown Numbers component

• Slarivo Globe Analytics

  A WebGL globe with real-time visitor analytics badges. Numbers update live with trend arrows showing growth.

• Slarivo Welcome Modal

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

• Slarivo First Place Leaderboard

  Here is First Place Leaderboard component

• Slarivo Table With Dialog

  This Advanced User Management Table component is a feature-rich and modern UI built entirely with Shadcn UI. It combines a fixed header for clarity, interactive row selection using checkboxes, and a status badge system that visually distinguishes between active, inactive, and suspended users. Each row comes with an actions menu, allowing quick operations like viewing details, editing, or deleting a user, and destructive actions are highlighted with white text on a red background for clear visibility. Additionally, a dialog opens on demand, providing a focused space to display or edit detailed user information without leaving the table. The design is clean, responsive, and highly practical for dashboards, CRMs, and admin panels, making it a versatile component for managing user data efficiently.

• Slarivo Badge Button Combo

  The Badge + Button Combo is a shadcn/ui component that combines a standard button with a floating badge to display status or counts, such as “New,” “Beta,” or numeric notifications. The badge is positioned top-right of the button and scales appropriately with the button size, which can be configured as sm, md, or lg. This design provides a clear visual indicator for alerts, updates, or special statuses while keeping the button functional and interactive. Its flexibility makes it ideal for dashboards, messaging interfaces, or feature highlight buttons, adding both usability and visual appeal to any interface.

• Slarivo NotificationsWithActions

  This Notifications with Actions component, a standard notification popover by adding interactive controls for each notification. A GripVertical icon on the right allows users to reveal contextual actions — specifically Archive and Delete buttons — which animate into view by slightly shifting the text content to the left. To enhance usability, a dedicated ChevronLeft icon appears alongside these actions, letting users easily close the action menu and return the notification item to its normal state. The component is fully reusable, supports popover placement customization, and uses Framer Motion for smooth transitions.

• Slarivo Table Dialog

  This component is a feature-rich, interactive data table built entirely with Shadcn UI components. It includes a fixed header and footer, allowing the table body to scroll independently, which ensures that column labels and summary information remain visible at all times. Each row includes a checkbox for selection, with the ability to select multiple rows at once. Actions for each row are accessible through a dropdown menu, offering options like “Edit” and “Delete.” The Edit action opens a dialog where all fields of the selected row can be modified using input fields and select menus, keeping the table layout intact and avoiding inline edits that can disrupt the table’s appearance. This design makes the table both highly reusable and user-friendly, suitable for applications that require structured data management, quick updates, and a clean, consistent interface.

• Slarivo Tracker Card

  Proposal Tracker Card This component provides a clear, visual timeline for tracking the status of proposals or applications. It's designed to be flexible, allowing you to pass in step data dynamically. Animations are included using framer-motion to enhance the user experience.

• Slarivo Avatar - Border

  Here is avatar border component

• Slarivo Tagline

  A small tagline or eyebrow label with badge, outline, ghost, and pill variants for marketing sections.

• 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 Badge.Container compound component for corner positioning.

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

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

  Here is Spinner component

• Slarivo Sortable

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

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, dot, pill, status.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, base ui, base-ui, tag.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, tag, status, pill.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, tag, pill, label.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, pill, base ui, base-ui.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, base ui, base-ui, tag.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, dot, pill, link.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, base ui, base-ui, tag.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, pill, tag, base ui.

• Slarivo Base Badge

  A Base Badge component for labeling status, metadata, categories, and compact counts, featuring badge, base ui, base-ui, status.

• Slarivo Badge Tag

  A Badge Tag component for labeling status, metadata, categories, and compact counts, featuring badge, tag, pill, gradient.

• Slarivo Login Card

  A Login Card component for displaying ordered records, tasks, activity, and repeated content, featuring task, checklist, card, badge.

• Slarivo Login Card

  A Login Card component for grouping related information, actions, and media into reusable surfaces, featuring billing, payment method, payment-method, credit card.

• Slarivo Status

  A Status component for labeling status, metadata, categories, and compact counts, featuring status, indicator, badge, pill.

• Slarivo FloatButton

  A FloatButton component for labeling status, metadata, categories, and compact counts, featuring floating action button, floating-action-button, badge, icon button.

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

  Compact label with solid and dot variants, Tailwind color palette, and three sizes.

• Slarivo Floating Panel

  A Floating Panel component for arranging mixed content in responsive modular layouts, featuring floating, panel, task, drag and drop.

• Slarivo Badge

  Compact label with solid and dot variants, Tailwind color palette, and three sizes.

• Slarivo Badge

  Compact label with solid and dot variants, Tailwind color palette, and three sizes.

• Slarivo Achievement badge

  A Achievement badge component for labeling status, metadata, categories, and compact counts, featuring badge, award badge, award-badge, card.

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

  A Achievement badge component for labeling status, metadata, categories, and compact counts, featuring badge, award badge, award-badge, progress.

• Slarivo Achievement badge

  A Achievement badge component for labeling status, metadata, categories, and compact counts, featuring badge, award badge, award-badge, progress.

• Slarivo Achievement badge

  A Achievement badge component for labeling status, metadata, categories, and compact counts, featuring badge, award badge, award-badge, card.

• Slarivo Collapsible

  A minimal show/hide primitive built on Base UI's Collapsible. A trigger toggles a height-animated panel — perfect for read-more text, FAQ rows, nested groups and expandable log output. Controlled or uncontrolled via open / defaultOpen, with data-panel-open…

• Slarivo Astryx Badge

  Badge highlights a short status, count, or category label, from Meta's Astryx design system. Ships semantic variants (neutral, info, success, warning, error) plus a full color palette (blue, purple, pink, teal, orange, cyan, green, red, yellow) for tags…

• Slarivo Astryx Badge

  Badge highlights a short status, count, or category label, from Meta's Astryx design system. Ships semantic variants (neutral, info, success, warning, error) plus a full color palette (blue, purple, pink, teal, orange, cyan, green, red, yellow) for tags…

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

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, multi select, multi-select, multiselect.

• Slarivo The Item one

  A The Item one component for labeling status, metadata, categories, and compact counts, featuring badge, outline, project card, project-card.

• Slarivo Avatar Square

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

• Slarivo Combobox

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, multi select, multi-select, multiselect.

• Slarivo Reshaped Divider

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

• Slarivo Status

  A pill-shaped status badge with a pulsing indicator dot and color variants for signaling online, error, warning, info, and idle states.

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

  A group of dismissible outline badges with a close button that removes each tag from the list.

• Slarivo Payments Table with Cell Selection

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

• Slarivo Priority Select with Badge Display

  A controlled select for choosing a priority level that shows the current selection as a colored badge next to the dropdown.

• Slarivo Payments Table

  A data table showing customer payments with avatars, prices, payment types and colored status badges.

• Slarivo Label with Badge Indicator

  A form field pairing an input with a label that carries a status badge, for showing state like active, verified, or beta next to a field.

• Slarivo Icon Only Badge

  Round icon-only badges shown across default, secondary, and outline variants.

• Slarivo Tag List

  A wrapping group of outline badges used to display a list of tags or keywords.

• Slarivo Basic Badge

  A basic badge for labels, tags, and status indicators.

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

  A small inline status indicator dot with a rippling pulse animation, deployment-state presets, generic tones, sizes, and optional labels.

• Slarivo Package Dependency List

  A vertical list of package groups with version badges and collapsible rows that expand to reveal the individual dependencies inside each group.

• Slarivo Role Permissions Picker

  A permissions picker with a checkbox list where each access level has a colored badge showing its scope.

• Slarivo Incident Status Timeline

  A status card with a collapsible incident timeline showing status badges, timestamps, and update messages.

• Slarivo Sprint Task Checklist

  A task checklist with checkboxes, priority badges, line-through completed items, a remaining counter, a completion celebration state, and a reset button.

• Slarivo Primitive Badge

  A small animated status/label badge with default, secondary, outline, muted and accent color variants and size options.

• Slarivo Multi state badge

  A badge that can be in multiple states, such as processing, success, or error.

• Slarivo Tabs with Count Badges

  A line-style tabbed interface whose trigger labels are paired with secondary count badges, ideal for inbox, drafts, and archive style views.

• Slarivo Status

  A pill-shaped status badge with a pulsing indicator dot and color variants for signaling online, error, warning, info, and idle states.

• Slarivo Status

  A pill-shaped status badge with a pulsing indicator dot and color variants for signaling online, error, warning, info, and idle states.

• Slarivo Status

  A pill-shaped status badge with a pulsing indicator dot and color variants for signaling online, error, warning, info, and idle states.

• Slarivo Combobox

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, multiselect, dropdown, select.

• Slarivo Spark Badge

  An animated canvas credential badge that dissolves and reforms out of luminous rain and curl-noise embers, for hero sections and background decoration.