Textarea

Overview

The Textarea component is an enhanced version of the standard HTML textarea with beautiful animations and interactive features. Built with Framer Motion, it provides various animation variants, auto-expanding capabilities, and interactive effects.

Preview

Preview

Type something...

Code

import { AnimatedTextarea } from './components/ui';

function TextareaDemo() {
  const [value, setValue] = useState('');
  
  return (
    <AnimatedTextarea
      placeholder="Type something..."
      variant="clean"
      value={value}
      onChange={setValue}
    />
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add textarea

yarn

yarn @mindfiredigital/ignix-ui add textarea

pnpm

pnpm @mindfiredigital/ignix-ui add textarea

Usage

Import the component:

import { AnimatedTextarea } from './components/ui';

Basic Usage

function BasicTextarea() {
  const [value, setValue] = useState('');
  
  return (
    <AnimatedTextarea
      placeholder="Enter your message"
      variant="clean"
      value={value}
      onChange={setValue}
    />
  );
}

Animation Variants

Preview

Type something...

Code

<AnimatedTextarea
  placeholder="Type something..."
  variant="clean"
  value={value}
  onChange={setValue}
/>