SLARIVO / FORMS

Forms Components

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

• Slarivo Form

  A form wrapper component that simplifies validation and submission with flex column layout and gap between fields.

• Slarivo Form Skeleton

  A loading placeholder skeleton that mimics a form layout with labels, input fields, and a submit button.

• Slarivo Form

  Here is Form component

• Slarivo Morph Surface

  An animated feedback widget that morphs from a compact pill into an expanded textarea form with smooth spring animations and configurable dimensions, labels, and content.

• Slarivo form

  minimalistic register form

• Slarivo Field

  A comprehensive field system with support for labels, descriptions, errors, and complex form layouts.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Popover Form

  Popover Form

• Slarivo Form Fields Skeleton

  Animated shimmer skeleton placeholder for a form layout with labeled input fields, a textarea, and action buttons.

• Slarivo Form

  Minimalistic form layout

• Slarivo Input

  Displays a form input field or a component that looks like an input field.

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Confetti

  Confetti animations are best used to delight your users when something special happens

• Slarivo Multiselect

  multiselect

• Slarivo FlowButton

  FlowButton

• Slarivo Login / Signup

  Here is Login Singup minimalistic cardss

• Slarivo Login / Signup

  Here is Login Singup minimalistic cardss

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Auth Switch

  A modern animated authentication component with Sign In and Sign Up forms, social login icons, and smooth transitions between modes.

• Slarivo Contact 2

  A class contact page with contact details and form.

• Slarivo Form [react-aria-components]

  A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors. The HTML <form> element can be used to build forms. React Aria's Form component extends HTML forms with support for providing server-side validation errors to the fields within it.

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Gaming Login

  A futuristic, gaming-themed NexusGate login UI built with React and TypeScript.

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo Modern & Stunning sign in

  Dark theme modern and stunning sign-in component.

• Slarivo Login 1

  Login form with email and Google login buttons

• Slarivo Full Screen Signup

  Modern and Beautiful full screen Signup form with HextaUI

• Slarivo Liquid Metal Button

  A button with liquid metal animation, metallic glowing borders, and fluid hover effects.

• Slarivo Card

  Displays a card with header, content, and footer.

• Slarivo Label

  Renders an accessible label associated with controls.

• Slarivo Input

  Displays a form input field or a component that looks like an input field.

• Slarivo Textarea

  Displays a form textarea or a component that looks like a textarea.

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Input

  Upgaraded shadcn/ui Input

• Slarivo Accordion

  A vertically stacked set of interactive headings that each reveal a section of content.

• Slarivo Checkbox

  A control that allows the user to toggle between checked and not checked.

• Slarivo Sign In

  sign in log in signin login

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Calendar [React Day Picker]

  Calendar [React Day Picker]

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Tabs

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

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Select

  Enhanced shadcn/ui select

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Sheet

  A flexible React + Tailwind CSS Sheet (Drawer) component built with Radix UI, featuring animated slide-in panels from any side. Perfect for dashboards, modals, mobile menus, and responsive UI layouts.

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Slider

  Enhanced shadcn/ui slider

• Slarivo Radio Group

  A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

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

  Here is Multistep Form component

• Slarivo File Upload

  A minimal file upload form with background grid, drag and drop, and micro interactions.

• Slarivo useAutoResizeTextarea

  A hook that automatically resizes a textarea based on its content

• Slarivo Multiselect

  multiselect

• Slarivo Login / Signup

  Here is Login Singup minimalistic cardss

• Slarivo Login / Signup

  Here is Login Singup minimalistic cardss

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

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Textarea

  Enhanced shadcn/ui textarea

• Slarivo Auth Switch

  A modern animated authentication component with Sign In and Sign Up forms, social login icons, and smooth transitions between modes.

• Slarivo Stepper

  A step-by-step process for users to navigate through a series of steps.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Label

  Upgaraded shadcn/ui label

• Slarivo Modal

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

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Signup Form

  A customizable form built on top of shadcn's input and label, with a touch of framer motion

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo Login & Signup

  Here is Login & Signup component

• Slarivo Clean & Minimal sign in

  Clean and minimal sign in component with form data validation

• Slarivo Calendar

  Displays a calendar from which users can select a date or range of dates.

• Slarivo Animated sign in

  Animated sign in

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Checkbox

  Enhanced checkbox

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Multiple Selector

  Fast, composable, fully-featured multiple selector for React.

• Slarivo Date Field [react-aria-components]

  A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

• Slarivo Select [react-aria-components]

  A Select displays a collapsible list of options and allows a user to select one of them. A select can be built using the <select> and <option> HTML elements, but this is not possible to style consistently cross browser, especially the options. Select helps achieve accessible select components that can be styled as needed without compromising on high quality interactions.

• Slarivo Travel Connect Signin

  This project is "Travel Connect," a modern web application designed for global travelers and digital nomads. It features an elegant login interface with a distinctive world map visualization made of animated dots and route lines.

• Slarivo AuthFuse

  AuthFuse: The All-in-One Animated React Authentication Component AuthFuse is a sleek, all-in-one authentication UI component for React, designed to fuse a seamless user experience with powerful functionality. It provides a complete, visually engaging solution for user sign-in, sign-up, and social logins, all within a single, easy-to-integrate package. Built with Tailwind CSS and Radix UI, AuthFuse is both beautiful and accessible right out of the box. Core Features Fluid Sign-In & Sign-Up: A smooth, single-component interface allows users to toggle between sign-in and sign-up forms without a page refresh. Dynamic Text Animations: Captivate users with an elegant, built-in typewriter effect for quotes and welcome messages, adding a professional, dynamic touch. One-Click Social Logins: Integrated "Continue with Google" button provides users with a fast and secure way to register and log in. Deeply Customizable Visuals: Easily tailor the component to your brand by customizing the display images and quotes for both the sign-in and sign-up experiences. Fully Responsive & Mobile-Ready: Guarantees a flawless user experience on any device, from large desktops to small mobile screens. Enhanced UX Controls: Features a built-in password visibility toggle, improving usability and reducing user friction. Built for Accessibility: Leverages Radix UI primitives to ensure the entire component is WAI-ARIA compliant and accessible to all users. Modern, Developer-Friendly Stack: Built with React, TypeScript, and Tailwind CSS for a type-safe and highly efficient development experience. Usage Integrating AuthFuse is as simple as dropping a single component into your application. It manages its own state for the auth form, allowing you to focus on your application's core logic while providing your users with a polished and intuitive authentication flow.

• Slarivo Morphing Popover

  A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

• Slarivo Morphing Popover

  A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

• Slarivo Login Form

  Login Form and the smokey background effect

• Slarivo Datetime Picker

  A customized datetime picker component.

• Slarivo Checkout Block

  A comprehensive multi-step checkout process with shipping, payment, and order review.

• Slarivo Phone Input

  Here is advanced phone input component

• Slarivo Signup 1

  Signup page with email and Google auth buttons

• Slarivo Label

  Displays a label element with enhanced styling and accessibility features for form controls.

• Slarivo Tags Selector

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

• Slarivo Select

  A comprehensive select component with support for single selection, icons, and animations.

• Slarivo useTextareaResize

  useTextareaResize

• Slarivo Drawer

  A drawer component for React.

• Slarivo Drawer

  A drawer component for React.

• Slarivo Datetime Picker

  A <TimePickerInput /> component built with React and Shadcn UI. - No additional library - Listens to keydown events - Supports arrow navigation - Formats date values - Optimizes mobile keyboard Powered by OpenStatus

• Slarivo Input

  Retrieve text input from a user.

• Slarivo Input

  Retrieve text input from a user.

• Slarivo Input

  Retrieve text input from a user.

• Slarivo Input

  Retrieve text input from a user.

• Slarivo Input

  Retrieve text input from a user.

• Slarivo Sign Up

  Here is Sign Up form

• Slarivo Sign Up

  Here is Sign Up form

• Slarivo Sign Up

  Here is Sign Up form

• Slarivo Popover

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

• Slarivo Multi-Step Form

  Multi-Step Form A responsive and animated container for multi-step forms, providing progress tracking, navigation, and a clean layout. It uses framer-motion for smooth step transitions.

• 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 Input with inner tags

  shadcn/ui input with inner tags

• Slarivo Checkbox

  A customizable checkbox component with smooth animations and multiple states.

• Slarivo Input OTP

  Accessible one-time password component with copy paste functionality.

• Slarivo Choicebox

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

• Slarivo Choicebox

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

• Slarivo Choicebox

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

• Slarivo Sign in

  Sign in flow with shadcn/ui components

• Slarivo Feedback

  Gather text feedback with an associated emotion.

• Slarivo Feedback

  Gather text feedback with an associated emotion.

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Tag Selector

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

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

  Eye catching login experience. Adds motion and shine to your Sign-In UI, drawing user attention instantly. Perfect for modern apps and websites aiming for a lively first impression.

• Slarivo Auth Form

  Grid Auth Form Used While Sign in or Sign up

• Slarivo Form Layout

  Here is Form Layout component

• Slarivo Form Layout

  Here is Form Layout component

• Slarivo Form Layout

  Here is Form Layout component

• Slarivo Form Layout

  Here is Form Layout component

• Slarivo Form Layout

  Here is Form Layout component

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Select

  Display a dropdown list of items.

• Slarivo Floating Panel

  A headless, composable floating panel component

• Slarivo Auth Form

  Auth form with AuthSignIn, AuthSignUp, AuthForgotPassword, AuthResetSuccess.

• Slarivo Login Form

  Here is Login Form component

• Slarivo Login Form

  Here is Login Form component

• Slarivo Login Form

  Here is Login Form component

• Slarivo Sign In Form

  This Sign-In Form component is a sleek and minimal authentication interface built with ShadCN UI and Lucide icons, designed to fit seamlessly into both light and dark themes. It combines traditional email/password login with social login options like Google, Apple, and GitHub, displayed using clean, self-hosted icons for consistent rendering across environments. The layout avoids clutter, presenting inputs and actions in a balanced way that emphasizes usability.

• Slarivo Contact

  Contact Section Description: A comprehensive and visually appealing contact section component featuring an animated background, a navigation bar, a main title, a contact form with various input types, and social media integration. Designed for reusability, responsiveness, and theme-adaptability using shadcn/ui.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Select

  Displays a list of options for the user to pick from—triggered by a button.

• Slarivo Onboarding Form

  Onboarding Form A visually engaging, animated onboarding form with a glassmorphism effect. It includes fields for avatar upload and display name, designed for reusability in any sign-up or profile creation flow.

• Slarivo Sign In

  A simple sign in component

• Slarivo Form

  Here is Form component

• Slarivo Form

  Here is Form component

• Slarivo Form

  Here is Form component

• Slarivo Login

  Auth Form Split Screen This component provides a full-page, two-column layout for user authentication. The left panel contains the form, and the right panel displays a promotional image. It's built to be highly reusable, allowing you to customize the logo, titles, image, and form submission logic via props.

• Slarivo SnappySlider

  SnappySlider is a highly interactive range input component that combines precise value control with intuitive visual feedback. It features: - Snap-to points for accurate value selection - Visual markers for predefined values - Direct numeric input with keyboard controls - Touch and mouse drag support - Customizable step sizes and ranges - Out-of-bounds value indication - Double-click to reset functionality - Prefix/suffix label support

• Slarivo File Upload

  Here is File Upload component

• Slarivo File Upload

  Here is File Upload component

• Slarivo File Upload

  Here is File Upload component

• Slarivo Input Group

  Here is Input Group component

• Slarivo Input Group

  Here is Input Group component

• Slarivo Input Group

  Here is Input Group component

• Slarivo Input Group

  Here is Input Group component

• Slarivo Input Group

  Here is Input Group component

• Slarivo Input Group

  Here is Input Group component

• Slarivo Input Group

  Here is Input Group component

• Slarivo Input

  Here is animated Input component

• Slarivo Custom Checkbox

  The CustomCheckbox component is a versatile and customizable checkbox element designed for React applications. It supports multiple styles, including default, gradient shadow, transformer, and animated variants. Each variant offers unique visual effects, such as gradient shadows or animations, to enhance user interaction. The component utilizes forwardRef for better integration with React's ref system and is styled using Tailwind CSS classes. This component is ideal for creating interactive and visually appealing checkbox elements in modern web applications.

• Slarivo Registration

  here is minimalistic registration page

• Slarivo Multistep Form

  An exceptional multi-step form component that designers will love!

• Slarivo SignUpPage

  This is a signup page with an image on left and the form on right.

• Slarivo Time Field [react-aria-components]

  A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment. A time field can be built using <input type="time">, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. TimeField helps achieve accessible and international time fields that can be styled as needed.

• Slarivo Sign In Block

  A clean sign-in form with email/password authentication and remember me option.

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

  A modern, animated authentication component with a beautiful glass-morphism design. Features include: Toggle between Login and Sign Up modes Form validation with error handling Password visibility toggle Social login options (Google and GitHub) Loading states and smooth animations Success/error message handling Responsive design with mobile support Beautiful background effects and particle animations Built with React, Framer Motion, and Tailwind CSS Component Type: UI Component Tags: authentication login signup modal glass-morphism animation form social-login premium tailwind framer-motion Cover Image Description: The cover image should showcase the component's glass-morphism design with: The main authentication modal with a blurred background The neural network pattern and moving gradient orbs The login form with input fields and social login buttons The premium badge with sparkle animation A dark theme with purple/indigo gradients Video Preview Description: The video should demonstrate: Opening animation of the modal Switching between Login and Sign Up modes Form validation and error states Password visibility toggle Loading states during authentication Success message animations Social login button interactions Background particle animations Hover effects on buttons and inputs Closing animation Technical Requirements: React 16.8+ Framer Motion Tailwind CSS Lucide React icons Usage Example: import { PremiumAuth } from './premium-auth'; function App() { return ( <PremiumAuth onClose={() => { // Handle modal close console.log('Modal closed'); }} /> ); } Features: Authentication: Email/Password login User registration Social login (Google & GitHub) Form validation Error handling UI/UX: Glass morphism effect Animated background Floating particles Smooth transitions Loading states Success/Error messages Responsive Design: Mobile-friendly Adaptive layout Touch-friendly inputs Proper spacing Accessibility: Keyboard navigation ARIA labels Focus management Error announcements Performance: Optimized animations Lazy loading Efficient state management Minimal dependencies This component is perfect for: Premium SaaS applications Modern web applications Authentication flows User onboarding Premium feature access Subscription-based services The component is designed to be: Easy to integrate Highly customizable Well-documented Performance-optimized Accessible Mobile-responsive

• Slarivo Input With Tags

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

• Slarivo Modern Payment Form

  This modern Payment Modal UI component presents a sleek and user-friendly design for selecting payment options. With clear buttons for different payment methods like PayPal, users can quickly initiate their preferred transaction flow. The modal includes styled input fields for billing and card details, enhancing readability and usability. The layout is visually structured to guide users through the payment process step-by-step, offering both form validation and interactive feedback cues.

• Slarivo Popover

  Here is Popover component

• Slarivo Ride Booking Form

  Ride Booking Form This component provides a complete UI for scheduling a ride, including location inputs, date/time selectors, and a call-to-action button. It's designed to be easily integrated into any application requiring a booking interface.

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Field

  Here is Field component

• Slarivo Textarea

  Retrieve multi-line user input.

• Slarivo Textarea

  Retrieve multi-line user input.

• Slarivo Textarea

  Retrieve multi-line user input.

• Slarivo Popover

  A versatile popover component for displaying contextual content, forms, and interactive menus with smooth animations. Features: • Smooth open and close animations • Form handling with textarea • Menu-style interactions • Command palette functionality • Project status displays • Click outside detection • Keyboard navigation • Dark mode support • Custom trigger variants • Flexible content layouts • Compound component pattern • Accessibility features Notes: • Built with Framer Motion for smooth animations • Utilizes React Context for state management • Handles click outside and escape key events • Employs a responsive design with a mobile-first approach • Includes TypeScript support with proper types • Integrates seamlessly with Shadcn UI components • Supports custom styling and theming • Optimized for performance with proper hooks usage

• Slarivo useCharacterLimit

  useCharacterLimit hook

• Slarivo Color Picker

  Here is Color Picker component

• Slarivo Color Picker

  Here is Color Picker component

• Slarivo Date Picker

  This is date picker

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Account Settings

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

• Slarivo Login

  Here is Login component

• Slarivo Login

  Here is Login component

• Slarivo Sign Up BLock

  A complete sign-up form with validation, password strength requirements, and terms acceptance.

• Slarivo Success Login Card

  The Card with Micro-Animations on Success is a polished and configurable login card built with shadcn UI components, designed to provide users with instant, professional feedback. Instead of plain static messages, this card delivers subtle success animations such as a checkmark drawing itself or a smooth background color shift, creating a sense of accomplishment without unnecessary clutter. Developers can pass in customizable props like fields, onChange, onSubmit, and even choose the animationType (checkmark, color-shift, or none) depending on the brand’s tone. By keeping the layout clean and minimal while offering meaningful micro-interactions, this component improves user trust and makes the authentication flow feel more modern and engaging, all while remaining versatile enough to adapt to different applications.

• Slarivo Login page

  Login page with gradient animated background

• Slarivo Popover

  A simple popover for quick user interactions over existing content. It pops up on command, and closes easily with a click outside or on a close button.

• Slarivo Icon Picker

  A Component responsible for making all lucide react icons available for selection and returning the icon name.

• Slarivo login

  Here is minimalistic advanced login page

• Slarivo Create Account Form

  This form component is designed as a clean and modern account creation interface that balances simplicity with professionalism. The use of a card layout with a subtle gradient background makes it feel lightweight and approachable, while the inclusion of icons inside the input fields (name, email, and password) improves readability and usability. The copy has been carefully chosen to guide users in a friendly yet clear manner — with a welcoming title, a concise description of purpose, and an action-driven button ("Get Started"). Additionally, the footer text reinforces trust by highlighting the Terms of Service and Privacy Policy.

• Slarivo Phone Input

  An international phone input component with country selection, smart validation, country-specific placeholders, and visual feedback for global phone numbers.

• Slarivo login

  here is advanced login page

• Slarivo Checkbox

  A control that toggles between two options, checked or unchecked.

• Slarivo Sign In Flo

  A modern sign in flow with animated elements and minimal dependencies

• Slarivo Floating Label

  Here is Floating Label component

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo Input

  Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.

• Slarivo ThreeD Wall Calendar

  The 3D Wall Calendar component transforms a traditional month view into an immersive, interactive 3D wall of days. Each day is represented as a panel, arranged in a grid-like wall, where users can tilt, scroll, or drag to change the perspective. Events appear as floating markers on these panels and can be clicked to reveal details inside neatly styled popovers. Navigation controls allow switching between months, while an inline form lets users add events directly to specific dates. This design not only makes browsing a month visually engaging but also provides a futuristic feel to event management, blending functionality with a dynamic 3D user experience.

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Terms & Conditions

  Here is Terms & Conditions dialog

• Slarivo Terms & Conditions

  Here is Terms & Conditions dialog

• Slarivo Call To Action

  Here is Call To Action component

• Slarivo Password Input

  Here is Password Input component

• Slarivo Password Input

  Here is Password Input component

• Slarivo Password Input

  Here is Password Input component

• Slarivo Password Input

  Here is Password Input component

• Slarivo Password Input

  Here is Password Input component

• Slarivo Password Input

  Here is Password Input component

• Slarivo Input

  GSAP Recreation Of Aceternity UI's Signup Form Components Input Components

• Slarivo Checkout Form

  This CheckoutForm component is a modern, responsive checkout interface built with shadcn UI, Tailwind CSS, and Lucide icons. It presents a clean, card-based layout that guides users through reviewing their order. The component is divided into clear sections: Delivery Address, Billing Method, Discount Code, and Order Total, each visually separated by separators for better readability. Input fields and buttons are styled consistently using shadcn’s Input and Button components, ensuring accessibility and a smooth user experience. The footer displays the total amount and a prominent Place Order button.

• Slarivo Forgot Password

  Here is Forgot Password component

• Slarivo Forgot Password

  Here is Forgot Password component

• Slarivo Animated Modal

  A modal with arc-shaped appear trajectory

• Slarivo Cloud Watch Form

  This Interactive Cartoon Form component is a playful, engaging form built with Next.js, TypeScript, and Shadcn UI. It features a cartoon face whose eyes follow the user’s cursor, creating a sense of interactivity and liveliness. The eyes naturally blink periodically, enhancing the realistic feel of the animation. When the user focuses on the password field, the eyes “close” to mimic privacy, represented by a black line, and reopen once typing is done. The form itself uses Shadcn UI components for inputs, labels, and buttons, and is set against a stylish semi-transparent, blurred background, giving it a modern “glass” effect. This combination of animation and UI design makes filling out the form a fun, visually appealing experience while remaining fully functional.

• Slarivo dropdown 01

  A reusable component for dropdown

• Slarivo signin-page

  A beautifully crafted, production-ready authentication page featuring a split-screen design with form inputs on one side and an animated gradient hero section on the other. This component includes 17+ reusable sub-components, all self-contained in a single file for easy integration.

• Slarivo Reddit Nested Thread Reply

  A responsive and theme-adaptive, Reddit-style nested comment system. It supports voting, replying, collapsing threads, and adding new comments, built with shadcn/ui components.

• Slarivo Author Form Card

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

• Slarivo Newsletter Section

  A customizable newsletter subscription section with a modern design, loading states, and background effects. Features - Customizable title and styling - Built-in form handling and error states - Loading indicators - Animated background effect (optional) - Accessible form inputs - Dark mode support - Responsive design

• Slarivo Input Modal

  Here is Input Modal component

• Slarivo Newsletter Signup

  A customizable newsletter signup form with validation and success message.

• Slarivo Animated Tabs

  Here is animated tabs modern ui component

• Slarivo Textarea

  A multi-line text input field with support for custom styling and states.

• Slarivo Textarea

  A multi-line text input field with support for custom styling and states.

• Slarivo Textarea

  A multi-line text input field with support for custom styling and states.

• Slarivo Textarea

  A multi-line text input field with support for custom styling and states.

• Slarivo Card Studio

  Here is Card component

• Slarivo Checkbox [react-aria-components]

  A Checkbox allows users to select multiple items from a list of individual items, or to mark one individual item as selected. Checkboxes can be built with the <input> HTML element, but this can be difficult to style. Checkbox helps achieve accessible checkboxes that can be styled as needed.

• Slarivo Input

  A versatile input component with support for various states, clear functionality, and validation indicators. Built with shadcn/ui principles and modern design patterns. Features - Input States - Default state - Focus state with ring effect - Error state with validation - Success state with confirmation - Disabled state - Clear functionality - Visual Feedback - Status indicators - Validation messages - Clear button - Focus rings - Smooth transitions

• Slarivo Forgot Password Card

  An accessible Forgot Password Card with email validation using react-hook-form and Zod, featuring a clean input field and clear guidance helping users reset their password or choose alternative recovery methods.

• Slarivo Waitlist

  Here is waitlist ui component

• Slarivo image uploader

  This is a reusable ImageUploadField React component built with Next.js and Tailwind CSS. It allows users to upload and preview an image with optional error display, loading skeleton, aspect ratio control, and size restriction. The component supports both file and URL inputs and provides clear UI feedback for upload state, errors, and removal actions. It’s designed to integrate cleanly with forms and supports customization via props like disabled, error, defaultImage, and maxSize.

• Slarivo Gamified Login Card

  The Gamified Login Card is a playful and interactive login component designed to boost user engagement while maintaining a clean, modern look. Built strictly with shadcn UI components, it features micro-interactions such as input hover scaling and button animations, providing instant visual feedback. On successful login, a confetti animation celebrates the user’s action, while the login text dynamically updates to a welcoming message. Fully responsive and theme-aware, this component works seamlessly in both light and dark modes, offering a fun and rewarding login experience that aligns with apps aiming for a gamified or playful brand identity.

• Slarivo Time picker

  A flexible time picker component with 12-hour format, AM/PM selection, and optional current time button, designed for easy time selection in forms and applications.

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Delivery Scheduler

  Delivery Scheduler This component encapsulates the entire scheduling logic, allowing users to select a date and a time slot. It is highly reusable and can be integrated into any form that requires date and time input. The selection indicator is animated using framer-motion to provide a smooth, fluid user experience.

• Slarivo Password Input

  A secure password input component with strength indicator, visibility toggle, and real-time validation requirements. Features - Password Validation - Strength indicator - Visual requirements checklist - Real-time validation - Custom requirements - Visual Feedback - Strength progress bar - Requirement status icons - Show/hide password toggle - Dark mode support

• Slarivo Selector Chips

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

• Slarivo Textarea

  Displays a multi-line text input field with enhanced features like clearable functionality, auto-resizing, and Zod validation support

• Slarivo Basic Tags Input

  Here is Tags Input component

• Slarivo Basic Tags Input

  Here is Tags Input component

• Slarivo Event Scheduler

  This component is a date scheduling widget built entirely with Shadcn UI. It combines a popover, a calendar picker, and an event list to give users a simple way to plan and manage their schedule. The button serves as a trigger that, when clicked, opens a popover directly below it containing a calendar interface. Users can select a date, and then add events for that day, which are displayed in a clean, card-like layout beneath the picker. Each event also includes a delete option, allowing quick modifications to the schedule.

• Slarivo Dialog

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

• Slarivo Login Card

  Here is Login Card component

• Slarivo Login Card

  Here is Login Card component

• Slarivo Login Card

  Here is Login Card component

• Slarivo Login Card

  Here is Login Card component

• Slarivo Login Card

  Here is Login Card component

• Slarivo Login Card

  Here is Login Card component

• Slarivo ComboBox

  A reusable component for combo-box dropdown

• Slarivo Split Login Card

  The Split Login Card is a modern and professional login component built entirely with shadcn UI. Its layout is split into two sections: the left side features a clean, welcoming message with a subtle gradient background and a centered illustration, creating a friendly yet minimal look, while the right side houses the login form with input fields and a primary action button. Designed for clarity and readability, the card balances whitespace and content, works seamlessly in both light and dark themes, and provides a polished, branded experience that enhances user engagement and trust.

• Slarivo Rating Group

  Here is Rating Group component

• Slarivo Rating Group

  Here is Rating Group component

• Slarivo Editable Components

  Here is Editable Components

• Slarivo Editable Components

  Here is Editable Components

• Slarivo Editable Components

  Here is Editable Components

• Slarivo Editable Components

  Here is Editable Components

• Slarivo Editable Components

  Here is Editable Components

• Slarivo Editable Components

  Here is Editable Components

• Slarivo SignInPage

  Login Page with an image and a form and a continue with google, github option.

• Slarivo Contact Form

  Here is Contact Form component

• Slarivo Contact Form

  Here is Contact Form component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Invite Member Modal

  This provides a clean and user-friendly modal for inviting team members via email, with role selection options for Owner or Member. Ideal for SaaS platforms and business apps managing teams and organizations.

• Slarivo Auth Dialog

  This component is a combined Sign Up and Login modal built with ShadCN UI and React. It allows users to toggle between signing up and logging in without opening separate dialogs, providing a seamless authentication experience. The form dynamically adjusts its fields based on the mode, showing the Full Name input only during Sign Up. The password field includes a show/hide toggle using Lucide Eye and EyeOff icons for better usability. Additional features include a Google sign-in button, responsive layout, and a terms acknowledgment for Sign Up.

• Slarivo Date Time Input

  The DateTimeInput component provides a simple and intuitive way to select both a date and a time within a single interface. Built entirely with shadcn/ui primitives, it combines a popover calendar for picking dates with a sleek time input field, ensuring consistency and accessibility across applications. Its minimal yet functional design makes it easy to integrate into forms, booking systems, scheduling tools, or any feature that requires precise date and time selection. With a live preview of the chosen values, DateTimeInput enhances usability while maintaining a clean, modern UI.

• Slarivo Calendar Date and Time range

  Here is Shadcn Calendar component with Date and Time range picker

• Slarivo Form

  Booking Form Description: A compact and visually polished form for handling travel or accommodation bookings. It features distinct sections for destination, dates, rooms, and guests, with smooth animations powered by Framer Motion. The component is fully responsive and adapts to both light and dark themes using shadcn/ui variables.

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo Radio Group 1

  Here is Radio Group component

• Slarivo NumberField [react-aria-components]

  A NumberField allows users to enter a number, and increment or decrement the value using stepper buttons or the keyboard. Number fields can be built with <input type="number">, but the behavior is very inconsistent across browsers and platforms, it supports limited localized formatting options, and it is challenging to style the stepper buttons. NumberField helps achieve accessible number fields that support internationalized formatting options and can be styled as needed.

• Slarivo Waitlist Form

  Animated and minimal waitlist form with email input and submit button.

• Slarivo Centered Feedback Drawer

  This component is a content-rich drawer that opens from the side, designed to keep the focus on the main content by centering it inside the drawer rather than stretching across the entire width. The layout uses a clean and minimal card-style container, making it ideal for displaying structured information such as profiles, product previews, or quick details without overwhelming the user. Its centered presentation balances space and readability, giving a polished and professional look for modern applications.

• Slarivo Call to Action

  Here is Call to Action component

• Slarivo Call to Action

  Here is Call to Action component

• Slarivo QR Code

  QR Code Generator

• Slarivo Authentication Card

  A responsive Authentication Card component. Clean, accessible, and easy to integrate into authentication flows.

• 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 Password update Block

  Secure password update form with validation and confirmation fields.

• Slarivo Calendar input

  Here is calendar input with date picker

• Slarivo Team Invite

  A modern team invitation and member management component with permission controls

• Slarivo CreateWorkspaceModal

  A clean and intuitive workspace creation modal with input fields, slug preview, and action button. Ideal for SaaS apps, team collaboration tools, and project management dashboards.

• Slarivo Currency Exchange Card

  Currency Exchange Card This component provides a complete interface for currency conversion, including selectors, amount input, fee calculations, and a swap animation. It's built to be highly reusable by accepting currency data and exchange logic via props.

• Slarivo Rating Scale Group

  This Rating Scale Group component presents a clean, survey-style alternative to traditional star ratings. Instead of icons, it uses a row of numbered boxes (1–10) that users can click to indicate their level of satisfaction or feedback. Each option is styled like a small button with hover and focus effects, making the interaction feel responsive and intuitive. When selected, the active number is highlighted with accent colors and a glowing green dot in the corner, providing a clear visual confirmation. This design mimics the familiar Net Promoter Score (NPS) format, making it ideal for customer satisfaction surveys, user experience feedback forms, or any context where you want to capture ratings in a structured, easy-to-read scale.

• Slarivo Combobox

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

• Slarivo Radix Checkbox

  A control that allows the user to toggle between checked and not checked.

• Slarivo Pin Input

  Here is Pin Input component

• Slarivo Pin Input

  Here is Pin Input component

• Slarivo Pin Input

  Here is Pin Input component

• Slarivo Pin Input

  Here is Pin Input component

• Slarivo Pin Input

  Here is Pin Input component

• Slarivo Reset Password Form

  Reset Password Form A multi-step form component that guides users through verifying a code and setting a new password, complete with real-time validation and smooth animations.

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Select

  Select dropdown built on Radix UI with support for groups, labels, and separators.

• Slarivo Select

  Select dropdown built on Radix UI with support for groups, labels, and separators.

• Slarivo Password Input

  Here is modern Password Input

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo TeamInviteDialog

  This component is a modern Team Invite Dialog that allows users to quickly invite multiple team members via email or a magic link. Each member can be assigned a specific role (like Member, Admin, or Viewer) using a clean, card-style input layout. The interface is compact, responsive, and visually engaging, with interactive features such as dynamic addition of email fields, tooltips, and visual feedback when the invite link is copied. It provides an efficient and user-friendly way to manage team invitations within a web application.

• Slarivo CreditCardForm

  Lightweight, fully controlled card form with live number/holder/expiry/CVV rendering, CVV back-face flip, and built-in validation. Customizable accent rings and layout.

• Slarivo Form

  Building forms with React Hook Form and Zod schema validation.

• Slarivo File Upload

  here is minimalistic file upload component

• Slarivo Input OTP

  A flexible and accessible one-time password input component with customizable slots, patterns, and animations.

• Slarivo Number Field

  Here is Number Field component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Text Field [react-aria-components]

  A text field allows a user to enter a plain text value with a keyboard. Text fields can be built with <input> or <textarea> and <label> elements, but you must manually ensure that they are semantically connected via ids for accessibility. TextField helps automate this, and handle other accessibility features while allowing for custom styling.

• Slarivo Minimal Payment Modal

  This component is a minimal and responsive payment modal that allows users to select a subscription plan and enter their card details to complete the payment. The selected plan dynamically updates the payment amount displayed on the submit button. It includes optional coupon code input, clean single-column input fields for cardholder name, card number, expiry, and CVC, and a compact design that works well on both desktop and mobile. The component emphasizes simplicity, clarity, and ease of use while keeping all essential payment interactions within a single dialog.

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Text Area

  Here is Textarea component

• Slarivo Signup

  Here is advanced signup page

• Slarivo Select

  Here is Select component

• Slarivo News letter Form

  This component is a modern newsletter subscription form built with ShadCN UI and Tailwind CSS, designed for both light and dark themes. It uses a Card layout to encapsulate the form, providing a clean and focused interface. Users can enter their email address in a styled input field, and submit it via a prominent, full-width button. Upon submission, the form displays a friendly success message with a celebratory emoji, confirming that the user has been added to the mailing list. The component is responsive, accessible, and reusable, making it ideal for integrating into websites or applications that want a polished and user-friendly subscription experience.

• Slarivo Input With Feedback

  My InputWithFeedback component. I use it for a lot of forms.

• Slarivo Comments

  A fully functional comment system component with support for replies, user avatars, and animated UI using framer-motion. It includes individual cards for comments and replies, shows how long ago each was posted, and allows the current user to delete their own entries. A form at the bottom handles new comment or reply submission, and a skeleton loader appears while replies are loading—giving it a polished, interactive feel for blogs, posts, or discussion threads.

• Slarivo Signature Pad

  Here is Signature Pad component

• Slarivo Signature Pad

  Here is Signature Pad component

• Slarivo Signature Pad

  Here is Signature Pad component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Select

  Here is Select component

• Slarivo Glass Checkout Card

  Glassmorphism checkout card with payment method selector and input fields

• Slarivo Switch

  Toggle switch component built on Radix UI with smooth animation and focus states.

• Slarivo Payment Card

  The form includes proper validation, formatting, and a smooth 3D flip animation when entering the CVV code. Try typing different card numbers to see the card type detection in action!

• Slarivo Login Card

  The Login with Background Animation component is a modern, premium login interface built entirely with shadcn UI components. It features a dynamic animated gradient background paired with subtle floating particles, creating depth and a visually engaging experience without overwhelming the user. The login card itself remains clean and focused, containing email and password inputs along with a primary action button, all fully responsive and theme-aware for light and dark modes. This design enhances the perceived quality of the application, making it ideal for SaaS platforms, dashboards, or any modern web product that wants to impress users from the first interaction.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Field

  A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

• Slarivo Select

  Display a dropdown list of items. A recreation of Vercel's Geist design system.

• Slarivo Info Dialog

  Here is info filling dialog page

• Slarivo Calendar Date Picker

  Here is shadcn calendar with date picker

• Slarivo Calendar picker in a drawer

  Here is Shadcn Calendar picker in a drawer

• Slarivo Radio

  A customizable radio group component with smooth animations and flexible layouts

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Text Field Basic

  Here is Text Field component

• Slarivo Bottom Drawers

  This component is a set of bottom-sliding drawers, each triggered by a separate button and containing different content such as a newsletter signup, feedback form, or contact form. The layout keeps the content compact and centered, making it easy for users to focus on the inputs and actions without distractions. By stacking the buttons and organizing the drawers consistently, it provides a clean, user-friendly interface for quick interactions and data collection.

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Animated Select

  Animated select component made using framer-motion

• Slarivo upload

  A minimalistic upload form

• Slarivo MultiSelect

  Use the MultiSelect component to fulfill your requirement.

• Slarivo Contact Support Block

  A block for contacting support with status tracking.

• Slarivo Morph Button

  Here is Morph Button components

• Slarivo Checkbox Group

  Provides shared state for a series of checkboxes. Styled wrapper for CheckboxGroup from Base UI with support for parent checkboxes, indeterminate state, and nested groups.

• Slarivo Checkbox Group

  Provides shared state for a series of checkboxes. Styled wrapper for CheckboxGroup from Base UI with support for parent checkboxes, indeterminate state, and nested groups.

• Slarivo Password Input

  Here is simple minimalistic password input

• Slarivo Multi Selector

  Here is advanced multi selector component

• Slarivo Extended Select

  A dropdown select component built on top of Radix UI Select primitive. Supports multiple variants, icons, and custom styling. Features - Multiple variants (default, filled, flushed, dashed) - Custom trigger icons - Error state handling - Helper text support - Scrollable content - Custom item indicators - Keyboard navigation - Accessible by default - Customizable animations - Dark mode compatible

• Slarivo Tag Input

  Here is tag input component

• Slarivo Feedback Card

  Here is Feedback card

• Slarivo Link Shortner

  A sleek link shortner component with transform animations

• Slarivo Time Picker

  This is a sleek, minimal black-and-white time picker with a floating label and clock icon. It features separate dropdowns for hours and minutes with step-5 intervals, providing fast and user-friendly selection in both light and dark themes.

• Slarivo Animated Form

  Here is Animated Form component

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Base Input

  Displays a form input field, input groups, number input spinners, etc.

• Slarivo Feedback Widget

  Feedback Widget Description: An interactive UI component for collecting user feedback. It allows users to give a quick "helpful" or "not-helpful" rating, provide an optional detailed comment, and submit their response. The component features smooth entry, exit, and state-change animations.

• Slarivo Calendar day picker

  Here is shadcn calendar component with day picker

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Number Input

  Here is Number Input component

• Slarivo Onboarding

  Onboarding Card A visually engaging, animated card component for user onboarding flows. It includes fields for profile picture upload and username entry, designed to be easily integrated into any welcome or setup screen.

• Slarivo Login 2

  Login with form and buttons

• Slarivo Form

  A form wrapper component that simplifies validation and submission with flex column layout and gap between fields.

• Slarivo Checkbox

  Neobrutalism-styled checkbox component.

• Slarivo Dialog Info

  Here is dialog information filling component

• Slarivo Form

  Here is advanced form layout

• Slarivo Select

  A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.

• Slarivo Number Pad

  A customizable number pad component for entering numeric values, supporting various formats like currency, phone, decimal, integer, percentage, pin, and time. Features both button-based and keyboard input with type-specific validation and formatting.

• Slarivo Basic Slider

  Here is Slider component

• Slarivo Input With Select

  ChatGPT said: This InputWithSelect component is a reusable form element built with shadcn/ui that combines a numeric/text input and a dropdown select in a single, styled container. Unlike the default number input, it uses Lucide icons for increment and decrement controls, giving a modern, customizable look.

• Slarivo Url Input

  This component is a smart URL input field that enhances the user experience by automatically displaying the website’s favicon next to the entered address. As the user types or pastes a URL, the component detects the domain, fetches its favicon, and shows it inline inside the input box. If the favicon isn’t available, it falls back to a clean Lucide Globe icon, ensuring a polished look. By combining shadcn/ui inputs with dynamic favicon fetching, this component makes forms feel more interactive and visually informative.

• Slarivo Floating Input

  This component is a modern floating-label input designed for clean, user-friendly forms. It features an icon on the left, which can represent the type of input (like email, username, or password), and a label that smoothly floats above the field when focused or filled, eliminating the need for a traditional placeholder. The input automatically adjusts padding so that typed text never overlaps the icon or label.

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Select

  A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.

• Slarivo Select

  A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.

• Slarivo Select

  A select menu for choosing a single option from a list, built on Base UI.

• Slarivo Edit Profile

  Dialog box used to edit profile of a user

• Slarivo Newsletter

  Here is Newsletter component

• Slarivo Tags Select

  A Component to select tags, simple and stylish

• Slarivo Dialog

  A pop-up layered above the application window or dialog, which makes the background content inert.

• Slarivo Multiple Form

  Features Progress Indicator: Visual steps tracker with completed, current, and pending steps Form Validation: Client-side validation with clear error messages Smooth Animations: Page transitions using Framer Motion Responsive Design: Fully responsive layout that works on all screen sizes Dark Mode Support: Styling that adapts to both light and dark modes Accessibility: Proper labeling and semantic HTML for screen readers Modern UI: Clean design with Tailwind CSS styling Step Navigation: Move forward/backward between form steps Data Review: Final step to review all entered information Success State: Completion confirmation with next steps Dependencies React Tailwind CSS Framer Motion (for animations) This multi-step form component demonstrates modern React patterns and Tailwind styling techniques, creating an engaging and user-friendly form experience.

• Slarivo Password Reset Block

  Password reset flow with email input and success confirmation state.

• Slarivo ChronoSelect

  The ChronoSelect component is a modern, shadcn-inspired date selection tool that combines accessibility, flexibility, and a clean design. Unlike traditional date pickers, ChronoSelect includes a built-in year selector alongside the calendar view, allowing users to jump across decades without tedious navigation. Its interface uses shadcn primitives like Popover, Select, and Calendar to ensure consistency across your UI, while providing customization options such as adjustable year ranges and placeholder text. With pill-shaped interactions, smooth transitions, and responsive layout, ChronoSelect feels both elegant and practical—ideal for forms, dashboards, booking systems, or any application where quick and intuitive date selection is essential.

• Slarivo Textarea with floating label

  Here is textarea with floating label component

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Textarea

  A native textarea element with custom size options.

• Slarivo Radio

  Provides single user input from a selection of options.

• Slarivo Radio

  Provides single user input from a selection of options.

• Slarivo Radio

  Provides single user input from a selection of options.

• Slarivo Radio

  Provides single user input from a selection of options.

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Radio button

  Radio button animated

• Slarivo OTP Input

  This component is a modern, highly interactive OTP input designed for a smooth and intuitive user experience. Each slot automatically focuses as the user types, and supports backspace navigation, so editing is effortless. Users can also paste the full OTP, which fills the inputs automatically. Completed slots are visually highlighted, and an optional separator can be added for better readability.

• Slarivo Step Card

  The Professional Step Card is a clean, enterprise-ready multi-step form component built strictly with shadcn UI components. It guides users through sequential steps—like Email → Password → 2FA—using subtle slide transitions that maintain a polished and professional look. Fully compatible with both light and dark themes, it includes Back/Next navigation and supports easy integration via an onComplete callback. Designed for real-world use, this component can be reused across login flows, onboarding processes, or any multi-step form without unnecessary animations or playful effects, ensuring a smooth and efficient user experience.

• Slarivo checkbox 02

  A reusable component for a checkbox

• Slarivo Checkbox Group

  A checkbox group with proximity hover, animated checkmarks, contiguous selection merging, and spring transitions. Built on Radix UI with Framer Motion.

• Slarivo Date Time Input

  Date Time Input Component (Day, Month, Year, Hour, Minute) just like React Aria, unfortunately, i have not yet added Localize Datetime yet. Fully integrated keyboard support

• Slarivo Upload Advanced

  Here is detailed upload component

• Slarivo Dialog box

  Make changes to your profile here. Click save when you're done. These match the style and intent of your previous dialog and are clear, concise, and user-friendly. If you want a more personalized or detailed version, let me know your preferences!

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Sheet

  Extends the Dialog component to display content that complements the main content of the screen.

• Slarivo Mail Checker Input

  This component is a modern email input field that dynamically shows a profile avatar (via Gravatar) as the user types their email. If no valid email is entered, it displays a placeholder, making the form feel more interactive and personalized.

• Slarivo Correct Number Input

  This is a sleek, minimal number input with custom chevron buttons and a floating label. It hides the browser’s default arrows, keeps the label clean, and ensures 0 doesn’t overlap, working seamlessly in both light and dark themes.

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Radio Group

  Here is Radio Group component

• Slarivo Modern Card Input

  This is a modern, reusable credit card input component designed for a smooth and intuitive user experience. It features dynamic card brand detection, displaying the appropriate card logo as the user types. Each field—card number, expiry, and CVC—has floating labels and focus highlights, ensuring clarity and accessibility. The component also supports an optional card preview for a quick glance at the detected card type. With built-in onChange callbacks, it is highly reusable and can easily integrate into any payment form.

• Slarivo Sign In Card

  This SignInCard component is a modern, theme-aware login interface built with Shadcn UI and Tailwind CSS. It closely mirrors Microsoft’s official sign-in design, featuring the authentic Microsoft logo, a clean header, an input field for email or username, and action links for account creation or password recovery. The footer provides clear navigation with Back and Next buttons, styled for accessibility in both light and dark modes. Its responsive, card-based layout makes it suitable for authentication flows in SaaS platforms, enterprise apps, and portals where a familiar, professional sign-in experience enhances user trust and usability.

• Slarivo Redeem

  RedeemDialog A modal dialog that allows users to enter and submit a redemption code. It features a loading state for asynchronous validation and uses framer-motion for a subtle entry animation on the visual card element.

• Slarivo Two-Factor Authentication Block

  6-digit code input for two-factor authentication with auto-focus and paste support.

• Slarivo Social Authentication Block

  Social authentication configured for auth flow with different messaging.

• Slarivo Behavioral History Select

  The Behavioral History Select is a smart, user-adaptive dropdown component built with shadcn UI that enhances the standard select experience by remembering user behavior. It dynamically tracks recently and frequently selected items, displaying them at the top of the list with visual indicators like badges or counts, allowing users to quickly access their most used choices. The component persists selection history via localStorage, making it adaptive across sessions, and its configurable fixed width ensures a stable, professional layout. With distinct sections for recent selections and other options, optional frequency markers, and a clean, modern interface, it’s highly reusable in forms, dashboards, multi-step workflows, and design systems—turning a simple dropdown into an intelligent, interactive, and visually informative selection tool.

• Slarivo Input

  Neobrutalism-styled input component.

• Slarivo Checkbox Group

  Here is Checkbox Group component

• Slarivo Checkbox Group

  Here is Checkbox Group component

• Slarivo File Trigger

  Here is File Trigger component

• Slarivo Drawer Inner Content

  This component demonstrates a reusable drawer system that can slide in from any direction — top, right, bottom, or left. Instead of duplicating content for each drawer, a shared DrawerInnerContent component is created and reused across all four drawers. The content includes a newsletter signup form with an email input, a subscribe button, and a cancel button. This approach keeps the code clean, consistent, and easy to maintain, while providing users with a flexible way to interact with drawers from different sides of the screen.

• Slarivo Animated Input

  Here is Animated Input component

• Slarivo MultiState Morph Button

  The Multi-State Morphing Button is a highly interactive and practical component built with shadcn UI. Unlike a standard submit button, it provides clear visual feedback for multiple states—idle, loading, success, and error—making it ideal for real-world applications like forms, payments, or approvals. The button morphs smoothly between shapes, transitioning from a rectangle to a circle on success or error, while animated icons and spinners indicate the current state. Fully configurable in terms of colors, labels, and size, it enhances user experience by giving immediate, intuitive feedback, all while maintaining a clean, modern, and reusable design.

• Slarivo Newsletter Card

  Newsletter Card A visually polished and accessible newsletter sign-up form. It features a distinct, theme-aware color palette and subtle animations on focus and hover to enhance user experience.

• Slarivo Otp Input

  Here is Otp Input component

• Slarivo Feedback Textarea

  Here is feedback textarea component

• Slarivo Required Textarea

  Here is required textarea component

• Slarivo Textarea with button

  Here is textarea with button component

• Slarivo Radio Group Colors Demo

  Here is radio croup colors component

• Slarivo Radio Group Dashed Demo

  Here is radio group dashed ccomponent

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo Question Tool

  Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.

• Slarivo 8-bit Select

  Pixel-art select dropdown from 8bitcn — retro pixel border on the trigger and the floating panel, with Press Start 2P typography. Wraps Radix Select for full keyboard and accessibility support.

• Slarivo FileUpload

  File Upload Design

• Slarivo 3d Wrapper

  Here is 3d Wrapper component

• Slarivo User Feedback Block

  Collects user feedback on the help/support experience with multiple input types.

• Slarivo Advanced File Upload

  This React component provides a robust and versatile file upload experience, enhancing user interaction with features like drag-and-drop, file validation (size and type), and clear visual feedback. It addresses the common need for controlled file uploads in web applications, ensuring a smooth and user-friendly process. The component works by utilizing React's useState and useRef hooks to manage file state, drag-and-drop interactions, and error handling. It leverages a controlled input element for file selection and employs event handlers to manage file uploads and removals. Files are validated against specified size and type constraints, providing informative error messages to the user. The component also generates unique IDs for each uploaded file, allowing for easy tracking and management. A visual representation of the selected files is displayed, including file icons, names, sizes, and a remove button for each file. Furthermore, the component supports single or multiple file uploads and provides customizable options for accepted file types, maximum file size, and component styling through props. The process begins with the user either clicking the upload area or dragging and dropping files into it. The component then validates the file(s), adding valid files to the state and displaying any errors. The user can remove files individually and the component cleanly removes preview URLs to prevent memory leaks. Use cases include e-commerce platforms (product image uploads), content management systems (document uploads), and any application requiring controlled file uploads with validation. The customizable nature of the component allows seamless integration into various applications. For example, you can restrict uploads to image files only, limit the file size to 10MB, and disable the upload functionality based on application state. Key technologies used include React's functional components, useState and useRef hooks, and useCallback for performance optimization. The component uses a custom function to format file sizes for better readability and another to determine the appropriate file icon based on file type. In addition, it provides callback functions (`onFilesSelect`, `onFilesRemove`) to allow the parent component to handle the selected or updated files. This allows for flexibility in how the uploaded files are processed and utilized. The demo showcases custom styling with color variables and dark mode support.

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo Flexnative Select

  A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo Login

  here is minimalistic login pag

• Slarivo Drawer

  A drawer component for React.

• Slarivo Input

  Here is Input component

• Slarivo Input

  Here is Input component

• Slarivo Input

  Here is Input component

• Slarivo Input

  Here is Input component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox Card

  Here is Checkbox Card component

• Slarivo Checkbox Group

  Here is Checkbox Group component

• Slarivo Checkbox Group

  Here is Checkbox Group component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Social Auth Card

  The Social Auth First Card is a modern onboarding component built entirely with shadcn UI. It prioritizes social login buttons at the top—Google, GitHub, and LinkedIn—making it quick and easy for users to sign in. Below the social options, an optional traditional login form provides a fallback for email/password authentication. A subtle divider with “or” clearly separates the two sections, maintaining a clean and organized layout. Fully responsive and theme-aware, this card enhances the user experience with a friendly, branded look while supporting both light and dark modes, making it ideal for fast and seamless onboarding.

• Slarivo Origami Fold Out Calendar

  The Origami Fold-Out Calendar is an interactive event tracker that combines creativity with utility. Each day of the selected month is displayed as a foldable accordion item, resembling origami sheets that unfold to reveal details. Users can scroll through the month, add events with a title and date, and see them neatly organized under the corresponding day. When expanded, each day shows its scheduled events, which can be removed with a single click. The month dynamically adjusts to display the correct number of days—28, 29, 30, or 31—based on the selected month and year. This design not only provides a visually engaging way to view schedules but also makes it easy to navigate across months, offering both practicality and a playful “fold-out” aesthetic.

• Slarivo Identity Verification Dialog

  This IdentityVerificationDialog component is a polished, enterprise-grade dialog that presents identity verification in a structured and trustworthy way. The centerpiece is a virtual identity card, styled like a real card with a masked ID, name, and validity date, giving users a sense of formality and security. Unlike simple stacked dialogs, this layout uses a two-column design: the card is showcased on the left as the visual anchor, while the right side contains the verification form with clear instructions, a secure PIN input, and action buttons. Built with shadcn/ui and enhanced by Framer Motion animations, the component feels modern, professional, and smooth in interaction. It’s an ideal fit for fintech, enterprise security, onboarding, and KYC workflows, where building user trust and delivering a premium verification experience is essential.

• Slarivo Label Input

  Input field with floating label and password visibility toggle.

• Slarivo Field

  A comprehensive field system with support for labels, descriptions, errors, and complex form layouts.

• Slarivo Field

  A comprehensive field system with support for labels, descriptions, errors, and complex form layouts.

• Slarivo 8-bit Login Form

  Login form card with email and password fields, plus Google sign-in, built in the retro 8-bit pixel style.

• Slarivo Radio

  Here is Radio component

• Slarivo Time With Icon

  This component is a dynamic time input designed for modern, intuitive forms. It features a left-aligned icon that visually represents the time of day: a sun for daytime hours, a moon for nighttime, and a clock as a default when no time is set. The icon updates automatically as the user selects a time, providing immediate visual feedback. Built with shadcn/ui’s Input and Label, it maintains clean spacing and alignment.

• Slarivo Priority Pyramid Calendar

  The Priority Pyramid Calendar is a visually intuitive event management component built with Shadcn UI, designed to help users organize and prioritize their schedules efficiently. Events are stacked in a pyramid-like layout for each day, with larger blocks representing higher-priority tasks, making it easy to identify critical items at a glance. Users can add events with a selected date and priority using an interactive form that includes Shadcn UI inputs, calendar popovers, and priority selectors. The calendar supports multiple overview modes, allowing users to view events for a single month, three months, six months, or all events at once. The layout is compact and scrollable, ensuring that even days with numerous events remain readable, and the design adapts seamlessly to both light and dark themes. This component combines clarity, functionality, and aesthetic appeal, making it ideal for event-heavy schedules where prioritization is key.

• Slarivo Audio Show Creator

  Audio Show Creator A comprehensive UI component for creating and configuring an audio show from a document. It features options for format, voice selection, engine, and quality, all wrapped in a clean, modal-like card. It uses framer-motion for a smooth entry animation.

• Slarivo Input OTPs

  Here is Input OTP component

• Slarivo Input OTPs

  Here is Input OTP component

• Slarivo Input OTPs

  Here is Input OTP component

• Slarivo Input OTPs

  Here is Input OTP component

• Slarivo Input OTPs

  Here is Input OTP component

• Slarivo Input OTPs

  Here is Input OTP component

• Slarivo Input OTPs

  Here is Input OTP component

• Slarivo Auto growing textarea

  Here is auto growing textarea component

• Slarivo Checkbox

  A control allowing the user to toggle between checked and not checked.

• Slarivo Checkbox

  A control allowing the user to toggle between checked and not checked.

• Slarivo Checkbox

  A control allowing the user to toggle between checked and not checked.

• Slarivo Checkbox

  A control allowing the user to toggle between checked and not checked.

• Slarivo Checkbox

  A control allowing the user to toggle between checked and not checked.

• Slarivo 8-bit Login Form with Icons

  An 8-bit retro login form with Apple and Google social login buttons, email and password fields, and a pixel-styled card.

• Slarivo Sign Up 2

  A centered sign-up card with email signup, social login buttons for Google and GitHub, and a link to an existing account.

• Slarivo Cromia Channels

  Individual editable hue, saturation, brightness, and alpha sliders built with Cromia headless color picker primitives.

• Slarivo Calendar language date picker

  Here is Shadcn Calendar with date picker

• Slarivo Textarea with icon

  Here is textarea with icon component

• Slarivo Radio Group Animated

  Here is radio group animated component

• Slarivo Radio Group List

  Radio Groups component from the 21st.dev community.

• Slarivo Interfaces Checkbox

  Checkbox component with checked, disabled, and combined states.

• Slarivo Interfaces Checkbox

  Checkbox component with checked, disabled, and combined states.

• Slarivo Interfaces Checkbox

  Checkbox component with checked, disabled, and combined states.

• Slarivo Textarea

  Multi-line text input component with auto-sizing and validation states.

• Slarivo Textarea

  Multi-line text input component with auto-sizing and validation states.

• Slarivo Flexnative Tabs

  Additional tab patterns from the Flexnative UI registry, companion to flexnative-tabs: an account/password settings form in a card, vertical icon-with-title triggers, and a compact icon-only view switcher. Same tabs primitive (no Radix dependency).

• Slarivo Newsletter Band

  A full-width horizontal newsletter band with a branding label, heading, and subtext on the left, and an inline email input with a subscribe button, consent checkbox, and privacy note on the right.

• Slarivo Password Input

  Here is advanced password input with hover

• Slarivo Checkbox

  A control that allows the user to toggle between checked and not checked.

• Slarivo Checkbox

  A control that allows the user to toggle between checked and not checked.

• Slarivo newsletter signup

  This is news letter signup

• Slarivo Listbox

  Here is Listbox component

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo Field Components

  Here is Field Components

• Slarivo News letter

  This NewsletterCard component is a reusable UI block built with Shadcn UI and Tailwind CSS that allows users to subscribe to a newsletter. It features a responsive card layout with a gradient background that adapts to both light and dark themes. Inside, it includes a title, description, email input field, and a subscribe button. The design ensures accessibility with good color contrast, rounded corners, and spacing for readability.

• Slarivo Daily Timeline Scheduler

  This enhanced Flexible DateTime Scheduler component is designed with shadcn UI to provide a highly customizable and practical user experience. Unlike traditional date-time pickers, it accepts props to allow external control of the selected date, time, and label, making it more reusable across different applications. The component combines a popover-based calendar for intuitive date selection with dropdowns for choosing hours, minutes, and AM/PM values, ensuring precise time scheduling. Developers can easily integrate it into booking systems, event schedulers, or task planners, while also passing initial values and handling changes externally for better state management. Its modular design, prop-driven flexibility, and clean UI make it a unique, developer-friendly, and user-centric solution for handling date and time inputs in modern React projects.

• Slarivo Flight Search

  Flight Search – Effortless trip planning with clear routes, dates, and passenger details. One tap to find the best flights

• Slarivo OTP Input Component

  This code implements a reusable React component for OTP (One-Time Password) input. It addresses the common need for a user-friendly and secure way to input OTPs in web applications. The component enhances the user experience by automatically focusing on the next input field after a digit is entered, handling backspace and arrow key navigation, and preventing non-numeric input. It also provides features for handling paste actions, managing disabled states, and displaying error messages. The OTP input component uses React's useState and useRef hooks for managing component state and DOM references. The useEffect hook ensures that the number of input fields dynamically adjusts based on the 'length' prop. The component accepts several props to customize its behavior and appearance: * `length`: Determines the number of digits in the OTP (defaults to 6). * `onComplete`: A callback function executed when the OTP is complete. * `onValueChange`: A callback function triggered whenever the OTP value changes. * `disabled`: A boolean prop to disable the input fields. * `error`: A boolean prop to indicate an error state. * `errorMessage`: A string prop to display a custom error message. * `className`: A string prop for adding custom CSS classes. The component works by creating an array of input fields using the map function. Each input field is assigned a unique key and a reference using useRef. Event handlers (onChange, onKeyDown, onPaste) manage user input, ensuring only numbers are accepted and automatically moving focus to the next input field. The component also includes input validation, preventing incorrect input and providing feedback to the user. Backspace functionality is implemented to allow users to easily correct mistakes. The `onComplete` callback is called once all input fields are filled and the complete OTP is passed to it. Example Scenarios: * Two-factor authentication: Secure user login by requiring an OTP sent to their email or phone. * Account verification: Verifying user accounts during the signup process. * Password reset: Allowing users to reset their passwords using an OTP. This component is highly customizable and can be easily integrated into any React application to create a more user-friendly OTP input experience.

• Slarivo Book A Demo 4

  Book A Demo 4 with logos and form

• Slarivo Collapsible

  Collapsible

• Slarivo Textarea with characters left

  Here is textarea with characters left component

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo DatePicker

  Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

• Slarivo Card

  Displays a card with header, content, and footer. Groups related content and actions into a bordered surface, with polymorphic sub-parts (header, title, description, action, panel, footer).

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

• Slarivo SMS Code Two-Factor Setup

  A compact card for enabling SMS-based two-factor authentication by collecting a phone number to send verification codes to.

• Slarivo Sign In Split Screen

  A split-screen sign-in card with a branded gradient panel, social login, and email/password form.

• Slarivo Sign up Form

  A modern demo/template sign up form.

• Slarivo indevuiSheet

  Here is modern sheet component by indevui

• Slarivo Accordion

  Here is Accordion component

• Slarivo Dropdown Menu

  Here is Dropdown Menu component

• Slarivo MultiStep Button

  The Multi-Step Button is a shadcn/ui component that guides users through a sequence of actions by updating its label at each step. It’s perfect for multi-stage processes such as forms, onboarding flows, or confirmations, clearly indicating progress with labels like “Step 1: Fill Info → Step 2: Confirm → Step 3: Done.” The button supports configurable sizes (sm, md, lg) and seamlessly handles clicks to advance through steps, offering an intuitive and visually clear user experience. Its design leverages shadcn/ui primitives, ensuring accessibility, smooth transitions, and a modern, cohesive look in any interface.

• Slarivo Credit Card Dialog

  This CreditCardDialog component is a sleek, professional dialog built with shadcn/ui that simulates the look and feel of a modern virtual credit card. The centerpiece is a visually rich card element styled with a gradient background, chip detail, masked card number, cardholder name, and expiry date — giving it an authentic credit card aesthetic. The dialog is designed for scenarios where a user needs to activate or authenticate a digital card by entering an activation code. Smooth animations powered by Framer Motion enhance the experience, while the input and action buttons are clearly separated in a structured layout. This makes the component ideal for fintech dashboards, virtual banking apps, or SaaS platforms where a polished, trust-inspiring credit card UI is needed. It balances functionality and design, providing both an engaging user experience and a practical flow for secure actions like card activation.

• Slarivo Newsletter Dialog

  Newsletter Dialog A promotional dialog component designed to capture user sign-ups for a newsletter. It features a prominent image, customizable text sections, an email input field, and a call-to-action button, all wrapped in an animated, accessible modal.

• Slarivo 8-bit Textarea

  Pixel-art textarea from 8bitcn.com — wraps shadcn/ui Textarea with hard-edge pixel borders and Press Start 2P retro font.

• Slarivo Card

  Flexible container component for grouping related content and actions.

• Slarivo Beui Checkbox

  Forms component from the 21st.dev community.

• Slarivo Reshaped Autocomplete

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

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Checkbox

  Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrolled modes, and a CheckboxGroup compound for selecting multiple values with any layout, including card-based composition.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Select

  Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo Checkbox

  Here is checkbox base component of indevui

• Slarivo indevInputui

  Here is modern input component from idevui

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo Checkbox

  Here is Checkbox component

• Slarivo New checkbox

  This is a checkbox component

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo DateRangePicker

  Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.

• Slarivo Input

  Primitive single-line text input that accepts standard HTML attributes.

• Slarivo Input

  Primitive single-line text input that accepts standard HTML attributes.

• Slarivo Input

  Primitive single-line text input that accepts standard HTML attributes.

• Slarivo Input

  Primitive single-line text input that accepts standard HTML attributes.

• Slarivo Input

  Primitive single-line text input that accepts standard HTML attributes.

• Slarivo Input

  Primitive single-line text input that accepts standard HTML attributes.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo Text Area

  Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea plus @heroui/styles.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• 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 Animated File Upload

  A drag-and-drop file upload dropzone with animated states, file list, size validation, and remove controls.

• Slarivo File Upload with Preview

  A file upload card with a drag-and-drop dropzone, image preview, upload progress bars, and a project details form.

• Slarivo File Upload Multi-File Dropzone

  A multi-file upload card with a drag-and-drop dropzone, bucket name and visibility fields, and a removable list of selected files.

• Slarivo Password Strength Meter

  A password field with a live strength meter that scores complexity and shows a colored progress bar with a strength label.

• Slarivo Login Page 2

  A centered card login page with email and password fields, social sign-in buttons, and a create-account link.

• Slarivo Auth Form with Spinner

  A sign-in form with email and password fields whose submit button shows an inline loading spinner while signing in and a success state when done.

• Slarivo Auth Form

  Authentication card with Google and GitHub SSO buttons, email magic-link sign-in, and last-used provider badges for login and signup flows.

• Slarivo Pending

  A utility component and hook that applies pending/loading state to any interactive element, blocking clicks and keyboard activation with proper ARIA attributes.

• Slarivo Login Page 1

  A responsive centered login page card with email and password fields, remember-me, forgot password, and social sign-in buttons.

• Slarivo Login with SSO

  A centered login card with email and password fields, a show/hide password toggle, remember-me checkbox, and a single sign-on (SSO) button.

• Slarivo Login Card Signup Form

  A centered signup card with name, email, password and confirm-password fields, a newsletter checkbox, and terms links for creating a new workspace account.

• Slarivo Login with Magic Link and SSO

  A centered card login form offering magic-link email sign-in, password fallback, and single sign-on (SSO).

• Slarivo Login with Email and Password

  A centered login form with email and password fields, a sign-in button, and a reset-password link.

• Slarivo indevuiLabel

  Here is modern label by indevui

• Slarivo indevuiPopover

  Here is modern popover component by indevui

• Slarivo IndevuiSelect

  Here is modern select component by indevui

• Slarivo 8-bit Label

  Pixel-art label from 8bitcn.com — wraps shadcn/ui Label with Press Start 2P retro variant for form fields.

• Slarivo 8-bit Radio Group

  Pixel-art radio group from 8bitcn.com — chunky pixel frame around each option, retro selected glyph. Native primitive rewrite, no Radix.

• Slarivo 8-bit Input OTP

  Pixel-art one-time-password input from 8bitcn.com — chunky pixel borders on each slot with focus caret.

• Slarivo 8-bit Sheet

  Pixel-art slide-out sheet from 8bitcn.com — retro pixel border on overlay panel. Wraps Radix Dialog (inlined via esbuild).

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Checkbox Group

  This is checkbox group component

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo Checkbox

  A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo DateField

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger values with avatars, and full-width layouts inside a Surface. Built on the real @heroui/react package with @heroui/styles, it composes with SearchField, ListBox, TagGroup, Label, Description, FieldError and useFilter. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo HeroUI Radio Group

  HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

• Slarivo Field

  Composable, accessible form field primitives — label, description, error message, fieldset, and legend — for building consistent form layouts.

• Slarivo Small Typography

  A small typography element for rendering muted helper text, form field labels, and fine print.

• Slarivo Input

  Input | Homlu UI

• Slarivo Upload

  Simple upload block

• Slarivo indevDialog

  here is modern dialog by indev ui

• Slarivo indevuiTextarea

  Here is indevui Text component

• Slarivo Multi-step Wizard

  Features This multi-step onboarding wizard includes: Responsive Design - Works beautifully on mobile and desktop Progress Tracking - Visual step indicator with completed checkmarks Form Validation - Client-side validation with error messages Smooth Transitions - Step transitions with directional animations Dark Mode Support - Styled for both light and dark themes Accessibility - Proper labels, focus states, and semantic HTML Complete Form Flow - Personal info → Company details → Preferences → Completion To use this component, you'll need to install Framer Motion for the animations: bash npm install framer-motion The component handles a complete user onboarding flow with validation at each step and a final completion screen that summarizes the collected information.

• Slarivo Book A Demo 1

  Book A Demo 1 with form and content

• Slarivo Book A Demo 2

  Book A Demo 2 with form section

• Slarivo Book A Demo 3

  Book A Demo 3 with logos and form

• Slarivo Login 03

  Login with image and logos,

• Slarivo Description

  Provides supplementary text for form fields and other components.

• Slarivo Description

  Provides supplementary text for form fields and other components.

• Slarivo Description

  Provides supplementary text for form fields and other components.

• Slarivo BeUI Radio Group

  Radio Groups component from the 21st.dev community.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input Group

  HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Checkbox Group

  HeroUI v3 CheckboxGroup manages a set of related checkboxes as a single form field with a shared label, description and validation. Built on the real @heroui/react package with @heroui/styles, it supports controlled selection, an indeterminate "select all" parent, disabled state, required-field validation via Form/FieldError, a Surface variant, custom check indicators, a custom render function, and rich card-style add-on rows. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Number Field

  HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition with the Dismissible utility, focus management and a transparent overlay mode for side panels.

• Slarivo Reshaped Pin field

  One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric/alphabetic/alphanumeric patterns, four sizes, a faded variant and FormControl integration for labels.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Reshaped Radio

  Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a RadioGroup compound for exclusive selection with any layout, FormControl group labels and card-based composition.

• Slarivo Tags Input

  An input field for adding, editing, and removing multiple tags using Enter or comma keys.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for the tooltip and FormControl integration.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for the tooltip and FormControl integration.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for the tooltip and FormControl integration.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for the tooltip and FormControl integration.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for the tooltip and FormControl integration.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for the tooltip and FormControl integration.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text area

  Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and disabled states, a resize property (auto-grow or fixed), FormControl integration and a TextArea.Aligner for headless layouts.

• Slarivo Reshaped Text field

  Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multiline selected values, start/end icons, four sizes, a rounded shape, faded and headless variants, error and disabled states, and FormControl integration.

• Slarivo Reshaped Text field

  Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multiline selected values, start/end icons, four sizes, a rounded shape, faded and headless variants, error and disabled states, and FormControl integration.

• Slarivo Reshaped Text field

  Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multiline selected values, start/end icons, four sizes, a rounded shape, faded and headless variants, error and disabled states, and FormControl integration.

• Slarivo Reshaped Text field

  Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multiline selected values, start/end icons, four sizes, a rounded shape, faded and headless variants, error and disabled states, and FormControl integration.

• Slarivo Reshaped Text field

  Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multiline selected values, start/end icons, four sizes, a rounded shape, faded and headless variants, error and disabled states, and FormControl integration.

• Slarivo Reshaped Text field

  Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multiline selected values, start/end icons, four sizes, a rounded shape, faded and headless variants, error and disabled states, and FormControl integration.

• Slarivo Reshaped Text field

  Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multiline selected values, start/end icons, four sizes, a rounded shape, faded and headless variants, error and disabled states, and FormControl integration.

• Slarivo Auth Section 1

  A full-screen sign-up authentication section with social login buttons, an animated grain-gradient side panel, and a create-account form.

• Slarivo Auth Section 2

  A split-screen sign-up page with an animated AI-image showcase panel and a social + email registration form.

• Slarivo Cromia Color Picker

  A polished color picker built from Cromia headless primitives, with area selection, hue and alpha sliders, editable channels, and preset swatches.

• Slarivo Cromia Compact

  A compact Cromia color picker with an area selector, hue slider, and editable hexadecimal color input.

• Slarivo Password Strength

  An animated password strength meter with segmented bars, a live requirements checklist, and common-pattern detection for signup and reset forms.

• Slarivo ColorField

  Color input field with labels, descriptions, validation, and HSL channel editing.

• Slarivo ColorField

  Color input field with labels, descriptions, validation, and HSL channel editing.

• Slarivo ColorField

  Color input field with labels, descriptions, validation, and HSL channel editing.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Select

  Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo HeroUI Search Field

  HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.

• Slarivo File Upload Drag & Drop

  A drag-and-drop file upload area for CSV, XLSX and XLS files with type validation, an upload progress bar and cancel action.

• Slarivo Bounding Box Citations

  An extraction citation panel connected to source bounding boxes and editable values. Review extracted fields in a form or JSON diff view, hover to highlight source locations, and edit values inline.

• Slarivo HeroUI Form

  HeroUI v3 Form — accessible form wrapper with built-in validation, submit/reset handling and a custom render-function API.

• Slarivo HeroUI Form

  HeroUI v3 Form — accessible form wrapper with built-in validation, submit/reset handling and a custom render-function API.

• Slarivo BeUI Prediction Market

  Forms component from the 21st.dev community.

• Slarivo BeUI OTP Input

  This is OTP Input component

• Slarivo HeroUI Label

  HeroUI v3 Label — accessible form label primitive that associates a caption with an input via htmlFor.

• Slarivo Slider Detents

  A controlled range slider with magnetic detents that pull the thumb to notable values, with a live formatted readout, keyboard support and optional haptics.

• Slarivo Drawer

  A drag-to-dismiss side panel that slides in from the left or right with a scrim, scroll lock, and focus trap, driven by a headless useDrawer hook.

• Slarivo Inline Validation

  A controlled text input that validates as you type, crossfading between a hint, an inline error message, and valid/invalid status icons.

• Slarivo Floating Label

  A text input whose label animates up into a reserved slot above the field instead of disappearing, with focus/invalid states, an optional hint line and a character counter.

• Slarivo Floating Label

  A text input whose label animates up into a reserved slot above the field instead of disappearing, with focus/invalid states, an optional hint line and a character counter.

• Slarivo Tag Input

  An accessible tag/chip input field where users type and press Enter to add tags, with duplicate detection, a max limit, keyboard navigation and animated chips.

• Slarivo Wizard Steps

  An animated multi-step wizard with a clickable progress rail, direction-aware panel transitions, keyboard navigation, and a completion state.

• Slarivo Rating

  A customizable star rating component that supports read-only display and interactive input modes.

• Slarivo Rating Group

  Here is Rating Group component

• Slarivo OTP Input

  OTP Input, OTP Form

• Slarivo Star Rating

  An interactive star rating component with configurable scale, sizes (sm/md/lg), and readonly mode. Users can click stars to set ratings with smooth hover animations and visual feedback.

• Slarivo Password Field

  This PasswordField component is a next-level, reusable password input built for modern applications. Unlike a basic show/hide field, it combines several useful features into one clean UI: a password visibility toggle, a dynamic strength meter, a requirements checklist, a one-click strong password generator, and a copy-to-clipboard option with instant feedback. These additions help users create secure passwords.

• Slarivo Feedback Prompt

  A polished feedback UI component that asks “Was this page helpful?” with Yes/No buttons, subtle animations, and a thank‑you message after selection. Fully responsive, supports light & dark mode, and includes micro‑interactions

• Slarivo Tagline

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

• Slarivo Label Selector

  Here is Label Selector component by IndevUi

• Slarivo ReUI Field

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

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom min/max, currency and percent formatting, and threshold-driven colors.

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

• Slarivo Text Roll

  A per-character vertical text roll animation for animating label swaps and micro-interactions between two short strings.

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

  A 3D interactive particle field rendered with three.js that reacts to mouse movement and supports customizable color, count, and size.

• Slarivo Textarea with Character Count

  An auto-resizing textarea with a live character counter that changes color as you approach and reach the limit.

• Slarivo Textarea

  A multi-line text input field with auto-sizing, small/default/large sizes, disabled and invalid states built on Base UI.

• Slarivo Textarea with Label

  A multi-line textarea form field paired with an accessible label for collecting longer text input like messages or comments.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Switch

  Choose between a set of options.

• Slarivo Badge

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

• Slarivo Field

  Here is Field component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Progress

  Here is Progress component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Switch

  Here is Switch component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Bento Grid

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

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo AI prompt Box

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

• Slarivo Animated AI Chat

  An AI chat interface with glass-morphism design and smart command features. Built with React and Framer Motion for smooth animations and professional interactions.

• Slarivo Feature 108

  A versatile section with 3 features inside a tabs component

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Placeholders And Vanish Input

  Sliding in placeholders and vanish effect of input on submit

• Slarivo Hero Section 9

  Modern hero section

• Slarivo Futuristic Hero

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

• Slarivo AI Input

  A modern, animated textarea input component designed for AI chat interfaces. It features auto-resizing, a voice input toggle, and an animated submit button. Features: • Auto-resizing textarea • Voice input toggle • Animated submit button • Press Enter to submit (Shift+Enter for a new line) • Dark mode support • Customizable height limits • Smooth animations • Mobile responsiveness

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo AI Input With Search

  A modern chat input component with a web search toggle and file upload functionality. This component features an animated search toggle, file attachment support, and smooth transitions. Features: • Animated search toggle button • File upload support • Auto-resizing textarea • Dark mode compatibility • Keyboard shortcuts • Framer Motion animations for enhanced user experience • Mobile responsiveness

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo Interactive Selector

  A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Hero Section 2

  Modern marketing hero section

• Slarivo Minimalist Hero

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

• Slarivo Prompt Input

  An input field that allows users to enter and submit text to an AI model.

• Slarivo FAQs Component

  Here is FAQs Component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo AI Input

  AI Input popover

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

  Here is Testimonials components

• Slarivo Feature

  Badges component from the 21st.dev community.

• Slarivo Footer column

  Here is Footer component

• Slarivo Footer

  Here is Footer component

• Slarivo 3D Folder

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

• Slarivo Features 9

  features section

• Slarivo Dynamic Frame Layout

  Dynamic Frame Layout

• Slarivo Interactive Globe

  Interactive 3D rotating globe built with pure canvas — zero dependencies. 1,200 Fibonacci-distributed dots form the sphere, glowing arcs connect city markers with traveling light particles, pulsing rings mark locations with labels. Drag to rotate with pointer capture, auto-rotates when idle. Configurable markers, connections, colors, and speed. The demo mirrors the Spline robot layout — dark card, left copy, right interactive 3D.

• Slarivo Image Gallery

  Here is Image Gallery component

• Slarivo FAQ Chat Accordion

  FAQ Accordion component is a versatile and interactive UI element designed to display frequently asked questions in a collapsible format. It enhances user experience by allowing users to expand and collapse sections to view answers, making it ideal for FAQs, help sections, and more. Features - Collapsible Sections: Users can expand or collapse sections to view or hide answers. - Animated Transitions: Smooth animations using Framer Motion for opening and closing sections. - Customizable Icons: Supports custom icons for each question, with flexible positioning. - Theming Support: Fully integrated with shadcn/ui theming for consistent styling. - Responsive Design: Adapts to different screen sizes for a seamless experience. - Accessible: Keyboard navigation and screen reader friendly. - Customizable Styles: Easily customize question and answer styles with className props. Example Use Cases - FAQ Sections: Display frequently asked questions in a compact, user-friendly format. - Help Centers: Organize help topics and answers for easy navigation. - Product Details: Provide detailed product information in a structured manner. - Educational Content: Present educational material in a question-and-answer format.

• Slarivo Bento Gallery

  Interactive Image Bento Gallery Description: A responsive, horizontally draggable bento-style gallery designed exclusively for images. It features smooth animations powered by Framer Motion, a clean shadcn/ui aesthetic, and an elegant full-screen modal for viewing individual images.

• Slarivo AI Assistant Interface

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

• Slarivo Liquid Text

  Liquid Text

• Slarivo Feature Showcase

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

• Slarivo infinite grid integration

  A reusable component for grid integration animation.

• Slarivo FAQ tabs

  Replace the boring accordion with these cool animated ones.

• Slarivo Morphing Popover

  A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

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

  Interactive tabs animated using clip path and framer motion

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo File Upload

  Interactive and animated file upload component with drag-and-drop and progress animations.

• Slarivo Morphing Dialog

  A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Liquid Weather glass

  Liquid glass components inspired by apple and figma

• Slarivo Interactive Checkout

  Interactive checkout when adding items to shopping cart.

• Slarivo Animated Modal

  A customizable, compound modal component with animated transitions

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Multimodal AI Chat Input

  A versatile React component for creating AI chat interfaces. Supports text input and file attachments (images, videos, audio, PDF, etc.) with interactive previews. Includes integrated send and stop buttons, automatic textarea resizing, and optional suggested actions for new conversations. Built using modern hooks and Tailwind CSS for easy styling

• Slarivo Prompt Input dynamic grow

  A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Chat template

  This component provides a complete chat interface with a sidebar for navigation, a contact list, and a chat window for messaging.

• Slarivo argent-loop-infinite-slider

  A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a "frictionless" motion logic to create an unending stream of items, reflecting a sense of boundless opportunity and "smart-work" automation. The visual architecture is optimized for high-contrast "Silver" accents—aligning with a premium metal aesthetic—and smooth, heavy-easing transitions that command user attention without being intrusive.

• Slarivo PARALLAX SCROLL FEATURE SECTION

  PARALLAX SCROLL FEATURE SECTION using framer motion

• Slarivo Fallback Card

  Here is Fallback Card component

• Slarivo Team Showcase

  A magazine-style team section featuring a three-column staggered photo grid paired with an interactive member list. Photos default to grayscale; hovering a photo or a name entry simultaneously reveals the portrait in full color and highlights the corresponding name row. Includes social link icons (X, LinkedIn) that animate in on row hover.

• Slarivo Testimonial

  Here is Testimonial component

• Slarivo AI Actions

  A group of interactive buttons with optional tooltips, commonly used for message-level interactions like copy, like, share, etc.

• Slarivo Select

  Reusable select option component built with framer motion and tailwindcss

• Slarivo Feature Carousel

  Here is modern feature carousel component

• Slarivo Registration Stepper

  Registration Stepper A responsive and animated stepper component designed to guide users through a multi-step process. It visualizes the current, completed, and pending steps using an accordion-style layout with smooth transitions powered by framer-motion. The component is built with shadcn/ui principles, ensuring it's theme-adaptive and highly customizable through props.

• Slarivo FAQ Section

  The FAQSection component is a fully responsive and configurable FAQ layout built with Shadcn UI and Tailwind CSS. It features a clean two-column grid with collapsible accordions, allowing users to explore answers to common questions without clutter. Each section is data-driven — meaning you can easily customize the titles, descriptions, and FAQ content using props. Designed for modern web apps, this component provides a smooth, consistent experience across devices while preventing layout shifts when expanding or collapsing items. Ideal for product pages, help centers, and support sections.

• Slarivo Coach Scheduling Card

  This is a fully interactive, motion-enhanced Coach Scheduling Card that allows users to view a coach’s weekly availability, select time slots, choose a location, and confirm bookings—all in a single animated, responsive UI. It blends profile preview, dropdown logic, availability grids, and confirmation flows into a seamless component with thoughtful framer-motion effects throughout. Animations are conditionally toggled for accessibility, and the UI adapts to user actions in real-time. Perfect for fitness apps, tutoring platforms, service marketplaces, or any SaaS tool offering human-led bookings with sleek UX.

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

  here is Dot Flow component

• Slarivo Stacked Panels Cursor intereactive component

  Interactive 3D panel stack built with Framer Motion springs. Mouse position drives per-panel wave lift and scale via a Gaussian falloff curve.

• Slarivo Security Card

  Here is Security Card component

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo dock

  Here is dock component

• Slarivo Joblisting

  sleek animation job lisiting model type component

• Slarivo Composer Input

  Composer Input A versatile and responsive composer component for rich text input, file attachments, and actions. Styled with shadcn/ui principles, it's ideal for chat applications, comment sections, and content creation forms.

• Slarivo Interactive Thermodynamic Grid

  Cursors component from the 21st.dev community.

• Slarivo Auth Modal

  A modern authentication modal with Google and email login options. Clean UI, smooth animations, and ready to plug into your Next.js app.

• Slarivo Glassmorphism Portfolio

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

• Slarivo Testimonals Carousel

  Here is Testimonals Carousel component

• Slarivo Fraud Card

  Here is Fraud Card component

• Slarivo Modern animated multi words

  Modern animated multi words

• Slarivo AI Prompt Box

  An animated AI prompt input with expanding textarea, keyboard shortcuts, model selector, and file attachments.

• Slarivo Feedback Slider

  Here is colored feedback slider component

• Slarivo Interactive Grid

  Interactive Grid with props

• Slarivo Clipped Image

  Here is component of clipped image components

• Slarivo Waveform

  Here is Waveform component

• Slarivo Linear Card

  Here is linear card component

• Slarivo Feature Section

  Feature Section A responsive and theme-adaptive component designed to showcase a product's key features. It includes a main title, a subtitle, a grid of features with icons, and a final call-to-action card. It's built to be highly reusable by accepting all content through props.

• Slarivo Interactive Image Gallery

  The InteractiveImageGallery component is a dynamic, visually engaging layout designed to display images and accompanying text cards in a randomized, floating arrangement. Each time the page loads, images and text elements appear in different positions, creating a fresh, organic feel reminiscent of a modern design showcase or creative portfolio. Built entirely with shadcn/ui components and Tailwind CSS, it’s lightweight, responsive, and seamlessly adapts to both dark and light themes. A standout feature of this component is its hover interaction — when the user hovers over any image, all other images gently blur, bringing the focused item to the forefront while leaving text cards crisp and readable. This subtle depth effect enhances visual hierarchy without distracting from the overall layout. Ideal for creative portfolios, AI-generated art galleries, product showcases, or interactive visual storytelling, the InteractiveImageGallery strikes a balance between motion and clarity, transforming static content into a living, breathing experience that feels both elegant and intelligent.

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

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

• Slarivo Response

  Here is Response component

• Slarivo Emoji Radio Group

  This Emoji Radio Group component transforms a traditional survey input into a fun and engaging experience. Instead of plain numbers or circles, each option is represented by an expressive emoji with a short label, making it instantly relatable for quick feedback collection. When a user selects an option, the card highlights with accent styling and displays a glowing green dot in the corner for clear visual confirmation. Smooth hover animations and responsive sizing add a playful, interactive feel, while Radix underpinnings ensure full accessibility with keyboard navigation and ARIA compliance. This design makes it perfect for customer satisfaction surveys, in-app feedback prompts, or any scenario where you want to capture sentiment in a more human and intuitive way.

• Slarivo Vertical accordion

  here is interactive vertical accordion

• Slarivo Interactive Dots

  Interactive Dots with props

• Slarivo Special Card

  Here is Special Card component

• Slarivo Morphing Input

  An input field that morphs between different states with smooth animations.

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

  Here is Rounded Box component

• Slarivo Auth Tabs Card

  The Auth Tabs Card is a clean and modern login/sign-up component built strictly with shadcn UI components. It combines both authentication forms into a single card with easily switchable tabs, saving space and improving the user experience. Social login buttons at the top allow for fast onboarding, while the plain design ensures it works seamlessly in both light and dark themes. The bottom text dynamically toggles between Sign In and Sign Up, making the interface intuitive and interactive without adding unnecessary clutter. This component is ideal for apps that want a minimal yet functional and user-friendly authentication flow.

• Slarivo Interactive Canvas

  Interactive Canvas with dot pattern frid

• Slarivo FAQ Pro

  FAQs component from the 21st.dev community.

• Slarivo Folder Components

  A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the prop. Drop it into any React or Next.js project and install directly via the shadcn CLI.

• Slarivo Interactive Folder Gallery

  A macOS-inspired folder that springs open on click, fanning out photo cards with realistic Framer Motion physics and drag-to-close interactions.

• Slarivo Modern Login & Signup

  Modern, responsive login and signup UI components built with React and Tailwind CSS — ready-to-use authentication forms with clean design and smooth UX.

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

  Here is Field Components

• Slarivo Fluid Text Morph

  An interactive headline that smoothly morphs between predefined word pairs on hover and cycles through them on click, leveraging Framer Motion’s spring animations and AnimatePresence for fluid letter-by-letter transitions.

• Slarivo Interactive Folder

  A dynamic UI component that simulates an interactive folder. Click to 'open' and reveal up to three items inside, which spread out. Items provide a subtle parallax effect on hover when open.

• Slarivo you can scroll.

  you can scroll. component

• Slarivo Neural Access Login

  A futuristic cyberpunk authentication interface featuring smooth animations, minimal monochrome styling, and immersive sci-fi aesthetics.

• Slarivo Interactive Tech Stack Builder

  A highly interactive, 2.5D gamified onboarding component. Let users physically build their skill stack block by block. Features smooth physics, glassmorphism icons, and Framer Motion animations. Perfect for developer portfolios, SaaS setup flows, or premium profile pages.

• Slarivo Text Morph

  Shared-layout character morphing between two strings — individual letters animate to their new positions with spring physics.

• Slarivo Progress

  Here is Progress component

• Slarivo Approval Card

  A human-in-the-loop approval card where an AI agent asks one multiple-choice question at a time, with radio/checkbox options, a custom answer field, a dot pager, and a confirmation state.

• 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, form control, form-control, control.

• Slarivo Switch

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

• Slarivo Rating

  A Rating component for collecting structured user information and submissions, featuring rating, star, interactive, form control.

• Slarivo Rating

  A Rating component for collecting structured user information and submissions, featuring rating, star, form control, form-control.

• Slarivo Rating

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

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

• 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, form control, form-control, shadcn/ui.

• 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, form control, form-control, shadcn/ui.

• Slarivo Switch

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

• Slarivo Switch

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

• Slarivo Switch

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

• Slarivo Switch

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

• Slarivo Switch

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

• Slarivo Multiple Selector

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

• Slarivo Pin Input

  A Pin Input component for collecting structured user information and submissions, featuring pin input, pin-input, otp, input otp.

• Slarivo Toggle Switch

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

• Slarivo Toggle Switch

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

• Slarivo Switch

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

• Slarivo Switch

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

• Slarivo Progress

  A Progress component for showing task completion, loading state, and multi-step advancement, featuring progress, progress bar, progress-bar, label.

• Slarivo Switch

  A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.

• Slarivo ColorSwatchPicker

  A list of color swatches that allows users to select a color from a predefined palette.

• 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 Reshaped File upload

  Renders an area for uploading files with a native HTML file input, handling click and drag events with an onChange handler for the uploaded file data. Supports a separate Trigger element, custom children composition, inline rendering and a headless variant…

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

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

• Slarivo Reshaped Autocomplete

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

• Slarivo Reshaped Autocomplete

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

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• Slarivo HeroUI Color Slider

  HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.

• 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 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 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 HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

• Slarivo HeroUI Time Field

  Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.

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

  Date input field with labels, descriptions, and validation built on React Aria DateField.

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger…

• Slarivo HeroUI Autocomplete

  HeroUI v3 Autocomplete is a searchable select that filters a ListBox of options as you type, supporting single and multiple selection with removable tags, grouped sections, disabled options, descriptions, form validation, controlled state, custom trigger…

• Slarivo ReUI Field

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

• Slarivo ReUI Field

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

• Slarivo ReUI Field

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

• Slarivo ReUI Field

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

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

• Slarivo ReUI Autocomplete

  An accessible autocomplete input from ReUI with filtering, labels, clear and trigger controls, grouped people, asynchronous search results, and compact sizing.

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for…

• Slarivo Reshaped Slider

  Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb range mode, vertical orientation, a disabled state, custom value rendering for…

• Slarivo HeroUI Slider

  Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range, vertical and disabled variants, currency and custom value formatting, full…

• Slarivo HeroUI Input OTP

  HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.

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

  One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric/alphabetic/alphanumeric patterns, four sizes, a faded variant and…

• Slarivo Reshaped Pin field

  One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric/alphabetic/alphanumeric patterns, four sizes, a faded variant and…

• Slarivo Reshaped Pin field

  One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric/alphabetic/alphanumeric patterns, four sizes, a faded variant and…

• Slarivo Reshaped Pin field

  One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric/alphabetic/alphanumeric patterns, four sizes, a faded variant and…

• Slarivo Reshaped Pin field

  One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric/alphabetic/alphanumeric patterns, four sizes, a faded variant and…

• Slarivo Reshaped Pin field

  One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric/alphabetic/alphanumeric patterns, four sizes, a faded variant and…

• Slarivo Meter

  A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom…

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

  Color input field with labels, descriptions, validation, and HSL channel editing.

• Slarivo Switch

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

• Slarivo Switch

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

• Slarivo Tag Group

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

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

• Slarivo Reshaped Switch

  Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via checked/defaultChecked, and a disabled state.

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

  A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…

• Slarivo Progress Bar

  A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…

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

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

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo Compare Slider

  A before/after image comparison slider with a draggable handle, orientation and label support for revealing two overlaid states.

• Slarivo ReUI Field

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

• Slarivo ReUI Field

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

• Slarivo Slider with Value Output

  A range slider that displays the currently selected numeric value next to the track.

• Slarivo Status

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

• Slarivo Textarea with Error

  A multi-line textarea input showing an invalid state with a destructive validation error message below it.

• Slarivo Controlled Textarea

  A controlled textarea whose value is managed by React state, ideal for forms and message inputs.

• Slarivo Select (Radix UI)

  An animated compound select dropdown built on Radix UI primitives with trigger press feedback, chevron rotation, grouped rows, labels, scroll buttons, and smooth panel motion.

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

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

• Slarivo Auth Change Password

  A change password form card with current password, new password, and confirmation fields, inline validation, show/hide toggles, loading and success states.

• Slarivo Auth Email Change

  An email address change form with new-email and password verification fields, inline validation, loading and success states.

• Slarivo Contact 01 - Project Inquiry Form

  A contact section with a project inquiry form, contact details, and a trust-badge brand marquee for agencies and freelancers to capture qualified leads.

• Slarivo Action Hint

  A particle emitter that shows an ephemeral action-feedback hint above an element and fades it out, for confirming actions like copy, save, or share.

• Slarivo Switch with Label and Description

  A toggle switch inside a bordered card with a label, sublabel, and short description, with the border highlighting when checked.

• Slarivo Priority Select with Badge Display

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

• Slarivo Select With Inline Label

  A select dropdown showing a muted prefix label inside the trigger, left of the selected value.

• Slarivo Form Textarea

  A textarea form field wired to TanStack Form with a label, error handling, and validation display.

• Slarivo Select with TanStack Form

  A department select field wired to TanStack Form with Zod validation that surfaces an inline error message when submitted empty.

• Slarivo React Hook Form Select

  A select dropdown bound to React Hook Form with a Zod resolver that validates on submit and shows an inline field error until a department is chosen.

• Slarivo Select in Form Field

  A select dropdown composed with a form field label and description for choosing an option within a form.

• Slarivo Notification Frequency Select

  A labeled select dropdown with helper text and a save button for choosing a notification frequency inside a settings form.

• Slarivo Date Picker with Presets

  A single-date calendar picker with quick preset buttons (Today, Tomorrow, Next Monday, In 1 week, etc.) and a formatted selected-date summary.

• Slarivo Select with Label

  A select dropdown paired with an accessible field label linked to the trigger for form fields.

• Slarivo Currency Select

  A currency picker select dropdown that lists currencies with their symbol, name, and ISO code, built on Base UI.

• Slarivo Select with Avatar

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

• Slarivo Select with Disabled Items

  A select dropdown where individual options can be marked as disabled so users cannot choose them.

• Slarivo Select With Description Items

  A select dropdown whose options each show a bold label with a muted description sub-line, while the trigger displays only the chosen label.

• Slarivo Select With Object

  A select dropdown whose options each show a bold label with a muted description sub-line, and whose trigger displays the full two-line item when selected.

• Slarivo Select

  A styled select dropdown for choosing a single option from a list, with a trigger, searchable popup, scroll arrows, grouping, and keyboard navigation.

• Slarivo Disabled Select

  A select dropdown rendered in a non-interactive disabled state, useful for showing a locked or read-only status field in a form.

• Slarivo Autocomplete Field

  A form field with an autocomplete search input that filters a list of options as you type and shows an empty state when nothing matches.

• Slarivo Password Strength Field

  A password input field with a live strength meter and label that reflects how strong the entered password is.

• Slarivo Basic Select

  A minimal single-value select dropdown with a placeholder and a flat list of options.

• Slarivo Checkbox List Group

  A bordered list of options each pairing a labeled row with icon and a checkbox, useful for selecting multiple preferences or skills.

• Slarivo File Upload Field

  A form field for uploading a file such as a resume or document, with an upload label, helper description, and validation error message.

• Slarivo Checkbox Group

  A multi-select option list where each row toggles with a spring-animated tick, supporting descriptions, grouping, disabled options and a collapsible show-more list.

• Slarivo OTP Verification Field

  A form field with a six-digit one-time passcode (OTP) input, separator, helper description and validation error message for verification flows.

• Slarivo Label with Icon Prefix

  A form field with a label that shows an icon before its text, paired with an accessible input.

• Slarivo Date of Birth Field

  A form field with a label, native date input, helper description, and validation error message.

• Slarivo Invoice Form with Line Item Dialog

  An invoice builder form that adds each billable line item through its own validating dialog before appending it to the list and computing the total.

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

  A payment details card form with name, card number, expiry and CVC fields plus a secure-checkout note, for collecting credit card information.

• Slarivo Field with Switch Toggle

  A form field row pairing a label and description with a switch toggle, ideal for settings and preference toggles.

• Slarivo Password Label with Forgot Link

  A password input field with a label that has an inline "Forgot password?" link aligned to the right.

• Slarivo Newsletter Subscription Form

  A newsletter signup form card with email and delivery-frequency fields, built with TanStack Form and Zod validation.

• Slarivo Invite Team Member Form

  An invite team member form with an email field, a role select, and submit/cancel actions with a loading and sent confirmation state.

• Slarivo Multi-Field Form

  A complete sign-up form combining text inputs, a role select, and a newsletter checkbox with inline validation and a loading submit button.

• Slarivo Sign In Form

  A sign in card with email and password fields validated on submit using TanStack Form and Zod.

• Slarivo Email Field with Error State

  A labeled email input with a required marker and inline validation error message shown when the value is invalid.

• Slarivo Checkbox

  A styled checkbox control for forms, built on Base UI, supporting checked, unchecked, and indeterminate states.

• Slarivo Delete Account Form

  A danger-zone account deletion form that requires the user to type a confirmation phrase before the destructive submit button becomes enabled.

• Slarivo Select Field (TanStack Form)

  A grouped select field with labelled option groups, wired to TanStack Form with Zod validation and submit feedback.

• Slarivo Horizontal Form Fields

  A form layout with right-aligned labels placed inline beside their inputs in a two-column horizontal grid.

• Slarivo Number Range Form

  A TanStack Form number input field with Zod validation that keeps a quantity within a minimum and maximum range.

• Slarivo Forgot Password Form

  A forgot-password form that collects an email address and shows a confirmation state after sending a password reset link.

• Slarivo Field with Slider

  A form field that pairs a label and helper description with a range slider control for selecting a value.

• 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 Social Links Fieldset

  A form fieldset block that groups social profile inputs (GitHub, X, website) under a legend, with labels, prefix addon inputs, helper description and a validation error message.

• Slarivo Radio Group Field

  A radio group form field with a fieldset legend, selectable options, and a helper description for choosing a plan.

• Slarivo React Hook Form Dropdown Field

  A single-choice form field that uses a dropdown menu radio group bound to React Hook Form via Controller, with Zod validation and inline error messages.

• Slarivo Support Request Fieldset

  A grouped support-request form fieldset with a legend, labeled subject, description and email fields, and helper text.

• Slarivo Sign Up Form

  A sign up / register form with email, password, confirm password, terms checkbox and a loading submit button, built on Base UI form fields with validation.

• Slarivo Checkbox Group Field

  A form field that groups multiple selectable checkboxes under a legend, with a default selection.

• Slarivo Label with Helper Text

  A form field with a label, a helper description line, and an input for entering values such as an API key.

• Slarivo Slider Field (TanStack Form)

  A numeric slider form field wired with TanStack Form and validated against a Zod min/max range, showing the live value and inline error.

• Slarivo Onboarding Wizard Form

  A three-step onboarding wizard form with account details, plan selection with a newsletter opt-in, a review summary, and a success confirmation state.

• Slarivo Team Member Fieldset

  A grouped form fieldset with a legend and labeled inputs for collecting a team member's first name, last name, work email, and job title.

• Slarivo Label with Character Counter

  A form field label that shows a live character count for its textarea, updating as the user types.

• Slarivo Newsletter Signup Form

  A newsletter signup card with first/last name and email fields, a weekly-digest checkbox, a loading submit button, and a success confirmation state.

• Slarivo Account Settings Fieldset

  A form fieldset that groups account settings fields — display name, username with prefix, and timezone select — under a legend with a save button.

• Slarivo Dynamic Field Array

  A React Hook Form field-array form that starts from an empty state and lets you add, edit, duplicate, and remove teammate rows with per-item Zod validation and role selection.

• Slarivo Field with Select Dropdown

  A labeled form field pairing a select dropdown with a helper description, shown here as a country picker.

• Slarivo Label with Badge Indicator

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

• Slarivo Payment Information Fieldset

  A payment information fieldset grouping cardholder name, card number, expiry date, and CVC inputs with a legend, labels, and inline validation errors.

• Slarivo Change Password Form

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

• Slarivo TanStack Form Dropdown

  A visibility dropdown-menu radio group wired to TanStack Form with Zod validation, showing inline field errors on submit and a success toast.

• Slarivo Form Fields with Tooltip Hints

  A vertical form with labeled inputs where each field label has an info icon that reveals validation hints in a tooltip on hover.

• Slarivo Support Ticket Form

  A support ticket form with selectable category chips, a message textarea with character count, a loading submit button, and a submitted confirmation state.

• Slarivo Icon Only Badge

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

• Slarivo Tag List

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

• Slarivo Basic Badge

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

• Slarivo Edit Profile Dialog

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

• Slarivo Disabled Textarea

  A disabled textarea field with a label, showing a non-editable message input in its resting state.

• Slarivo Textarea With Helper Text

  A textarea input paired with a label and a right-aligned helper text hint below it.

• Slarivo Checkbox with Description

  A checkbox laid out horizontally with a label and a helper description line, for opt-in form fields like newsletter subscriptions.

• Slarivo Parent Checkbox Group

  A checkbox group with a parent checkbox that selects or deselects all child options and shows an indeterminate state when only some are selected.

• Slarivo Form Integration Checkbox

  A checkbox with a submit button inside a form for accepting terms and conditions, showing a loading spinner while the form submits.

• Slarivo Select All Checkbox

  A parent checkbox that toggles a group of child checkboxes and shows an indeterminate mixed state when only some options are selected, useful for permission lists and select-all controls.

• Slarivo Nested Parent Checkbox Group

  A nested checkbox group with a parent checkbox that toggles all child checkboxes and shows an indeterminate state when only some children are selected.

• Slarivo Checkbox Group Form

  A multi-select checkbox group wired into a form with a legend, submit button and loading state for capturing multiple selections.

• Slarivo Weekly Availability Checkbox Grid

  A weekly availability grid with a checkbox for each day and time slot that tracks how many slots are selected.

• Slarivo Role Permissions Picker

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

• Slarivo Payment Methods Checkbox

  A list of selectable saved credit cards showing card brand, last four digits and expiry, each with a checkbox for choosing a payment method.

• Slarivo Collapsible Form Fields

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

• Slarivo Nested Checkbox Group

  A two-level nested checkbox group with parent select-all and child options, grouped by category for multi-selection forms.

• Slarivo Checkbox Group Form

  A checkbox group bound to React Hook Form with Zod validation requiring at least one selection, showing an error and a success toast on submit.

• Slarivo Underline Tabs Card

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

• Slarivo Plan Add-on Selector

  A plan add-on selector with checkbox rows and a live estimated price total that updates as features are toggled.

• Slarivo Data Export Checkbox Group

  A nested checkbox group with a parent select-all control, grouped sections, and a selected-item count for choosing what data to include in an export.

• Slarivo Select All Checkbox

  A permissions checkbox group with a parent "select all" control that switches to an indeterminate state when only some options are selected.

• Slarivo Input Mask

  A credit-card style text input that auto-formats digits into 4-character groups as the user types, useful for payment or card-number fields.

• Slarivo Bjork Textarea

  A styled multi-line text input field with a soft rounded surface and hidden resize handle, for forms and messages.

• Slarivo Primitive Calendar

  A styled date-picker calendar with animated month/day transitions, built for selecting single dates, ranges, or multiple dates in forms and date pickers.

• Slarivo Primitive Badge

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

• Slarivo Primitive Checkbox

  A styled checkbox with a warm accent color and soft inset shadow, built on top of the standard checkbox primitive for forms and settings toggles.

• Slarivo Primitive Input

  A styled text input with size and visual variants, subtle focus-lift animation, and an optional leading icon slot.

• Slarivo File Upload

  Most upload widgets fall over on the three things that really happen: wrong file type, file too big, transfer fails halfway. This one handles all three — per-file progress, retry, and guards that explain themselves. Part of Documents & Signing:…

• Slarivo Swap Ticket

  A Swap Ticket component for collecting structured user information and submissions, featuring swap, blockchain, crypto, animated transitions.

• Slarivo Empty State Kit

  Six polished empty states for inboxes, search, carts, missing pages, restricted access, and blank product surfaces, with customizable copy and actions.

• Slarivo Import Patchbay

  CSV import mapper built like a patchbay: each file column is a jack that patches a cable into one of your schema fields. It reads the sample values, so a column named col_7 full of dates still finds Signed up; matches it is unsure of hang dashed. Zero…

• Slarivo Signature Pad

  Three ways to sign one document: draw with pressure-weighted strokes, type it, or upload a photo. All three hand back the same thing — a trimmed PNG, plus an SVG where the mark is vector. Saved signatures included. Part of Documents & Signing: layro.vercel.app.

• Slarivo Radio Group (Fluid Hover)

  An animated radio button group whose selection dot springs into place and whose rows light up with a fluid hover highlight that follows the cursor, built on the Base UI radio primitive.

• Slarivo Centered Contact Form

  A minimal, centered contact form with name, email, and message fields that swaps to a confirmation message after submission.

• Slarivo Animated Dialog

  An accessible Radix dialog with motion-driven enter/exit choreography (scale, slide-up, or fade) that turns into a bottom sheet on mobile and keeps its header/footer pinned while the body scrolls.

• Slarivo Button Group Popover

  A button group with a chevron trigger that opens a popover form for describing a task, useful for a "Copilot"-style split action button.

• Slarivo Email Signup Form

  A single-field, pill-shaped email signup form with a headline and CTA button, for ungated lead capture or newsletter opt-ins.

• Slarivo Centered Social Login

  A centered login card with Google and Apple social sign-in buttons above a standard email/password form.

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

  A phone number input with a searchable country dial-code dropdown that outputs the number in E.164 format.

• Slarivo Lookout

  Expressive SVG eyes for any form: they follow the pointer, read along with your caret in the field you're typing in, look away when it's a password, peek when you press show-password, and react to errors and idle time. One file, no images, theme tokens.

• Slarivo Coming Soon Launch Page

  A full-viewport "coming soon" launch page with a live countdown timer, an email notify-me form with an inline success state, and a footer GitHub link.

• Slarivo Date Picker Disabled

  A date picker button with calendar popover shown in its disabled state, for read-only or locked date fields in a form.

• Slarivo Elevate Navbar

  A Elevate Navbar component for communicating actions, objects, states, and visual meaning compactly, featuring icon, chart, form, click and selection states.

• Slarivo Input Form

  A multi-field contact/profile form layout combining labeled text inputs, a country select, and cancel/submit actions for collecting name, email, phone, and address data.

• Slarivo Button Group Input

  A search-style input paired with an attached search button, grouped together as a single connected control.

• Slarivo Autosave Input Group

  A text input with an inline autosave status indicator that shows a spinner while typing and a checkmark once changes are saved.

• Slarivo Gooey Input

  A search-style input field that expands from a round icon button into a text field using a gooey SVG filter and shared-layout animation.

• Slarivo Emoji Rating

  An interactive emoji-based rating picker that lets users rate something from 1 to 5 by clicking animated face emojis.

• Slarivo Price Range Slider

  A dual-thumb price range filter slider that previews a ghost extension when hovering outside the selected range, with animated number values and thumb scaling.

• Slarivo Shipping Address Fieldset

  A shipping address form fieldset with first/last name, street, city, state, postal code, country select and a save-address checkbox, built on the shadcn Field primitive.

• Slarivo Feedback Bar

  A compact inline bar for collecting thumbs-up/thumbs-down feedback on AI chat responses, with a dismiss button.

• Slarivo Notification Settings Field

  A notification preferences list that pairs a title, description and toggle switch for each setting, separated by dividers, for account or app settings pages.

• Slarivo Interactive List Preview

  A Interactive List Preview component for explaining metrics, trends, comparisons, and structured data, featuring chart, form, pointer-responsive feedback, responsive behavior.

• Slarivo Phantom Image Trail

  A Phantom Image Trail component for explaining metrics, trends, comparisons, and structured data, featuring chart, form, drag interaction, pointer-responsive feedback.

• Slarivo Team Invite Sheet

  A slide-out sheet for inviting team members by email with role selection and a live pending-invites list.

• Slarivo Edit Profile Sheet

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

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

• Slarivo Select with Disabled Options

  A select dropdown that groups active options and shows disabled, non-selectable items marked as coming soon, separated by a divider.

• Slarivo Autosize Textarea Customize

  A bio form field with an auto-resizing textarea, Zod validation, and a loading submit button.

• Slarivo Basic Select

  A dropdown select built on Base UI, shown in small, default, and large trigger sizes for choosing a plan.

• Slarivo Field with Textarea

  A form field that pairs a label, a multiline textarea, and a helper description for collecting longer free-text input such as a bio.

• Slarivo Text Field

  An accessible text field built on React Aria Components with shadcn styling, composing a label, input, description, and validation error.

• Slarivo Text Area

  A multi-line text input built on React Aria Components with shadcn styling, for use inside a text field with label, description, and validation.

• Slarivo FFT ocean surface

  A displaced ocean surface driven by a real inverse FFT. A Phillips spectrum evolves in frequency space, two compute passes run a shared-memory radix-2 IFFT into a displacement field, and a procedural grid rides it with per-pixel normals, foam and a Fresnel…

• Slarivo Multi-Consent Registration Gate

  A registration consent gate that lists required and optional agreements as checkboxes and keeps the submit button disabled until every required item is accepted.

• Slarivo Notification Checkbox Group

  A vertical checkbox group for notification preferences, with each option showing a bold label and a helper description on divided rows.

• Slarivo Invalid / Required Checkbox

  A terms-and-conditions checkbox with an inline error message that appears when the form is submitted without accepting.

• Slarivo Morphing Button

  An animated button that smoothly morphs into an expanded interactive state.

• Slarivo Status

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

• Slarivo ReUI Field

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

• Slarivo ReUI Field

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

• Slarivo ReUI Field

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

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo HeroUI Switch

  HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.

• Slarivo Combobox

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

• Slarivo Agent Radiance Cascades

  The static ten-dot Agent mark becomes a selectable loading field with capture-quality controls: every gray-to-white dot is both an HDR emitter and an occluder, feeding a jump-flooded distance field and six top-down radiance cascades.