From 3f205627e0187bb9f3dff65f1093deb97bce738f Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 29 Sep 2026 10:45:23 +1000 Subject: [PATCH] feat(library): redesign the site around the block catalog (#50372) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature — the visual redesign itself. Part 5 of 6 in a stack that splits the library redesign into reviewable pieces. The four PRs beneath it carry the build, content and Markdown work; what's left here is layout, navigation and styling. ## What is the current behavior? The library is laid out like a documentation site: a sidebar tree of framework folders, a homepage that lists links, and a guide page that opens with prose. That shape suits reference material, but the library's job is to help someone find a block and install it — and the sidebar is the only way to discover one. ## What is the new behavior? The homepage is the catalog itself — blocks grouped by what they do (authentication, database, storage, realtime, messaging, AI, foundations) rather than by framework, each with a preview of what it renders, filterable by category. Navigation moves into a site header whose Explore menu opens the same categories, so the catalog is reachable from any page and the per-page sidebar tree is gone. A guide opens with what the reader came for: the block's name, the install command, and a preview pane with tabs — the running component and its files — before any prose. The file tree that used to sit mid-page under "Folder structure" is one of those tabs. Every guide also offers a copy of the agent prompt that points at its Markdown. Getting-started pages get the same treatment: the quickstart is now a framework-tabbed walkthrough rather than a wall of setup links. ## Additional context `BlockOverviewTabs` renders Preview and Files here. #50369, stacked on top of this one, adds the third "What's added" tab — it is the only part of the redesign that depends on the new resource analyzer, which is why it sits above this PR rather than below it. Also removes what the redesign orphaned: the table-of-contents component and its `remark` / `mdast-util-toc` dependencies, and the sidebar nav and command-item configuration the new header replaced. The block source changes are typography only — auth card titles move from `text-2xl` to `font-medium text-lg tracking-normal` — which is what regenerates the auth registry artifacts. ## Summary by CodeRabbit * **New Features** * Added a redesigned Supabase Library catalog with categorized blocks, framework-aware navigation, previews, file views, and installation actions. * Added framework-specific quickstart guides for Next.js, React, Vue, Nuxt, React Router, and TanStack Start. * Added copy-to-clipboard prompts, “Open in v0” actions, starter templates, and richer visual previews. * **Improvements** * Updated documentation layouts, FAQ content, typography, navigation, accessibility, and responsive behavior. * Improved mobile navigation, framework selection, and standardized block installation guidance. * Refined authentication and social-login block presentation with more consistent heading styles. --------- Co-authored-by: Claude Opus 5 Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> --- .github/workflows/library-tests.yml | 2 +- apps/ui-library/README.md | 51 +- .../app/(app)/docs/[[...slug]]/page.tsx | 103 ++-- apps/ui-library/app/(app)/layout.tsx | 21 +- apps/ui-library/app/(app)/page.tsx | 210 +------- apps/ui-library/app/example/base-injector.tsx | 9 +- .../app/example/infinite-list-demo/layout.tsx | 2 +- .../app/example/oauth-consent/layout.tsx | 2 +- .../auth/sign-up-success/page.tsx | 4 +- .../example/password-based-auth/layout.tsx | 37 +- .../realtime-avatar-stack-demo/layout.tsx | 2 +- .../app/example/realtime-chat-demo/layout.tsx | 2 +- .../example/realtime-cursor-demo/layout.tsx | 2 +- .../example/social-auth/auth/login/page.tsx | 2 +- .../app/example/social-auth/layout.tsx | 37 +- apps/ui-library/app/layout.tsx | 18 +- .../ui-library/components/block-item-code.tsx | 38 +- .../components/block-overview-tabs.tsx | 54 ++ apps/ui-library/components/block-overview.tsx | 59 ++ apps/ui-library/components/block-preview.tsx | 5 +- .../ui-library/components/catalog-preview.tsx | 277 ++++++++++ apps/ui-library/components/command-menu.tsx | 53 +- apps/ui-library/components/command.tsx | 46 +- .../components/component-preview.tsx | 11 +- .../ui-library/components/copy-doc-prompt.tsx | 73 +++ .../components/framework-quickstart.tsx | 82 +++ .../components/framework-selector.tsx | 7 +- .../components/library-overview.tsx | 172 ++++++ apps/ui-library/components/mdx-components.tsx | 10 +- apps/ui-library/components/registry-block.tsx | 13 - .../components/side-navigation-item.tsx | 21 +- .../ui-library/components/side-navigation.tsx | 167 ++---- apps/ui-library/components/sidebar.tsx | 48 +- apps/ui-library/components/site-footer.tsx | 25 +- apps/ui-library/components/site-header.tsx | 205 +++++++ .../components/theme-switcher-dropdown.tsx | 6 +- apps/ui-library/components/toc.tsx | 107 ---- apps/ui-library/config/docs.ts | 61 +-- .../content/docs/getting-started/faq.mdx | 206 ++++--- .../docs/getting-started/quickstart.mdx | 505 +++++++++++++++--- .../content/docs/headless/mcp-server.mdx | 5 +- .../ui-library/content/docs/nextjs/client.mdx | 7 +- .../docs/nextjs/current-user-avatar.mdx | 15 +- .../content/docs/nextjs/dropzone.mdx | 23 +- .../content/docs/nextjs/oauth-consent.mdx | 15 +- .../docs/nextjs/password-based-auth.mdx | 15 +- .../docs/nextjs/realtime-avatar-stack.mdx | 15 +- .../content/docs/nextjs/realtime-chat.mdx | 15 +- .../content/docs/nextjs/realtime-cursor.mdx | 21 +- .../content/docs/nextjs/realtime-flow.mdx | 22 +- .../content/docs/nextjs/realtime-monaco.mdx | 15 +- .../content/docs/nextjs/social-auth.mdx | 12 +- .../content/docs/nextjs/tanstack-db.mdx | 3 +- .../ui-library/content/docs/nuxtjs/client.mdx | 11 +- .../docs/nuxtjs/current-user-avatar.mdx | 22 +- .../content/docs/nuxtjs/dropzone.mdx | 30 +- .../docs/nuxtjs/password-based-auth.mdx | 24 +- .../docs/nuxtjs/realtime-avatar-stack.mdx | 22 +- .../content/docs/nuxtjs/realtime-chat.mdx | 22 +- .../content/docs/nuxtjs/realtime-cursor.mdx | 28 +- .../content/docs/nuxtjs/social-auth.mdx | 22 +- .../content/docs/platform/platform-kit.mdx | 29 +- .../content/docs/react-router/client.mdx | 7 +- .../docs/react-router/current-user-avatar.mdx | 15 +- .../content/docs/react-router/dropzone.mdx | 23 +- .../docs/react-router/oauth-consent.mdx | 15 +- .../docs/react-router/password-based-auth.mdx | 15 +- .../react-router/realtime-avatar-stack.mdx | 15 +- .../docs/react-router/realtime-chat.mdx | 15 +- .../docs/react-router/realtime-cursor.mdx | 21 +- .../docs/react-router/realtime-flow.mdx | 22 +- .../docs/react-router/realtime-monaco.mdx | 15 +- .../content/docs/react-router/social-auth.mdx | 15 +- apps/ui-library/content/docs/react/client.mdx | 7 +- .../docs/react/current-user-avatar.mdx | 12 +- .../content/docs/react/dropzone.mdx | 23 +- .../content/docs/react/infinite-query.mdx | 21 +- .../content/docs/react/oauth-consent.mdx | 15 +- .../docs/react/password-based-auth.mdx | 15 +- .../docs/react/realtime-avatar-stack.mdx | 15 +- .../content/docs/react/realtime-chat.mdx | 15 +- .../content/docs/react/realtime-cursor.mdx | 21 +- .../content/docs/react/realtime-flow.mdx | 22 +- .../content/docs/react/realtime-monaco.mdx | 15 +- .../content/docs/react/social-auth.mdx | 12 +- .../content/docs/starters/ai-chat-app.mdx | 6 + .../content/docs/starters/flutter-starter.mdx | 6 + .../content/docs/starters/nextjs-starter.mdx | 4 + .../content/docs/starters/saas-starter.mdx | 6 + .../content/docs/tanstack/client.mdx | 7 +- .../docs/tanstack/current-user-avatar.mdx | 15 +- .../content/docs/tanstack/dropzone.mdx | 23 +- .../content/docs/tanstack/headless-app.mdx | 6 +- .../content/docs/tanstack/oauth-consent.mdx | 15 +- .../docs/tanstack/password-based-auth.mdx | 12 +- .../docs/tanstack/realtime-avatar-stack.mdx | 15 +- .../content/docs/tanstack/realtime-chat.mdx | 15 +- .../content/docs/tanstack/realtime-cursor.mdx | 21 +- .../content/docs/tanstack/realtime-flow.mdx | 22 +- .../content/docs/tanstack/realtime-monaco.mdx | 15 +- .../content/docs/tanstack/social-auth.mdx | 12 +- apps/ui-library/content/docs/vue/client.mdx | 11 +- .../content/docs/vue/current-user-avatar.mdx | 22 +- apps/ui-library/content/docs/vue/dropzone.mdx | 30 +- .../content/docs/vue/infinite-query.mdx | 28 +- .../content/docs/vue/password-based-auth.mdx | 22 +- .../docs/vue/realtime-avatar-stack.mdx | 22 +- .../content/docs/vue/realtime-chat.mdx | 22 +- .../content/docs/vue/realtime-cursor.mdx | 28 +- .../content/docs/vue/social-auth.mdx | 22 +- apps/ui-library/hooks/use-menu-aim.ts | 59 ++ apps/ui-library/lib/toc.ts | 78 --- apps/ui-library/package.json | 2 - .../public/r/oauth-consent-nextjs.json | 2 +- .../public/r/oauth-consent-react-router.json | 2 +- .../public/r/oauth-consent-react.json | 2 +- .../public/r/oauth-consent-tanstack.json | 2 +- .../public/r/password-based-auth-nextjs.json | 12 +- .../r/password-based-auth-react-router.json | 10 +- .../public/r/password-based-auth-react.json | 8 +- .../r/password-based-auth-tanstack.json | 12 +- .../public/r/social-auth-nextjs.json | 4 +- .../public/r/social-auth-react-router.json | 4 +- .../public/r/social-auth-react.json | 2 +- .../public/r/social-auth-tanstack.json | 4 +- .../components/oauth-consent.tsx | 4 +- .../app/auth/error/page.tsx | 4 +- .../app/auth/sign-up-success/page.tsx | 4 +- .../components/forgot-password-form.tsx | 6 +- .../components/login-form.tsx | 2 +- .../components/sign-up-form.tsx | 2 +- .../components/update-password-form.tsx | 2 +- .../app/routes/auth.error.tsx | 4 +- .../app/routes/forgot-password.tsx | 8 +- .../app/routes/login.tsx | 2 +- .../app/routes/sign-up.tsx | 6 +- .../app/routes/update-password.tsx | 4 +- .../components/forgot-password-form.tsx | 6 +- .../components/login-form.tsx | 2 +- .../components/sign-up-form.tsx | 6 +- .../components/update-password-form.tsx | 2 +- .../components/forgot-password-form.tsx | 6 +- .../components/login-form.tsx | 2 +- .../components/sign-up-form.tsx | 2 +- .../components/update-password-form.tsx | 2 +- .../routes/auth/error.tsx | 4 +- .../routes/sign-up-success.tsx | 4 +- .../app/auth/error/page.tsx | 4 +- .../components/login-form.tsx | 2 +- .../app/routes/auth.error.tsx | 4 +- .../app/routes/login.tsx | 2 +- .../components/login-form.tsx | 2 +- .../components/login-form.tsx | 2 +- .../routes/auth/error.tsx | 4 +- .../scripts/build-markdown-index.ts | 2 +- apps/ui-library/styles/globals.css | 126 ++--- apps/ui-library/styles/library-doc.css | 51 ++ apps/ui-library/velite.config.js | 2 +- apps/www/components/Nav/SupabaseWordmark.tsx | 92 +--- packages/common/SupabaseWordmark.tsx | 89 +++ pnpm-lock.yaml | 6 - 161 files changed, 2654 insertions(+), 1947 deletions(-) create mode 100644 apps/ui-library/components/block-overview-tabs.tsx create mode 100644 apps/ui-library/components/block-overview.tsx create mode 100644 apps/ui-library/components/catalog-preview.tsx create mode 100644 apps/ui-library/components/copy-doc-prompt.tsx create mode 100644 apps/ui-library/components/framework-quickstart.tsx create mode 100644 apps/ui-library/components/library-overview.tsx delete mode 100644 apps/ui-library/components/registry-block.tsx create mode 100644 apps/ui-library/components/site-header.tsx delete mode 100644 apps/ui-library/components/toc.tsx create mode 100644 apps/ui-library/hooks/use-menu-aim.ts delete mode 100644 apps/ui-library/lib/toc.ts create mode 100644 apps/ui-library/styles/library-doc.css create mode 100644 packages/common/SupabaseWordmark.tsx diff --git a/.github/workflows/library-tests.yml b/.github/workflows/library-tests.yml index 9eca55ab6e4..48c68a4236f 100644 --- a/.github/workflows/library-tests.yml +++ b/.github/workflows/library-tests.yml @@ -51,7 +51,7 @@ jobs: - run: pnpm --filter library build:registry - name: Check generated registry run: | - registry_changes="$(git status --porcelain --untracked-files=all -- apps/ui-library/public/r)" + registry_changes="$(git status --porcelain --untracked-files=all -- apps/ui-library/public/r apps/ui-library/__registry__)" if [ -n "$registry_changes" ]; then printf '%s\n' "$registry_changes" echo 'Run pnpm --filter library build:registry and commit the generated registry files.' diff --git a/apps/ui-library/README.md b/apps/ui-library/README.md index 2d77ceb73ff..a95c91d69c9 100644 --- a/apps/ui-library/README.md +++ b/apps/ui-library/README.md @@ -1,44 +1,49 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Supabase Library -## Getting Started +The library is the documentation and shadcn registry app for Supabase blocks and starter apps. Its workspace package name is `library`. -First, run the development server: +## Development and checks + +Run these commands from the repository root with the repository's Node and pnpm versions: ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +pnpm --filter library dev +pnpm --filter library test +pnpm --filter library typecheck +pnpm --filter library lint +pnpm --filter library build ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +The development server runs at [localhost:3004/library](http://localhost:3004/library). `build` and `dev` build the registry first, then generate the HTML content, Markdown guides, and `llms.txt`. Markdown generation reads the completed registry, so these steps must retain that order. Type checking generates Next.js types before running TypeScript and works without a previous development build. -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +Registry JSON in `public/r` and the preview index in `__registry__` are generated and committed. Regenerate them with `pnpm --filter library build:registry`; do not edit them by hand. `.velite`, `public/markdown`, and `public/llms.txt` are generated build artifacts. Library CI runs the test suite, checks for registry drift, and builds the app. -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. +## Authoring guides -## Learn More +Write documentation in `content/docs//.mdx`, or `content/docs/starters/.mdx` for starter apps. Keep frontmatter for page metadata. Installation headings, prerequisites, commands, and follow-up instructions belong in the MDX body, in the order readers should follow them. -To learn more about Next.js, take a look at the following resources: +Use `BlockItem` for a registry installation command. Its name is the published registry item ID. React is the default; Vue and Nuxt pages must select the Vue CLI explicitly: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +```mdx +## Installation -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + -## Deploy on Vercel + +``` -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +The shared command helper supplies both the page and its Markdown export. Vue commands use an absolute registry URL so a fresh project does not need an `@supabase` alias. Put other commands in ordinary fenced shell blocks. Keep notes next to the command they explain. Use `showOpenInV0` on `BlockItem` when a block supports that action. For Vue and Nuxt blocks that need an existing Supabase client, link the client guide and include a conditional client-install command; let readers reuse an existing client. -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +The primary Copy prompt action points agents to the canonical `/library/docs//.md` guide and asks them to prefer the guide's shadcn install command over copying files from registry JSON. It does not repeat installation commands. Starter prompts describe creating a new application; block prompts describe integrating into the existing project. The page also exposes a Markdown link. + +The Markdown exporter reads the same MDX body, expands registry commands and file trees, and links each block's registry JSON as its source. Instruction-bearing MDX components need an explicit Markdown handler and a fixture in `lib/library-mdx-to-markdown.test.ts`. Missing registry files, document references, or unsupported components fail generation. + +Register discoverable blocks and starter apps in `config/library.ts` and the existing navigation definitions in `config/docs.ts`. The catalog test compares these routes with the actual content directory. Keep intentional omissions explicit in that test. ## Supabase types -To regenerate the Supabase database types, run +From this directory, regenerate local database types with: -``` +```bash supabase gen types --local > registry/default/fixtures/database.types.ts ``` diff --git a/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx b/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx index 60489518fce..5713413957b 100644 --- a/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx @@ -1,20 +1,21 @@ import '@/styles/code-block-variables.css' import '@/styles/mdx.css' +import '@/styles/library-doc.css' -import { ChevronRight } from 'lucide-react' +import { ArrowRight, Blocks } from 'lucide-react' import type { Metadata } from 'next' +import Link from 'next/link' import { notFound } from 'next/navigation' import Balancer from 'react-wrap-balancer' -import { ScrollArea } from 'ui' import { allDocs } from '@/.velite' import { metadata as mainMetadata } from '@/app/layout' +import { CopyDocPrompt } from '@/components/copy-doc-prompt' import { FrameworkSelector } from '@/components/framework-selector' import { Mdx } from '@/components/mdx-components' import { OpenInV0Button } from '@/components/open-in-v0-button' import { SourcePanel } from '@/components/source-panel' -import { DashboardTableOfContents } from '@/components/toc' -import { getTableOfContents } from '@/lib/toc' +import { libraryBlocks } from '@/config/library' import { absoluteUrl, cn } from '@/lib/utils' interface DocPageProps { @@ -78,46 +79,80 @@ export default async function DocPage(props: DocPageProps) { notFound() } - const toc = await getTableOfContents(doc.raw) + const isGuide = doc.slugAsParams.startsWith('getting-started/') + const isStarter = doc.slugAsParams.startsWith('starters/') + const libraryBlock = libraryBlocks.find((block) => block.href === `/docs/${doc.slugAsParams}`) + const markdownPath = `${process.env.NEXT_PUBLIC_BASE_PATH ?? '/library'}/docs/${doc.slugAsParams}.md` return ( -
-
-
-
Docs
- -
{doc.title}
-
-
-
-

{doc.title}

- {doc.description && ( -

- {doc.description} -

+
+
+ {!isGuide && ( +
+ + + {isStarter ? 'Starter' : 'Block'} + + {libraryBlock?.frameworkLabel ? ( + + {libraryBlock.frameworkLabel} + + ) : ( + )}
-
- + )} +

+ {doc.title} +

+ {doc.description && ( +

+ {doc.description} +

+ )} + {!isGuide && ( +
+ {doc.v0Name && }
-
+ )} +
+ +
-
- -
- {doc.toc && ( -
-
- -
- -
- -
+ {doc.preview && ( +
+
)} +
+ +
+
+ + + Explore next + Browse all library blocks + + + +
) } diff --git a/apps/ui-library/app/(app)/layout.tsx b/apps/ui-library/app/(app)/layout.tsx index 57ef5793b4d..639d411298b 100644 --- a/apps/ui-library/app/(app)/layout.tsx +++ b/apps/ui-library/app/(app)/layout.tsx @@ -1,6 +1,6 @@ import { TelemetryWrapper } from './telemetry-wrapper' -import { Sidebar } from '@/components/sidebar' import { SiteFooter } from '@/components/site-footer' +import { SiteHeader } from '@/components/site-header' interface AppLayoutProps { children: React.ReactNode @@ -9,20 +9,11 @@ interface AppLayoutProps { export default function AppLayout({ children }: AppLayoutProps) { return ( <> - {/* main container */} -
- {/* main content */} -
- {/* {children} */} -
-
- -
-
{children}
-
-
-
-
+ +
+
+ {children} +
diff --git a/apps/ui-library/app/(app)/page.tsx b/apps/ui-library/app/(app)/page.tsx index a5e76aa08de..5083e266141 100644 --- a/apps/ui-library/app/(app)/page.tsx +++ b/apps/ui-library/app/(app)/page.tsx @@ -1,211 +1,11 @@ -import Link from 'next/link' -import { Button_Shadcn_ } from 'ui' +import { Suspense } from 'react' -import { BlockPreview } from '@/components/block-preview' -import { ComponentPreview } from '@/components/component-preview' - -// Horizontal grid line component -const HorizontalGridLine = () =>
- -export const dynamic = 'force-dynamic' -export const revalidate = 0 +import { LibraryOverview } from '@/components/library-overview' export default function Home() { - const roomName = `room-${Math.floor(Math.random() * 1000)}` - return ( -
-
- {/* Component Showcase with Grid */} -
- {/* Grid Container */} -
- {/* Grid Lines - Vertical (Columns) */} - {Array.from({ length: 13 }).map((_, i) => ( -
- ))} - - {/* Grid Content */} -
- {/* Heading Section */} -
-
-
-

- Blocks for Supabase Projects -

-

- A collection of components, blocks, and developer tools that connect your - project to Supabase via a single command. -

-
- - Get Started - - - Install Skills - -
-
-
-
- - {/* Password-based Authentication */} -
- Password-based Authentication - - Go to block ➔ - -
- -
-
- -
-
- - - {/* Social Authentication */} -
- Social Authentication - - Go to block ➔ - -
- -
-
- -
-
- - - {/* Realtime Cursors */} -
- Realtime Cursors - - Go to block ➔ - -
- -
-
- - -
-
- - - {/* Dropzone */} -
- File Upload - - Go to block ➔ - -
- -
-
- -
-
- - - {/* Current User Avatar */} -
- Current User Avatar - - Go to block ➔ - -
- -
-
- -
-
- - - {/* Realtime Avatar Stack */} -
- Realtime Avatar Stack - - Go to block ➔ - -
- -
-
- -
-
- - - {/* Realtime Chat */} -
- Realtime Chat - - Go to block ➔ - -
- -
-
- - -
-
- - - {/* Infinite Query Hook */} -
- Infinite Query Hook - - Go to block ➔ - -
- -
-
- -
-
- -
-
-
-
-
+ + + ) } diff --git a/apps/ui-library/app/example/base-injector.tsx b/apps/ui-library/app/example/base-injector.tsx index ae29b2484c1..2e71c2b4fcd 100644 --- a/apps/ui-library/app/example/base-injector.tsx +++ b/apps/ui-library/app/example/base-injector.tsx @@ -4,6 +4,8 @@ import { useEffect } from 'react' export function BaseInjector() { useEffect(() => { + document.documentElement.classList.add('preview') + // Remove any existing base tag const existingBase = document.querySelector('base') if (existingBase) existingBase.remove() @@ -13,14 +15,9 @@ export function BaseInjector() { base.href = `${process.env.NEXT_PUBLIC_BASE_PATH ?? ''}/example/password-based-auth/` document.head.prepend(base) - // Add preview class to body to use shadcn theme vars - const bodyElement = document.querySelector('body') - if (bodyElement) { - bodyElement.classList.add('preview') - } - return () => { base.remove() + document.documentElement.classList.remove('preview') } }, []) diff --git a/apps/ui-library/app/example/infinite-list-demo/layout.tsx b/apps/ui-library/app/example/infinite-list-demo/layout.tsx index 2a8bc579e57..c10de8295ba 100644 --- a/apps/ui-library/app/example/infinite-list-demo/layout.tsx +++ b/apps/ui-library/app/example/infinite-list-demo/layout.tsx @@ -11,7 +11,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( <> -
+
{children}
diff --git a/apps/ui-library/app/example/oauth-consent/layout.tsx b/apps/ui-library/app/example/oauth-consent/layout.tsx index bb6c1d2d25c..03ce787db6f 100644 --- a/apps/ui-library/app/example/oauth-consent/layout.tsx +++ b/apps/ui-library/app/example/oauth-consent/layout.tsx @@ -10,7 +10,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( <> -
+
{children}
diff --git a/apps/ui-library/app/example/password-based-auth/auth/sign-up-success/page.tsx b/apps/ui-library/app/example/password-based-auth/auth/sign-up-success/page.tsx index b265cabf808..a97a6111da5 100644 --- a/apps/ui-library/app/example/password-based-auth/auth/sign-up-success/page.tsx +++ b/apps/ui-library/app/example/password-based-auth/auth/sign-up-success/page.tsx @@ -13,7 +13,9 @@ export default function Page() {
- Thank you for signing up! + + Thank you for signing up! + Check your email to confirm diff --git a/apps/ui-library/app/example/password-based-auth/layout.tsx b/apps/ui-library/app/example/password-based-auth/layout.tsx index ea9f98a6c76..2684a9a64f2 100644 --- a/apps/ui-library/app/example/password-based-auth/layout.tsx +++ b/apps/ui-library/app/example/password-based-auth/layout.tsx @@ -1,7 +1,6 @@ import { Metadata } from 'next' import { BaseInjector } from './../base-injector' -import { Providers } from '@/app/Providers' export const metadata: Metadata = { title: 'Password Based Auth Example', @@ -9,34 +8,12 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - -