Input

A versatile and visually dynamic input field with radial hover effects, styled for modern web applications.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/input.json"

Install Manually

Copy and paste the following code

IInput.vue

API

Prop NameTypeDefaultDescription
defaultValuestring | number""Default value of the input field.
classstring""Additional CSS classes for custom styling.
containerClassstring""Additional CSS classes for custom styling of the container.

Features

  • Radial Hover Effect: Displays a dynamic radial gradient background that follows mouse movements when hovering over the input container.
  • Two-Way Binding: Supports v-model for seamless integration with Vue's two-way data binding.
  • Dark Mode Compatibility: Automatically adapts to dark mode styles using Tailwind's dark: utilities.
  • Customizable Styles: Easily extend or override styles using the class prop.
  • Accessible Focus Ring: Includes focus-visible styles for enhanced accessibility and usability.
  • Responsive Design: Works well across different screen sizes and devices.

Styles

This component inherits base styles from ShadCN Vue’s Input component and applies additional functionality, including hover effects and shadow styling.

Credits

File Upload
A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.
Placeholders And Vanish Input
Sliding in placeholders and vanish effect of input on submit