SLARIVO / INPUTS

Inputs Components

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

• Slarivo Input

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

• Slarivo Input

  Upgaraded shadcn/ui Input

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

  shadcn/ui input with inner tags

• Slarivo Prompt Input

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

• Slarivo Input

  Retrieve text input from a user.

• Slarivo Tags Input

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

• Slarivo Input With Feedback

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

• Slarivo Radio

  Provides single user input from a selection of options.

• Slarivo Input

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

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

  Displays a card with header, content, and footer.

• Slarivo Input

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

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

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

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

  Displays rich content in a portal, 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 Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Placeholders And Vanish Input

  Sliding in placeholders and vanish effect of input on submit

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

  Here is Multistep Form component

• Slarivo useAutoResizeTextarea

  A hook that automatically resizes a textarea based on its content

• Slarivo Login / Signup

  Here is Login Singup minimalistic cardss

• 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 Animated Glowing Search Bar

  Animated Glowing Search Bar Component

• Slarivo Contact 2

  A class contact page with contact details and form.

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

  An input where the user selects a value from within a given range.

• Slarivo Radio Group

  Enhanced shadcn/ui radio group

• Slarivo Login

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

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

  Building forms with React Hook Form and Zod.

• Slarivo Form

  Building forms with React Hook Form and Zod.

• Slarivo Input

  Displays a form input field with enhanced features like password visibility toggle, clearable functionality, and Zod validation support.

• Slarivo Color Picker

  Inputs component from the 21st.dev community.

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

  A customized datetime picker component.

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

  A drawer component for React.

• Slarivo Drawer

  A drawer component for React.

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

  Custom autocomplete component built with Shadcn ui and Fancy Multi Select by Maximilian Kaske. Feel free to play around with it and customize it to your needs.

• 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 Search Field [react-aria-components]

  A search field allows a user to enter and clear a search query. Search fields can be built with <input type="search">, but these can be hard to style consistently cross browser. SearchField helps achieve accessible search fields that can be styled as needed.

• Slarivo Input OTP

  Accessible one-time password component with copy paste functionality.

• Slarivo useDebounce

  A hook that returns a debounced version of the provided value. The debounced value will only update after the specified delay has passed without any new changes to the original value.

• Slarivo Select (Native)

  Native select in shadcn/ui style

• Slarivo Select (Native)

  Native select in shadcn/ui style

• 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 Animated Search Bar

  Animated Search Bar with gooey effect

• Slarivo Auth Form

  Grid Auth Form Used While Sign in or Sign up

• Slarivo Call to Action (CTA)

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

• Slarivo 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 Assisted Password Confirmation

  Password confirmation component with visual feedback and animations for matching or incorrect inputs

• Slarivo Login Form

  Here is Login Form component

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

  Here is Form component

• Slarivo Form

  Here is Form component

• Slarivo Form

  Here is Form component

• Slarivo Form

  Here is Form component

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

  A sophisticated color input component with opacity control, color swatches, and clipboard integration. Features - Color Management - HEX color input - Visual color preview - One-click copy to clipboard - Color swatches for quick selection - Opacity Control - Smooth slider control (0-100%) - Visual gradient feedback - Custom styled thumb matching selected color - Real-time color preview

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

  Here is Input Group component

• Slarivo Input

  Here is animated Input component

• Slarivo Registration

  here is minimalistic registration page

• Slarivo Apple Spotlight

  A beautiful search component inspired by macOS Spotlight.

• Slarivo Multistep Form

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

• Slarivo Suggestive Search

  Here is Suggestive Search component

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

  useCharacterLimit hook

• Slarivo Color Picker

  Here is Color Picker component

• Slarivo Color Picker

  Here is Color Picker component

• Slarivo Color Picker

  Here is Color Picker 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 Sign Up BLock

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

• Slarivo Spinner

  Here is Spinner component

• Slarivo Pinky News Letter

  Pinky News Letter with paper design

• Slarivo Phone Input

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

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Combobox

  Filters large lists to selectable options based on the matching query.

• Slarivo Rating

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

• Slarivo Numeric Input

  A customizable numeric input component with increment/decrement buttons and a visual progress indicator. Features - Input Controls - Increment/decrement buttons - Min/max value constraints - Custom step size - Default value support - Visual Feedback - Progress bar indicator - Focus states - Min/max labels - Dark mode support

• Slarivo Password Input

  Here is advanced password inputt

• 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 Terms & Conditions

  Here is Terms & Conditions dialog

• Slarivo Terms & Conditions

  Here is Terms & Conditions dialog

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

  Here is Forgot Password component

• Slarivo Forgot Password

  Here is Forgot Password component

• Slarivo Animated Input

  Animated Input

• Slarivo useSliderWithInput

  A React hook that manages the state and logic for a slider component with corresponding input fields. Provides validation, range constraints, and synchronized updates between slider and input values. Features - Synchronized slider and input field values - Input validation and number formatting - Range constraints for min/max values - Support for single value or range (two handles) - Reset functionality to default values

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

  Delay function execution with useDebounceCallback, providing options for canceling, flushing, and checking if a call is pending.

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Autocomplete

  Here is Autocomplete component

• Slarivo Expanding Search Dock

  Minimal search icon that expands into full input with blur

• 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 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 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 Expandable Search Bar

  This expandable search bar is a sleek, animated UI element designed for modern web applications. It collapses into a compact icon for space efficiency and smoothly expands to reveal a fully functional search input with placeholder animation, auto-focus, and submission handling. Perfect for navigation headers, dashboards, or any interface needing intuitive search functionality. Built with React and Framer Motion for fluid animations, it's customizable for left/right expansion and integrates seamlessly with Tailwind CSS for styling. Enhance user engagement with keyboard support (Enter to search, Escape to close) and responsive behavior.

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

  Here is Contact Form component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Multiple Selector

  Here is Multiple Selector component

• Slarivo Toolbar Expandable

  A toolbar that adjusts its width based on what you need to do. It starts small and can expand to offer more tools.

• 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 with time piker

  Here is calendar by shadcn with time piker

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

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Password update Block

  Secure password update form with validation and confirmation fields.

• Slarivo Kbd

  Here is Kbd component

• Slarivo form

  minimalistic register form

• Slarivo Calendar input

  Here is calendar input with date picker

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

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

• Slarivo Combobox

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

• Slarivo Pin Input

  Here is Pin Input component

• Slarivo Combobox

  Here is Combobox component

• Slarivo Password Input

  Here is modern Password Input

• Slarivo Form

  Building forms with React Hook Form and Zod schema validation.

• Slarivo Input OTP

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

• Slarivo Todo / Task Management

  A very minimal, yet functional, animated todo component that will catch user's attention.

• Slarivo Number Field

  Here is Number Field component

• Slarivo Glowing Input

  Glowing Input

• Slarivo Input OTP

  Accessible one-time password component with copy paste support.

• Slarivo Input OTP

  Accessible one-time password component with copy paste support.

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

  Here is Signature Pad component

• Slarivo Password Strength Meter

  Visual indicator for password strength with validation criteria.

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

  Here is Combobox component

• Slarivo Autocomplete

  An autocomplete input component with filtering, grouping, trigger/clear buttons, and keyboard navigation. Built on Base UI Autocomplete primitives.

• Slarivo Autocomplete

  An autocomplete input component with filtering, grouping, trigger/clear buttons, and keyboard navigation. Built on Base UI Autocomplete primitives.

• Slarivo Autocomplete

  An autocomplete input component with filtering, grouping, trigger/clear buttons, and keyboard navigation. Built on Base UI Autocomplete primitives.

• Slarivo Autocomplete

  An autocomplete input component with filtering, grouping, trigger/clear buttons, and keyboard navigation. Built on Base UI Autocomplete primitives.

• Slarivo Password Input

  Here is simple minimalistic password input

• Slarivo Morphing Input

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

• Slarivo Tag Input

  Here is tag input component

• Slarivo Slider

  An input where the user selects a value from within a given range.

• Slarivo Slider

  An input where the user selects a value from within a given range.

• Slarivo Slider

  An input where the user selects a value from within a given range.

• Slarivo Link Shortner

  A sleek link shortner component with transform animations

• 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 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 Mission Success Dialog

  Mission Success Dialog Description: A responsive and animated dialog component to celebrate a user's achievement or prompt for a next step. It's designed with reusability and shadcn/ui principles in mind, featuring smooth entrance and exit animations.

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

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

• Slarivo Form

  Here is advanced form layout

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

  Dialog box used to edit profile of a user

• Slarivo Tags Select

  A Component to select tags, simple and stylish

• Slarivo Smart Assist Input

  The SmartAssistInput is a next-generation, reusable input field designed to go far beyond a plain text box. It not only lets users type, but also actively assists them by remembering their previous inputs (via local history), offering quick re-selection with a dropdown, and providing built-in actions like copy and clear.

• Slarivo Password Reset Block

  Password reset flow with email input and success confirmation state.

• 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 Search With Category

  This component is a search bar with a category filter, built entirely using shadcn/ui components. It combines a dropdown select for choosing a category (like Products, Blogs, Users, or Docs), a text input for entering search queries, and a button with a search icon to submit. The design keeps all three elements aligned with equal height, giving it a clean and consistent look. It’s a common UI pattern for dashboards, e-commerce, or content platforms where users need to refine searches by category.

• Slarivo Action Hub Input

  This ActionHubInput component is a smart, multi-purpose input field designed for developers and power users. It combines inline action buttons, live validation, async status feedback, and persistent input history into a single reusable component. Users can perform multiple actions like sending, copying, or clearing input, while receiving instant visual feedback with loading, success, or error states. With configurable actions, dynamic suggestions, and accessibility support, it transforms a standard input into a highly interactive and developer-friendly tool that adapts to different workflows and contexts.

• Slarivo Smart Textbox

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

• 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 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 Range Slider Input

  This RangeSliderInput component is a reusable input control that combines a dual-handle slider with numeric input fields for selecting a value range. Unlike the default browser number fields, it removes the built-in up/down arrows and replaces them with modern Lucide icons for increment and decrement actions. The component keeps the slider and inputs fully synchronized,

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

  Neobrutalism-styled input 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 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 Slider

  Input to select a value from a given range.

• Slarivo Form

  Minimalistic form layout

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

  Here is Dialog components

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

  Here is Input component

• Slarivo Input

  Here is Input component

• Slarivo Input

  Here is Input component

• Slarivo Input

  Here is Input component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

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

  Here is advanced password input with hover

• Slarivo newsletter signup

  This is news letter signup

• Slarivo Inline Copy Input

  This is a modern, pill-shaped copy-to-clipboard input with an inline button. It provides instant visual feedback by changing the background when copied, and is fully minimal and black-and-white for light and dark themes.

• 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 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 Textarea with characters left

  Here is textarea with characters left component

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

  A modern demo/template sign up form.

• Slarivo Slider

  Input to select a value from a given range.

• Slarivo Search Interface

  A reusable search interface component

• 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 Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo Reshaped Number field

  Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

• Slarivo Border Beam Search

  Animated border beam effect for React using the line preset — a bottom-only traveling glow that sweeps along the edge. This demo wraps a rounded search bar.

• Slarivo indevInputui

  Here is modern input component from idevui

• Slarivo 8-bit Newsletter Signup

  Newsletter signup card with an email input and subscribe CTA, built in the retro 8-bit pixel style.

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

  Here is modern label by indevui

• Slarivo indevuiPopover

  Here is modern popover component by indevui

• Slarivo 8-bit Input

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

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

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo The Input

  Here is The Input component

• Slarivo Chat Form Dropzone

  A chat message input with an attached image dropzone that previews selected files as thumbnails inline.

• 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 Call To Action 3

  A centered call-to-action section with a heading, subtext, and an inline email input with a submit button for newsletter or waitlist signups.

• Slarivo Border Beam

  Animated border beam effect for React. Wraps any element with a traveling, hue-shifting glow around its border. This demo shows an AI chat/prompt composer with the medium full-border beam.

• Slarivo Animated Search

  Animated Search Bar with gooey effect

• Slarivo Upload

  Simple upload block

• Slarivo indevuiTextarea

  Here is indevui Text component

• Slarivo Book A Demo 2

  Book A Demo 2 with form section

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

  HeroUI v3 FieldError — per-field validation error display for TextField, covering basic and custom validation, dynamic messages and multiple errors.

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

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

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

  A preset color swatch picker with hue fine-tuning, live color preview, and editable hexadecimal input.

• Slarivo Prompt Composer

  A production-grade prompt input: typed variable chips, attachment queue with upload states, template menu, model picker and a live token budget that warns before you overflow.

• Slarivo OTP Input

  A one-time-code input with per-character cells, animated character crossfade, paste and keyboard navigation, and error/success validation states.

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

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

• Slarivo Unit Field

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

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

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

• Slarivo OTP Input

  OTP Input, OTP Form

• Slarivo Arc Browser like Color Picker

  An intuitive color picker component that generates harmonious color combinations. It features a circular HSL color wheel with dynamic spread control, allowing users to select 1-3 complementary colors simultaneously. The component supports customizable size, spread factors, and luminosity ranges, making it perfect for design systems and color palette generation.

• Slarivo Color Palette

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

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

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

• Slarivo Message Input block

  A messaging input block with emoji, GIF and attachment support.

• Slarivo Card

  Product Card This interactive card allows users to view product details, select variants like color and size, and add the item to their cart. It's built to be highly reusable and theme-adaptive.

• Slarivo ColorSwatchPicker

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

• Slarivo Exploding Input

  Input component that spawns particle effects when typing.

• Slarivo ColorSwatch

  A visual preview of a color value with accessibility support.

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value, disabled state, selectable color space & channels, a dotted-grid variant, and a custom render function. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input OTP

  ReUI Input OTP with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

• 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 PIN Keypad Unlock

  A full-height numeric keypad lock screen with PIN dots, a biometric shortcut, and a backspace key for mobile app locks and quick re-authentication.

• 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 AI Prompt Input

  Premium AI prompt composer with rotating placeholders, floating toolbar, and Cursor-style model selector.

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

  A @shadcn-ui compatible color picker using @uiw/react-color

• Slarivo Color Picker

  Here is Color Picker component

• 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 Chatgpt Prompt Input

  This is a complete replica of the chatgpt prompt input some may call it chat input or prompt box or promptbox

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

  A Linear inspired component to add / edit filters

• Slarivo AI Voice Input

  A voice input component with an animated visualizer and recording timer. It includes a demo mode, customizable visualizer, and recording callbacks. Features: • Animated audio visualizer • Recording timer display • Demo/preview mode • Start/stop callbacks • Dark mode support • Customizable visualizer bars • Mobile responsive

• 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 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 Animated AI Input

  AI input with animated model switching.

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo Claude Style AI Input

  Claude style dynamic chat input that adapts its preview based on content type - showing code snippets for programming files, content previews for documents, and traditional previews for media.

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

  AI Chat Input

• Slarivo Prompt Input

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

• 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 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 AI Assistant Interface

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

• 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 AI Input With File

  An enhanced chat input component with file upload capabilities. It features an auto-resizing textarea, file attachment preview, and submit button. Features: • File upload with preview • Auto-resizing textarea • File type restrictions • File size limits • Dark mode support • Mobile responsiveness • Keyboard shortcuts • Animated UI elements

• Slarivo Interactive Checkout

  Interactive checkout when adding items to shopping cart.

• Slarivo Interactive Text Particle

  A visually engaging canvas-based text effect for React that transforms text into interactive, hover-reactive particles. Designed for modern UI/UX experiences, this component adapts responsively to screen size, supports rich color palettes, and offers fully customizable animation dynamics—all with zero external dependencies. Perfect for landing pages, hero sections, and attention-grabbing banners.

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

  An interactive voice recording interface with animated visual feedback, timer display, and customizable start/stop callbacks.

• Slarivo Prompt Suggestion

  A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes: Normal Mode: Renders clickable, pill-shaped buttons ideal for suggesting quick prompts in chat interfaces Highlight Mode: Provides text highlighting to highlight a part of the suggestion

• Slarivo Login Form

  Here is Login Form component

• Slarivo Ai Input

  Here is Ai Input component

• Slarivo Field

  Here is Field 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 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 Cyber Matrix Hero

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

• Slarivo Pointer

  A component that displays a pointer when hovering over an element

• Slarivo Advanced Ai Chat Input

  Advanced Chat Input A sophisticated chat input component that supports file attachments, custom action icons, and an animated send button. It automatically resizes based on content.

• Slarivo Input Modal

  Here is Input Modal component

• Slarivo AI Chat Input

  Open ended prompt inputs that can be used in AI conversations and other natural language prompting

• Slarivo Modern animated multi words

  Modern animated multi words

• Slarivo Gradient AI Chat Input

  Ideal for modern AI-powered applications and chat interfaces where users need a premium, visually appealing input experience. Its sophisticated gradient design with multi-layer borders and smooth animations creates an engaging interface perfect for AI assistants, messaging platforms, or any application requiring file attachments and model selection. The component's responsive design and accessibility features make it suitable for professional dashboards, educational tools, or creative applications where user experience matters.

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

  Here is Waveform component

• Slarivo Voice Picker

  Here is Voice Picker 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 Assignee User

  Here is user assignation component by indev ui

• Slarivo Interactive Dots

  Interactive Dots with props

• 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 AI Chat Input Block

  A block for AI product for prompting and tool usage.

• 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 Ai Chat Input

  This AI Chat Input component with Popover Commands is an enhanced input interface inspired by ChatGPT-style chat boxes, designed using shadcn UI. It provides a smooth and modern typing experience while supporting advanced features like trigger-based commands. When users type the / key, a popover appears, showing a list of available commands (e.g., Insert Emoji, Attach File, Summarize, Generate Code). Instead of inserting options directly, users can preview and select from the menu, ensuring better control and flexibility. The component also includes a smiley icon for quick emoji access, making conversations more expressive. With its responsive design and support for both light and dark themes, this component is highly reusable, customizable, and easy to integrate into AI chat systems, messaging dashboards, or productivity apps. It balances simplicity and functionality, offering a familiar yet feature-rich user experience.

• Slarivo Input

  Prompt Input A comprehensive and visually polished chat input component. It features a dismissible credit banner, an action toolbar, and smooth animations for a premium user experience. The component is built with cva for variant support and framer-motion for animations.

• Slarivo Otp Input

  Here is Otp Input component

• Slarivo Input OTPs

  Here is Input OTP component

• 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 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 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 you can scroll.

  you can scroll. component

• Slarivo Radial Time Picker

  Interactive time inputs featuring a radial weapon wheel and orbit circles for high-speed micro-adjustments. Built with Framer Motion, strict 24h autocompletion, and native dark mode.

• Slarivo BeUI OTP Input

  This is OTP Input component

• Slarivo AI Agent Input

  A chat-style AI prompt input with attachments, a model picker, slash-command skill pills, and a one-click "enhance prompt" rewrite state.

• Slarivo Pin Input

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

• Slarivo Angle Slider

  A Angle Slider component for capturing short text, values, search terms, and configurable data, featuring angle slider, angle-slider, slider, control.

• Slarivo Angle Slider

  A Angle Slider component for capturing short text, values, search terms, and configurable data, featuring angle slider, angle-slider, slider, control.

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo ColorSwatchPicker

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

• Slarivo ColorSwatchPicker

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

• Slarivo ColorSwatchPicker

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

• Slarivo ColorSwatchPicker

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

• Slarivo ColorSwatchPicker

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

• Slarivo ColorSwatchPicker

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

• Slarivo ColorSwatchPicker

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

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

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

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Phone Input

  ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.

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

  A visual preview of a color value with accessibility support.

• Slarivo ColorSwatch

  A visual preview of a color value with accessibility support.

• Slarivo ColorSwatch

  A visual preview of a color value with accessibility support.

• Slarivo ColorSwatch

  A visual preview of a color value with accessibility support.

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo HeroUI Color Area

  HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value,…

• Slarivo Color Generator

  A Color Generator component for capturing short text, values, search terms, and configurable data, featuring color picker, color-picker, palette, slider.

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

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

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

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

• Slarivo Exposure Slider

  A camera-style notch ruler you drag instead of a thumb — momentum, masked edge fade, optional progress ring, and any min/max/step you need.

• Slarivo ReUI Input Group

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

• 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 ReUI Input Group

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

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input Group

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

• Slarivo ReUI Input OTP

  ReUI Input OTP with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Input OTP

  ReUI Input OTP with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Input OTP

  ReUI Input OTP with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Input OTP

  ReUI Input OTP with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo ReUI Input OTP

  ReUI Input OTP with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Triangle LED Hero

  Analytic edge-glow triangle with LED emitters, floor radiance, and interactive color deploy. Canvas-scoped pointer input drives the lighting while a lil-gui selector chooses highlighted edges.

• Slarivo Hero Scroll Video Pin Reveal

  A cinematic hero section with GSAP SplitText kinetic word reveal, clip-path badges, and an expanding full-screen drone video pin animation across mobile, tablet, and desktop.

• Slarivo Slider with Value Output

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

• 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 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 in Form Field

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

• 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 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 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 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 Password Label with Forgot Link

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

• 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 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 Horizontal Form Fields

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

• 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 Support Request Fieldset

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

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

  A horizontal or vertical slider for adjusting a single color channel such as hue, saturation, or brightness, built on React Aria Components.

• 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 Search Input with Keyboard Shortcut

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

• Slarivo Collapsible Form Fields

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

• 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 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 Vibe-to-Prompt AI Input

  A fluid, glowing command interface designed to visually transform vague coding ideas into structured, production-ready prompts. Features a continuous conic-gradient border, physics-based state transitions, and an animated layout shift that snaps…

• 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 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 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 Kbd Input Group

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

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