Quickstart

1. Preview

This guide uses Split sign-in page with image. This block is free, so you can preview and install it without an account.

Open the live preview

Open the full block page to compare desktop, tablet, and mobile previews, try dark mode, and use the form controls.

2. Run the dry run first, then install

Run the dry run from the folder that contains your app's components.json. It lists the planned changes without writing files.

Install

3. Add to a route

Create a route in your app and import the installed component. This example uses a Next.js App Router page at app/sign-in/page.tsx.

import SignInPage from "@/components/blocks/application/login/split-with-image";

export default function Page() {
  return <SignInPage />;
}

If your project uses a different router or import alias, keep the installed component where shadcn placed it and import it from your route.

4. Connect authentication

The installed screen contains demo content. Finish these changes before using it with real users:

• Replace the sample brand, image, testimonial, and field values.
• Connect the form to your authentication flow and show its loading and error states.
• Connect the password-reset link, sign-up link, and social sign-in options.
• Test keyboard use, mobile width, and every theme your app supports.

Open the block's implementation guide for its dependencies, integration points, customization options, and pre-launch checks. For a paid block, continue with Set up Pro access.