Quickstart

Next.js

Create the app

Create a Next.js project with Tailwind CSS, import aliases, and shadcn/ui configured. Choose npm when prompted for a package manager.

npx shadcn@latest init --template next --name my-app --base radix
cd my-app

Already have a project? Run npx shadcn@latest init from its root if it does not have a components.json file.

Install the Supabase client

Add the Next.js client. The installer adds the client files and Supabase dependencies. If you already have a client, keep your existing setup and check that the block imports match its location.

npx shadcn@latest add https://supabase.com/library/r/supabase-client-nextjs.json

Configure Supabase

Create .env.local in the project root. Add your project URL and publishable key from the Connect dialog.

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-publishable-key

Add your first block

Install the password authentication block from the project root. This adds the authentication files and their UI dependencies.

npx shadcn@latest add https://supabase.com/library/r/password-based-auth-nextjs.json

Follow the Next.js authentication setup to connect the routes, configure redirect URLs, and finish the email flow before testing sign-up.

Start developing

Run the development server and open the local URL printed in your terminal. Restart the server after changing environment variables.

npm run dev

Explore the library

Browse blocks by category to find your next component. Each block page includes installation commands, source files, and framework-specific usage instructions.

Troubleshooting

Run install commands from the directory containing components.json. If an import cannot be resolved, check its aliases and the paths in your TypeScript configuration. For an existing project, use the setup guide linked in your framework tab to check Tailwind CSS and alias configuration before reinitializing shadcn/ui.

For framework-specific questions, see the FAQs.