Form 1

Cards 2

About

Elegant workspace creation form with labeled inputs, grouped fields, and a clean card layout for onboarding users smoothly.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form 1 to your project and fits it to your theme.

Code

How Form 1 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CreateWorkspaceForm } from "@/components/ui/form-1";

export default function DemoOne() {
  return (
    <div className="relative flex min-h-screen w-full items-center justify-center p-4">
      {/* Subtle dotted grid */}
      <div
        aria-hidden="true"
        className="-z-1 pointer-events-none absolute inset-0"
        style={{
          backgroundImage:
            "radial-gradient(rgba(255,255,255,0.1) 0.8px, transparent 1px)",
          backgroundSize: "14px 14px",
        }}
      />
      <CreateWorkspaceForm />
    </div>
  );
}