Form Engine

A high-fidelity Form toolkit engineered for both simple landing pages and complex enterprise dashboards.

This engine decouples layout from state. It provides a stunning visual wrapper with a slim animated glowing border that tracks focus, and a custom glitching error text effect that draws immediate attention to invalid fields.

FormWrapper is unopinionated about state — it works with plain useState and with react-hook-form's handleSubmit alike, because it never clones or intercepts child refs.

React Hook Form + Zod

PassonSubmit: the result of RHF's handleSubmit() directly — FormWrapper never breaks child refs, so register() just works.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Form

npx shadcn@latest add @algorize-ui/form

components/custom/blocks/FormBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Form to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

input is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/input

Optional — schema validation

The form primitives are unopinionated about validation; the native example uses plain React state. Only add these if you want the schema-driven approach from the second example.

npm install react-hook-form zod @hookform/resolvers

Examples

Submitting

PassisSubmitting: to FormSubmit to swap the label for a spinner and disable the button, which is what blocks double submits.

Features

Explore the Form component's validation integration, accessible error messages, and loading state management.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Default	Description
`FormWrapper`	`title`	`string`	`undefined`	Heading shown above the divider. Omit it (along with `description`) to drop the header entirely.
`FormWrapper`	`description`	`string`	`undefined`	Supporting copy rendered under the title.
`FormWrapper`	`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Drives the animated border, focus ring and submit button. Accepts any hex string.
`FormWrapper`	`onSubmit`	`(e: React.FormEvent) => void`	`undefined`	When provided the children are wrapped in a `<form>`; otherwise a plain `<div>` is used.
`FormField`	`label`	`string`	`undefined`	Field label. Turns red automatically while `error` is set.
`FormField`	`error`	`string`	`undefined`	Message to render below the input. Falsy values render nothing.
`FormField`	`errorVariant`	`"glitch" \| "default"`	`"glitch"`	Selects the animated RGB-split error text or the static one.
`FormError`	`message`	`string`	`undefined`	Standalone error renderer, for when you are not using `FormField`.
`FormSubmit`	`isSubmitting`	`boolean`	`false`	Replaces the label with a spinner and disables the button.