From 8664cfb96012b0af31f6ed40ffd72fbf6e10a87f Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 11 Aug 2025 13:57:36 -0400 Subject: [PATCH 01/18] Create shadcn.mdx --- docs/quickstarts/nextjs/shadcn.mdx | 50 ++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 docs/quickstarts/nextjs/shadcn.mdx diff --git a/docs/quickstarts/nextjs/shadcn.mdx b/docs/quickstarts/nextjs/shadcn.mdx new file mode 100644 index 0000000000..30f8a34734 --- /dev/null +++ b/docs/quickstarts/nextjs/shadcn.mdx @@ -0,0 +1,50 @@ +--- +title: shadcn/ui Next.js Quickstart (App Router) +description: Add authentication and user management to your Next.js app using shadcn/ui CLI. +--- + + + ## Create a new Next.js application + + Run the following command to [create a new Next.js application](https://nextjs.org/docs/getting-started/installation). + + + ```bash {{ filename: 'terminal' }} + npx create-next-app@latest + ``` + + ```bash {{ filename: 'terminal' }} + yarn create next-app + ``` + + ```bash {{ filename: 'terminal' }} + pnpm create next-app + ``` + + ```bash {{ filename: 'terminal' }} + bunx create-next-app + ``` + + + ## Install shadcn/ui CLI + + Run the following command to install the shadcn/ui CLI: + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + From 54dca9c63c7b2a8dfd9e48e290c6c4b3e5ec322c Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 11 Aug 2025 14:11:10 -0400 Subject: [PATCH 02/18] tweaks --- docs/quickstarts/nextjs/shadcn.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/quickstarts/nextjs/shadcn.mdx b/docs/quickstarts/nextjs/shadcn.mdx index 30f8a34734..983899249e 100644 --- a/docs/quickstarts/nextjs/shadcn.mdx +++ b/docs/quickstarts/nextjs/shadcn.mdx @@ -3,6 +3,8 @@ title: shadcn/ui Next.js Quickstart (App Router) description: Add authentication and user management to your Next.js app using shadcn/ui CLI. --- +This tutorial will demonstrate how to create a new Next.js app and add authentication to it using Clerk using the shadcn/ui CLI. + ## Create a new Next.js application @@ -26,9 +28,9 @@ description: Add authentication and user management to your Next.js app using sh ``` - ## Install shadcn/ui CLI + ## Install Clerk with shadcn/ui CLI - Run the following command to install the shadcn/ui CLI: + Run the following command to boostrap the app with Clerk using the shadcn/ui CLI: ```bash {{ filename: 'terminal' }} From e8f6208d2b49a89d73f4bd95577f870e423c078d Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 11 Aug 2025 14:21:10 -0400 Subject: [PATCH 03/18] Update build-docs.ts --- scripts/build-docs.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/build-docs.ts b/scripts/build-docs.ts index e210f17283..4676ec5a71 100644 --- a/scripts/build-docs.ts +++ b/scripts/build-docs.ts @@ -171,6 +171,7 @@ async function main() { 'upgrade-guides/core-2/react.mdx': ['doc-not-in-manifest'], 'upgrade-guides/core-2/remix.mdx': ['doc-not-in-manifest'], 'upgrade-guides/core-2/javascript.mdx': ['doc-not-in-manifest'], + 'quickstarts/nextjs/shadcn.mdx': ['doc-not-in-manifest'], }, typedoc: { 'types/active-session-resource.mdx': ['link-hash-not-found'], From 4725964eafd143a31038525e59ab29f28391b241 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 10:25:53 -0400 Subject: [PATCH 04/18] Add reference page --- docs/references/nextjs/shadcn.mdx | 122 ++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 docs/references/nextjs/shadcn.mdx diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx new file mode 100644 index 0000000000..16dc7b452e --- /dev/null +++ b/docs/references/nextjs/shadcn.mdx @@ -0,0 +1,122 @@ +--- +title: 'Next.js shadcn/ui CLI' +description: Use the shadcn/ui CLI to bootstrap your Next.js app with Clerk. +--- + +The shadcn/ui CLI is a tool that allows you to bootstrap your Next.js app with Clerk. + +## Quick Start + +Get started with Clerk authentication in seconds using the complete quickstart package: + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + +This single command will install: + +- App layout with ClerkProvider and theme integration +- Sign-in and sign-up pages with catch-all routes +- Clerk middleware for route protection +- Header component with authentication buttons +- Theme provider for dark/light mode support + +## Pages + +### Sign In + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json + ``` + + +### Sign Up + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json + ``` + + +## Components + +### `` + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json + ``` + + +## Files + +### Middleware + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-middleware.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-middleware.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-middleware.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-middleware.json + ``` + \ No newline at end of file From 21d1c44e7c987bc20465329c47db99e4d0f13977 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 10:32:08 -0400 Subject: [PATCH 05/18] Update shadcn.mdx --- docs/references/nextjs/shadcn.mdx | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index 16dc7b452e..8f283e33a0 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -81,6 +81,8 @@ This single command will install: ### `` +The [``](/docs/nextjs/components/clerk-provider) component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. + ```bash {{ filename: 'terminal' }} npx shadcn@latest add https://clerk.com/r/nextjs-clerk-provider.json @@ -99,10 +101,35 @@ This single command will install: ``` +With the ClerkProvider component installed, you can wrap your app's layout to provide Clerk's authentication context to your app. + +```tsx {{ filename: 'app/layout.tsx', mark: ['ClerkProvider'] }} +import { ClerkProvider } from '@/components/clerk-provider' +import './globals.css' + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + + + {children} + + + + ) +} +``` + ## Files ### Middleware +The [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) helper integrates Clerk authentication into your Next.js application through Middleware. + ```bash {{ filename: 'terminal' }} npx shadcn@latest add https://clerk.com/r/nextjs-middleware.json From a0d3dd6436faba8199d1c99a5eac4bfb6c36dc74 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 10:33:21 -0400 Subject: [PATCH 06/18] Update manifest.json --- docs/manifest.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/manifest.json b/docs/manifest.json index af85d0bea6..d3f190e1a9 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -36,6 +36,10 @@ "title": "Next.js Guides", "items": [ [ + { + "title": "shadcn/ui CLI", + "href": "/docs/references/nextjs/shadcn" + }, { "title": "Read session and user data", "href": "/docs/references/nextjs/read-session-data" From 858202610ca7303ad49a56b3b2590934a4130ad3 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 11:26:47 -0400 Subject: [PATCH 07/18] Trigger build From d0f208aef7ffcb92fa9cdbabbc738a0684cff19f Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 11:34:59 -0400 Subject: [PATCH 08/18] fix links --- docs/references/nextjs/shadcn.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index 8f283e33a0..f2a83e0990 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -81,7 +81,7 @@ This single command will install: ### `` -The [``](/docs/nextjs/components/clerk-provider) component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. +The [``](/docs/components/clerk-provider) component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. ```bash {{ filename: 'terminal' }} @@ -128,7 +128,7 @@ export default function RootLayout({ ### Middleware -The [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) helper integrates Clerk authentication into your Next.js application through Middleware. +The [`clerkMiddleware()`](/docs/references/clerk-middleware) helper integrates Clerk authentication into your Next.js application through Middleware. ```bash {{ filename: 'terminal' }} From 1d84658fb69d3ac9b1ba8a3398852e232da68294 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 11:43:12 -0400 Subject: [PATCH 09/18] fix links --- docs/references/nextjs/shadcn.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index f2a83e0990..6678e9cf85 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -81,7 +81,7 @@ This single command will install: ### `` -The [``](/docs/components/clerk-provider) component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. +The [``](/docs/components/clerk-provider.mdx) component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. ```bash {{ filename: 'terminal' }} @@ -128,7 +128,7 @@ export default function RootLayout({ ### Middleware -The [`clerkMiddleware()`](/docs/references/clerk-middleware) helper integrates Clerk authentication into your Next.js application through Middleware. +The [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware.mdx) helper integrates Clerk authentication into your Next.js application through Middleware. ```bash {{ filename: 'terminal' }} From bf61a2132c89f0f58e8b8a1ae00ba403dd740617 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 11:45:41 -0400 Subject: [PATCH 10/18] format --- docs/references/nextjs/shadcn.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index 6678e9cf85..f9226eb20c 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -115,9 +115,7 @@ export default function RootLayout({ return ( - - {children} - + {children} ) @@ -146,4 +144,4 @@ The [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware.mdx) helper i ```bash {{ filename: 'terminal' }} bunx --bun shadcn@latest add https://clerk.com/r/nextjs-middleware.json ``` - \ No newline at end of file + From 87b3f99201ed5975b7a66cbef91b864388fc6b55 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 11:49:44 -0400 Subject: [PATCH 11/18] remove .mdx --- docs/references/nextjs/shadcn.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index f9226eb20c..cf70076593 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -81,7 +81,7 @@ This single command will install: ### `` -The [``](/docs/components/clerk-provider.mdx) component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. +The [``](/docs/components/clerk-provider) component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components. ```bash {{ filename: 'terminal' }} @@ -126,7 +126,7 @@ export default function RootLayout({ ### Middleware -The [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware.mdx) helper integrates Clerk authentication into your Next.js application through Middleware. +The [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) helper integrates Clerk authentication into your Next.js application through Middleware. ```bash {{ filename: 'terminal' }} From 6ab3d832ef3f4a3d7f931e25b1ae861c55655339 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 11:57:11 -0400 Subject: [PATCH 12/18] update title --- docs/references/nextjs/shadcn.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index cf70076593..262adad030 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -1,5 +1,5 @@ --- -title: 'Next.js shadcn/ui CLI' +title: 'Install Clerk with shadcn/ui CLI' description: Use the shadcn/ui CLI to bootstrap your Next.js app with Clerk. --- From 9ba3561fcf12023eefd6e5ebd2b7461d769546ce Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 13:10:23 -0400 Subject: [PATCH 13/18] add next steps --- docs/quickstarts/nextjs/shadcn.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/quickstarts/nextjs/shadcn.mdx b/docs/quickstarts/nextjs/shadcn.mdx index 983899249e..d60734f7c0 100644 --- a/docs/quickstarts/nextjs/shadcn.mdx +++ b/docs/quickstarts/nextjs/shadcn.mdx @@ -50,3 +50,10 @@ This tutorial will demonstrate how to create a new Next.js app and add authentic ``` + +## Next steps + + + - [Install Clerk with shadcn/ui CLI](/docs/references/nextjs/shadcn) + - Learn how to install Clerk pages, components, and files with the shadcn/ui CLI. + \ No newline at end of file From 219d39c83433dd69636eca9f9a3191083041f5c8 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 13:12:17 -0400 Subject: [PATCH 14/18] format --- docs/quickstarts/nextjs/shadcn.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/quickstarts/nextjs/shadcn.mdx b/docs/quickstarts/nextjs/shadcn.mdx index d60734f7c0..39bef82e1c 100644 --- a/docs/quickstarts/nextjs/shadcn.mdx +++ b/docs/quickstarts/nextjs/shadcn.mdx @@ -56,4 +56,4 @@ This tutorial will demonstrate how to create a new Next.js app and add authentic - [Install Clerk with shadcn/ui CLI](/docs/references/nextjs/shadcn) - Learn how to install Clerk pages, components, and files with the shadcn/ui CLI. - \ No newline at end of file + From d5ed2db4d185491bfaa4a9a12e8059df2f47c15c Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 12 Aug 2025 16:28:08 -0400 Subject: [PATCH 15/18] remove quickstart page for now --- docs/quickstarts/nextjs/shadcn.mdx | 59 ------------------------------ scripts/build-docs.ts | 1 - 2 files changed, 60 deletions(-) delete mode 100644 docs/quickstarts/nextjs/shadcn.mdx diff --git a/docs/quickstarts/nextjs/shadcn.mdx b/docs/quickstarts/nextjs/shadcn.mdx deleted file mode 100644 index 39bef82e1c..0000000000 --- a/docs/quickstarts/nextjs/shadcn.mdx +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: shadcn/ui Next.js Quickstart (App Router) -description: Add authentication and user management to your Next.js app using shadcn/ui CLI. ---- - -This tutorial will demonstrate how to create a new Next.js app and add authentication to it using Clerk using the shadcn/ui CLI. - - - ## Create a new Next.js application - - Run the following command to [create a new Next.js application](https://nextjs.org/docs/getting-started/installation). - - - ```bash {{ filename: 'terminal' }} - npx create-next-app@latest - ``` - - ```bash {{ filename: 'terminal' }} - yarn create next-app - ``` - - ```bash {{ filename: 'terminal' }} - pnpm create next-app - ``` - - ```bash {{ filename: 'terminal' }} - bunx create-next-app - ``` - - - ## Install Clerk with shadcn/ui CLI - - Run the following command to boostrap the app with Clerk using the shadcn/ui CLI: - - - ```bash {{ filename: 'terminal' }} - npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json - ``` - - ```bash {{ filename: 'terminal' }} - pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json - ``` - - ```bash {{ filename: 'terminal' }} - yarn shadcn@latest add https://clerk.com/r/nextjs-quickstart.json - ``` - - ```bash {{ filename: 'terminal' }} - bunx --bun shadcn@latest add https://clerk.com/r/nextjs-quickstart.json - ``` - - - -## Next steps - - - - [Install Clerk with shadcn/ui CLI](/docs/references/nextjs/shadcn) - - Learn how to install Clerk pages, components, and files with the shadcn/ui CLI. - diff --git a/scripts/build-docs.ts b/scripts/build-docs.ts index 4676ec5a71..e210f17283 100644 --- a/scripts/build-docs.ts +++ b/scripts/build-docs.ts @@ -171,7 +171,6 @@ async function main() { 'upgrade-guides/core-2/react.mdx': ['doc-not-in-manifest'], 'upgrade-guides/core-2/remix.mdx': ['doc-not-in-manifest'], 'upgrade-guides/core-2/javascript.mdx': ['doc-not-in-manifest'], - 'quickstarts/nextjs/shadcn.mdx': ['doc-not-in-manifest'], }, typedoc: { 'types/active-session-resource.mdx': ['link-hash-not-found'], From 189eab704729c0d67826a1f1cf71879291691888 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 13 Aug 2025 12:53:01 -0400 Subject: [PATCH 16/18] add descriptions --- docs/references/nextjs/shadcn.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index 262adad030..00b04148a3 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -39,6 +39,8 @@ This single command will install: ### Sign In +The sign-in page is a dedicated page that allows users to sign in to their account. + ```bash {{ filename: 'terminal' }} npx shadcn@latest add https://clerk.com/r/nextjs-sign-in-page.json @@ -59,6 +61,8 @@ This single command will install: ### Sign Up +The sign-up page is a dedicated page that allows users to sign up for a new account which includes a two column layout with a list of selling points and a form to sign up. + ```bash {{ filename: 'terminal' }} npx shadcn@latest add https://clerk.com/r/nextjs-sign-up-page.json From 4ba2412bca08aaf9c960f1d315c608b791b91ce7 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 13 Aug 2025 13:00:54 -0400 Subject: [PATCH 17/18] feedback --- docs/references/nextjs/shadcn.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index 00b04148a3..e71ecaecaa 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -3,7 +3,7 @@ title: 'Install Clerk with shadcn/ui CLI' description: Use the shadcn/ui CLI to bootstrap your Next.js app with Clerk. --- -The shadcn/ui CLI is a tool that allows you to bootstrap your Next.js app with Clerk. +The [shadcn/ui CLI](https://ui.shadcn.com/docs/cli) is a tool that allows you to bootstrap your Next.js app with Clerk. Clerk's shadcn/ui registry enables developers to add pre-built components and configurations to their projects with a single command. ## Quick Start From 4bbe022d272922a3b4066f5cb0f57facd2e2646d Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 15 Aug 2025 14:29:00 -0400 Subject: [PATCH 18/18] add waitlist command --- docs/references/nextjs/shadcn.mdx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/references/nextjs/shadcn.mdx b/docs/references/nextjs/shadcn.mdx index e71ecaecaa..60da683175 100644 --- a/docs/references/nextjs/shadcn.mdx +++ b/docs/references/nextjs/shadcn.mdx @@ -81,6 +81,29 @@ The sign-up page is a dedicated page that allows users to sign up for a new acco ``` +### Waitlist + +The following example includes a basic implementation of the `` component hosted on the `/waitlist` route. You can use this as a starting point for your own implementation. + + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-waitlist-page.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-waitlist-page.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-waitlist-page.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-waitlist-page.json + ``` + + ## Components ### ``