SLARIVO / CARDS

Cards Components

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

• Slarivo social card

  this is social card

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

  wallet card with shadcn card button

• Slarivo Card Table

  A data table nested inside a card with a title, description, and colored status badges for displaying recent transactions.

• Slarivo Card

  Payment Summary Card A visually appealing card to display financial summaries, featuring a main metric, a clickable sub-section, and an avatar stack.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Credit Card

  This is a nice, clean and reusable credit card component

• Slarivo Ticket Confirmation Card

  Ticket Confirmation Card Digital receipt-style confirmation with success status, ticket ID, payment details, and barcode. Designed for event booking, travel tickets, or payment confirmations. Clean layout ensures trust and easy scanning.

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

  Withdrawal Card Description: A responsive and theme-aware card component for handling financial transactions. It allows users to view an amount, see their available balance, and select a payment/withdrawal account from a list. The selection is highlighted with a smooth layout animation.

• Slarivo Display Cards

  A visually appealing stacked card layout with hover animations and grayscale effects. Features: • Stacked card layout • Hover animations • Grayscale effects • Custom icons • Responsive design • Dark mode support • Customizable styles • Accessible markup Notes: • Built with Tailwind CSS for responsive design • Uses CSS Grid for stacking cards • Implements smooth hover animations • Supports custom icons from any library • Includes grayscale hover effects • Maintains consistent spacing • Supports dark mode • TypeScript support with proper types

• Slarivo Contact Card

  A modern contact card with a clean layout, combining details, icons, and a form section. Perfect for displaying your contact info alongside an inquiry form in one stylish block.

• Slarivo Canvas Reveal Effect

  A dot background that expands on hover, as seen on Clerk's website Features: - Animated Reveal: Smooth animations grab users' attention as content pops up. - Customizable Speed: Tweak the animation speed to match the vibe you want. - Color and Opacity Control: Play around with colors and opacities for cool visual effects. - Dot Matrix Effect: Add a modern, techy look with a dot matrix pattern. - Gradient Overlay: Use an optional gradient overlay for extra visual depth. - Responsive Design: Fits perfectly on any screen size for a consistent experience. Example Use Cases: - Call to Action on Landing Page: Use fun animations to highlight important actions or offers. - Cards on Landing Page: Make card displays pop with dynamic reveal effects to showcase key info.

• Slarivo Meteors

  A group of beams in the background of a container, sort of like meteors.

• Slarivo Glare Card

  A glare effect that happens on hover, as seen on Linear's website

• Slarivo Evervault Card

  A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo CardStack

  An interactive 3D card stack carousel with fan-out animation, drag gestures, and auto-advance support.

• Slarivo Card

  A versatile card component that supports multiple design variants while maintaining consistency with the shadcn/ui design system. Features - 8 unique design variants - Dark mode support - Consistent with shadcn/ui - Fully typed props - Customizable through className - Responsive design - Animated elements (optional)

• Slarivo Blog 7

  Classic 3 card blog post layout, great for blog sections, featured blog posts and related blog posts. Uses shadcn/ui Card component

• Slarivo Grid Card

  A stylish React + Tailwind CSS Grid Card component featuring animated background patterns and gradient effects. Ideal for dashboards, feature cards, pricing sections, and modern UI layouts.

• Slarivo 3D Animated Pin

  A gradient pin that animates on hover, perfect for product links.

• Slarivo 3D Folder

  A beautifully crafted folder with back panel, tab, front panel, and a subtle shine effect that opens smoothly on hover

• Slarivo Ruixen Bento Cards

  Ruixen UI is built to make your job easier. These bento cards highlight what really matters when you're building modern UIs: beautiful components, smart layouts, performance, and flexibility. Whether you're working solo or with a team, Ruixen gives you a solid foundation that just works — clean code, great defaults, and the kind of polish that makes your product feel professional out of the box.

• Slarivo Card

  A flexible container component for displaying content in a card layout with header, content, and footer sections.

• Slarivo Card with Grid Ellipsis Pattern

  A sophisticated card component featuring a grid pattern with ellipsis dots at intersections. The pattern combines rectangular grid sections with prominent dots, creating a modern and structured visual texture that's perfect for feature sections, pricing cards, or any content requiring a premium feel. Features - Grid-based pattern with ellipsis dots at intersections - Semi-transparent grid sections for added depth - Distinct patterns for dark/light modes - Smooth gradient overlay for content legibility - Responsive design - Built with shadcn/ui theme system - Framer Motion entrance animation

• Slarivo 3D Card Effect

  Here is 3D Card Effect

• Slarivo Morphing Card Stack

  Unique Crad stack layout different types of layouts from presenting Your data and animations around switching them

• Slarivo Empty

  Here is Empty components

• Slarivo Animated Tabs

  Animated tabs interaction made with framer motion and tailwind css.

• Slarivo Meteors

  A meteor shower effect.

• Slarivo Card

  Destination Card A visually rich card component designed to showcase travel destinations. It features a background image, a content overlay, and an interactive 3D tilt effect on hover.

• Slarivo Material

  Various surfaces with shadows.

• Slarivo Kanban

  A kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog", "In Progress", "Done".

• Slarivo Card With Lines Patter

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

• Slarivo Expandable Card

  A versatile and engaging UI component that allows users to explore content in a more immersive way.

• Slarivo Blog Post Card

  Blog Post Card

• Slarivo Blog 8

  Blog posts in row layout with large images on right.

• Slarivo Glowing Background Stars Card

  Card background stars that animate on hover and animate anyway

• Slarivo Content Card

  Content Card with Author Avatar

• Slarivo Gradient Card Showcase

  Displays a set of interactive cards with skewed gradient back-panels, glowing blur highlights, and smooth hover transitions

• Slarivo Direction Aware Hover

  A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.

• Slarivo Social Card

  A modern, interactive social media card component with engagement features. Supports dark mode, animations, and customizable content. Features: • Interactive engagement buttons (like, comment, share, bookmark) • Link preview with custom icon • Animated interactions • Dark mode support • Responsive design • Customizable styling • TypeScript support

• Slarivo Feature

  Sleek design animated Featured Cards Section

• Slarivo Blog Posts

  A responsive and adaptive grid layout component designed for displaying blog posts or articles in an elegant card format. Features a hero-style layout with one large primary card and smaller secondary cards. This component is highly flexible and can be adapted to display any type of data or cards beyond blog posts.

• Slarivo Bento Monochrome

  Here is Bento Monochrome component

• Slarivo Colorful Bento Grid

  A section with live and coming soon pages to show on your landing page, no matter if you're a SaaS (show features) or an Agency.

• Slarivo Highlight Card

  Highlight Card shacn card

• Slarivo Blog Section

  A modern blog grid with lazy-loaded images, smooth hover effects, and clean typography. Showcases articles with author, date, and read-time in a polished card layout.

• Slarivo Card with Grid Pattern

  A minimal card component featuring a clean grid pattern of squares. The pattern creates a structured, geometric texture that's perfect for content organization and visual hierarchy. Features - Clean square grid pattern - 50px x 50px grid spacing - 3.5px stroke width - Dark/Light mode support - Smooth gradient overlay - Built with shadcn/ui theme system - Framer Motion entrance animation

• Slarivo Card

  Displays a card with header, content, and footer.

• Slarivo Spline Scene

  A React component that integrates Spline 3D scenes. Demo component combines interactive 3D visualization with a spotlight effect and responsive text content. Features: • Lazy-loaded Spline integration • Responsive layout with flex columns • Gradient text effects • Spotlight background effect • Dark theme optimized

• Slarivo Bento Grid

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

• Slarivo Spotlight Card

  advanced React component designed to create an engaging and modern card interface. It features a unique spotlight glow effect that intelligently tracks the mouse pointer across the screen, highlighting the card with a configurable hue. Part of the EaseMize UI library, it supports several preset glow colors, predefined responsive sizes ('sm', 'md', 'lg'), and allows for completely custom dimensions via width, height, or className props. The underlying CSS leverages custom properties for a highly dynamic and performant visual effect.

• Slarivo Carousel

  A carousel with motion and swipe built using Embla.

• Slarivo Features 8

  features section

• Slarivo Bento Grid

  A nice Bento Grid with hover items and shadow.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Marquee

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

• Slarivo Glow

  A collection of demos showcasing different use cases for the Glow component: 1. GlowBasic ▪ Basic implementation with top positioning ▪ Demonstrates default animation 2. GlowCentered ▪ Centered glow effect ▪ Shows pulse animation 3. GlowMultiple ▪ Multiple glow effects combined ▪ Demonstrates layering capabilities 4. GlowInteractive ▪ Interactive hover effects ▪ Shows transition animations

• Slarivo Glow Effect

  A customizable glow effect with animation modes, colors, blur, and transitions

• Slarivo Shine Border

  Shine border is an animated background border effect.

• Slarivo Use Mobile

  use-mobile hook

• Slarivo Testimonial Card

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

• Slarivo Empty State

  Empty state card with shadcn/ui buttons. Inspired by @AndyRyanWeir

• Slarivo Card

  Containers for displaying content and actions about a single subject.

• Slarivo Sign In Card

  A sophisticated sign-in form with subtle animated light beams traveling along the borders, creating an elegant, high-tech aesthetic with minimalist design elements.

• Slarivo useMediaQuery

  useMediaQuery hook

• Slarivo Features 10

  features section

• Slarivo Border Trail

  Animated border effect that moves along the edges of its parent container.

• Slarivo 3D Testimonails

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

• Slarivo Dark Gradient Pricing

  A pricing table component with a glass effect and animated cards, perfect for displaying tiered pricing plans and feature comparisons. Features - Responsive design with mobile-first approach - Animated glass effect with blur transitions - Feature comparison with checkmark indicators - Gradient text and background effects - Customizable pricing tiers and benefits - Motion animations on scroll

• Slarivo Feature Section with Bento Grid

  Feature Section with Bento Grid

• Slarivo image auto slider

  A smooth looping image slider that shows different nature scenes one after the other. The images gently slide from left to right in a continuous flow. Great for adding a calm and modern visual touch to any section.

• Slarivo Card Spotlight

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

• Slarivo Shine Border

  Shine Border

• Slarivo Cards Stack

  - Stack of cards to showcase a related set of element, like your services, your work, features, process of work, timeline,

• Slarivo Gallery 6

  A full-width, off-screen gallery with the carousel component.

• Slarivo Testimonial-v2

  A reusable testimonial component block

• Slarivo Glowing Shadow

  The component features a rotating, color-cycling glow that responds beautifully to hover interactions with enhanced blur, opacity, and scale effects.

• Slarivo Features

  Here is Features Component

• Slarivo Stacking card

  Here is scroll stacking card

• Slarivo Bento Product Features

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

• Slarivo Music Artwork

  A music artwork that has a background vinyl animation.

• Slarivo Card with Cross Patter

  A striking card component featuring a pattern of intersecting diagonal lines that form X shapes. This pattern creates a bold, geometric texture that's perfect for high-impact UI elements and featured content sections. Features - Bold X-pattern created by intersecting diagonal lines - Thicker stroke width (6.5px) for enhanced visibility - Larger pattern size (95px grid) - Dark/Light mode support - Smooth gradient overlay - Built with shadcn/ui theme system - Framer Motion entrance animation

• Slarivo Workflow Builder Card

  Workflow Builder Card A responsive and theme-adaptive card component designed to showcase AI workflows. It features a subtle hover animation that elegantly reveals additional details like a description and tags. The card is highly reusable, with its content, including images, user avatars, and action icons, managed through props.

• Slarivo Card with Noise Patter

  A sophisticated dark card component featuring an organic noise texture created with SVG filters. The pattern provides a premium, tactile feel with a subtle white noise effect that's perfect for dark interfaces. Features - Complex noise pattern using SVG filters - Optimized for dark mode only - Turbulence and specular lighting effects - 500px x 500px pattern size - Semi-transparent dark overlay - Built with shadcn/ui theme system - Framer Motion entrance animation

• Slarivo Glowing Stars

  Card background stars that animate on hover and animate anyway

• Slarivo Cards

  Interactive Travel Card A visually polished card component that uses framer-motion for a 3D hover effect. It's designed to be fully responsive and reusable, with all content and actions supplied through props. The styling is theme-adaptive, using shadcn CSS variables for the outer frame, while the inner "glass" elements are designed to overlay a background image beautifully in both light and dark modes.

• Slarivo 3D Card

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

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

  An interactive component inspired by a playing card, featuring a dynamic background. This component is also available on Namer UI: https://namer-ui.netlify.app Watered-down Vue version: https://namer-ui-for-vue.netlify.app/ Credit: https://ui.aceternity.com/components/canvas-reveal-effect

• Slarivo Order Confirmation Card

  Order Confirmation Card This card provides a visually polished summary of a successful order. It's built to be reusable, accepting props for all dynamic data like order ID, payment method, and total amount. It includes subtle animations using framer-motion to enhance the user experience upon rendering.

• Slarivo Reward Card

  Gift unlock screen with themed card, confetti background, and central gift icon. Includes bold greeting, short wish, and a green “Spotify Premium 1 Year” easy to ues, slider button to claim.

• Slarivo Card

  Hotel Card A visually polished card component to display property information, including an image, name, location, and rating. It is fully responsive and animated on hover.

• Slarivo Card

  Spending Limit Card A responsive card component that displays a spending limit with an animated, segmented progress bar.

• Slarivo AuroraCard

  * A modern credit card design featuring a stunning aurora-like appearance * with a frosted glass effect and elegant gradient borders.

• Slarivo Flight Card

  Flight Card A visually polished card component to display flight details, complete with animations and theme support.

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

  Interactive 3D tilt card with perspective hover effect and spotlight.

• Slarivo Testimonials

  Here is Testimonials components

• Slarivo Login

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

• Slarivo Background Gradient

  An animated gradient that sits at the background of a card, button or anything.

• Slarivo Sidebar News

  A stackable news card component that displays updates in an interactive card format. Built for Dub.co's notification system. Features - Stacked card layout with hover animations - Swipe-to-dismiss functionality - Touch-friendly mobile interactions - Completion animation state - Progressive card reveal on hover

• Slarivo Testimonial Card

  A responsive testimonial card component with rating stars and author information.

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

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

• Slarivo Pixel Canvas

  Pixel Canvas

• Slarivo Animated List

  A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

• Slarivo X Gradient Card

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

• Slarivo Gradient Card

  A premium 3D interactive card with smooth motion animations, and a sophisticated purple-blue glow that creates an immersive, futuristic UI experience.

• Slarivo Animated Card Chart

  Here is Animated Card Chart component

• Slarivo Sticky scroll cards section

  Sticky scroll cards section – React + Tailwind + Framer Motion

• Slarivo bento grid 01

  A reusable and responsive bento grid layout with animation

• Slarivo Expand Map

  Click on this component to get a clean map street view with some details.

• Slarivo Hover Effect

  Hover over the cards and the effect slides to the currently hovered card.

• Slarivo Animated Glow Card

  A React component that renders a visually striking card with an animated, glowing border effect. This component uses an SVG filter (feColorMatrix) to achieve the customizable glow, enhancing UI elements with a modern and interactive feel. It includes a CardCanvas to house the SVG filter definition and a Card component for the main content display, complete with border elements. Ideal for drawing attention to featured content, calls to action, or simply adding a touch of dynamic visual flair to your application.

• Slarivo Testimonial

  Dragable testimonial, where user can swap to change

• Slarivo How It Works

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

• Slarivo AI Gen

  AI Image Gen

• Slarivo ReleaseTimeLine

  This TimeLine_01 React component renders a vertically scrolling release notes timeline where only the card closest to the viewport center expands to show full details. It supports icons, images, descriptions, lists, and optional action buttons for each entry.

• Slarivo Animate Card Animation

  Animate Card Animation with framer motion

• Slarivo Flip Card

  A Stylish and Animated Flip Card

• Slarivo Moving Dot Card

  A dynamic views counter card featuring an animated dot traversing the border, gradient-highlighted count display, and stylized corner lines for a sci-fi UI effect

• Slarivo Card Carousel

  Here is Card Carousel component

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

  Here is modern glass 3d card

• Slarivo Animated Gradient Border

  Animated Border, Border animation, border gradient, animated border gradient, border rotate, border rotate animation, border rotation animation, card

• Slarivo Bar Chart

  Here is Bar Chart component

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

  Here is Pie Chart 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 Area Charts 1

  Area charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Sign Up

  Here is Sign Up form

• Slarivo 3D Folder

  A reusable 3D Folder component

• Slarivo Pricing Base

  Here is Pricing compoenent

• Slarivo Animated Loading Skeleton

  Animated Loading Skeleton

• Slarivo Animated Background

  The AnimatedBackground component visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important.

• Slarivo Neon Gradient Card

  A beautiful neon card effect

• Slarivo Schema Card with Animated Wave Visualizer

  Schema Card with Animated Wave Visualizer. This component renders a full-screen, procedurally generated wave visualizer in the background and overlays a “glassmorphic” database schema card in the center.

• Slarivo Liquid Weather glass

  Liquid glass components inspired by apple and figma

• Slarivo File Upload Card

  File Upload Card This component provides a complete UI for file uploads, including drag-and-drop functionality, progress tracking, and status indicators. It is built to be reusable and customizable through props.

• Slarivo Text Reveal Card

  Mousemove effect to reveal text content at the bottom of the card.

• Slarivo Award

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

• Slarivo Card

  Travel Card This component encapsulates the visual representation of a travel destination. It is highly reusable, accepting props for the image, logo, text content, and pricing, making it adaptable for any similar use case. The advanced animation on hover provides a modern, interactive user experience.

• Slarivo useExpandable

  A custom React hook for creating smooth expandable/collapsible elements with spring animations using Framer Motion. Parameters - `initialState` (boolean, optional): Initial expansion state. Defaults to `false`. Returns The hook returns an object with the following properties: - `isExpanded` (boolean): Current expansion state - `toggleExpand` (function): Function to toggle the expansion state - `animatedHeight` (MotionValue): Framer Motion value for animated height Features - Spring-based animations for smooth transitions - Zero-to-auto height animations - Configurable initial state - TypeScript support - Built with Framer Motion for reliable performance

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Radar Chart

  Here is Radar Chart component

• Slarivo Card Stack

  Cards stack on top of each other after some interval. Perfect for showing testimonials.

• Slarivo Activity Card

  A versatile card component for displaying fitness and activity tracking data with interactive goals and metrics visualization. Features - Metric Rings - Circular progress indicators - Percentage-based visualization - Hover animations - Color-coded categories - Value and unit display - Daily Goals - Interactive checkboxes - Completion status - Add new goals functionality - Visual feedback for completed items - Hover states - Visual Elements - Category icon - Progress rings - Gradient dividers - Interactive buttons - Status indicators

• Slarivo Donut Chart

  Donut Chart – Visual data distribution widget. Displays categorized insights with a clean circular layout and color-coded segments. Perfect for analytics dashboards and performance summaries.

• Slarivo Services Card

  Services Card – Showcase offerings. Modern UI component to present branding, development, or SEO services with clear visuals and descriptions. Ideal for portfolios and business websites.

• Slarivo Sign-in

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

• Slarivo Portfolio and Image Gallery

  Here is Portfolio and Image Gallery component

• Slarivo N8N Workflow Block

  Visual workflow automation builder with animated nodes, connections, and real-time execution monitoring

• Slarivo Audio Player

  An audio player component made with framer motion and tailwind css.

• Slarivo Mini Chart

  This is a mini chart which shows real time analytics.

• Slarivo Choicebox

  A larger form of Radio or Checkbox, where the user has a larger tap target and more details.

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Bento

  Beautifully designed, fully responsive, expertly crafted Bento section

• Slarivo Glowing Card

  A sleek, glassmorphic stat display card with a subtle glowing effect that highlights the featured metric. The card uses soft light streaks, rounded corners, and a dark translucent background to create a modern, futuristic look. Perfect for dashboards, analytics tools, and live data displays to showcase key stats like views, likes, or revenue in an eye-catching way.

• Slarivo Roadmap Card

  The RoadmapCard component is a minimal, animated product roadmap built with shadcn/ui and Framer Motion. It displays key project milestones in a clean timeline format, supporting light and dark modes out-of-the-box. Features: 📅 Display quarterly milestones with title, description, and status ✨ Animated timeline dots with fade and slide-in effects 🎨 Minimal, modern design with hover scale effect on dots 🌗 Fully theme-aware (light/dark mode compatible) 🔹 Reusable and dynamic via items prop Ideal for showcasing product plans, feature releases, or project timelines in a visually appealing and interactive way.

• Slarivo AI Chat

  ai chat card animated

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

  Animated Profile Card

• Slarivo Kanban Board

  Here is Kanban Board component

• 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 Line Charts 9

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Call to Action (CTA)

  Call to Action Card A full-width, visually engaging card that combines a background image with a title, description, and an email signup form. It's designed to capture user attention and drive conversions.

• Slarivo Card Fan Carousel

  Animated image card carousel with a fanned arc layout. Features elastic entrance animation, interactive hover spread, and circular single-card pagination powered by GSAP. Responsive, light/dark mode ready.

• Slarivo Line Charts 6

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Smooth Scroll

  Here is Smooth Scroll card

• Slarivo Animated Dashboard Card

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

• Slarivo Kanban

  here is interactive kanban board

• Slarivo Testimonial

  Here is Testimonial component

• Slarivo Line Charts 2

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Images Scrolling Animation

  Images Scrolling Animation

• Slarivo Card Curtain Reveal

  Interactive card component with open curtain to see content on hover

• Slarivo Glass Blog Card

  Glassmorphism blog card with image zoom, author info, and read action

• Slarivo Border Beam

  Here is Border Beam component

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

  A modern three-tier pricing table with monthly/annual toggle, dark/light mode support, and glass morphism design effects.

• Slarivo Bento Card

  An interactive bento card with animated tabs and workspace preview.

• Slarivo useScreenSize

  A custom React hook that provides responsive breakpoint detection with TypeScript support. Aligns with Tailwind CSS default breakpoints and provides convenient comparison methods.

• Slarivo Stat Card

  stat card animated

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Scroll Card

  Here is scrolling stacking card

• Slarivo Line Charts 1

  Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Statistics Card 5

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

• Slarivo Analytics Bento

  Polished budget bento card with smooth interactions.

• Slarivo Rotating Gradient Right

  This component creates a smooth, continuously rotating conic gradient glow behind any content. The gradient’s vibrant colors transition seamlessly as it spins, producing a dynamic spotlight effect. Its blurred, oversized shape adds depth and a soft ambient light, making foreground elements stand out.

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

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

• Slarivo Stats Cards

  shadcn stats cards

• Slarivo Liquid Glass Card

  https://ui.dalim.in/card

• Slarivo Onboard Card

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

• Slarivo Card Stack

  This is a simple card stack component

• Slarivo Loading Carousel

  Here is Loading Carousel component

• Slarivo Area Charts 2

  Area charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.

• Slarivo Glass Cards

  Neomorphic and glassmorphism stacked cards with smooth GSAP animations and interactive hover effects

• 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 Icon 3D Hover

  A 3D animated card component with a rotating cube icon and smooth text fill effect that triggers on hover.

• Slarivo Expanding Cards

  An interactive, responsive card grid where one card expands on hover, focus, or click to reveal its content, while the others collapse. It is fully responsive, transitioning from a vertical layout on mobile to a horizontal grid on desktops.

• Slarivo Service Card

  Service Card A visually engaging card component designed to showcase services or features. It includes a title, a call-to-action link, and a decorative image. The card features a subtle, fluid animation on hover to draw user attention.

• Slarivo Skeleton

  Display placeholder content while loading to improve perceived performance.

• Slarivo Image Swiper

  Image swiper card for a real estate website

• Slarivo Blog Section

  Blog Section with 4 cards

• Slarivo Shine Border

  Here is shine border component

• Slarivo useCopyToClipboard

  Copy text to the clipboard easily with useCopyToClipboard, while keeping track of the most recently copied value.

• Slarivo Feature 72

  A grid of feature cards

• Slarivo News Cards

  This is a full-featured, interactive News Feed Component with expandable cards, animated transitions, bookmark toggling, and live content rendering. It supports a three-tier visual priority system via status bars, uses LayoutGroup and AnimatePresence for shared layout animations, and conditionally disables motion for accessibility. Each card opens into a full-screen modal with detailed content, image overlays, and contextual metadata. Perfect for AI news agents, editorial dashboards, political data platforms, or any high-fidelity news experience requiring real-time interactivity and immersive storytelling.

• Slarivo Testimonials 1

  Simple testimonials section with minimal cards

• Slarivo Spotlight Card

  Create a spotlight effect on hover on a card component.

• Slarivo Stats

  Here is Stats component

• Slarivo Profile Card

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

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Glass Card

  A glassmorphism card component with frosted glass effect and backdrop blur. Includes flexible sub-components (header, title, content, footer) for building modern transparent UI cards.

• Slarivo Cursor Cards

  Here is Cursor Cards component

• Slarivo FeaturedCrmDemoSection

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

• Slarivo Chat Card

  A modern chat interface component that provides a complete messaging experience with reactions, status indicators, and theme support. Features - Message Display - Message history with timestamps - Read/delivered status indicators - User avatars and names - Message reactions with emoji - Message grouping by user - Interactive Elements - Message input with emoji picker - Send button with status feedback - Reaction system with counters - More options menu - Online status indicators - Visual Design - Light and dark theme support - Smooth transitions and animations - Clean and modern interface - Responsive layout - Accessible design

• Slarivo Showcase Card

  An elegant Bali Island showcase card with smooth animations, interactive elements, and a gradient text header that presents travel information in a visually appealing dark-themed interface.

• Slarivo Code Editor Sheet

  A sleek, accessible code editor sheet powered by shadcn/ui, Ace Editor, and Radix UI supporting multiple languages with syntax highlighting and theme switching. Easily integrate customizable, interactive code editing into your web applications.

• Slarivo Product Card

  Product Highlight Card This card uses a combination of CSS gradients and framer-motion to create a visually engaging experience. On hover, the card tilts, a subtle glow follows the cursor, and the product image animates smoothly.

• Slarivo Blog Cards

  Minimal, text-focused preview of a journal or blog entry. It typically includes a title, publication date, and short description, styled with subtle hover animations and a dashed separator for a clean, editorial aesthetic.

• Slarivo Trello Kanban Board

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

• Slarivo Material Design 3 Ripple

  Animations & Effects component from the 21st.dev community.

• Slarivo Kanban

  Kanban board with the number of tasks in each stage. Here's a professional and user-friendly description for that board layout:

• Slarivo QR Code

  Here is QR Code component

• Slarivo Animated Chart Card

  Animated Chart Card

• Slarivo Auto Layout Card

  Here is Auto layout interactive card

• Slarivo Shirt Parallax Card

  The ShirtParallaxCard is a sleek, interactive product advertising component designed for modern e-commerce or fashion websites. It features a clean content area with the product’s title, description, price, and a call-to-action button, while the shirt image sits in the top-right corner, outside the card boundary, instantly drawing attention. The shirt gently bounces with a subtle idle animation, giving the design a lively, premium feel. On hover, the entire card tilts with a parallax effect, the card itself scales down slightly with a soft shadow, and the shirt scales up and lifts forward with a stronger shadow, creating a dynamic push-pull motion that emphasizes the product. This combination of smooth 3D interactions, motion design, and layered layout makes the component ideal for highlighting featured products, running promotional ads, or enhancing landing pages with a visually rich, engaging showcase.

• Slarivo Card

  Article Card A responsive card component designed to display articles or blog posts, featuring an image, title, description, and author details. It adapts seamlessly to both light and dark themes.

• Slarivo Audio Upload Card

  The AudioUploadCard component provides an interactive drag-and-drop interface for audio file uploads with animated visual feedback. It features a customizable upload area that transforms during file selection, showing a waveform visualization and filename display when an audio file is uploaded. The component supports both drag-and-drop and click-to-upload functionality, making it ideal for applications requiring audio transcription, voice recording, or media management workflows.

• Slarivo Color Palette

  Branding Card A visually polished card to showcase brand typography and color palettes, featuring fluid animations.

• Slarivo File Upload

  A drag-and-drop file upload component with support for images, documents, and PDFs. It features a clean card-style design, making it easy to integrate into forms, dashboards, or file management interfaces.

• Slarivo Animated Geometric Card

  Interactive geometric card component with animated shapes, floating particles, and customizable color gradients.

• Slarivo Upload Ui

  Here is Upload Ui component

• Slarivo Goodreads currently reading

  Show off the book that you're currently reading on Goodreads using your RSS feed.

• Slarivo Animated-card

  This is the hover animated card with cool animation.

• Slarivo Flight Status Card

  Flight Status Card A modern, animated card component to display real-time flight information, including boarding status, gate details, and timelines, designed to be easily integrated into any travel-related application.

• Slarivo Contact 7

  Contact Us section with email, phone, location and support chat options.

• Slarivo Sparkle Card

  Here is Sparkle Card component

• Slarivo Color Palette Card

  A compact, modern card displaying a curated set of harmonious color swatches, perfect for design inspiration and theme selection. Each palette is paired with a save count, making it easy to gauge popularity and engagement—ideal for UI libraries, creative platforms, or style guides.

• Slarivo Card

  Property Card A modern, responsive card component designed to showcase property listings with key details and a call-to-action.

• Slarivo Card

  Music Card A visually engaging card component for displaying music tracks, featuring hover animations and a theme-adaptive design.

• Slarivo Share Via QR Code Card

  A clean, reusable component that generates a QR code for sharing profile links, with options to copy the URL or download the code as SVG/PNG.

• Slarivo Parallax Card

  Parallax Tilt Card A visually engaging card that uses framer-motion to create a 3D parallax tilt effect based on the user's mouse position. Inner elements move at different rates to enhance the sense of depth.

• Slarivo Payment

  Payment Summary A card component to display a breakdown of payment details, such as subtotal, shipping, and total, with support for animations.

• Slarivo stack card

  A reusable animated stack card

• Slarivo Card Comment

  Here is card comment component

• Slarivo Item Card

  Order Item Card A visually polished card component for displaying an order item, featuring interactive controls and smooth animations powered by Framer Motion. It's designed to be easily customizable through props.

• Slarivo Trip Details Card

  Trip Details Card A reusable card component to display travel or booking information, featuring a header, details section, and a configurable action toolbar. It's designed with framer-motion for a subtle entry animation.

• Slarivo Material

  Various surfaces with shadows.

• Slarivo Flight Ticket

  Flight Ticket This component renders a detailed flight ticket. It is built to be highly reusable, accepting props for all dynamic content such as flight details, passenger information, and dates. It uses framer-motion for a subtle 3D hover effect and a staggered entrance animation for the passenger list, fulfilling the request for advanced animation. The styling is fully adaptive to your shadcn/ui theme.

• Slarivo Inline Anchored Comment Thread

  A comment thread card anchored to a quoted text selection, with threaded replies, a reply composer, and resolve/reopen actions.

• Slarivo Glass Shine Card

  A small glassmorphism card with gradient orbs, animated shine, and gradient‑clipped headline text—great for hero fillers or minimal dashboards.

• Slarivo Card

  Weekly Expense Card This component provides a visually engaging summary of expenses. It features an animated bubble chart powered by framer-motion and uses shadcn/ui components and theme variables for a consistent look and feel.

• Slarivo Hotel Card UI Component

  This code implements a reusable UI component for displaying hotel information, along with a theme toggle. The `HotelCard` component takes hotel data as props (image URL, hotel name, location, rating, etc.) and renders a visually appealing card. It leverages styling and layout features to create a clean and responsive design. The component uses image placeholders, handles different screen sizes responsively, and includes interactive elements like hover effects. A theme toggle button dynamically switches between light and dark themes using the `next-themes` library. The `HotelCard` component is designed to be easily integrated into any application that displays hotel listings or travel information. The application renders a list of sample hotel cards using data stored in an array. It uses a functional component approach and JSX for UI rendering. The `useTheme` hook from `next-themes` manages the theme state. Lucide React provides the icons. This is useful for showcasing hotels in travel websites, travel apps, or hotel booking platforms. It could also be integrated with a backend system to fetch hotel data dynamically.

• Slarivo Card Skeleton

  A loading placeholder card with skeleton lines and a media block for content that is still fetching.

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section composition with dividers, bleed and height control.

• Slarivo Hover Card

  Here is hover card component

• Slarivo Download Card

  Download Card This component displays download options and visual feedback for different states like loading and success, driven by props.

• Slarivo Stacked Bar medium

  Here is stacked bar medium sice

• Slarivo Shatterable Glass Card

  A glass-style card that you can literally crack and shatter on click—complete with Voronoi-based shards rendered to canvas, wobbling SVG cracks, and dynamic audio feedback via Tone.js.

• Slarivo MetallicBusinessCard

  A premium, reflective 3D metallic business card component that dynamically responds to mouse movement with realistic lighting and tilt effects. It supports multiple metal finishes (gold, silver, bronze, platinum) and intelligently adjusts text color and glow for perfect readability on each surface.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Skeleton Loader

  A shimmer skeleton placeholder that animates a moving highlight to indicate loading content.

• Slarivo Article Skeleton

  A loading placeholder for an article preview with a hero image, title, byline, and stacked body lines.

• Slarivo Presence Fade

  A tiny mount and unmount wrapper that animates children with fade, scale, or slide transitions.

• Slarivo Auth Two-Factor Setup

  A two-factor authentication setup card with QR code, manual secret key, backup codes, and enable/disable controls.

• Slarivo Kanban Board Skeleton

  Animated loading placeholder that mimics a three-column kanban board with card, avatar and tag skeletons.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Tilt Flip Card

  An interactive 3D flip card component with hover tilt, front and back content, image support, and controlled flip state.

• Slarivo Electric Card

  A reusable UI component for a glowing, electric-style card with a turbulent border effect. It can be used to showcase content in a visually dynamic way.

• Slarivo Iridescent Foil

  A holographic foil surface built entirely from layered CSS gradients — a base foil, a soft color film, a pearl sheen, a directional shine, and a specular glare, blended with mix-blend modes. Moving the pointer over the element (or scrolling the page) shifts the iridescent color and specular highlight across the surface via requestAnimationFrame-driven CSS custom properties. Wrap any content as children; element or document scroll-progress modes; dependency-free (ships a CSS module).

• Slarivo indevuiSkeleton

  Here is modern animated skeleton by indevui

• Slarivo RewardCategories

  A customizable widget that displays reward categories as interactive artifacts, complete with hover animations and optional confetti celebration on click.

• Slarivo Recipe Card

  A marketplace automation recipe card showing a row of connected app icons, a name, description, install count, and a tone-colored call-to-action button.

• Slarivo Wallet Card 1

  wallet card balance account

• Slarivo API Usage Meter Card

  A card that shows per-member API usage as labeled meter bars against a shared plan limit.

• Slarivo Market Snapshot

  Stock snapshot card: animated price line with pointer scrubbing, a 1D-to-All period switch, and the hovered price reading into the header with its delta. Light and dark via theme tokens.

• Slarivo Great UI Vinyl Album Card

  An interactive music album card with a spinning vinyl record that emerges from the cover sleeve upon hover.

• Slarivo Vector Tilt Scene

  A spring-driven 3D tilt glass panel that follows the cursor, for hero cards and feature highlights.

• Slarivo Contact Cards

  The whole contact row of a personal site: a copy-email button that copies in place, a GitHub icon whose card carries a year of contributions, and any other links you add. Cards cross-fade in the direction you travel while the container morphs between their sizes. Inspired by Colin Lienard's personal site (colinlienard.com), rebuilt for React from scratch.

• Slarivo Glass Refraction Panel

  A physically-inspired glass panel: edge refraction, chromatic dispersion and a moving specular highlight that tracks the pointer.

• Slarivo Holo Card

  A holographic trading-card surface: pointer-driven 3D tilt with a spring, a rainbow foil sheet whose hue travels with the light, and a contact shadow that leans with the card.

• Slarivo indevuiSeparator

  Here is separator component

• Slarivo Admit One Ticket

  A dithered event ticket card with a perforated stub, 3D hover tilt, animated glare, and customizable event details.

• Slarivo AI Message

  Chat message row for user and assistant turns, with copy, retry and vote actions that reveal on hover instead of crowding the bubble. Respects prefers-reduced-motion.

• Slarivo AI Diff

  Proposed code edit where added lines wipe in from the left and rejected lines collapse to nothing, with accept and reject actions. Respects prefers-reduced-motion.

• Slarivo Buy Me a Coffee

  An animated "Buy Me a Coffee" sponsorship card with a playful hover reveal, ideal for creators collecting support and donations.

• Slarivo AI Artifact

  Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading, with copy built in. Respects prefers-reduced-motion.

• Slarivo Tweet Card

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

• Slarivo AI Tool Call

  Agent tool-call card that stays collapsed while running and expands to its arguments and result, with success, running and error states. Respects prefers-reduced-motion.

• Slarivo AI Approval

  Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away. Respects prefers-reduced-motion.

• Slarivo Reveal

  A wrapper that hides its content behind a frosted-glass face and reveals it with a 3D card flip on click.

• Slarivo Swipe Deck

  A Tinder-style swipeable card deck with drag-to-decide, keyboard controls, undo, and a generic render-prop API for any item type.

• Slarivo Page Header Breadcrumb

  A page header block that pairs a breadcrumb trail with the current page title in a rounded, shadowed card.

• Slarivo Glow Effect

  A customizable glow effect with animation modes, colors, blur, and transitions

• Slarivo Integrations Component

  Here is Integrations Components

• Slarivo Book

  Displays a 3D book or a component that looks like a book.

• Slarivo Line Chart

  Here is Line Chart component

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Parallax Floating

  Elements float at different speeds based on cursor position, creating a depth illusion through independent parallax layers.

• Slarivo Book

  A responsive book component.

• Slarivo Book

  A responsive book component.

• Slarivo Book

  A responsive book component.

• Slarivo Book

  A responsive book component.

• Slarivo Book

  A responsive book component.

• Slarivo Book

  A responsive book component.

• Slarivo Weather Widget

  A beautiful, customizable animated weather widget component that integrates seamlessly with shadcn/ui & modern web frameworks. It displays current weather information along with current location , date & time based on the user's location using the OpenWeatherMap API.

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Cards

  Here is Blog Card Component

• Slarivo Sortable

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

• Slarivo Sortable

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

• Slarivo Switch

  Here is Switch component

• Slarivo Event Card

  Event Card A visually appealing card to display event details, including title, date, time, location, and frequency. It features a subtle load-in and hover animation for a modern user experience.

• Slarivo ClickTrigger

  An interactive card with click animation effects. When clicked, it displays animated rectangles forming a plus shape that slide outward from the click position and fade way.

• Slarivo Order Status Tracker

  Order Status Tracker This component provides a detailed view of an order's status, including the item, summary, and tracking actions. It is designed to be highly reusable by accepting all its content through props.

• Slarivo Calculator

  A functional calculator with history and proper display formatting.

• Slarivo Product Bounce Card

  The ProductBounceCard is a sleek, animated display card designed to showcase products with a lively and modern 3D bounce effect. Using Framer Motion, it smoothly animates the product image with gentle vertical movement and subtle Y-axis rotation, creating…

• Slarivo Neo-Brutalist Kinetic Deck

  A physics-based interactive card system featuring free-form dragging, realistic 3D flips, and a custom context menu. Built with Framer Motion and Tailwind CSS, it uses spring physics to create a tactile, "heavy" feel perfect for retro-modern portfolios or…

• Slarivo Aurora Credit Card Bento

  An interactive bento card carrying an animated credit card: colour bands, caustics and grain flow across the face, and the chip sits where ISO 7816 puts it on a real card.

• Slarivo Card Stack Loader

  An animated, neo-brutalist card stack loader component built with Framer Motion and Tailwind CSS.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, settings.

• Slarivo Rating

  A Rating component for presenting reviews, customer outcomes, and social proof, featuring rating, star, review, statistics card.

• Slarivo Skeleton

  A Skeleton component for communicating loading, processing, and waiting states, featuring skeleton, loading, placeholder, card.

• Slarivo Card Studio

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

• Slarivo Card Studio

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

• Slarivo Card Studio

  A Card Studio component for grouping related information, actions, and media into reusable surfaces, featuring card, shadcn/ui, typography, form handling.

• Slarivo Card Studio

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

• Slarivo Card Studio

  A Card Studio component for grouping related information, actions, and media into reusable surfaces, featuring card, outline, shadcn/ui, typography.

• Slarivo Editable Components

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

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, form control, form-control, settings.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, card, integration, settings.

• Slarivo Switch

  A Switch component for switching settings, modes, preferences, and binary states, featuring toggle, card, settings, label.

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

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

• Slarivo Login Card

  A Login Card component for grouping related information, actions, and media into reusable surfaces, featuring card, animated card, animated-card, theme-aware styling.

• Slarivo Login Card

  A Login Card component for switching settings, modes, preferences, and binary states, featuring settings, toggle, slider, card.

• Slarivo Login Card

  A Login Card component for switching settings, modes, preferences, and binary states, featuring theme toggle, theme-toggle, toggle, card.

• Slarivo QR Code

  A QR Code component for grouping related information, actions, and media into reusable surfaces, featuring qr code, qr-code, card, theme-aware styling.

• Slarivo QR Code

  A QR Code component for grouping related information, actions, and media into reusable surfaces, featuring qr code, qr-code, card, share.

• Slarivo QR Code

  A QR Code component for grouping related information, actions, and media into reusable surfaces, featuring qr code, qr-code, overlay, card.

• Slarivo Modal Drop

  A Modal Drop component for focused confirmations, forms, details, and temporary tasks, featuring modal, overlay, scale, notification.

• Slarivo Segment Group

  A Segment Group component for choosing one or more values from a structured option set, featuring segmented control, segmented-control, toggle group, toggle-group.

• Slarivo Animated Review Card

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

• Slarivo Tilt Card

  Interactive 3D tilt card with perspective hover effect and spotlight.

• Slarivo Hover Card

  A Hover Card component for grouping related information, actions, and media into reusable surfaces, featuring hover card, hover-card, product card, product-card.

• Slarivo Hover Card

  A Hover Card component for explaining controls and compact details on hover or focus, featuring hover card, hover-card, link preview, link-preview.

• Slarivo Plan Tool

  Display a plan title and summary with expand/collapse and an Approve action. State-driven (idle / pending). Self-contained port from 21st.dev Agent Elements without the Markdown dep — summary renders as plain prose.

• Slarivo The Item one

  A The Item one component for grouping related information, actions, and media into reusable surfaces, featuring card, travel, image card, image-card.

• Slarivo The Item one

  A The Item one component for grouping related information, actions, and media into reusable surfaces, featuring card, shadcn/ui, outline, container.

• Slarivo The Item one

  A The Item one component for grouping related information, actions, and media into reusable surfaces, featuring card, outline, shadcn/ui, layout.

• Slarivo Achievement badge

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

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo Achievement badge

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

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…

• Slarivo Achievement badge

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

• Slarivo Card

  Flexible container component for grouping related content and actions.

• Slarivo Coverflow Carousel

  A rack of square covers with the perspective reversed. The centre card sits square to the viewer while the ones beside it swing their outer edges forward, so the rack opens toward you instead of folding away. Drag it and the caption underneath follows.

• Slarivo Card

  Flexible container component for grouping related content and actions.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Edit Tool

  Render a file edit/write tool call as a diff card with header, +/- line stats, line-level diff body, and an optional Apply/Skip approval footer. State-driven (completed / pending / waiting). Self-contained port from 21st.dev Agent Elements.

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

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

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Market Snapshot

  Stock snapshot card: animated price line with pointer scrubbing, a 1D-to-All period switch, and the hovered price reading into the header with its delta. Light and dark via theme tokens.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo AI Response Text Generate Card

  An AI assistant chat card that animates its response with a word-by-word text-generate effect and regenerates on demand.

• Slarivo Kanban Board

  A fully interactive, multi-column Kanban board featuring native HTML5 drag and drop, inline task creation, rich card metadata, and a clean minimalist aesthetic.

• Slarivo Kanban Board

  A fully interactive, multi-column Kanban board featuring native HTML5 drag and drop, inline task creation, rich card metadata, and a clean minimalist aesthetic.

• Slarivo Animated Card 1

  An animated hover card that can showcase almost anything—it all comes down to the caption you choose.

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

  A framed container for grouping related information with header, panels, and footer sections.

• Slarivo HeroUI Separator

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

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Frame

  ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Binaural Glow Feature Card

  Tarjeta de características para Next.js y Tailwind CSS con animación de luz binaural fluida en el borde, optimizada para dashboards y landing pages en modo oscuro.

• Slarivo Event RSVP Card

  An event card showing the title, category badge, date, time, location and attendee count with a reserve/RSVP button.

• Slarivo Morphing Dialog

  A card that expands into a full-screen modal with a shared-layout morphing animation, opening its image and title into an expanded detail view.

• Slarivo Pricing Plan Card

  A pricing plan card with a feature checklist, a highlighted ring, a "Most Popular" badge, and a call-to-action button.

• Slarivo GitHub Repository Cards

  A vertical list of GitHub repository cards showing name, description, visibility badge, language, star and fork counts.

• Slarivo Documentation Link Card

  A compact card with a labeled icon header and a body containing descriptive text plus a link, ideal for documentation or resource callouts.

• Slarivo Icon Link Card

  A compact card with an icon badge, title, description and a call-to-action link, useful for summaries, feature highlights or navigation shortcuts.

• Slarivo Expandable Content Card

  A billing usage card that expands and collapses its content with a smooth max-height transition, a fade-out gradient overlay when collapsed, and a floating chevron toggle button.

• Slarivo Login Form Card

  A sign-in card with email and password fields, a show/hide password toggle, a divider, and a social login button.

• Slarivo Settings Card with Sidebar

  A settings card with a vertical sidebar of icon-labeled sections that swap the panel content when selected.

• Slarivo Payment Form Card

  A checkout payment card with fields for cardholder name, card number with an icon, expiry, CVC, and a country select plus a pay button.

• Slarivo Card with Dropdown Menu

  A compact card with a title, body text and a footer action, plus a header dropdown menu for team/settings actions.

• Slarivo Notification Settings Card

  A settings card with horizontal field rows, each toggled by a switch, for managing notification preferences.

• Slarivo Switchboard Card

  A card with an animated light-grid illustration that renders random or patterned glowing dots above a title and subtitle.

• Slarivo Login Form Card

  A login card with email and password fields plus sign-in and Google OAuth buttons.

• Slarivo Tweet Card

  A card that renders a real tweet with the author's name, handle, avatar, verified badge, rich text, and media (photos or video).

• Slarivo Stacking Cards

  A scroll-driven stack of cards that pin and scale down on top of each other as the user scrolls, built with Motion.

• Slarivo Collapsible Billing Card

  A billing usage card with a progress bar that expands via a floating bottom-center trigger to reveal a detailed cost breakdown.

• Slarivo Team Invitation Alert

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

• Slarivo Express Wallets

  A checkout card with Apple Pay and Google Pay express wallet buttons plus a fallback to enter card details.

• Slarivo Reset Password OTP Code

  A card with a six-digit OTP input for verifying a password-reset code sent by email.

• Slarivo Saved Payment Methods

  A card listing saved credit cards with selectable default, remove buttons, and an empty state for managing billing payment methods.

• Slarivo Reset Password Email Link

  A password reset card with an email input and a button that sends a reset link, plus a link back to sign in.

• Slarivo Change Password Form

  A change-password card with current, new, and confirm password fields, inline validation, and a loading submit button.

• Slarivo card-hover

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

• Slarivo Drag constraints

  A Motion for React card dragged inside a parent constraint box with light elasticity, from the official Motion examples catalog.

• Slarivo Card stack

  A swipeable photo stack that sends the top image to the back, from the official Motion examples catalog.

• Slarivo People Picker

  A share-access card for inviting people by email and managing each person's role (viewer, editor, or remove) with avatars.

• Slarivo FAQ Cards Grid

  A centered FAQ section that lays out question-and-answer pairs in a responsive two-column grid of cards with a get-in-touch link.

• Slarivo Read More Content Expander

  A card whose long description is truncated to a short preview and expands to reveal the full text through a collapsible "Read more" toggle with a fade overlay.

• Slarivo Payment Method Card Checkbox

  A payment method selection card that pairs a saved card (brand icon, last digits, expiry) with a rounded checkbox to mark it as selected.

• Slarivo FAQ Accordion Card

  A FAQ accordion embedded inside a card with a title, description, and call-to-action button for billing and account questions.

• Slarivo Collapsible Animated Card

  A card containing a collapsible FAQ item that smoothly expands and collapses its answer when the header is clicked.

• Slarivo Collapsible Form Fields

  A pricing card with a collapsible section that reveals advanced input fields such as tax rate and discount.

• Slarivo Underline Tabs Card

  A tabbed settings card with underline-style tabs for switching between account, password, and preference forms.

• Slarivo Incident Status Timeline

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

• Slarivo Privacy Policy Collapsible Card

  A privacy policy card with expandable accordion sections where only one panel opens at a time.

• Slarivo Card Style Checkbox

  A checkbox wrapped in a bordered card with a title and description, ideal for settings toggles and opt-in options that highlight when selected.

• Slarivo Draggable Photo Stack

  An interactive draggable photo stack with tactile swipe physics, fan view, shuffle animation, fullscreen previews, and responsive touch controls.

• Slarivo Holo Card

  A holographic foil trading card you tilt with the pointer. The shine is a function of the viewing direction rather than a clock, so hold it still and the rainbow holds still; the colour bands along a diffraction grating the way real foil does, and the…

• Slarivo Draggable Widget Grid

  A draggable and rearrangeable widget grid for building customizable dashboards. Move widgets freely while the layout automatically adapts around them.

• Slarivo Optimized Tilt Card

  High-performance 3D parallax tilt card with desktop hover, touch hold for mobile, and dynamic pointer light sheen.

• Slarivo FAQ Snapshot Grid

  A two-column FAQ grid that displays numbered question-and-answer cards with a call-to-action button below, for product or pricing pages.

• Slarivo Hover Expand Gallery

  A row of hairline-separated panels with vertical labels. Hover or tap one and it absorbs the free space to reveal its image while the rest stay rail-width; below 1024px the same list becomes a vertical accordion. Pure CSS flex-grow transition - no…

• Slarivo Bento Feature Grid

  A 2x2 grid section of feature tiles, each with an icon, heading, and short description, used to highlight product pillars on a landing page.

• Slarivo Centered Sign-Up Card

  A minimal centered sign-up card with name, email, and password fields plus a link to sign in, for account creation pages.

• Slarivo Folder Card

  A folder tile with stacked file previews and a count. The silhouette is one path, so the notch and radii stay true at any size instead of drifting the way a rectangle-plus-tab does. Part of Documents & Signing: layro.vercel.app.

• Slarivo Integration Card

  An animated card that showcases connected app integrations, with pulsing SVG connector lines linking floating tool logos to a central brand mark, plus a title, description and CTA link.

• Slarivo Feature Grid Spotlight Cards

  A six-card feature grid with hairline dividers, icon tiles, corner crosshair marks, and a radial spotlight that follows the pointer on hover, used to showcase a product's key capabilities.

• Slarivo Item Image

  A list of items with a thumbnail image, title, subtitle and trailing metadata, useful for music tracks, files or search results.

• Slarivo Layered Stack

  An interactive card stack that fans children into a shuffled deck and re-stacks them into a neat grid on hover, using GSAP for the transition.

• Slarivo Feature Problem Cards

  A problem-framing feature section with a badge and serif headline above three animated cards, each showing an icon in a glowing orb with a title and short description.

• Slarivo Grainient Images Section

  Stop flat image grids. Gradient tiles rush toward center on scroll, then the headline lands — a gallery with gravity. Preview live, paste into Cursor: https://design-layer.com/en/components/grainient-images-section — More motion that doesn't look like…

• Slarivo Pricing Card

  A pricing card that highlights a plan with a Popular badge, monthly price, and a feature checklist with a call-to-action button.

• Slarivo Flip Card

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

• Slarivo Stat Card

  A compact KPI card showing a metric value with an icon and a tinted trend badge comparing to a previous period.

• Slarivo Skeleton shimmer

  A Motion profile card that shimmers for 2.5s then swaps to the loaded Follow card, rebuilt from the official AnimateView example using motion/react.

• Slarivo Tilt card

  A pointer-tilted Amsterdam cityscape card with spring rotateX, rotateY, and z, rebuilt from the official Motion example.

• Slarivo Qreatify Super Agent Card

  Qreatify super agent card for project agents, triggers, tools, status and run action.

• Slarivo Card Split Accordion

  An animated card split accordion that smoothly expands to reveal detailed information.

• Slarivo Reshaped Card

  An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection, raised elevation, custom or zero padding for media content, section…