I'll recreate the Clerk authentication quickstart guide UI shown in the screenshots.
I've recreated the Clerk authentication quickstart guide UI from the screenshots. The implementation includes:
- A header section with "Quickstarts" and framework selection dropdown
- A grid of framework cards showing different integration options (Next.js, Astro, Nuxt, React Router, Remix, and TanStack Start)
- A detailed step-by-step guide focused on step 3: "Add clerkMiddleware() to your app"
- The sidebar navigation showing all steps in the integration process
- Code examples showing how to implement the middleware in a Next.js application
The UI is fully responsive and matches the design shown in the screenshots. You can navigate through the steps by clicking on the numbered circles in the sidebar.
164d ago
I'll apply the changes to move the steps navigation to the right side and add connecting lines between steps.
I've made the following changes to the clerk-quickstart.tsx file:
- Moved the steps navigation from the left side to the right side by swapping the order of the grid columns
- Added vertical connecting lines between each step (1-2-3-4-5-6) using absolute positioning
- Made the active step (step 3) highlighted with blue styling
- Added a "Next steps" section at the bottom of the navigation
- Ensured the navigation is responsive and properly follows the active documentation step
The steps navigation now appears in the top right corner as shown in the screenshots, with vertical lines connecting each step to create a visual flow. The active step is highlighted, and the navigation will dynamically follow along with the main documentation content.
164d ago
Modify the interface to mirror this screenshot; put the steps segment in a block like this
<div class="fixed bottom-0 right-[calc(max(1.75rem,calc(50%-32rem-8.75rem))+var(--root-pr)/2)] top-[calc(theme(spacing.1)+theme(spacing.16))] hidden w-56 overflow-y-auto py-16 xl:block"><div class="relative" data-sentry-component="TableOfContents" data-sentry-source-file="TableOfContents.tsx"><div class="absolute inset-y-0 left-4 h-full w-4 bg-gray-100 dark:bg-gray-800" style="mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 232'%3E%3Cpath d='M 0.5 0 V 32 V 60 V 104 V 148 V 176 V 204 V 232' fill='none' stroke='black'/%3E%3C/svg%3E");"><div class="absolute inset-0 origin-top bg-gray-950 transition dark:bg-white" style="transform: translate3d(0px, 0px, 0px) scaleY(0.103448);"></div></div><ol aria-label="On this page" role="list" class="relative pl-9 text-sm/4 font-book text-gray-600 dark:text-gray-400"><li data-step="1" class="relative mt-3 first:mt-0 group/item before:absolute before:size-3.5 before:rounded-full before:text-center before:text-[0.625rem]/[0.875rem] before:font-medium before:ring-2 before:ring-white before:transition-colors before:content-[attr(data-step)] dark:before:ring-gray-950 before:bg-gray-100 dark:before:bg-gray-800 before:left-[calc(-1*theme(spacing.5)-0.40625rem)]"><a href="#create-a-new-next-js-application" class="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]">Create a new Next.js application</a></li><li data-step="2" class="relative mt-3 first:mt-0 group/item before:absolute before:size-3.5 before:rounded-full before:text-center before:text-[0.625rem]/[0.875rem] before:font-medium before:ring-2 before:ring-white before:transition-colors before:content-[attr(data-step)] dark:before:ring-gray-950 before:bg-gray-100 dark:before:bg-gray-800 before:left-[calc(-1*theme(spacing.5)-0.40625rem)]"><a href="#install-clerk-nextjs" class="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]">Install <code>@clerk/nextjs</code></a></li><li data-step="3" class="relative mt-3 first:mt-0 group/item before:absolute before:size-3.5 before:rounded-full before:text-center before:text-[0.625rem]/[0.875rem] before:font-medium before:ring-2 before:ring-white before:transition-colors before:content-[attr(data-step)] dark:before:ring-gray-950 before:bg-gray-100 dark:before:bg-gray-800 before:left-[calc(-1*theme(spacing.5)-0.40625rem)]"><a href="#add-clerk-middleware-to-your-app" class="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]">Add <code>clerkMiddleware()</code> to your app</a></li><li data-step="4" class="relative mt-3 first:mt-0 group/item before:absolute before:size-3.5 before:rounded-full before:text-center before:text-[0.625rem]/[0.875rem] before:font-medium before:ring-2 before:ring-white before:transition-colors before:content-[attr(data-step)] dark:before:ring-gray-950 before:bg-gray-100 dark:before:bg-gray-800 before:left-[calc(-1*theme(spacing.5)-0.40625rem)]"><a href="#add-clerk-provider-and-clerk-components-to-your-app" class="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]">Add <code><ClerkProvider></code> and Clerk components to your app</a></li><li data-step="5" class="relative mt-3 first:mt-0 group/item before:absolute before:size-3.5 before:rounded-full before:text-center before:text-[0.625rem]/[0.875rem] before:font-medium before:ring-2 before:ring-white before:transition-colors before:content-[attr(data-step)] dark:before:ring-gray-950 before:bg-gray-950 before:text-white dark:before:bg-white dark:before:text-gray-950 before:left-[calc(-1*theme(spacing.5)-0.40625rem)]"><a href="#create-your-first-user" class="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]">Create your first user</a></li><li data-step="6" class="relative mt-3 first:mt-0 group/item before:absolute before:size-3.5 before:rounded-full before:text-center before:text-[0.625rem]/[0.875rem] before:font-medium before:ring-2 before:ring-white before:transition-colors before:content-[attr(data-step)] dark:before:ring-gray-950 before:bg-gray-950 before:text-white dark:before:bg-white dark:before:text-gray-950 before:left-[calc(-1*theme(spacing.5)-0.40625rem)]"><a href="#its-time-to-build" class="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]">It's time to build!</a></li><li class="relative mt-3 first:mt-0 group/item"><a href="#next-steps" class="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]">Next steps</a></li></ol></div><div class="ml-4 mt-8"><a target="_blank" class="flex w-fit text-xs/4 font-book text-gray-950 dark:text-gray-400" data-sentry-element="Link" data-sentry-component="EditLink" data-sentry-source-file="DocsPage.tsx" href="https://github.com/clerk/clerk-docs/edit/main/docs/quickstarts/nextjs.mdx"><svg viewBox="0 0 16 16" aria-hidden="true" class="mr-3 size-4 flex-none fill-gray-400" data-sentry-element="svg" data-sentry-source-file="DocsPage.tsx"><path d="M8 .198a8 8 0 0 0-8 8 7.999 7.999 0 0 0 5.47 7.59c.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.923-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82a7.67 7.67 0 0 1 2-.27 7.67 7.67 0 0 1 2 .27c1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38A7.972 7.972 0 0 0 16 8.198a8 8 0 0 0-8-8Z" data-sentry-element="path" data-sentry-source-file="DocsPage.tsx"></path></svg>Edit this page on GitHub<svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="ml-2.5 size-4 flex-none" data-sentry-element="svg" data-sentry-source-file="DocsPage.tsx"><path stroke="#9394A1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.917 4.75h4.333m0 0v4.333m0-4.333-6.5 6.5" data-sentry-element="path" data-sentry-source-file="DocsPage.tsx"></path></svg></a></div></div>
164d ago