Input

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

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.

Component Code

You can copy and paste the following code to create this component:

IInput.vue

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

Images Slider
A full page slider with images that can be navigated with the keyboard.
Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.