Primitive Input

Forms 3

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="[email protected]" />
    </div>
  );
}