AI Input
A stunning AI-powered input component with animated gradient border blobs that orbit around the input during loading states. Features file attachment support and beautiful placeholder animations.
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/ai-input.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/ai-input.tsx
'use client';
import { cn } from '@/lib/utils';
import { ArrowUp, LoaderCircle, Paperclip, X } from 'lucide-react';
import React, { useRef, useState } from 'react';
import { AnimatePresence, motion, useAnimationControls } from 'framer-motion';
type AiInputProps = {
width?: string;
className?: string;
placeholder?: string;
rows?: number;
mainColor?: string;
backgroundColor?: string;
onSubmit?: (value: string, file: File | null) => void | Promise<void>;
animationStyle?: 'orbit' | 'pulse';
};
const AiInput = ({
width = '400px',
placeholder = 'Ask me anything...',
mainColor = '#FFDC00',
backgroundColor = '#111111',
rows = 2,
onSubmit,
animationStyle = 'orbit',
}: AiInputProps) => {
const [value, setValue] = useState('');
const [file, setFile] = useState<File | null>(null);
const [isLoading, setIsLoading] = useState(false);
// ... full implementation in source file
return (
<div style={{ width }} className="relative">
{/* Animated blob elements */}
<textarea
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={placeholder}
rows={rows}
className="w-full bg-black border border-white/10 rounded-xl p-3 text-white"
/>
</div>
);
};
export default AiInput;Note: The full source code is available via CLI installation or in the GitHub repository. The component includes complex animation logic for the orbiting gradient blobs.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| width | string | '400px' | Width of the input container |
| placeholder | string | 'Ask me anything...' | Placeholder text |
| rows | number | 2 | Number of textarea rows |
| mainColor | string | '#FFDC00' | Primary gradient color |
| backgroundColor | string | '#111111' | Background color |
| onSubmit | (value, file) => void | - | Submit handler |
| animationStyle | 'orbit' | 'pulse' | 'orbit' | Loading animation style |