Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Signup Form

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

Open in

Welcome to Aceternity

Login to aceternity if you can because we don't have a login flow yet

Installation

Run the following command

npx shadcn@latest add https://ui.aceternity.com/registry/signup-form-demo.json

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 NameTypeDescription
classNamestringAdditional CSS classes to apply to the input component.
typestringSpecifies the type of input (e.g., "text", "password"). Inherits all standard HTML input types.
...propsReact.InputHTMLAttributes<HTMLInputElement>Spreads the rest of the input attributes (e.g., placeholder, disabled, value, etc.) from React's InputHTMLAttributes.
refReact.Ref<HTMLInputElement>Ref forwarding is used to allow parent components to directly access the DOM input element.

label.tsx

PropTypeDescription
classNamestringAdditional CSS classes to apply to the label component.
...propsReact.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

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro
I've been working with Manu for a couple of months now and I can't express enough how impressed I am with his talent. Manu's JavaScript/React web UI programming skills are through the roof. He's he...

Tony Pujals

Founder at Fantastic Realms, Tech Lead at Google

A product by Aceternity
Building in public at @mannupaaji