# Quickstart Create an app, connect Supabase, and install your first library block ## Next.js ### Create the app Create a [Next.js project](https://ui.shadcn.com/docs/installation/next) with Tailwind CSS, import aliases, and shadcn/ui configured. Choose npm when prompted for a package manager. ```bash 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](https://supabase.com/library/docs/nextjs/client.md). 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. ```bash 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](https://supabase.com/dashboard/project/_?showConnect=true). ```env 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. ```bash npx shadcn@latest add https://supabase.com/library/r/password-based-auth-nextjs.json ``` Follow the [Next.js authentication setup](https://supabase.com/library/docs/nextjs/password-based-auth.md#usage) 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. ```bash npm run dev ``` ## React Router ### Create the app Create a [React Router project](https://ui.shadcn.com/docs/installation/react-router) with Tailwind CSS, import aliases, and shadcn/ui configured. Choose npm when prompted for a package manager. ```bash npx shadcn@latest init --template react-router --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 [React Router client](https://supabase.com/library/docs/react-router/client.md). 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. ```bash npx shadcn@latest add https://supabase.com/library/r/supabase-client-react-router.json ``` ### Configure Supabase Create `.env` in the project root. Add your project URL and publishable key from the [Connect dialog](https://supabase.com/dashboard/project/_?showConnect=true). ```env VITE_SUPABASE_URL=your-project-url VITE_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. ```bash npx shadcn@latest add https://supabase.com/library/r/password-based-auth-react-router.json ``` Follow the [React Router authentication setup](https://supabase.com/library/docs/react-router/password-based-auth.md#usage) 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. ```bash npm run dev ``` ## TanStack Start ### Create the app Create a [TanStack Start project](https://ui.shadcn.com/docs/installation/tanstack) with Tailwind CSS, import aliases, and shadcn/ui configured. Choose npm when prompted for a package manager. ```bash npx shadcn@latest init --template start --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 [TanStack Start client](https://supabase.com/library/docs/tanstack/client.md). 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. ```bash npx shadcn@latest add https://supabase.com/library/r/supabase-client-tanstack.json ``` ### Configure Supabase Create `.env` in the project root. Add your project URL and publishable key from the [Connect dialog](https://supabase.com/dashboard/project/_?showConnect=true). ```env VITE_SUPABASE_URL=your-project-url VITE_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. ```bash npx shadcn@latest add https://supabase.com/library/r/password-based-auth-tanstack.json ``` Follow the [TanStack Start authentication setup](https://supabase.com/library/docs/tanstack/password-based-auth.md#usage) 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. ```bash npm run dev ``` Check the [TanStack Start guide](https://tanstack.com/start/latest/docs/framework/react/getting-started) for framework setup changes if the generated routes differ from the block examples. ## React SPA ### Create the app Create a [React SPA project](https://ui.shadcn.com/docs/installation/vite) with Tailwind CSS, import aliases, and shadcn/ui configured. Choose npm when prompted for a package manager. ```bash npx shadcn@latest init --template vite --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 [React SPA client](https://supabase.com/library/docs/react/client.md). 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. ```bash npx shadcn@latest add https://supabase.com/library/r/supabase-client-react.json ``` ### Configure Supabase Create `.env.local` in the project root. Add your project URL and publishable key from the [Connect dialog](https://supabase.com/dashboard/project/_?showConnect=true). ```env VITE_SUPABASE_URL=your-project-url VITE_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. ```bash npx shadcn@latest add https://supabase.com/library/r/password-based-auth-react.json ``` Follow the [React SPA authentication setup](https://supabase.com/library/docs/react/password-based-auth.md#usage) 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. ```bash npm run dev ``` ## Vue ### Create the app Create a [Vue project](https://www.shadcn-vue.com/docs/installation/vite) with Tailwind CSS, import aliases, and shadcn-vue configured. Choose npm when prompted for a package manager. ```bash npx shadcn-vue@latest init --template vite --name my-app cd my-app ``` Already have a project? Run `npx shadcn-vue@latest init` from its root if it does not have a `components.json` file. ### Install the Supabase client Add the [Vue client](https://supabase.com/library/docs/vue/client.md). 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. ```bash npx shadcn-vue@latest add https://supabase.com/library/r/supabase-client-vue.json ``` ### Configure Supabase Create `.env.local` in the project root. Add your project URL and publishable key from the [Connect dialog](https://supabase.com/dashboard/project/_?showConnect=true). ```env VITE_SUPABASE_URL=your-project-url VITE_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. ```bash npx shadcn-vue@latest add https://supabase.com/library/r/password-based-auth-vue.json ``` Follow the [Vue authentication setup](https://supabase.com/library/docs/vue/password-based-auth.md#usage) 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. ```bash npm run dev ``` ## Nuxt.js ### Create the app Create a [Nuxt.js project](https://www.shadcn-vue.com/docs/installation/nuxt) with Tailwind CSS, import aliases, and shadcn-vue configured. Choose npm when prompted for a package manager. ```bash npx shadcn-vue@latest init --template nuxt --name my-app cd my-app ``` Already have a project? Run `npx shadcn-vue@latest init` from its root if it does not have a `components.json` file. ### Install the Supabase client Add the [Nuxt.js client](https://supabase.com/library/docs/nuxtjs/client.md). 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. ```bash npx shadcn-vue@latest add https://supabase.com/library/r/supabase-client-nuxtjs.json ``` ### Configure Supabase Create `.env` in the project root. Add your project URL and publishable key from the [Connect dialog](https://supabase.com/dashboard/project/_?showConnect=true). ```env NUXT_PUBLIC_SUPABASE_URL=your-project-url NUXT_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. ```bash npx shadcn-vue@latest add https://supabase.com/library/r/password-based-auth-nuxtjs.json ``` Follow the [Nuxt.js authentication setup](https://supabase.com/library/docs/nuxtjs/password-based-auth.md#usage) 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. ```bash npm run dev ``` ## Explore the library Browse [blocks](https://supabase.com/library) 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](https://supabase.com/library/docs/getting-started/faq.md).