About
A styled text input with size and visual variants, subtle focus-lift animation, and an optional leading icon slot.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Primitive Input to your project and fits it to your theme.
Code
How Primitive Input is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import Input from "@/components/ui/primitive-input";
export default function InputDemo() {
return (
<div className="flex w-full max-w-sm flex-col gap-2 p-8">
<label
htmlFor="email"
className="text-sm font-medium text-[color:var(--bjork-text-strong)]"
>
Email
</label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>
);
}