How do I install Login Form With Gradient?

Run npx shadcn@latest add @aceternity/login-form-with-gradient in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Login Form With Gradient responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Login Form With Gradient is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

7 / 7

A two-column login page with form fields on the left and an animated gradient illustration on the right. Includes social login buttons and custom input styling.

Welcome back!

We empower developers and technical teams to create, simulate, and manage AI-driven workflows visually

Already have an account? Sign up

Product Company

Cloud Management

Aceternity Pro Components have completely changed how we work. What used to take hours every week is now fully automated.

Gina Clinton

Head of Product, Acme Inc.

The left column contains a logo, welcome heading, and form with email and password inputs using Radix Label primitives. Below the form fields is a row of social login buttons for Google, Facebook, and Apple.

A horizontal divider with "or" text separates the primary login button from social options. The right column displays an animated gradient illustration using SVG paths and layered effects that add visual interest without distracting from the form.

Inputs use a custom shadow-input style and have focus states with neutral ring colors. The sign-in button has a secondary variant styling. A "Sign up" link sits below for users who need to create an account.

Works well for SaaS dashboards, developer tools, B2B applications, or any product that needs a polished authentication experience.

More from Login and Signup Sections

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Registration Form With Images Login With Socials And Email Simple Centered Contact Form Login and Signup Sections Contact Sections

About this block

Works well for SaaS dashboards, developer tools, B2B applications, or any product that needs a polished authentication experience.