SLARIVO / TAGS

Tags Components

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

• Slarivo Chip

  A compact, interactive element for displaying status, categories, or filters with optional icons and dismissible functionality.

• Slarivo Chip

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

• Slarivo Avatar chips

  this is avatar chips

• Slarivo Tag Selector

  A versatile component for selecting and creating multiple tags with search functionality and keyboard navigation support.

• Slarivo Editable Chip

  An interactive editable chip component with smooth animations for editing.

• Slarivo Selector Chips

  Selector Chips are used to display a list of items that can be selected.

• Slarivo Tags Input

  This is Tags input

• Slarivo Reaction Chip

  A tiny hover-revealed reaction chip for messages that lets users toggle a single emoji reaction with smooth animations.

• Slarivo Input with inner tags

  shadcn/ui input with inner tags

• Slarivo Tag

  Rounded outlined tag with a colored icon, six built-in pastel color variants, size options, and an animated stacked group layout.

• Slarivo Flipping Card

  A two-sided card component that flips on hover, revealing content on its back face. Ideal for interactive displays or showcasing additional information.

• Slarivo Tags Selector

  The Tags Selector component is a reusable UI element for selecting and managing tags from a predefined list.

• Slarivo Multiple select

  Select option with multiple choices

• Slarivo useTags

  A React hook for managing a collection of tags with support for colors, limits, and various operations. Features - Tag Management - Add/remove tags - Maximum tags limit - Color rotation - Default tags support - Change callbacks - Operations - Add single tag - Remove specific tag - Remove last tag - Check max limit - Custom color support

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

  Tags component from the 21st.dev community.

• Slarivo HolographicCard

  An interactive holographic UI card component that reacts to cursor movement with subtle 3D tilt, dynamic glow, and iridescent sheen for a futuristic, tactile micro-interaction.

• Slarivo Tag Input

  A sophisticated tag input component with suggestions, autocomplete, and custom styling. Built with React and Tailwind CSS, supporting both light and dark themes. Features - Tag Management - Add/remove tags - Maximum tags limit - Custom tag colors - Default tags support - Tag suggestions - Interactive UI - Autocomplete dropdown - Keyboard navigation - Clear button for each tag - Custom tag styling - Smooth animations

• Slarivo Fallback Card

  Here is Fallback Card component

• Slarivo Feature Card

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

• Slarivo Card Stack

  This is a simple card stack component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Tag Group [react-aria-components]

  A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal. A static tag list can be built using <ul> or <ol> HTML elements, but does not support any user interactions. HTML lists are meant for static content, rather than lists with rich interactions such as keyboard navigation, item selection, removal, etc. TagGroup helps achieve accessible and interactive tag list components that can be styled as needed.

• Slarivo Input With Tags

  Input with tags component made with framer motion and tailwind css.

• Slarivo Security Card

  Here is Security Card component

• Slarivo Star Button

  Here is Star Button component

• Slarivo Card

  Cashback Partners Card This component displays a card with a title and a grid of partner logos, names, and cashback percentages. It's designed to be responsive and theme-aware, adapting to both light and dark modes.

• Slarivo Badge Variants

  Badge color and appearance variants

• Slarivo Tilt Card

  Here is Tilt Card component

• 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 Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Claude-style Chat Input

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

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo AI Input with Suggestions

  A sophisticated text input component with selectable action buttons. It features an auto-resizing textarea, customizable actions, and visual feedback. Features: • Customizable action buttons • Auto-resizing textarea • Visual feedback for selected actions • Dark mode support • Keyboard shortcuts • Animated transitions • Mobile responsiveness

• Slarivo Flip Card

  A Stylish and Animated Flip Card

• Slarivo Halide Topo Hero

  A monochrome 3D hero component with topographical parallax layers and film grain effects.

• Slarivo Badge

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

• Slarivo Badge Delta

  Badge component in shadcn/ui format inspired by Tremor

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Trail Card

  Trail Card A visually polished card component to display trail or location information, featuring a prominent image, key stats, and an interactive call-to-action. It includes a subtle hover animation for a modern feel.

• Slarivo Project Card

  A visually appealing card component designed to showcase projects. It features a hover-to-zoom image effect, a clear content section, and a call-to-action link, all while adapting to both light and dark themes using shadcn's CSS variables.

• Slarivo social card

  this is social card

• Slarivo Card

  Product Card A sleek, image-centric card component designed to showcase products with a title, description, price, and brand logo. It features a gradient overlay for text readability and pagination dots for visual flair.

• Slarivo Info Card

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

• Slarivo Spotlight Card

  A modern, interactive card component featuring a mouse-following gradient spotlight effect. Perfect for highlighting features, bento grids, and dark-themed interfaces.

• Slarivo 3D Card

  Destination Card – Showcase travel spots. Highlights locations with image, details, and a quick booking option for better trip planning.

• Slarivo Card

  Displays location-specific highlights with imagery, title, and subtle UI elements like a "like" icon. Ideal for showcasing top destinations, promoting tours, or suggesting user-curated travel picks.

• Slarivo Card Studio

  Here is Card component

• Slarivo CTA Card

  Simple, minimal call to action card

• Slarivo Asset Card

  Crypto Asset Card This component is a responsive card designed to display key metrics for a crypto asset, such as price, percentage change, and portfolio value. It features a distinct two-panel layout with a configurable color gradient and smooth hover animations powered by framer-motion.

• Slarivo Basic Tags Input

  Here is Tags Input component

• Slarivo Feature Card

  Feature Card

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

  Here is Status Badge component

• Slarivo Yield Card

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

• Slarivo Card

  PromoCard An advanced, self-contained promotional card designed to be visually engaging and build user trust. It features an embedded animated dot-pattern background for texture, a sequential loading indicator, and smooth framer-motion transitions, all without requiring external CSS modifications.

• Slarivo Floating Card

  A reusable card component

• Slarivo Interactive Broker Card

  Interactive Broker Card This component displays information about a financial service or broker in a visually appealing card layout. It features a 3D animated logo stack that responds to mouse hover, creating an engaging user experience.

• Slarivo Tag Group

  Here is Tag Group component

• Slarivo Tag Group

  Here is Tag Group component

• Slarivo Tag Group

  Here is Tag Group component

• Slarivo Processing Card

  Here is Processing Card component

• Slarivo 3D Card

  Here is 3D Card component

• Slarivo Creative Card

  This is a modern, responsive chat card component built with React and Tailwind CSS, fully compatible with both light and dark modes. It features a textarea for user input, dynamic action buttons using Lucide icons, and a submit button with a subtle gradient and hover effects.

• Slarivo Finger Scan Button

  Finger Scan Button

• Slarivo Gigabit

  Here is Gigabit component

• Slarivo Chip

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

• Slarivo Chip

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

• Slarivo File Attachment

  File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo Card

  Challenge Card A visually engaging card component designed to present challenges or calls-to-action. It features a prominent title, description, and an animated button to encourage user interaction. The entire card lifts and scales on hover for a modern, tactile feel.

• Slarivo Button

  A button or a component that looks like a button.

• Slarivo Features

  Here is Features Component

• Slarivo Team

  Here is Team component

• Slarivo Animated Card Diagram

  Here is Animated Card Diagram component

• Slarivo Apple Liquid glass switcher

  Here is Apple Liquid glass switcher component

• Slarivo Card Carousel

  Here is Card Carousel component

• 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 AI Thinking Block

  A thinking block component that simulates AI processing/thinking time before responding.

• Slarivo Button

  Here is magic button component

• Slarivo Radar Chart

  Here is Radar Chart component

• Slarivo Glowing Effect Card

  Here is Glowing Effect Card component

• Slarivo Feature Spotlight

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

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

  Here is Blog Card Component

• Slarivo Feature Highlight Card

  Feature Highlight Card This component, FeatureHighlightCard, is designed to showcase a specific feature, complete with an image, title, description, and a call-to-action button. It uses framer-motion for smooth, staggered animations and is styled with shadcn/ui theme variables to ensure it adapts to both light and dark modes.

• Slarivo dock

  Here is dock component

• Slarivo Pricing Card

  Pricing Card This component is a flexible pricing card designed to display plan details, features, and a call-to-action. It uses framer-motion for subtle hover animations and is built with shadcn/ui conventions for theming and responsiveness.

• Slarivo Radar Chart

  Here is Radar Chart comopnent

• Slarivo Fraud Card

  Here is Fraud Card component

• 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 Enable 2FA Card

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

• Slarivo Clipped Image

  Here is component of clipped image components

• Slarivo Credit or Debit Card

  Sleek, minimal Mastercard design with gold chip and masked number, flipping on hover to reveal card details. Perfect for payment UI interactions and digital wallet animations.

• Slarivo 3d-card

  this is the card with 3d animation.

• Slarivo Linear Card

  Here is linear card component

• Slarivo Feature Card

  feature card animated card

• Slarivo Product Image Card

  The ProductImageCard component is a modern, interactive product viewer built entirely with shadcn/ui components. It presents a clean, mobile-inspired layout featuring a main product image and a vertical carousel of selectable thumbnails. Users can switch between product views using the thumbnail list or next/previous buttons, offering an intuitive browsing experience similar to e-commerce detail pages. The design is fully responsive, adapting seamlessly across devices, and maintains accessibility with keyboard navigation and focus states. With configurable titles, images, and controls, this component provides an elegant, reusable way to showcase products or visual assets in any modern interface.

• Slarivo Stock Card

  Stock Card This component, StockCard, displays stock information with a smooth hover animation. It's designed to be highly reusable, accepting props for the logo, ticker, name, price, and percentage change.

• Slarivo Feature Card

  Feature Card A versatile, theme-adaptive card component with built-in animations to showcase product features elegantly.

• Slarivo Filter Chips Breadcrumb

  A filter bar component that displays active filters as removable chips with a clear-all option. Ideal for e-commerce, dashboards, and search interfaces, it helps users easily manage and refine their selections.

• Slarivo Verification Card

  The IdentityCard component is a standalone, reusable card UI designed to replicate the clean and professional look of a modern credit or identity card. It features a customizable background image, masked ID number, cardholder name, validity date, and a top label, all laid out in a structured and minimal design. Built with Framer Motion for subtle entry animation, it feels dynamic without being distracting. Because the content is driven by props, it can easily adapt to different contexts — from an identity verification screen, to a virtual wallet, to a dashboard widget showing account or membership details. Its elegant balance of visual appeal and configurability makes it a versatile component wherever a polished, card-like presentation is needed.

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

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

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

  This is a nice, clean and reusable credit card component

• Slarivo Tracker Card

  Package Tracker Card This component provides a visually appealing card to display package tracking information. It's designed to be highly reusable, accepting props for status, package details, destination, and more.

• Slarivo Leaderboard Card

  Paginations component from the 21st.dev community.

• Slarivo Multi Select Calendar Card

  The MultiSelectCalendarCard is a modern, interactive date selection component that extends the functionality of a traditional calendar by supporting multiple date selections with an intuitive UI. Built entirely with shadcn/ui, it displays a calendar for picking dates and a dynamic list of selected dates shown as removable chips, giving users clear visibility and control over their choices. Each date can be easily removed from the list with a single click, and the built-in confirmation action ensures selections can be reviewed before submission. This makes the component ideal for use cases like booking systems, availability planners, or event scheduling where users need to select and manage multiple dates efficiently.

• Slarivo Cuisine Selector Chips

  This code implements an interactive cuisine selector component. It allows users to select multiple cuisines from a predefined list. The component utilizes a functional approach, leveraging React's useState hook for managing selected items. The core functionality involves toggling the selection state of each cuisine when a button is clicked. The component dynamically updates the UI to reflect the user's choices. It enhances user experience with smooth animations and visual feedback powered by Framer Motion. The visual style includes a checkmark that appears when a cuisine is selected, smoothly animating in and out. The styling uses a dark theme and is responsive. The component addresses the need for a user-friendly and visually appealing way to allow users to select multiple options from a list, particularly useful in applications like food delivery apps, recipe websites, or preference settings. The component iterates through a predefined array of cuisines, creating a button for each. Each button uses Framer Motion's animation capabilities for hover, tap, and selection state changes, providing smooth visual feedback. The selected cuisines are stored in an array managed by the useState hook. The toggleCuisine function updates this array, adding or removing cuisines based on user interaction. The Check icon from the lucide-react library is used to visually indicate selected cuisines. The component's animations are carefully configured to ensure a smooth and engaging user experience. It can be applied in various scenarios, such as filtering options, preference settings, or interactive forms where multiple selections are required. For example, a food delivery app could use this component to let users select their preferred cuisines, a recipe website might use it to filter recipes, or a survey could use it to allow multiple-choice answers.

• Slarivo Special Card

  Here is Special Card component

• Slarivo Card

  Analytics Card This component encapsulates the entire visual element, including the header, total amount, and the animated bar chart. It is designed to be highly reusable and theme-adaptive.

• Slarivo Tag Cloud Select

  The Searchable Tag Cloud Select is a modern, interactive component designed for apps that need both data-rich visualization and intuitive multi-select functionality. Built entirely with shadcn UI, it displays options as a tag cloud, where each tag’s size reflects its popularity or frequency and its color highlights its category or importance. Users can search through tags quickly and select multiple options, which appear as removable chips for clarity and control. This component is perfect for use cases like filtering blog posts by popular tags, selecting skills on onboarding forms, choosing analytics categories, or browsing keyword trends in dashboards.

• Slarivo Tag Input

  Here is tag input component

• Slarivo Audio Timeline With Chapters

  The Audio Timeline with Chapters component provides an interactive audio player with clickable chapter markers, allowing users to jump to specific sections of a podcast, audiobook, or lecture. Chapter markers are displayed immediately after the audio metadata loads, ensuring users can see the structure of the content before playing. The progress bar visually tracks playback in real time, and users can navigate either through the timeline or by selecting chapters from the provided list. This compact yet functional design makes it ideal for media-rich applications where quick navigation is essential.

• Slarivo Battery Card

  Battery Card A visually polished component to display device battery status, featuring a dynamic, animated liquid-fill effect that reflects the current charge level.

• Slarivo Card

  Card component from Interfaces DS — a flexible card shell with header, action, content, and footer slots.

• Slarivo Tags Select

  A Component to select tags, simple and stylish

• Slarivo Animated Chip Tab Component

  This code implements a reusable tab component with a visually appealing animated selection effect. It leverages the concept of chip-style tabs, offering a modern and user-friendly interface for navigation. The component addresses the need for clean, interactive tab functionality, enhancing user experience in web applications. The component, `ChipTabs`, renders a series of tabs based on a predefined array (`tabs`). The `useState` hook manages the currently selected tab. Each tab is rendered as a `Chip` component. The `Chip` component is a styled button; when clicked, it updates the selected state using the `setSelected` function. The visual selection is achieved using CSS classes to change text color and background, and an animated underline is added using `Framer Motion`. This animation provides smooth visual feedback to the user upon tab selection. The `motion.span` element creates an animated, colored underline that smoothly transitions when a different tab is selected. This utilizes the `layoutId` prop for smooth transitions and the `transition` prop to customize the animation's duration and type. This component is particularly useful for navigation within web applications, allowing users to easily switch between different sections or views. It can be integrated into dashboards, settings pages, or any interface requiring tab-based navigation. For example, this could be used in a blog application for navigation between home, search, about, and FAQ pages, or in a user profile for managing different sections of their profile. The component's customizable nature allows for easy integration into various design systems and applications. The code utilizes the following key technologies: * **React:** For component-based UI development and state management. * **Framer Motion:** For creating smooth, visually appealing animations. * **CSS:** For styling and layout. The component is designed to be highly reusable and easily customizable to suit a variety of design needs.

• Slarivo Flight Card

  Flight Card A responsive card component to display flight details, including airline information, timings, duration, price, and a call-to-action.

• Slarivo 3D tilt card

  A reusable component for 3d tilt card

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

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

  A lively field of tiny, colorful dots that shimmer, shift, and cycle through the rainbow. Powered by Framer Motion for smooth endless animation and customizable spacing, size, and speed.

• Slarivo Modem Animated Footer

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

• Slarivo Aniamted Pricing Cards

  Aniamted Pricing Cards

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo AI Gen

  AI Image Gen

• Slarivo Marquee

  Inspired by https://x.com/dollargill

• Slarivo Badge

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

• Slarivo Location Tag

  A compact, interactive location indicator with a live pulsing dot and smooth text-swap animation. Hover reveals your current local time.

• Slarivo AI Chat

  ai chat card animated

• Slarivo 3D Marquee

  Here is 3D Marquee component

• Slarivo Gooey Marquee

  The component uses two text layers - a blurred background layer with high contrast filtering and linear gradients for the gooey effect, and a clean foreground layer for readability.

• Slarivo banner

  A stylish banner component for modern UIs, built with accessibility and animation in mind.

• Slarivo Interactive Frosted Glass Card

  new version features a mesmerizing field of glowing particles that drift and shimmer behind the card. The particles also react to your cursor's movement, creating a deeper sense of interactivity and a more lively, cosmic atmosphere.

• Slarivo Animated Badge

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

• Slarivo Marketing Badges

  Beautiful 3D marketing badges with smooth interactions.

• Slarivo Cyber Matrix Hero

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

• Slarivo Apple Tahoe Liquid Glass Button

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

• Slarivo Animated 3D Card

  This is animated 3D card

• Slarivo 3D Card

  A 3D card that appears on hover can make your website look beautiful.

• Slarivo Image Cursor Trail

  A unique interactive component

• Slarivo Marquee Card

  Marquee Card, card, testimonials

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

  Here is Badge Tag

• Slarivo Clean Tag Input

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

• Slarivo Expandable Skill Tags

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

• Slarivo Project Badge

  Here is modern project badge component

• Slarivo Interactive Dots

  Interactive Dots with props

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

  Here is modern Label Badges component

• Slarivo Interactive List

  Interactive List An interactive list component designed for search interfaces or recent activity logs. It supports animated removal of list items and filter tags, is fully responsive, and adapts to shadcn themes out-of-the-box.

• Slarivo New Badge

  This is a new badge component

• Slarivo Ai chat input

  A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spring-physics transitions (cubic-bezier engine) for height scaling, state-morphing typography, an integ

• Slarivo checkbox 02

  A reusable component for a checkbox

• Slarivo Smart Textbox

  Rich text input with @mentions and AI autocomplete. Inline tag chips, ghost text suggestions. Keyboard-first, fully customizable.

• 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 Flip Coin Button

  Here is flip coin button component

• Slarivo Interactive Dots

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

• Slarivo Pricing Card Triple

  Here is Pricing Card Triple component

• Slarivo Sleep Tracker Card

  Sleep Tracker Card A visually polished card component for displaying sleep analysis data, including key statistics, an animated sleep-stage graph, and a detailed breakdown of sleep cycles.

• Slarivo Chip

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

• Slarivo Chip

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

• Slarivo Star Button

  A simple yellow star button with hover animations, useful for starring items or adding the in favourites/wishlist. SAVE IT FOR LATER

• Slarivo AI Suggestions

  A horizontally scrollable row of AI prompt suggestion chips that animate in and out, for chat and prompt input interfaces.

• Slarivo Badge

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

• Slarivo Input Bar

  Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, etc. Self-contained port from 21st.dev Agent Elements.

• Slarivo Suggestion

  Here is Suggestion component

• Slarivo Tracker Card

  Calorie Tracker Card A visually engaging card to track daily calorie intake. It features an animated counter, a dynamic progress bar, and a list for food suggestions, all styled using shadcn/ui principles.

• Slarivo Card

  Interactive Card A visually engaging card component that features an icon group with hover animations, a step indicator, title, and description. It's designed to be reusable and adapt seamlessly to light and dark themes.

• Slarivo File Attachment

  File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.

• Slarivo File Attachment

  File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.

• Slarivo Error Message

  Compact red-tinted error card with optional title and message body. Self-contained port from 21st.dev Agent Elements.

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo Role Filter Chips

  Role filter chips built from toggle buttons, each with a count badge and a live running total of matching results.

• Slarivo Suggestions

  Quick prompt chips for AI chat input — text-only or with icons. Self-contained port from 21st.dev Agent Elements.

• Slarivo Suggestions

  Quick prompt chips for AI chat input — text-only or with icons. Self-contained port from 21st.dev Agent Elements.

• Slarivo Matrix Code

  2D barcode called a Data Matrix code, or the visual effect of falling green characters

• Slarivo QR Code

  Here is QR Code component

• Slarivo Tag Group

  Here is Tag Group component

• Slarivo Tag Group

  Here is Tag Group component

• Slarivo LED Display

  LED Display with color props

• Slarivo QR Code

  QR code generator with rounded finder patterns and dot-style data modules.

• Slarivo Card

  Article Card This card component is designed to showcase an article, event, or location in a visually appealing and structured format. It's fully responsive and uses shadcn/ui theme variables for seamless light/dark mode integration.

• Slarivo Trello Kanban Board

  Trello Kanban Board drag and drop material component, project overview tasks boards

• Slarivo Keyboard

  Mac Keyboard

• Slarivo Kbd

  Here is Kbd component

• Slarivo Kbd

  A keyboard key component for displaying keyboard shortcuts and key combinations.

• Slarivo Keyboard Keys

  Interactive Keyboard Keys which animates on clicking or pressing the key on keyboard.

• Slarivo Macbook Keyboard

  Here is macbook keyboard component

• Slarivo LegionWebDev

  Keyboard which glows on hover

• Slarivo Kbd

  Displays keyboard input or shortcut keys with customizable styles and sizes.

• Slarivo MacOS Animated Shortcut Keyboard

  MacOS Keyboard Animated Shortcut Keyboard

• Slarivo Animated Keyboard

  Here is Animated Keyboard component

• Slarivo Tagline

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

• Slarivo 8-bit Keyboard Key

  Pixel-art keyboard key indicator from 8bitcn.com — for shortcut hints and command palettes. Retro Press Start 2P glyph styling.

• Slarivo Label Selector

  Here is Label Selector component by IndevUi

• Slarivo Magic Keyboard Component

  A sleek, responsive keyboard component built with React and Tailwind CSS that replicates the look and feel of a physical keyboard. This component features Lucide React icons for arrow keys and maintains the original design's aesthetics with smooth hover and active states.

• Slarivo Animated Tags

  A tag selector where tags animate with blur and spring motion as they move between an available list and a selected list.

• 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 Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and full keyboard navigation.

• Slarivo Command

  Fast, composable, unstyled command menu for React.

• Slarivo Badge

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

• Slarivo Elastic Gallery

  Interactive horizontal image accordion where the active card expands with a dark gradient overlay, title, category chip, and CTA while others collapse.

• 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, base ui, base-ui, tag.

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

  A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.

• Slarivo Editable Components

  A Editable Components component for displaying ordered records, tasks, activity, and repeated content, featuring todo, editable, task, checklist.

• Slarivo Badge Tag

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

• Slarivo Combobox

  An input combined with a list of predefined items to select.

• Slarivo Kbd

  A Kbd component for categorizing content, filters, shortcuts, and compact metadata, featuring kbd, keyboard, shortcut, command palette.

• Slarivo Command

  A Command component for finding and filtering content, commands, products, or records, featuring command, command palette, command-palette, search.

• Slarivo Keyboard Input

  A Keyboard Input component for categorizing content, filters, shortcuts, and compact metadata, featuring kbd, keyboard, shortcut.

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

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

• Slarivo Material UI Autocomplete / Combobox / Multi-select

  A high-fidelity Material Design 3 Autocomplete and Multi-select Combobox built for shadcn/ui. Features a custom physics-based ripple engine, cinematic staggered entrance animations, and a luxurious floating scroll area with smooth fade masks. Built-in…

• Slarivo HeroUI Tag Group

  HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

• Slarivo HeroUI Table

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

• Slarivo HeroUI Table

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

• 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 Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• 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 Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• Slarivo Keyboard Shortcuts

  A Keyboard Shortcuts component for categorizing content, filters, shortcuts, and compact metadata, featuring kbd, keyboard, shortcut, interactive.

• Slarivo Tag Group

  A Tag Group component for categorizing content, filters, shortcuts, and compact metadata, featuring tag, tag input, tag-input, label.

• Slarivo Keyboard Shortcuts

  A Keyboard Shortcuts component for categorizing content, filters, shortcuts, and compact metadata, featuring kbd, keyboard, shortcut, monospace.

• Slarivo Unit Field

  Headless, composable numeric input field with drag-to-scrub, keyboard stepping, format/parse controls, and committed-value events for building any unit field.

• Slarivo HeroUI Table

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

• 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 Label With Keyboard Shortcut

  An input field with a label that displays a keyboard shortcut hint, ideal for quick-search and command inputs.

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

  A nostalgic vintage keyboard with interactive keypress animations and a realistic retro design.

• Slarivo Search Input with Keyboard Shortcut

  A search input that displays a ⌘K / Ctrl+K keyboard shortcut badge in the input's end addon, with a Mac/Windows platform toggle.

• Slarivo KBD in Button

  Buttons with inline keyboard shortcut hints and a Mac/Windows platform switch.

• Slarivo Primitive Badge

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

• Slarivo Mechanical Keyboard

  A 3D mechanical keyboard you can actually play with.

• Slarivo Keyboard Shortcuts

  A searchable keyboard-shortcuts cheat sheet. Press ? to pop a grouped, filterable list of every hotkey - written once as compact strings like 'mod+k' and rendered as platform-aware keycaps (Cmd on Mac, Ctrl elsewhere). Focus-trapped, Esc to close,…

• Slarivo Kbd Button

  A button with an inline keyboard-shortcut indicator (kbd) showing the key needed to trigger the action.

• Slarivo Multi Select

  A searchable multi-select dropdown with removable animated chips for choosing several options from a list.

• Slarivo Suggestions

  A row of clickable prompt suggestion chips that let users pick a common query to fill an AI chat input, with optional variants, vertical layout, and an expandable panel of related suggestions.

• Slarivo Kbd Input Group

  A search input field with a leading search icon and trailing keyboard shortcut badges (like ⌘K) to hint a global keyboard shortcut.

• Slarivo Receipt Pricing

  Pricing section whose plans print like thermal receipts: monospace ledger with dot leaders, subtotal, months-free discount line, barcode, serrated edges. Switching monthly/yearly tears the slips off and reprints them. No animation library, theme tokens,…

• Slarivo Multi-Select Combobox Form Field

  A form field with a multi-select combobox that renders selected values as removable chips, filters options as you type, and validates on submit.