Signup Form

A customizable form built on top of shadcn's input and label, with a touch of framer motion

Welcome to Aceternity

Installation

Run the following command

npx shadcn@latest add @aceternity/signup-form-demo

Update your CSS configuration

app/globals.css

@import "tailwindcss";
 
@theme inline {
  --shadow-input:
    0px 2px 3px -1px rgba(0, 0, 0, 0.1),
    0px 1px 0px 0px rgba(25, 28, 33, 0.02),
    0px 0px 0px 1px rgba(25, 28, 33, 0.08);
}

Props

input.tsx

Prop Name	Type	Description
className	`string`	Additional CSS classes to apply to the input component.
type	`string`	Specifies the type of input (e.g., "text", "password"). Inherits all standard HTML input types.
...props	`React.InputHTMLAttributes<HTMLInputElement>`	Spreads the rest of the input attributes (e.g., placeholder, disabled, value, etc.) from React's InputHTMLAttributes.
ref	`React.Ref<HTMLInputElement>`	Ref forwarding is used to allow parent components to directly access the DOM input element.

label.tsx

Prop	Type	Description
className	`string`	Additional CSS classes to apply to the label component.
...props	`React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>`	All other props supported by LabelPrimitive.Root from @radix-ui/react-label.

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access