Components
you@example.com
Customize
Installation
$ pnpm dlx shadcn@latest add @framecn/input
Usage
import { Input } from "@/components/ui/input";<Input
placeholder="you@example.com"
value="remotion@remocn.dev"
state="typing"
/>Smooth transitions
The docs preview animates hover → active → typing → invalid via useInputTransition. Forward primary into the hook when using style so the focus ring tracks the color prop:
import { Input } from "@/components/framecn/input";
import { useInputTransition } from "@/components/framecn/use-input-transition";
const style = useInputTransition(
[
{ at: 10, state: "hover", duration: 8 },
{ at: 24, state: "active", duration: 10 },
{ at: 40, state: "typing", duration: 22 },
{ at: 78, state: "invalid", duration: 12 },
],
{ primary: "#171717" }
);
<Input
placeholder="you@example.com"
value="remotion@remocn.dev"
style={style}
/>;style takes precedence over state when both are provided.
API Reference
Input
| Prop | Type | Default |
|---|---|---|
state | "idle" | "hover" | "active" | "typing" | "blur" | "invalid" | "idle" |
style | InputStyle | - (takes precedence over state) |
placeholder | string | "you@example.com" |
value | string | "remotion@remocn.dev" |
size | "sm" | "default" | "lg" | "default" |
primary | string | - |
fullWidth | boolean | - |
theme | Partial<FramecnTheme> | - |
className | string | - |