From 3a695425176c2e5bbfae22f71f9b74de93f0eb4e Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Mon, 27 Oct 2025 13:24:43 -0600 Subject: [PATCH 01/19] Remove all remix code examples --- .../appearance-prop/captcha.mdx | 49 +--- .../appearance-prop/themes.mdx | 225 +----------------- .../appearance-prop/variables.mdx | 122 +--------- .../guides/customizing-clerk/localization.mdx | 210 +--------------- 4 files changed, 13 insertions(+), 593 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx index c58798abb9..67314f466d 100644 --- a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx @@ -36,7 +36,7 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge ## Usage - + ```tsx {{ prettier: false, filename: 'app.tsx' }} import { ClerkProvider } from '@clerk/nextjs'; @@ -107,53 +107,6 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge ``` - - ```tsx {{ filename: 'app/root.tsx', mark: [[35, 40]] }} - // Import ClerkApp - import { ClerkApp } from '@clerk/remix' - import type { MetaFunction, LoaderFunction } from '@remix-run/node' - - import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react' - - import { rootAuthLoader } from '@clerk/remix/ssr.server' - - export const meta: MetaFunction = () => ({ - charset: 'utf-8', - title: 'New Remix App', - viewport: 'width=device-width,initial-scale=1', - }) - - export const loader: LoaderFunction = (args) => rootAuthLoader(args) - - function App() { - return ( - - - - - - - - - - - - - ) - } - - export default ClerkApp(App, { - appearance: { - captcha: { - theme: 'dark', - size: 'flexible', - language: 'es-ES', - }, - }, - }) - ``` - - ```ts {{ filename: 'nuxt.config.ts' }} export default defineNuxtConfig({ diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index af12f0384d..35b34ff941 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -110,7 +110,7 @@ To apply a theme to all Clerk components, pass the `appearance` prop to the [` + ```tsx {{ filename: '/src/app/layout.tsx', mark: [2, [7, 9]] }} @@ -200,50 +200,6 @@ In the following example, the "Dark" theme is applied to all Clerk components. ``` - - ```tsx {{ filename: 'app/root.tsx', mark: [3, [36, 38]] }} - // Import ClerkApp - import { ClerkApp } from '@clerk/remix' - import { dark } from '@clerk/themes' - import type { MetaFunction, LoaderFunction } from '@remix-run/node' - - import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react' - - import { rootAuthLoader } from '@clerk/remix/ssr.server' - - export const meta: MetaFunction = () => ({ - charset: 'utf-8', - title: 'New Remix App', - viewport: 'width=device-width,initial-scale=1', - }) - - export const loader: LoaderFunction = (args) => rootAuthLoader(args) - - function App() { - return ( - - - - - - - - - - - - - ) - } - - export default ClerkApp(App, { - appearance: { - theme: dark, - }, - }) - ``` - - ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} import { createApp } from 'vue' @@ -283,7 +239,7 @@ You can also stack themes by passing an array of themes to the `theme` property In the following example, the "Dark" theme is applied first, then the "Neobrutalism" theme is applied on top of it. - + ```tsx {{ filename: '/src/app/layout.tsx', mark: [2, [7, 9]] }} @@ -373,50 +329,6 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal ``` - - ```tsx {{ filename: 'app/root.tsx', mark: [3, [36, 38]] }} - // Import ClerkApp - import { ClerkApp } from '@clerk/remix' - import { dark, neobrutalism } from '@clerk/themes' - import type { MetaFunction, LoaderFunction } from '@remix-run/node' - - import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react' - - import { rootAuthLoader } from '@clerk/remix/ssr.server' - - export const meta: MetaFunction = () => ({ - charset: 'utf-8', - title: 'New Remix App', - viewport: 'width=device-width,initial-scale=1', - }) - - export const loader: LoaderFunction = (args) => rootAuthLoader(args) - - function App() { - return ( - - - - - - - - - - - - - ) - } - - export default ClerkApp(App, { - appearance: { - theme: [dark, neobrutalism], - }, - }) - ``` - - ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} import { createApp } from 'vue' @@ -456,7 +368,7 @@ You can apply a theme to all instances of a Clerk component by passing the compo In the following example, the "Neobrutalism" theme is applied to all instances of the [``](/docs/reference/components/authentication/sign-in) component. - + ```tsx {{ filename: '/src/app/layout.tsx', mark: [2, [7, 10]] }} @@ -550,51 +462,6 @@ In the following example, the "Neobrutalism" theme is applied to all instances o ``` - - ```tsx {{ filename: 'app/root.tsx', mark: [3, [36, 39]] }} - // Import ClerkApp - import { ClerkApp } from '@clerk/remix' - import { dark } from '@clerk/themes' - import type { MetaFunction, LoaderFunction } from '@remix-run/node' - - import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react' - - import { rootAuthLoader } from '@clerk/remix/ssr.server' - - export const meta: MetaFunction = () => ({ - charset: 'utf-8', - title: 'New Remix App', - viewport: 'width=device-width,initial-scale=1', - }) - - export const loader: LoaderFunction = (args) => rootAuthLoader(args) - - function App() { - return ( - - - - - - - - - - - - - ) - } - - export default ClerkApp(App, { - appearance: { - theme: dark, - signIn: { theme: neobrutalism }, - }, - }) - ``` - - ```ts {{ filename: 'src/main.ts', mark: [4, [8, 11]] }} import { createApp } from 'vue' @@ -634,7 +501,7 @@ In the following example, the "Neobrutalism" theme is applied to all instances o To apply a theme to a single Clerk component, pass the `appearance` prop to the component. The `appearance` prop accepts the property `theme`, which can be set to a theme. - + ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [2, [7, 9]] }} @@ -701,39 +568,6 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the ``` - - ```tsx {{ filename: 'app/routes/sign-in/$.tsx', mark: [2, [9, 11]] }} - import { SignIn } from '@clerk/remix' - import { dark } from '@clerk/themes' - - export default function SignInPage() { - return ( -
-

Sign In route

- -
- ) - } - ``` - - - - ```vue {{ filename: 'src/pages/sign-in.vue' }} - - - - ``` - - ```vue {{ filename: 'pages/sign-in.vue' }} + + + ``` + + + + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + captcha: { + theme: 'dark', + size: 'flexible', + language: 'es-ES', + }, + }, + }) + app.mount('#app') ``` - ```ts {{ filename: 'nuxt.config.ts' }} + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], clerk: { @@ -125,13 +174,13 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge - ```ts {{ filename: 'src/main.ts' }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' - const app = createApp(App) - app.use(clerkPlugin, { + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { appearance: { captcha: { theme: 'dark', @@ -140,7 +189,6 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge }, }, }) - app.mount('#app') ``` diff --git a/docs/guides/customizing-clerk/appearance-prop/layout.mdx b/docs/guides/customizing-clerk/appearance-prop/layout.mdx index 6f5ae53030..a654119d1f 100644 --- a/docs/guides/customizing-clerk/appearance-prop/layout.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/layout.mdx @@ -95,10 +95,12 @@ The `layout` property can be used to change the layout of the [``](/doc ## Usage - +", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - ```tsx {{ prettier: false, filename: 'app.tsx' }} - import { ClerkProvider } from '@clerk/nextjs'; + For any SDK using ``, pass the `layout` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + + ```tsx {{ prettier: false, mark: [[5, 9]] }} + import { ClerkProvider } from '@clerk/{sdk}'; `](/doc - ```js {{ filename: 'astro.config.mjs' }} + ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} import clerk from '@clerk/astro' export default defineConfig({ @@ -135,7 +137,66 @@ The `layout` property can be used to change the layout of the [``](/doc - ```ts {{ filename: 'src/main.ts' }} + In the following example, the `layout` property is passed to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + appearance: { + layout: { + socialButtonsPlacement: 'bottom', + socialButtonsVariant: 'iconButton', + termsPageUrl: 'https://clerk.com/terms', + }, + }, + }) + + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` + + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import { createApp } from 'vue' import App from './App.vue' import { clerkPlugin } from '@clerk/vue' @@ -155,7 +216,7 @@ The `layout` property can be used to change the layout of the [``](/doc - ```ts {{ filename: 'nuxt.config.ts' }} + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], clerk: { @@ -170,4 +231,23 @@ The `layout` property can be used to change the layout of the [``](/doc }) ``` + + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + layout: { + socialButtonsPlacement: 'bottom', + socialButtonsVariant: 'iconButton', + termsPageUrl: 'https://clerk.com/terms', + }, + }, + }) + ``` + diff --git a/docs/guides/customizing-clerk/appearance-prop/overview.mdx b/docs/guides/customizing-clerk/appearance-prop/overview.mdx index 3821332ede..016a8e6eee 100644 --- a/docs/guides/customizing-clerk/appearance-prop/overview.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/overview.mdx @@ -293,56 +293,21 @@ Create your module file and add the CSS you want to apply, as shown in the follo Then you can apply this by importing the file and using the classes whenever required: - - - - ```tsx {{ filename: 'app/layout.tsx', mark: [[9, 15]] }} - import styles from '../styles/SignIn.module.css' - import { ClerkProvider, SignIn } from '@clerk/nextjs' - - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - - - - - - ) - } - ``` - - ```tsx {{ filename: 'app.tsx', mark: [[8, 14]] }} - import styles from '../styles/SignIn.module.css' - import { ClerkProvider, SignIn } from '@clerk/nextjs' - import type { AppProps } from 'next/app' - - function MyApp({ pageProps }: AppProps) { - return ( - - - - ) - } - - export default MyApp - ``` - - - +```tsx {{ mark: [1, 8] }} +import styles from '../styles/SignIn.module.css' + +export default function CustomSignIn() { + return ( + + ) +} +``` ### Use inline CSS objects to style Clerk components @@ -350,69 +315,22 @@ You can style the elements of a Clerk component with inline CSS objects. The following example shows how to style the primary button in a `` component with an inline CSS object: - - - - ```tsx {{ filename: 'app/layout.tsx', mark: [[9, 22]] }} - import styles from '../styles/SignIn.module.css' - import { ClerkProvider, SignIn } from '@clerk/nextjs' - - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - - - - - - ) - } - ``` - - ```tsx {{ filename: 'app.tsx', mark: [[7, 20]] }} - import { ClerkProvider, SignIn } from '@clerk/nextjs' - import type { AppProps } from 'next/app' - - function MyApp({ pageProps }: AppProps) { - return ( - - - - ) - } - - export default MyApp - ``` - - - +```tsx {{ mark: [[4, 11]] }} + +``` ## Next steps diff --git a/docs/guides/customizing-clerk/appearance-prop/variables.mdx b/docs/guides/customizing-clerk/appearance-prop/variables.mdx index e5358f9055..02b4fd8d5b 100644 --- a/docs/guides/customizing-clerk/appearance-prop/variables.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/variables.mdx @@ -247,82 +247,23 @@ To customize all Clerk components, pass the `variables` property to the `appeara In the following example, the primary color is set to blue and the text color is set to black. Because these styles are applied to the ``, which wraps the entire application, these styles will be applied to all Clerk components that use the primary color and text color. - +", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - ```tsx {{ filename: '/src/app/layout.tsx', mark: [[6, 11]] }} - import { ClerkProvider } from '@clerk/nextjs' + For any SDK using ``, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ) - } - ``` - - ```tsx {{ filename: '_app.tsx', mark: [[7, 12]] }} - import { ClerkProvider } from '@clerk/nextjs' - import type { AppProps } from 'next/app' - - function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ) - } - - export default MyApp - ``` - - - - - ```tsx {{ filename: 'app.tsx', mark: [[13, 18]] }} - import React from 'react' - import './App.css' - import { ClerkProvider } from '@clerk/clerk-react' - - if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { - throw new Error('Missing Publishable Key') - } - const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY - - function App() { - return ( - -
Hello from clerk
- - ) - } + ```tsx {{ prettier: false, mark: [[5, 9]] }} + import { ClerkProvider } from '@clerk/{sdk}'; - export default App + + {/* ... */} + ; ``` @@ -345,6 +286,84 @@ In the following example, the primary color is set to blue and the text color is ``` + + In the following example, the `variables` property is passed to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + appearance: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }) + + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` + + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + layout: { + socialButtonsPlacement: 'bottom', + socialButtonsVariant: 'iconButton', + termsPageUrl: 'https://clerk.com/terms', + }, + }, + }) + app.mount('#app') + ``` + + ```ts {{ filename: 'src/main.ts', mark: [[7, 12]] }} import { createApp } from 'vue' @@ -379,6 +398,24 @@ In the following example, the primary color is set to blue and the text color is }) ``` + + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }) + ``` + ### Apply `variables` to all instances of a Clerk component @@ -387,40 +424,15 @@ You can customize all instances of a Clerk component by passing the component to In the following example, the primary color is set to blue and the text color is set to black for all instances of the [``](/docs/reference/components/authentication/sign-in) component. - +", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - ```tsx {{ filename: '/src/app/layout.tsx', mark: [[6, 13]] }} - import { ClerkProvider } from '@clerk/nextjs' - - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ) - } - ``` + For any SDK using ``, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ filename: '_app.tsx', mark: [[7, 14]] }} - import { ClerkProvider } from '@clerk/nextjs' - import type { AppProps } from 'next/app' + ```tsx {{ prettier: false, mark: [[5, 9]] }} + import { ClerkProvider } from '@clerk/{sdk}'; - function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ) - } - - export default MyApp - ``` - - - - - ```tsx {{ filename: 'app.tsx', mark: [[13, 20]] }} - import React from 'react' - import './App.css' - import { ClerkProvider } from '@clerk/clerk-react' - - if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { - throw new Error('Missing Publishable Key') - } - const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY - - function App() { - return ( - -
Hello from clerk
- - ) - } - - export default App + > + {/* ... */} + ; ``` @@ -493,6 +467,66 @@ In the following example, the primary color is set to blue and the text color is ``` + + In the following example, the `variables` property is passed to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + appearance: { + signIn: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }, + }) + + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` + + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + ```ts {{ filename: 'src/main.ts', mark: [[7, 14]] }} import { createApp } from 'vue' @@ -531,6 +565,26 @@ In the following example, the primary color is set to blue and the text color is }) ``` + + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + signIn: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }, + }) + ``` + ### Apply `variables` to a single Clerk component @@ -539,11 +593,12 @@ To customize a single Clerk component, pass the `variables` property to the `app The following example shows how to customize the [``](/docs/reference/components/authentication/sign-in) component by setting the primary color to blue and the text color to black. - + - - ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[6, 11]] }} - import { SignIn } from '@clerk/nextjs' + The following example is written for Next.js App Router but can be adapted for any React-based SDK. + + ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[5, 9]] }} + import { SignIn } from '@clerk/nextjs' export default function Page() { return ( @@ -557,43 +612,6 @@ The following example shows how to customize the [``](/docs/reference/ /> ) } - ``` - - ```tsx {{ filename: '/pages/sign-in/[[...index]].tsx', mark: [[5, 10]] }} - import { SignIn } from '@clerk/nextjs' - - const SignInPage = () => ( - - ) - - export default SignInPage - ``` - - - - - ```tsx {{ filename: '/src/sign-in/[[...index]].tsx', mark: [[5, 10]] }} - import { SignIn } from '@clerk/clerk-react' - - const SignInPage = () => ( - - ) - - export default SignInPage ``` @@ -649,7 +667,7 @@ You can also use CSS variables to customize the appearance of Clerk components. - You need to dynamically update colors based on user preferences - You're integrating Clerk into an existing application with established CSS variables -The following example demonstrates how to use CSS variables to customize the appearance of Clerk components, but for maximum browser compatibility, it's recommended to use direct color values instead. +The following example demonstrates how to use CSS variables to customize the appearance of Clerk components, but for maximum browser compatibility, it's recommended to use direct color values instead. It is written for Next.js App Router but can be adapted for any React-based SDK. ```css {{ filename: '/src/app/global.css' }} diff --git a/docs/guides/customizing-clerk/localization.mdx b/docs/guides/customizing-clerk/localization.mdx index 33ea5e355c..e006fdfe04 100644 --- a/docs/guides/customizing-clerk/localization.mdx +++ b/docs/guides/customizing-clerk/localization.mdx @@ -85,13 +85,14 @@ Once the `@clerk/localizations` package is installed, you can import the localiz In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop on the [``](/docs/reference/components/clerk-provider). - ```tsx {{ mark: [1, 2, 6] }} + ```tsx {{ prettier: false, mark: [1, 2, 7] }} // fr-FR locale is imported as frFR import { frFR } from '@clerk/localizations' + import { ClerkProvider } from '@clerk/{sdk}' - export default function App() { - return // The rest of your app - } + + {/* ... */} + ``` @@ -248,18 +249,16 @@ Now that you know the key, you can pass it to the `localization` prop and set th For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ mark: [[1, 4], 9] }} + ```tsx {{ prettier: false, mark: [[2, 5], 9] }} + import { ClerkProvider } from '@clerk/{sdk}' // Set your customizations in a `localization` object const localization = { formButtonPrimary: 'LETS GO!', } - export default function App() { - return ( - // Pass the `localization` object to the `localization` prop on the `` component - // The rest of your app - ) - } + + {/* ... */} + ``` @@ -394,8 +393,8 @@ You can also customize multiple entries by passing multiple keys. The following For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ mark: [[1, 11], 16] }} - // Set your customizations in a `localization` object + ```tsx {{ prettier: false, mark: [[2, 11], 15] }} + import { ClerkProvider } from '@clerk/{sdk}' const localization = { signUp: { start: { @@ -407,12 +406,9 @@ You can also customize multiple entries by passing multiple keys. The following }, } - export default function App() { - return ( - // Pass the `localization` object to the `localization` prop on the `` component - // The rest of your app - ) - } + + {/* ... */} + ``` @@ -586,7 +582,8 @@ The following example updates the `not_allowed_access` error message. This messa For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ mark: [[1, 6], 11] }} + ```tsx {{ prettier: false, mark: [[2, 7], 11] }} + import { ClerkProvider } from '@clerk/{sdk}' const localization = { unstable__errors: { not_allowed_access: @@ -594,12 +591,9 @@ The following example updates the `not_allowed_access` error message. This messa }, } - export default function App() { - return ( - // Add the localization prop to the ClerkProvider - // The rest of your app - ) - } + + {/* ... */} + ``` From c87d697fcd2caeb6bf50330a0f4f52d0edfc8603 Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Tue, 28 Oct 2025 11:47:40 -0600 Subject: [PATCH 05/19] Fix linting --- .../appearance-prop/layout.mdx | 4 ++-- .../appearance-prop/variables.mdx | 24 +++++++++---------- .../guides/customizing-clerk/localization.mdx | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/layout.mdx b/docs/guides/customizing-clerk/appearance-prop/layout.mdx index a654119d1f..0242fb73eb 100644 --- a/docs/guides/customizing-clerk/appearance-prop/layout.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/layout.mdx @@ -117,7 +117,7 @@ The `layout` property can be used to change the layout of the [``](/doc - ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} + ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} import clerk from '@clerk/astro' export default defineConfig({ @@ -233,7 +233,7 @@ The `layout` property can be used to change the layout of the [``](/doc - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import Fastify from 'fastify' import { clerkPlugin } from '@clerk/fastify' diff --git a/docs/guides/customizing-clerk/appearance-prop/variables.mdx b/docs/guides/customizing-clerk/appearance-prop/variables.mdx index 02b4fd8d5b..99cddba60e 100644 --- a/docs/guides/customizing-clerk/appearance-prop/variables.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/variables.mdx @@ -600,18 +600,18 @@ The following example shows how to customize the [``](/docs/reference/ ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[5, 9]] }} import { SignIn } from '@clerk/nextjs' - export default function Page() { - return ( - - ) - } + export default function Page() { + return ( + + ) + } ``` diff --git a/docs/guides/customizing-clerk/localization.mdx b/docs/guides/customizing-clerk/localization.mdx index e006fdfe04..a443884275 100644 --- a/docs/guides/customizing-clerk/localization.mdx +++ b/docs/guides/customizing-clerk/localization.mdx @@ -406,7 +406,7 @@ You can also customize multiple entries by passing multiple keys. The following }, } - + {/* ... */} ``` From 5cc3cb8de263d4770a4326df75382599d6a9d74f Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Tue, 28 Oct 2025 13:13:49 -0600 Subject: [PATCH 06/19] Add descriptions for code examples --- .../appearance-prop/captcha.mdx | 12 +++-- .../appearance-prop/layout.mdx | 12 +++-- .../appearance-prop/variables.mdx | 44 ++++++++----------- .../guides/customizing-clerk/localization.mdx | 4 -- 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx index ee805a6941..07fe3fd2d6 100644 --- a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx @@ -41,8 +41,6 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge For any SDK using ``, pass the `captcha` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. ```tsx {{ prettier: false, mark: [[5, 9]] }} - import { ClerkProvider } from '@clerk/{sdk}'; - + In Astro, pass the `captcha` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} import clerk from '@clerk/astro' @@ -78,7 +78,7 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge - In the following example, the `captcha` property is passed to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + In JavaScript, pass the `captcha` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. Use the following tabs to view the code necessary for each file. @@ -137,6 +137,8 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge + In Vue, pass the `captcha` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import { createApp } from 'vue' import App from './App.vue' @@ -157,6 +159,8 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge + In Nuxt, pass the `captcha` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], @@ -174,6 +178,8 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge + In Fastify, pass the `captcha` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import Fastify from 'fastify' import { clerkPlugin } from '@clerk/fastify' diff --git a/docs/guides/customizing-clerk/appearance-prop/layout.mdx b/docs/guides/customizing-clerk/appearance-prop/layout.mdx index 0242fb73eb..eb8dac2d9a 100644 --- a/docs/guides/customizing-clerk/appearance-prop/layout.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/layout.mdx @@ -100,8 +100,6 @@ The `layout` property can be used to change the layout of the [``](/doc For any SDK using ``, pass the `layout` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. ```tsx {{ prettier: false, mark: [[5, 9]] }} - import { ClerkProvider } from '@clerk/{sdk}'; - `](/doc + In Astro, pass the `layout` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} import clerk from '@clerk/astro' @@ -137,7 +137,7 @@ The `layout` property can be used to change the layout of the [``](/doc - In the following example, the `layout` property is passed to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + In JavaScript, pass the `layout` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. Use the following tabs to view the code necessary for each file. @@ -196,6 +196,8 @@ The `layout` property can be used to change the layout of the [``](/doc + In Vue, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import { createApp } from 'vue' import App from './App.vue' @@ -216,6 +218,8 @@ The `layout` property can be used to change the layout of the [``](/doc + In Nuxt, pass the `layout` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], @@ -233,6 +237,8 @@ The `layout` property can be used to change the layout of the [``](/doc + In Fastify, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import Fastify from 'fastify' import { clerkPlugin } from '@clerk/fastify' diff --git a/docs/guides/customizing-clerk/appearance-prop/variables.mdx b/docs/guides/customizing-clerk/appearance-prop/variables.mdx index 99cddba60e..0fb77a2960 100644 --- a/docs/guides/customizing-clerk/appearance-prop/variables.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/variables.mdx @@ -252,8 +252,6 @@ In the following example, the primary color is set to blue and the text color is For any SDK using ``, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. ```tsx {{ prettier: false, mark: [[5, 9]] }} - import { ClerkProvider } from '@clerk/{sdk}'; - + In Astro, pass the `variables` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + ```js {{ filename: 'astro.config.mjs', mark: [[6, 11]] }} import clerk from '@clerk/astro' @@ -287,7 +287,7 @@ In the following example, the primary color is set to blue and the text color is - In the following example, the `variables` property is passed to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + In JavaScript, pass the `variables` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. Use the following tabs to view the code necessary for each file. @@ -345,26 +345,8 @@ In the following example, the primary color is set to blue and the text color is - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' + In Vue, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - const app = createApp(App) - app.use(clerkPlugin, { - appearance: { - layout: { - socialButtonsPlacement: 'bottom', - socialButtonsVariant: 'iconButton', - termsPageUrl: 'https://clerk.com/terms', - }, - }, - }) - app.mount('#app') - ``` - - - ```ts {{ filename: 'src/main.ts', mark: [[7, 12]] }} import { createApp } from 'vue' import App from './App.vue' @@ -384,6 +366,8 @@ In the following example, the primary color is set to blue and the text color is + In Nuxt, pass the `variables` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + ```ts {{ filename: 'nuxt.config.ts', mark: [[4, 9]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], @@ -400,6 +384,8 @@ In the following example, the primary color is set to blue and the text color is + In Fastify, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import Fastify from 'fastify' import { clerkPlugin } from '@clerk/fastify' @@ -426,11 +412,9 @@ In the following example, the primary color is set to blue and the text color is ", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - For any SDK using ``, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + For any SDK using ``, pass the component to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. ```tsx {{ prettier: false, mark: [[5, 9]] }} - import { ClerkProvider } from '@clerk/{sdk}'; - + In Astro, pass the component to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + ```js {{ filename: 'astro.config.mjs', mark: [[6, 13]] }} import clerk from '@clerk/astro' @@ -468,7 +454,7 @@ In the following example, the primary color is set to blue and the text color is - In the following example, the `variables` property is passed to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + In JavaScript, pass the component to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. Use the following tabs to view the code necessary for each file. @@ -528,6 +514,8 @@ In the following example, the primary color is set to blue and the text color is + In Vue, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + ```ts {{ filename: 'src/main.ts', mark: [[7, 14]] }} import { createApp } from 'vue' import App from './App.vue' @@ -549,6 +537,8 @@ In the following example, the primary color is set to blue and the text color is + In Nuxt, pass the component to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + ```ts {{ filename: 'nuxt.config.ts', mark: [[4, 11]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], @@ -567,6 +557,8 @@ In the following example, the primary color is set to blue and the text color is + In Fastify, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} import Fastify from 'fastify' import { clerkPlugin } from '@clerk/fastify' diff --git a/docs/guides/customizing-clerk/localization.mdx b/docs/guides/customizing-clerk/localization.mdx index a443884275..03ea45ee47 100644 --- a/docs/guides/customizing-clerk/localization.mdx +++ b/docs/guides/customizing-clerk/localization.mdx @@ -88,7 +88,6 @@ Once the `@clerk/localizations` package is installed, you can import the localiz ```tsx {{ prettier: false, mark: [1, 2, 7] }} // fr-FR locale is imported as frFR import { frFR } from '@clerk/localizations' - import { ClerkProvider } from '@clerk/{sdk}' {/* ... */} @@ -250,7 +249,6 @@ Now that you know the key, you can pass it to the `localization` prop and set th For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. ```tsx {{ prettier: false, mark: [[2, 5], 9] }} - import { ClerkProvider } from '@clerk/{sdk}' // Set your customizations in a `localization` object const localization = { formButtonPrimary: 'LETS GO!', @@ -394,7 +392,6 @@ You can also customize multiple entries by passing multiple keys. The following For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. ```tsx {{ prettier: false, mark: [[2, 11], 15] }} - import { ClerkProvider } from '@clerk/{sdk}' const localization = { signUp: { start: { @@ -583,7 +580,6 @@ The following example updates the `not_allowed_access` error message. This messa For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. ```tsx {{ prettier: false, mark: [[2, 7], 11] }} - import { ClerkProvider } from '@clerk/{sdk}' const localization = { unstable__errors: { not_allowed_access: From 9c5985faef9a70fc571ce8be2387a67c201fa079 Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Tue, 28 Oct 2025 13:30:20 -0600 Subject: [PATCH 07/19] Fix highlighting --- .../appearance-prop/captcha.mdx | 2 +- .../appearance-prop/layout.mdx | 2 +- .../appearance-prop/variables.mdx | 44 +++++++++---------- .../guides/customizing-clerk/localization.mdx | 8 ++-- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx index 07fe3fd2d6..0d6da15360 100644 --- a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx @@ -40,7 +40,7 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge For any SDK using ``, pass the `captcha` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[5, 9]] }} + ```tsx {{ prettier: false, mark: [[3, 7]] }} `](/doc For any SDK using ``, pass the `layout` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[5, 9]] }} + ```tsx {{ prettier: false, mark: [[3, 7]] }} For any SDK using ``, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[5, 9]] }} + ```tsx {{ prettier: false, mark: [[3, 6]] }} In Astro, pass the `variables` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - ```js {{ filename: 'astro.config.mjs', mark: [[6, 11]] }} + ```js {{ filename: 'astro.config.mjs', mark: [[7, 10]] }} import clerk from '@clerk/astro' export default defineConfig({ @@ -292,7 +292,7 @@ In the following example, the primary color is set to blue and the text color is Use the following tabs to view the code necessary for each file. - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + ```js {{ filename: 'main.js', mark: [[8, 11]], collapsible: true }} import { Clerk } from '@clerk/clerk-js' const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY @@ -347,7 +347,7 @@ In the following example, the primary color is set to blue and the text color is In Vue, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - ```ts {{ filename: 'src/main.ts', mark: [[7, 12]] }} + ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} import { createApp } from 'vue' import App from './App.vue' import { clerkPlugin } from '@clerk/vue' @@ -368,7 +368,7 @@ In the following example, the primary color is set to blue and the text color is In Nuxt, pass the `variables` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - ```ts {{ filename: 'nuxt.config.ts', mark: [[4, 9]] }} + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 8]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], clerk: { @@ -386,7 +386,7 @@ In the following example, the primary color is set to blue and the text color is In Fastify, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} import Fastify from 'fastify' import { clerkPlugin } from '@clerk/fastify' @@ -414,26 +414,26 @@ In the following example, the primary color is set to blue and the text color is For any SDK using ``, pass the component to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[5, 9]] }} + ```tsx {{ mark: [[3, 8]] }} {/* ... */} - ; + ``` In Astro, pass the component to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - ```js {{ filename: 'astro.config.mjs', mark: [[6, 13]] }} + ```js {{ filename: 'astro.config.mjs', mark: [[7, 12]] }} import clerk from '@clerk/astro' export default defineConfig({ @@ -459,7 +459,7 @@ In the following example, the primary color is set to blue and the text color is Use the following tabs to view the code necessary for each file. - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + ```js {{ filename: 'main.js', mark: [[8, 13]], collapsible: true }} import { Clerk } from '@clerk/clerk-js' const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY @@ -516,7 +516,7 @@ In the following example, the primary color is set to blue and the text color is In Vue, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - ```ts {{ filename: 'src/main.ts', mark: [[7, 14]] }} + ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} import { createApp } from 'vue' import App from './App.vue' import { clerkPlugin } from '@clerk/vue' @@ -539,7 +539,7 @@ In the following example, the primary color is set to blue and the text color is In Nuxt, pass the component to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - ```ts {{ filename: 'nuxt.config.ts', mark: [[4, 11]] }} + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 10]] }} export default defineNuxtConfig({ modules: ['@clerk/nuxt'], clerk: { @@ -559,7 +559,7 @@ In the following example, the primary color is set to blue and the text color is In Fastify, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} import Fastify from 'fastify' import { clerkPlugin } from '@clerk/fastify' @@ -589,7 +589,7 @@ The following example shows how to customize the [``](/docs/reference/ The following example is written for Next.js App Router but can be adapted for any React-based SDK. - ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[5, 9]] }} + ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[5, 12]] }} import { SignIn } from '@clerk/nextjs' export default function Page() { @@ -608,7 +608,7 @@ The following example shows how to customize the [``](/docs/reference/ - ```astro {{ filename: 'pages/sign-in.astro', mark: [[7, 10]] }} + ```astro {{ filename: 'pages/sign-in.astro', mark: [[5, 10]] }} --- import { SignIn } from '@clerk/astro/components' --- diff --git a/docs/guides/customizing-clerk/localization.mdx b/docs/guides/customizing-clerk/localization.mdx index 03ea45ee47..e8278fc123 100644 --- a/docs/guides/customizing-clerk/localization.mdx +++ b/docs/guides/customizing-clerk/localization.mdx @@ -85,7 +85,7 @@ Once the `@clerk/localizations` package is installed, you can import the localiz In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop on the [``](/docs/reference/components/clerk-provider). - ```tsx {{ prettier: false, mark: [1, 2, 7] }} + ```tsx {{ prettier: false, mark: [1, 2, 4] }} // fr-FR locale is imported as frFR import { frFR } from '@clerk/localizations' @@ -248,7 +248,7 @@ Now that you know the key, you can pass it to the `localization` prop and set th For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[2, 5], 9] }} + ```tsx {{ prettier: false, mark: [[1, 4], 6] }} // Set your customizations in a `localization` object const localization = { formButtonPrimary: 'LETS GO!', @@ -391,7 +391,7 @@ You can also customize multiple entries by passing multiple keys. The following For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[2, 11], 15] }} + ```tsx {{ prettier: false, mark: [[1, 10], 12] }} const localization = { signUp: { start: { @@ -579,7 +579,7 @@ The following example updates the `not_allowed_access` error message. This messa For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[2, 7], 11] }} + ```tsx {{ prettier: false, mark: [[1, 6], 8] }} const localization = { unstable__errors: { not_allowed_access: From 3c88cb9c1a1023dd7a1808cc3a16a62e9bf1d6f8 Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Tue, 28 Oct 2025 14:49:14 -0600 Subject: [PATCH 08/19] Tackle themes page + clarification of text --- .../appearance-prop/layout.mdx | 10 +- .../appearance-prop/overview.mdx | 2 +- .../appearance-prop/themes.mdx | 736 ++++++++++-------- .../appearance-prop/variables.mdx | 10 +- .../guides/customizing-clerk/localization.mdx | 6 +- 5 files changed, 404 insertions(+), 360 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/layout.mdx b/docs/guides/customizing-clerk/appearance-prop/layout.mdx index c7a9b27e06..b39d7d2eb8 100644 --- a/docs/guides/customizing-clerk/appearance-prop/layout.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/layout.mdx @@ -5,7 +5,7 @@ description: Utilize Clerk's layout prop in order to change the layout of the `](/docs/reference/components/authentication/sign-in) and [``](/docs/reference/components/authentication/sign-up) components, as well as set important links to your support, terms, and privacy pages. +The `layout` property can be used to change the layout of the [``](/docs/reference/components/authentication/sign-in) and [``](/docs/reference/components/authentication/sign-up) components, as well as set important links to your support, terms, and privacy pages. It is passed as a parameter to the [`appearance` prop](/docs/guides/customizing-clerk/appearance-prop/overview). ## Properties @@ -99,18 +99,18 @@ The `layout` property can be used to change the layout of the [``](/doc For any SDK using ``, pass the `layout` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[3, 7]] }} + ```tsx {{ mark: [[3, 7]] }} {/* ... */} - ; + ``` diff --git a/docs/guides/customizing-clerk/appearance-prop/overview.mdx b/docs/guides/customizing-clerk/appearance-prop/overview.mdx index 016a8e6eee..0f8125cf44 100644 --- a/docs/guides/customizing-clerk/appearance-prop/overview.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/overview.mdx @@ -9,7 +9,7 @@ Customizing the appearance of Clerk components is a powerful way to make your ap The `appearance` prop can be applied to [``](/docs/reference/components/clerk-provider) to share styles across every component, or individually to any of the Clerk components. -This applies to all of the React-based packages, like [Next.js](/docs/nextjs/getting-started/quickstart), as well as [the pure JavaScript ClerkJS package](/docs/reference/javascript/overview). +This applies to all of the React-based packages, like [Next.js](/docs/nextjs/getting-started/quickstart), as well as [the pure JavaScript ClerkJS package](/docs/reference/javascript/overview). For other SDKs, you can pass the `appearance` prop to the SDK's corresponding configuration method. ## Properties diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index 35b34ff941..8a3236cb0c 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -85,105 +85,38 @@ To use the simple theme, set `theme` to `simple`: 1. To get started, install the `@clerk/themes` package. - - ```bash {{ filename: 'terminal' }} - npm install @clerk/themes - ``` - - ```bash {{ filename: 'terminal' }} - yarn add @clerk/themes - ``` - - ```bash {{ filename: 'terminal' }} - pnpm add @clerk/themes - ``` - - ```bash {{ filename: 'terminal' }} - bun add @clerk/themes - ``` - +```npm {{ filename: 'terminal' }} +npm install @clerk/themes +``` + 1. To use a theme, import it from `@clerk/themes` and pass it to the `appearance` prop of a Clerk component. ### Apply a theme to all Clerk components -To apply a theme to all Clerk components, pass the `appearance` prop to the [``](/docs/reference/components/clerk-provider) component. The `appearance` prop accepts the property `theme`, which can be set to a theme. +To apply a theme to all Clerk components, pass the `appearance` prop to the [``](/docs/reference/components/clerk-provider) component, or to the SDK's corresponding configuration method. The `appearance` prop accepts the property `theme`, which can be set to a theme. In the following example, the "Dark" theme is applied to all Clerk components. - +", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - ```tsx {{ filename: '/src/app/layout.tsx', mark: [2, [7, 9]] }} - import { ClerkProvider } from '@clerk/nextjs' - import { dark } from '@clerk/themes' - - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ) - } - ``` - - ```tsx {{ filename: '_app.tsx', mark: [2, 8, 9, 10] }} - import { ClerkProvider } from '@clerk/nextjs' - import { dark } from '@clerk/themes' - import type { AppProps } from 'next/app' - - function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ) - } + For any SDK using ``, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - export default MyApp - ``` - - - - - ```tsx {{ filename: 'app.tsx', mark: [3, [14, 16]] }} - import React from 'react' - import './App.css' + ```tsx {{ prettier: false, mark: [[3, 7]] }} import { dark } from '@clerk/themes' - import { ClerkProvider } from '@clerk/clerk-react' - - if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { - throw new Error('Missing Publishable Key') - } - const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY - - function App() { - return ( - -
Hello from clerk
- - ) - } - export default App + + {/* ... */} + ; ``` + In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} import clerk from '@clerk/astro' import { dark } from '@clerk/themes' @@ -201,6 +134,64 @@ In the following example, the "Dark" theme is applied to all Clerk components. + In JavaScript, pass the `theme` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + import { dark } from '@clerk/themes' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + appearance: { + theme: dark, + }, + }) + + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` + + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} import { createApp } from 'vue' import App from './App.vue' @@ -218,6 +209,8 @@ In the following example, the "Dark" theme is applied to all Clerk components. + In Nuxt, pass the `theme` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 8]] }} import { dark } from '@clerk/themes' @@ -231,6 +224,23 @@ In the following example, the "Dark" theme is applied to all Clerk components. }) ``` + + + In Fastify, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + theme: dark, + }, + }) + ``` + ### Apply multiple themes @@ -239,80 +249,26 @@ You can also stack themes by passing an array of themes to the `theme` property In the following example, the "Dark" theme is applied first, then the "Neobrutalism" theme is applied on top of it. - +", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - ```tsx {{ filename: '/src/app/layout.tsx', mark: [2, [7, 9]] }} - import { ClerkProvider } from '@clerk/nextjs' - import { dark, neobrutalism } from '@clerk/themes' - - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ) - } - ``` + For any SDK using ``, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ filename: '_app.tsx', mark: [2, [8, 10]] }} - import { ClerkProvider, SignIn } from '@clerk/nextjs' - import { dark, neobrutalism } from '@clerk/themes' - import type { AppProps } from 'next/app' - - function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ) - } - - export default MyApp - ``` - - - - - ```tsx {{ filename: 'app.tsx', mark: [3, [14, 16]] }} - import React from 'react' - import './App.css' + ```tsx {{ prettier: false, mark: [[3, 7]] }} import { dark, neobrutalism } from '@clerk/themes' - import { ClerkProvider } from '@clerk/clerk-react' - - if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { - throw new Error('Missing Publishable Key') - } - const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY - function App() { - return ( - -
Hello from clerk
- - ) - } - - export default App + + {/* ... */} + ; ``` + In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} import clerk from '@clerk/astro' import { dark, neobrutalism } from '@clerk/themes' @@ -330,6 +286,63 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal + In JavaScript, pass the `theme` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + appearance: { + theme: [dark, neobrutalism], + }, + }) + + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` + + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} import { createApp } from 'vue' import App from './App.vue' @@ -347,6 +360,8 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal + In Nuxt, pass the `theme` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 8]] }} import { dark, neobrutalism } from '@clerk/themes' @@ -360,94 +375,55 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal }) ``` - -### Apply a theme to all instances of a Clerk component + + In Fastify, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. -You can apply a theme to all instances of a Clerk component by passing the component to the `appearance` prop of the ``. The `appearance` prop accepts the name of the Clerk component you want to style as a key. + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' -In the following example, the "Neobrutalism" theme is applied to all instances of the [``](/docs/reference/components/authentication/sign-in) component. + const fastify = Fastify({ logger: true }) - - - - ```tsx {{ filename: '/src/app/layout.tsx', mark: [2, [7, 10]] }} - import { ClerkProvider } from '@clerk/nextjs' - import { dark, neobrutalism } from '@clerk/themes' - - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ) - } - ``` + fastify.register(clerkPlugin, { + appearance: { + theme: [dark, neobrutalism], + }, + }) + ``` + + - ```tsx {{ filename: '_app.tsx', mark: [2, [8, 11]] }} - import { ClerkProvider, SignIn } from '@clerk/nextjs' - import { dark } from '@clerk/themes' - import type { AppProps } from 'next/app' - - function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ) - } +### Apply a theme to all instances of a Clerk component - export default MyApp - ``` - - +You can apply a theme to all instances of a Clerk component by passing the component to the `appearance` prop of the ``, or to the SDK's corresponding configuration method. The `appearance` prop accepts the name of the Clerk component you want to style as a key. - - ```tsx {{ filename: 'app.tsx', mark: [3, [14, 17]] }} - import React from 'react' - import './App.css' - import { dark } from '@clerk/themes' - import { ClerkProvider } from '@clerk/clerk-react' +In the following example, the "Neobrutalism" theme is applied to all instances of the [``](/docs/reference/components/authentication/sign-in) component. - if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { - throw new Error('Missing Publishable Key') - } - const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY +", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> + + For any SDK using ``, pass the `theme` and `signIn` properties to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - function App() { - return ( - -
Hello from clerk
- - ) - } + ```tsx {{ prettier: false, mark: [[3, 7]] }} + import { dark, neobrutalism } from '@clerk/themes' - export default App + + {/* ... */} + ; ``` + In Astro, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 10]] }} import clerk from '@clerk/astro' - import { dark } from '@clerk/themes' + import { dark, neobrutalism } from '@clerk/themes' export default defineConfig({ integrations: [ @@ -463,6 +439,64 @@ In the following example, the "Neobrutalism" theme is applied to all instances o + In JavaScript, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + appearance: { + theme: dark, + signIn: { theme: neobrutalism }, + }, + }) + + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` + + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 11]] }} import { createApp } from 'vue' import App from './App.vue' @@ -481,6 +515,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o + In Nuxt, pass the `theme` and `signIn` properties to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 9]] }} import { dark, neobrutalism } from '@clerk/themes' @@ -495,61 +531,48 @@ In the following example, the "Neobrutalism" theme is applied to all instances o }) ``` + + + In Fastify, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + import { dark, neobrutalism } from '@clerk/themes' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + theme: dark, + signIn: { theme: neobrutalism }, + }, + }) + ``` + ### Apply a theme to a single Clerk component To apply a theme to a single Clerk component, pass the `appearance` prop to the component. The `appearance` prop accepts the property `theme`, which can be set to a theme. - + - - ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [2, [7, 9]] }} - import { SignIn } from '@clerk/nextjs' - import { dark } from '@clerk/themes' + The following example is written for Next.js App Router but can be adapted for any React-based SDK. - export default function Page() { - return ( - - ) - } - ``` - - ```tsx {{ filename: '/pages/sign-in/[[...index]].tsx', mark: [2, [6, 8]] }} - import { SignIn } from '@clerk/nextjs' - import { dark } from '@clerk/themes' + ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[5, 12]] }} + import { SignIn } from '@clerk/nextjs' + import { dark } from '@clerk/themes' - const SignInPage = () => ( + export default function Page() { + return ( ) - - export default SignInPage - ``` - - - - - ```tsx {{ filename: '/src/sign-in/[[...index]].tsx', mark: [2, [6, 8]] }} - import { SignIn } from '@clerk/clerk-react' - import { dark } from '@clerk/themes' - - const SignInPage = () => ( - - ) - - export default SignInPage + } ``` @@ -569,7 +592,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the - ```vue {{ filename: 'pages/sign-in.vue' }} + ```vue {{ filename: 'pages/sign-in.vue', mark: [6] }} + + + ``` + ## Customize a theme using variables @@ -591,91 +626,22 @@ In the following example, the primary color of the themes are customized. > [!IMPORTANT] > For a list of all of the variables you can customize, and for more examples on how to use the `variables` property, see the [Variables](/docs/guides/customizing-clerk/appearance-prop/variables) docs. - +", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - ```tsx {{ filename: '/src/app/layout.tsx', mark: [2, [7, 14]] }} - import { ClerkProvider } from '@clerk/nextjs' - import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' - - export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ) - } - ``` - - ```tsx {{ filename: '_app.tsx', mark: [2, [8, 15]] }} - import { ClerkProvider } from '@clerk/nextjs' - import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' - import type { AppProps } from 'next/app' - - function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ) - } - - export default MyApp - ``` - - - - - ```tsx {{ filename: 'app.tsx', mark: [3, [14, 21]] }} - import React from 'react' - import './App.css' + ```tsx {{ prettier: false, mark: [[3, 8]] }} import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' - import { ClerkProvider } from '@clerk/clerk-react' - - if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) { - throw new Error('Missing Publishable Key') - } - const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY - - function App() { - return ( - -
Hello from clerk
- - ) - } - - export default App + + {/* ... */} + ``` @@ -701,6 +667,64 @@ In the following example, the primary color of the themes are customized. ``` + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 13]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + appearance: { + theme: [dark, neobrutalism], + variables: { colorPrimary: 'blue' }, + signIn: { + theme: [shadesOfPurple], + variables: { colorPrimary: 'blue' }, + }, + }, + }) + + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` + + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } + ``` + + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 15]] }} import { createApp } from 'vue' @@ -742,4 +766,24 @@ In the following example, the primary color of the themes are customized. }) ``` + + + ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + theme: [dark, neobrutalism], + variables: { colorPrimary: 'blue' }, + signIn: { + theme: [shadesOfPurple], + variables: { colorPrimary: 'blue' }, + }, + }, + }) + ``` + diff --git a/docs/guides/customizing-clerk/appearance-prop/variables.mdx b/docs/guides/customizing-clerk/appearance-prop/variables.mdx index 3e7beddef9..c991262868 100644 --- a/docs/guides/customizing-clerk/appearance-prop/variables.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/variables.mdx @@ -5,7 +5,7 @@ description: Utilize Clerk's variables property in order to adjust the general s {/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L399 */} -The `variables` property is used to adjust the general styles of the component's base theme, like colors, backgrounds, and typography. +The `variables` property is used to adjust the general styles of the component's base theme, like colors, backgrounds, and typography. It is passed as a parameter to the [`appearance` prop](/docs/guides/customizing-clerk/appearance-prop/overview). ## Properties @@ -243,7 +243,7 @@ You can customize Clerk components by passing an object of variables to the `var ### Apply `variables` to all Clerk components -To customize all Clerk components, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. +To customize all Clerk components, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component, or to the SDK's corresponding configuration method. In the following example, the primary color is set to blue and the text color is set to black. Because these styles are applied to the ``, which wraps the entire application, these styles will be applied to all Clerk components that use the primary color and text color. @@ -251,7 +251,7 @@ In the following example, the primary color is set to blue and the text color is For any SDK using ``, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[3, 6]] }} + ```tsx {{ mark: [[3, 6]] }} {/* ... */} - ; + ``` @@ -406,7 +406,7 @@ In the following example, the primary color is set to blue and the text color is ### Apply `variables` to all instances of a Clerk component -You can customize all instances of a Clerk component by passing the component to the `appearance` prop of the ``. The `appearance` prop accepts the name of the Clerk component you want to style as a key. +You can customize all instances of a Clerk component by passing the component to the `appearance` prop of the `` component, or to the SDK's corresponding configuration method. The `appearance` prop accepts the name of the Clerk component you want to style as a key. In the following example, the primary color is set to blue and the text color is set to black for all instances of the [``](/docs/reference/components/authentication/sign-in) component. diff --git a/docs/guides/customizing-clerk/localization.mdx b/docs/guides/customizing-clerk/localization.mdx index e8278fc123..ac954f3766 100644 --- a/docs/guides/customizing-clerk/localization.mdx +++ b/docs/guides/customizing-clerk/localization.mdx @@ -89,9 +89,9 @@ Once the `@clerk/localizations` package is installed, you can import the localiz // fr-FR locale is imported as frFR import { frFR } from '@clerk/localizations' - - {/* ... */} - + + {/* ... */} + ``` From 7e8c8c766fd51d375755bdd1009692dcc3b11654 Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Tue, 28 Oct 2025 14:57:27 -0600 Subject: [PATCH 09/19] Fix prettier stuff --- docs/guides/customizing-clerk/appearance-prop/captcha.mdx | 6 +++--- docs/guides/customizing-clerk/appearance-prop/themes.mdx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx index 0d6da15360..ecc0605085 100644 --- a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx @@ -40,18 +40,18 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge For any SDK using ``, pass the `captcha` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[3, 7]] }} + ```tsx {{ mark: [[3, 7]] }} {/* ... */} - ; + ``` diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index 8a3236cb0c..edbef3efdb 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -110,7 +110,7 @@ In the following example, the "Dark" theme is applied to all Clerk components. }} > {/* ... */} - ; + ``` @@ -262,7 +262,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal }} > {/* ... */} - ; + ``` @@ -414,7 +414,7 @@ In the following example, the "Neobrutalism" theme is applied to all instances o }} > {/* ... */} - ; + ``` From 63d4822c3ff58921c3ce941be7cda350997fce7c Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Tue, 28 Oct 2025 15:11:22 -0600 Subject: [PATCH 10/19] Fix issues when testing --- docs/guides/customizing-clerk/appearance-prop/themes.mdx | 6 +++--- docs/guides/customizing-clerk/appearance-prop/variables.mdx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index edbef3efdb..a2c951543f 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -85,9 +85,9 @@ To use the simple theme, set `theme` to `simple`: 1. To get started, install the `@clerk/themes` package. -```npm {{ filename: 'terminal' }} -npm install @clerk/themes -``` + ```npm {{ filename: 'terminal' }} + npm install @clerk/themes + ``` 1. To use a theme, import it from `@clerk/themes` and pass it to the `appearance` prop of a Clerk component. diff --git a/docs/guides/customizing-clerk/appearance-prop/variables.mdx b/docs/guides/customizing-clerk/appearance-prop/variables.mdx index c991262868..b26c12eff6 100644 --- a/docs/guides/customizing-clerk/appearance-prop/variables.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/variables.mdx @@ -345,7 +345,7 @@ In the following example, the primary color is set to blue and the text color is - In Vue, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + In Vue, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} import { createApp } from 'vue' @@ -384,7 +384,7 @@ In the following example, the primary color is set to blue and the text color is - In Fastify, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + In Fastify, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} import Fastify from 'fastify' From fd126d1081581fb9298fce012f50adbdc2def98f Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Tue, 28 Oct 2025 15:14:49 -0600 Subject: [PATCH 11/19] Fix linting --- docs/guides/customizing-clerk/appearance-prop/themes.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index a2c951543f..6b7d3aa443 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -85,9 +85,9 @@ To use the simple theme, set `theme` to `simple`: 1. To get started, install the `@clerk/themes` package. - ```npm {{ filename: 'terminal' }} - npm install @clerk/themes - ``` + ```npm {{ filename: 'terminal' }} + npm install @clerk/themes + ``` 1. To use a theme, import it from `@clerk/themes` and pass it to the `appearance` prop of a Clerk component. From 96df89fd9330fd468de858ee0b149ec44d3b0b2e Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Wed, 29 Oct 2025 14:58:09 -0600 Subject: [PATCH 12/19] Restructure the code examples and wordign --- docs/_partials/customizing-clerk-info.mdx | 1 + .../appearance-prop/captcha.mdx | 272 ++--- .../appearance-prop/layout.mdx | 272 ++--- .../appearance-prop/overview.mdx | 6 +- .../appearance-prop/themes.mdx | 1030 +++++++++-------- .../appearance-prop/variables.mdx | 512 ++++---- .../guides/customizing-clerk/localization.mdx | 998 ++++++++-------- 7 files changed, 1555 insertions(+), 1536 deletions(-) create mode 100644 docs/_partials/customizing-clerk-info.mdx diff --git a/docs/_partials/customizing-clerk-info.mdx b/docs/_partials/customizing-clerk-info.mdx new file mode 100644 index 0000000000..1977a743a8 --- /dev/null +++ b/docs/_partials/customizing-clerk-info.mdx @@ -0,0 +1 @@ +It is passed as a parameter to the [`appearance`](/docs/guides/customizing-clerk/appearance-prop/overview) prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. \ No newline at end of file diff --git a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx index ecc0605085..12193d4526 100644 --- a/docs/guides/customizing-clerk/appearance-prop/captcha.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/captcha.mdx @@ -5,7 +5,9 @@ description: Utilize Clerk's `captcha` prop in order to change the appearance of {/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L538 */} -The `captcha` property can be used to change the appearance of the CAPTCHA widget. It is passed as a parameter to the [`appearance` prop](/docs/guides/customizing-clerk/appearance-prop/overview). +The `captcha` property can be used to change the appearance of the CAPTCHA widget. + + ## Properties @@ -36,60 +38,35 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge ## Usage -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `captcha` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - - ```tsx {{ mark: [[3, 7]] }} - - {/* ... */} - - ``` - - - - In Astro, pass the `captcha` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - - ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} - import clerk from '@clerk/astro' - - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - captcha: { - theme: 'dark', - size: 'flexible', - language: 'es-ES', - }, - }, - }), - ], - }) - ``` - - - - In JavaScript, pass the `captcha` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - - Use the following tabs to view the code necessary for each file. - - - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + + For React-based SDKs, pass the `captcha` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + + ```tsx {{ mark: [[3, 7]] }} + + {/* ... */} + + ``` + + + + In Astro, pass the `captcha` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} + import clerk from '@clerk/astro' + + export default defineConfig({ + integrations: [ + clerk({ appearance: { captcha: { theme: 'dark', @@ -97,55 +74,25 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge language: 'es-ES', }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In Vue, pass the `captcha` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - - const app = createApp(App) - app.use(clerkPlugin, { + }), + ], + }) + ``` + + + + In JavaScript, pass the `captcha` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { captcha: { theme: 'dark', @@ -154,39 +101,73 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge }, }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the `captcha` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - captcha: { - theme: 'dark', - size: 'flexible', - language: 'es-ES', - }, - }, - }, - }) - ``` - + const userButtonDiv = document.getElementById('user-button') - - In Fastify, pass the `captcha` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + const signInDiv = document.getElementById('sign-in') - const fastify = Fastify({ logger: true }) + clerk.mountSignIn(signInDiv) + } + ``` - fastify.register(clerkPlugin, { + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `captcha` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + captcha: { + theme: 'dark', + size: 'flexible', + language: 'es-ES', + }, + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `captcha` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { appearance: { captcha: { theme: 'dark', @@ -194,7 +175,28 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge language: 'es-ES', }, }, - }) - ``` - - + }, + }) + ``` + + + + In Fastify, pass the `captcha` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + captcha: { + theme: 'dark', + size: 'flexible', + language: 'es-ES', + }, + }, + }) + ``` + diff --git a/docs/guides/customizing-clerk/appearance-prop/layout.mdx b/docs/guides/customizing-clerk/appearance-prop/layout.mdx index b39d7d2eb8..3af84826f3 100644 --- a/docs/guides/customizing-clerk/appearance-prop/layout.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/layout.mdx @@ -5,7 +5,9 @@ description: Utilize Clerk's layout prop in order to change the layout of the `](/docs/reference/components/authentication/sign-in) and [``](/docs/reference/components/authentication/sign-up) components, as well as set important links to your support, terms, and privacy pages. It is passed as a parameter to the [`appearance` prop](/docs/guides/customizing-clerk/appearance-prop/overview). +The `layout` property can be used to change the layout of the [``](/docs/reference/components/authentication/sign-in) and [``](/docs/reference/components/authentication/sign-up) components, as well as set important links to your support, terms, and privacy pages. + + ## Properties @@ -95,60 +97,35 @@ The `layout` property can be used to change the layout of the [``](/doc ## Usage -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `layout` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - - ```tsx {{ mark: [[3, 7]] }} - - {/* ... */} - - ``` - - - - In Astro, pass the `layout` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - - ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} - import clerk from '@clerk/astro' - - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - layout: { - socialButtonsPlacement: 'bottom', - socialButtonsVariant: 'iconButton', - termsPageUrl: 'https://clerk.com/terms', - }, - }, - }), - ], - }) - ``` - - - - In JavaScript, pass the `layout` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - - Use the following tabs to view the code necessary for each file. - - - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + + For React-based SDKs, pass the `layout` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + + ```tsx {{ mark: [[3, 7]] }} + + {/* ... */} + + ``` + + + + In Astro, pass the `layout` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + ```js {{ filename: 'astro.config.mjs', mark: [[7, 11]] }} + import clerk from '@clerk/astro' + + export default defineConfig({ + integrations: [ + clerk({ appearance: { layout: { socialButtonsPlacement: 'bottom', @@ -156,55 +133,25 @@ The `layout` property can be used to change the layout of the [``](/doc termsPageUrl: 'https://clerk.com/terms', }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In Vue, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - - const app = createApp(App) - app.use(clerkPlugin, { + }), + ], + }) + ``` + + + + In JavaScript, pass the `layout` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { layout: { socialButtonsPlacement: 'bottom', @@ -213,39 +160,73 @@ The `layout` property can be used to change the layout of the [``](/doc }, }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the `layout` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - layout: { - socialButtonsPlacement: 'bottom', - socialButtonsVariant: 'iconButton', - termsPageUrl: 'https://clerk.com/terms', - }, - }, - }, - }) - ``` - + const userButtonDiv = document.getElementById('user-button') - - In Fastify, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + const signInDiv = document.getElementById('sign-in') - const fastify = Fastify({ logger: true }) + clerk.mountSignIn(signInDiv) + } + ``` - fastify.register(clerkPlugin, { + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + layout: { + socialButtonsPlacement: 'bottom', + socialButtonsVariant: 'iconButton', + termsPageUrl: 'https://clerk.com/terms', + }, + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `layout` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 9]] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { appearance: { layout: { socialButtonsPlacement: 'bottom', @@ -253,7 +234,28 @@ The `layout` property can be used to change the layout of the [``](/doc termsPageUrl: 'https://clerk.com/terms', }, }, - }) - ``` - - + }, + }) + ``` + + + + In Fastify, pass the `layout` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + layout: { + socialButtonsPlacement: 'bottom', + socialButtonsVariant: 'iconButton', + termsPageUrl: 'https://clerk.com/terms', + }, + }, + }) + ``` + diff --git a/docs/guides/customizing-clerk/appearance-prop/overview.mdx b/docs/guides/customizing-clerk/appearance-prop/overview.mdx index 0f8125cf44..f58f7589ab 100644 --- a/docs/guides/customizing-clerk/appearance-prop/overview.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/overview.mdx @@ -7,9 +7,9 @@ description: Utilize Clerk's appearance property in order to share styles across Customizing the appearance of Clerk components is a powerful way to make your application look and feel unique. Clerk provides a way to customize the appearance of its components using the `appearance` prop. -The `appearance` prop can be applied to [``](/docs/reference/components/clerk-provider) to share styles across every component, or individually to any of the Clerk components. +The `appearance` prop is available wherever you initialize the Clerk integration. For most SDKs, it's applied to the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. You can use it to share styles across every component, or individually to any of the Clerk components. -This applies to all of the React-based packages, like [Next.js](/docs/nextjs/getting-started/quickstart), as well as [the pure JavaScript ClerkJS package](/docs/reference/javascript/overview). For other SDKs, you can pass the `appearance` prop to the SDK's corresponding configuration method. +This applies to all of the React-based packages, like [Next.js](/docs/nextjs/getting-started/quickstart), as well as [the pure JavaScript ClerkJS package](/docs/reference/javascript/overview). ## Properties @@ -342,7 +342,7 @@ Here are a few resources you can utilize to customize your Clerk components furt --- - - [prebuilt themes](/docs/guides/customizing-clerk/appearance-prop/themes) + - [Prebuilt themes](/docs/guides/customizing-clerk/appearance-prop/themes) - Explore the prebuilt themes that you can use to quickly style your Clerk components. --- diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index 6b7d3aa443..8960a78c0e 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -93,464 +93,464 @@ To use the simple theme, set `theme` to `simple`: ### Apply a theme to all Clerk components -To apply a theme to all Clerk components, pass the `appearance` prop to the [``](/docs/reference/components/clerk-provider) component, or to the SDK's corresponding configuration method. The `appearance` prop accepts the property `theme`, which can be set to a theme. +To apply a theme to all Clerk components, pass the `theme` property to the `appearance` prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. In the following example, the "Dark" theme is applied to all Clerk components. -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - - ```tsx {{ prettier: false, mark: [[3, 7]] }} - import { dark } from '@clerk/themes' - - - {/* ... */} - - ``` - - - - In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - - ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} - import clerk from '@clerk/astro' + + For React-based SDKs, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + + ````tsx {{ prettier: false, mark: [[3, 7]] }} + import { dark } from '@clerk/themes' + + + {/* ... */} + + `` + + + + In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} + import clerk from '@clerk/astro' + import { dark } from '@clerk/themes' + + export default defineConfig({ + integrations: [ + clerk({ + appearance: { + theme: dark, + }, + }), + ], + }) + ```` + + + + In JavaScript, pass the `theme` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' import { dark } from '@clerk/themes' - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - theme: dark, - }, - }), - ], - }) - ``` - - - - In JavaScript, pass the `theme` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - - Use the following tabs to view the code necessary for each file. - - - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - import { dark } from '@clerk/themes' - - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - - const clerk = new Clerk(clerkPubKey) - await clerk.load({ - appearance: { - theme: dark, - }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In Vue, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - import { dark } from '@clerk/themes' - - const app = createApp(App) - app.use(clerkPlugin, { + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { theme: dark, }, }) - app.mount('#app') - ``` - - - - In Nuxt, pass the `theme` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 8]] }} - import { dark } from '@clerk/themes' + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - theme: dark, - }, - }, - }) - ``` - + const userButtonDiv = document.getElementById('user-button') - - In Fastify, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + const signInDiv = document.getElementById('sign-in') - const fastify = Fastify({ logger: true }) + clerk.mountSignIn(signInDiv) + } + ``` - fastify.register(clerkPlugin, { + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + import { dark } from '@clerk/themes' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + theme: dark, + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `theme` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 8]] }} + import { dark } from '@clerk/themes' + + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { appearance: { theme: dark, }, - }) - ``` - - + }, + }) + ``` + -### Apply multiple themes - -You can also stack themes by passing an array of themes to the `theme` property of the `appearance` prop. The themes will be applied in the order they are listed. If styles overlap, the last defined theme will take precedence. - -In the following example, the "Dark" theme is applied first, then the "Neobrutalism" theme is applied on top of it. - -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + + In Fastify, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. - ```tsx {{ prettier: false, mark: [[3, 7]] }} - import { dark, neobrutalism } from '@clerk/themes' - - - {/* ... */} - - ``` - + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' - - In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + const fastify = Fastify({ logger: true }) - ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} - import clerk from '@clerk/astro' - import { dark, neobrutalism } from '@clerk/themes' + fastify.register(clerkPlugin, { + appearance: { + theme: dark, + }, + }) + ``` + - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - theme: [dark, neobrutalism], - }, - }), - ], - }) - ``` - +### Apply multiple themes - - In JavaScript, pass the `theme` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. +You can also stack themes by passing an array of themes to the `theme` property of the `appearance` prop. The themes will be applied in the order they are listed. If styles overlap, the last defined theme will take precedence. - Use the following tabs to view the code necessary for each file. +In the following example, the "Dark" theme is applied first, then the "Neobrutalism" theme is applied on top of it. - - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' + + For React-based SDKs, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + ```tsx {{ prettier: false, mark: [[3, 7]] }} + import { dark, neobrutalism } from '@clerk/themes' - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + + {/* ... */} + + ``` + + + + In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} + import clerk from '@clerk/astro' + import { dark, neobrutalism } from '@clerk/themes' + + export default defineConfig({ + integrations: [ + clerk({ appearance: { theme: [dark, neobrutalism], }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In Vue, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - - ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - import { dark, neobrutalism } from '@clerk/themes' + }), + ], + }) + ``` + - const app = createApp(App) - app.use(clerkPlugin, { - appearance: { - theme: [dark, neobrutalism], - }, - }) - app.mount('#app') - ``` - - - - In Nuxt, pass the `theme` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - - ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 8]] }} - import { dark, neobrutalism } from '@clerk/themes' - - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - theme: [dark, neobrutalism], - }, - }, - }) - ``` - + + In JavaScript, pass the `theme` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - - In Fastify, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + Use the following tabs to view the code necessary for each file. - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' - const fastify = Fastify({ logger: true }) + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - fastify.register(clerkPlugin, { + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { theme: [dark, neobrutalism], }, }) - ``` - - -### Apply a theme to all instances of a Clerk component + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` -You can apply a theme to all instances of a Clerk component by passing the component to the `appearance` prop of the ``, or to the SDK's corresponding configuration method. The `appearance` prop accepts the name of the Clerk component you want to style as a key. + const userButtonDiv = document.getElementById('user-button') -In the following example, the "Neobrutalism" theme is applied to all instances of the [``](/docs/reference/components/authentication/sign-in) component. + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `theme` and `signIn` properties to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + const signInDiv = document.getElementById('sign-in') - ```tsx {{ prettier: false, mark: [[3, 7]] }} - import { dark, neobrutalism } from '@clerk/themes' + clerk.mountSignIn(signInDiv) + } + ``` - - {/* ... */} - + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + ``` - + + + + + In Vue, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 10]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + import { dark, neobrutalism } from '@clerk/themes' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + theme: [dark, neobrutalism], + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `theme` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 8]] }} + import { dark, neobrutalism } from '@clerk/themes' + + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { + appearance: { + theme: [dark, neobrutalism], + }, + }, + }) + ``` + - - In Astro, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + In Fastify, pass the `theme` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. - ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 10]] }} - import clerk from '@clerk/astro' - import { dark, neobrutalism } from '@clerk/themes' + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - theme: dark, - signIn: { theme: neobrutalism }, - }, - }), - ], - }) - ``` - + const fastify = Fastify({ logger: true }) - - In JavaScript, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + fastify.register(clerkPlugin, { + appearance: { + theme: [dark, neobrutalism], + }, + }) + ``` + - Use the following tabs to view the code necessary for each file. +### Apply a theme to all instances of a Clerk component - - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' +You can apply a theme to all instances of a Clerk component by passing the component to the `appearance` prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY +In the following example, the "Neobrutalism" theme is applied to all instances of the [``](/docs/reference/components/authentication/sign-in) component. - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + + For React-based SDKs, pass the `theme` and `signIn` properties to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + + ```tsx {{ prettier: false, mark: [[3, 7]] }} + import { dark, neobrutalism } from '@clerk/themes' + + + {/* ... */} + + ``` + + + + In Astro, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 10]] }} + import clerk from '@clerk/astro' + import { dark, neobrutalism } from '@clerk/themes' + + export default defineConfig({ + integrations: [ + clerk({ appearance: { theme: dark, signIn: { theme: neobrutalism }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - + }), + ], + }) + ``` + - - In Vue, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + In JavaScript, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. - ```ts {{ filename: 'src/main.ts', mark: [4, [8, 11]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - import { dark, neobrutalism } from '@clerk/themes' + + ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' - const app = createApp(App) - app.use(clerkPlugin, { + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { theme: dark, signIn: { theme: neobrutalism }, }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the `theme` and `signIn` properties to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 9]] }} - import { dark, neobrutalism } from '@clerk/themes' + const userButtonDiv = document.getElementById('user-button') - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - theme: dark, - signIn: { theme: neobrutalism }, - }, - }, - }) - ``` - - - - In Fastify, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' - import { dark, neobrutalism } from '@clerk/themes' + const signInDiv = document.getElementById('sign-in') - const fastify = Fastify({ logger: true }) + clerk.mountSignIn(signInDiv) + } + ``` - fastify.register(clerkPlugin, { + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 11]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + import { dark, neobrutalism } from '@clerk/themes' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + theme: dark, + signIn: { theme: neobrutalism }, + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `theme` and `signIn` properties to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 9]] }} + import { dark, neobrutalism } from '@clerk/themes' + + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { appearance: { theme: dark, signIn: { theme: neobrutalism }, }, - }) - ``` - - + }, + }) + ``` + + + + In Fastify, pass the `theme` and `signIn` properties to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 12]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + import { dark, neobrutalism } from '@clerk/themes' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + theme: dark, + signIn: { theme: neobrutalism }, + }, + }) + ``` + ### Apply a theme to a single Clerk component @@ -626,58 +626,38 @@ In the following example, the primary color of the themes are customized. > [!IMPORTANT] > For a list of all of the variables you can customize, and for more examples on how to use the `variables` property, see the [Variables](/docs/guides/customizing-clerk/appearance-prop/variables) docs. -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - ```tsx {{ prettier: false, mark: [[3, 8]] }} - import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' - - {/* ... */} - - ``` - - - - ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 14]] }} - import clerk from '@clerk/astro' - import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' - - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - theme: [dark, neobrutalism], - variables: { colorPrimary: 'blue' }, - signIn: { - theme: [shadesOfPurple], - variables: { colorPrimary: 'blue' }, - }, - }, - }), - ], - }) - ``` - - - - Use the following tabs to view the code necessary for each file. - - - ```js {{ filename: 'main.js', mark: [[8, 13]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + + For React-based SDKs, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + + ```tsx {{ prettier: false, mark: [[3, 8]] }} + import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' + + {/* ... */} + + ``` + + + + In Astro, pass the `variables` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 14]] }} + import clerk from '@clerk/astro' + import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' + + export default defineConfig({ + integrations: [ + clerk({ appearance: { theme: [dark, neobrutalism], variables: { colorPrimary: 'blue' }, @@ -686,54 +666,25 @@ In the following example, the primary color of the themes are customized. variables: { colorPrimary: 'blue' }, }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - + }), + ], + }) + ``` + - - ```ts {{ filename: 'src/main.ts', mark: [4, [8, 15]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' - - const app = createApp(App) - app.use(clerkPlugin, { + + In JavaScript, pass the `variables` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[8, 13]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { theme: [dark, neobrutalism], variables: { colorPrimary: 'blue' }, @@ -743,38 +694,77 @@ In the following example, the primary color of the themes are customized. }, }, }) - app.mount('#app') - ``` - - - ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 13]] }} - import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - theme: [dark, neobrutalism], - variables: { colorPrimary: 'blue' }, - signIn: { - theme: [shadesOfPurple], - variables: { colorPrimary: 'blue' }, - }, - }, - }, - }) + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } ``` - - - ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [4, [8, 15]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + theme: [dark, neobrutalism], + variables: { colorPrimary: 'blue' }, + signIn: { + theme: [shadesOfPurple], + variables: { colorPrimary: 'blue' }, + }, + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `variables` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - const fastify = Fastify({ logger: true }) + ```ts {{ filename: 'nuxt.config.ts', mark: [1, [6, 13]] }} + import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes' - fastify.register(clerkPlugin, { + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { appearance: { theme: [dark, neobrutalism], variables: { colorPrimary: 'blue' }, @@ -783,7 +773,29 @@ In the following example, the primary color of the themes are customized. variables: { colorPrimary: 'blue' }, }, }, - }) - ``` - - + }, + }) + ``` + + + + In Fastify, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + theme: [dark, neobrutalism], + variables: { colorPrimary: 'blue' }, + signIn: { + theme: [shadesOfPurple], + variables: { colorPrimary: 'blue' }, + }, + }, + }) + ``` + diff --git a/docs/guides/customizing-clerk/appearance-prop/variables.mdx b/docs/guides/customizing-clerk/appearance-prop/variables.mdx index b26c12eff6..14b86ca8a5 100644 --- a/docs/guides/customizing-clerk/appearance-prop/variables.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/variables.mdx @@ -5,7 +5,9 @@ description: Utilize Clerk's variables property in order to adjust the general s {/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L399 */} -The `variables` property is used to adjust the general styles of the component's base theme, like colors, backgrounds, and typography. It is passed as a parameter to the [`appearance` prop](/docs/guides/customizing-clerk/appearance-prop/overview). +The `variables` property is used to adjust the general styles of the component's base theme, like colors, backgrounds, and typography. + + ## Properties @@ -243,117 +245,63 @@ You can customize Clerk components by passing an object of variables to the `var ### Apply `variables` to all Clerk components -To customize all Clerk components, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component, or to the SDK's corresponding configuration method. - -In the following example, the primary color is set to blue and the text color is set to black. Because these styles are applied to the ``, which wraps the entire application, these styles will be applied to all Clerk components that use the primary color and text color. +To customize all Clerk components, pass the `variables` property to the `appearance` prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. +In the following example, the primary color is set to blue and the text color is set to black. Since these styles are applied to the SDK's Clerk integration, which wraps the entire application, they will be applied to all Clerk components that use the primary or text color. - ```tsx {{ mark: [[3, 6]] }} - - {/* ... */} - - ``` - - - - In Astro, pass the `variables` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - - ```js {{ filename: 'astro.config.mjs', mark: [[7, 10]] }} - import clerk from '@clerk/astro' - - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - variables: { - colorPrimary: '#0000ff', // blue - colorForeground: '#000000', // black - }, - }, - }), - ], - }) - ``` - - - - In JavaScript, pass the `variables` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + For React-based SDKs, pass the `variables` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - Use the following tabs to view the code necessary for each file. + ```tsx {{ mark: [[3, 6]] }} + + {/* ... */} + + ``` + - - ```js {{ filename: 'main.js', mark: [[8, 11]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' + + In Astro, pass the `variables` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + ```js {{ filename: 'astro.config.mjs', mark: [[7, 10]] }} + import clerk from '@clerk/astro' - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + export default defineConfig({ + integrations: [ + clerk({ appearance: { variables: { colorPrimary: '#0000ff', // blue colorForeground: '#000000', // black }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - + }), + ], + }) + ``` + - - In Vue, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + In JavaScript, pass the `variables` property to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' + Use the following tabs to view the code necessary for each file. - const app = createApp(App) - app.use(clerkPlugin, { + + ```js {{ filename: 'main.js', mark: [[8, 11]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { variables: { colorPrimary: '#0000ff', // blue @@ -361,111 +309,139 @@ In the following example, the primary color is set to blue and the text color is }, }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the `variables` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 8]] }} - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - variables: { - colorPrimary: '#0000ff', // blue - colorForeground: '#000000', // black - }, - }, - }, - }) + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } ``` - - - In Fastify, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' - ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }) + app.mount('#app') + ``` + - const fastify = Fastify({ logger: true }) + + In Nuxt, pass the `variables` property to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - fastify.register(clerkPlugin, { + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 8]] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { appearance: { variables: { colorPrimary: '#0000ff', // blue colorForeground: '#000000', // black }, }, - }) - ``` - - + }, + }) + ``` + -### Apply `variables` to all instances of a Clerk component + + In Fastify, pass the `variables` property to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. -You can customize all instances of a Clerk component by passing the component to the `appearance` prop of the `` component, or to the SDK's corresponding configuration method. The `appearance` prop accepts the name of the Clerk component you want to style as a key. + ```ts {{ filename: 'src/main.ts', mark: [[8, 11]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' -In the following example, the primary color is set to blue and the text color is set to black for all instances of the [``](/docs/reference/components/authentication/sign-in) component. + const fastify = Fastify({ logger: true }) -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the component to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. + fastify.register(clerkPlugin, { + appearance: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }) + ``` + - ```tsx {{ mark: [[3, 8]] }} - - {/* ... */} - - ``` - +### Apply `variables` to all instances of a Clerk component - - In Astro, pass the component to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - - ```js {{ filename: 'astro.config.mjs', mark: [[7, 12]] }} - import clerk from '@clerk/astro' - - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - signIn: { - variables: { - colorPrimary: '#0000ff', // blue - colorForeground: '#000000', // black - }, - }, - }, - }), - ], - }) - ``` - +You can customize all instances of a Clerk component by passing the component to the `appearance` prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. The `appearance` prop accepts the name of the Clerk component you want to style as a key. - - In JavaScript, pass the component to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. +In the following example, the primary color is set to blue and the text color is set to black for all instances of the [``](/docs/reference/components/authentication/sign-in) component. - Use the following tabs to view the code necessary for each file. + + For React-based SDKs, pass the component to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - - ```js {{ filename: 'main.js', mark: [[8, 13]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' + ```tsx {{ mark: [[3, 8]] }} + + {/* ... */} + + ``` + - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + In Astro, pass the component to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + ```js {{ filename: 'astro.config.mjs', mark: [[7, 12]] }} + import clerk from '@clerk/astro' + + export default defineConfig({ + integrations: [ + clerk({ appearance: { signIn: { variables: { @@ -474,55 +450,25 @@ In the following example, the primary color is set to blue and the text color is }, }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - + }), + ], + }) + ``` + - - In Vue, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + In JavaScript, pass the component to the `appearance` prop of the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' + Use the following tabs to view the code necessary for each file. - const app = createApp(App) - app.use(clerkPlugin, { + + ```js {{ filename: 'main.js', mark: [[8, 13]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ appearance: { signIn: { variables: { @@ -532,40 +478,74 @@ In the following example, the primary color is set to blue and the text color is }, }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the component to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 10]] }} - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - appearance: { - signIn: { - variables: { - colorPrimary: '#0000ff', // blue - colorForeground: '#000000', // black - }, - }, - }, - }, - }) + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } ``` - - - In Fastify, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + + + + In Vue, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + + const app = createApp(App) + app.use(clerkPlugin, { + appearance: { + signIn: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }, + }) + app.mount('#app') + ``` + - const fastify = Fastify({ logger: true }) + + In Nuxt, pass the component to the `appearance` prop of the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - fastify.register(clerkPlugin, { + ```ts {{ filename: 'nuxt.config.ts', mark: [[5, 10]] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { appearance: { signIn: { variables: { @@ -574,10 +554,32 @@ In the following example, the primary color is set to blue and the text color is }, }, }, - }) - ``` - - + }, + }) + ``` + + + + In Fastify, pass the component to the `appearance` prop of the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'src/main.ts', mark: [[8, 13]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + appearance: { + signIn: { + variables: { + colorPrimary: '#0000ff', // blue + colorForeground: '#000000', // black + }, + }, + }, + }) + ``` + ### Apply `variables` to a single Clerk component diff --git a/docs/guides/customizing-clerk/localization.mdx b/docs/guides/customizing-clerk/localization.mdx index ac954f3766..b23ec46c80 100644 --- a/docs/guides/customizing-clerk/localization.mdx +++ b/docs/guides/customizing-clerk/localization.mdx @@ -79,147 +79,147 @@ To get started, install the `@clerk/localizations` package. npm install @clerk/localizations ``` -Once the `@clerk/localizations` package is installed, you can import the localizations you need by removing the "-" from the locale. For SDKs that use [``](/docs/reference/components/clerk-provider), you can then pass the localization to the `localization` prop on the ``. For other SDKs, you can pass the localization to the appropriate configuration method. +Once the `@clerk/localizations` package is installed, you can import the localizations you need by removing the "-" from the locale. You can then pass the localization to the `localization` prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. + + + In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop on the [``](/docs/reference/components/clerk-provider). + + ```tsx {{ prettier: false, mark: [1, 2, 4] }} + // fr-FR locale is imported as frFR + import { frFR } from '@clerk/localizations' + + + {/* ... */} + + ``` + + + + In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. + + ```js {{ filename: 'astro.config.mjs', mark: [3, 4, [8, 10]] }} + import { defineConfig } from 'astro/config' + import clerk from '@clerk/astro' + // fr-FR locale is imported as frFR + import { frFR } from '@clerk/localizations' + + export default defineConfig({ + integrations: [ + clerk({ + localization: frFR, + }), + ], + }) + ``` + -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop on the [``](/docs/reference/components/clerk-provider). + + In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop on the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - ```tsx {{ prettier: false, mark: [1, 2, 4] }} - // fr-FR locale is imported as frFR - import { frFR } from '@clerk/localizations' + Use the following tabs to view the code necessary for each file. - - {/* ... */} - - ``` - - - - In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. - - ```js {{ filename: 'astro.config.mjs', mark: [3, 4, [8, 10]] }} - import { defineConfig } from 'astro/config' - import clerk from '@clerk/astro' + + ```js {{ filename: 'main.js', mark: [2, 3, [8, 10]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' // fr-FR locale is imported as frFR import { frFR } from '@clerk/localizations' - export default defineConfig({ - integrations: [ - clerk({ - localization: frFR, - }), - ], - }) - ``` - + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - - In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop on the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + const clerk = new Clerk(clerkPubKey) + await clerk.load({ + localization: frFR, + }) - Use the following tabs to view the code necessary for each file. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - - ```js {{ filename: 'main.js', mark: [2, 3, [8, 10]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' - // fr-FR locale is imported as frFR - import { frFR } from '@clerk/localizations' + const userButtonDiv = document.getElementById('user-button') - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` - const clerk = new Clerk(clerkPubKey) - await clerk.load({ - localization: frFR, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - - ```ts {{ filename: 'src/main.ts', mark: [4, 5, [8, 10]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - // fr-FR locale is imported as frFR - import { frFR } from '@clerk/localizations' + const signInDiv = document.getElementById('sign-in') - const app = createApp(App) - app.use(clerkPlugin, { - localization: frFR, - }) - app.mount('#app') + clerk.mountSignIn(signInDiv) + } ``` - - - - In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. - - ```ts {{ filename: 'nuxt.config.ts', mark: [1, 2, [6, 8]] }} - // fr-FR locale is imported as frFR - import { frFR } from '@clerk/localizations' - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - localization: frFR, - }, - }) + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + ``` - + + + + + In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. + + ```ts {{ filename: 'src/main.ts', mark: [4, 5, [8, 10]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' + // fr-FR locale is imported as frFR + import { frFR } from '@clerk/localizations' + + const app = createApp(App) + app.use(clerkPlugin, { + localization: frFR, + }) + app.mount('#app') + ``` + + + + In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [1, 2, [6, 8]] }} + // fr-FR locale is imported as frFR + import { frFR } from '@clerk/localizations' + + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { + localization: frFR, + }, + }) + ``` + - - In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + In the following example, the fr-FR locale is imported as `frFR`. The imported localization is then passed to the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. - ```ts {{ filename: 'server.ts', mark: [3, 4, [8, 10]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' - // fr-FR locale is imported as frFR - import { frFR } from '@clerk/localizations' + ```ts {{ filename: 'server.ts', mark: [3, 4, [8, 10]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + // fr-FR locale is imported as frFR + import { frFR } from '@clerk/localizations' - const fastify = Fastify({ logger: true }) + const fastify = Fastify({ logger: true }) - fastify.register(clerkPlugin, { - localization: frFR, - }) - ``` - - + fastify.register(clerkPlugin, { + localization: frFR, + }) + ``` + ## Adding or updating a localization @@ -244,210 +244,182 @@ For example, say you want to change the text of the "Continue" button on the `", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - - ```tsx {{ prettier: false, mark: [[1, 4], 6] }} - // Set your customizations in a `localization` object - const localization = { - formButtonPrimary: 'LETS GO!', - } - - - {/* ... */} - - ``` - - - - In Astro, pass the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. - - ```tsx {{ filename: 'astro.config.mjs', mark: [[6, 10]] }} - import { defineConfig } from 'astro/config' - import clerk from '@clerk/astro' - - export default defineConfig({ - integrations: [ - clerk({ - localization: { - formButtonPrimary: 'LETS GO!', - }, - }), - ], - }) - ``` - + + For React-based SDKs, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. + + ```tsx {{ prettier: false, mark: [[1, 4], 6] }} + // Set your customizations in a `localization` object + const localization = { + formButtonPrimary: 'LETS GO!', + } + + + {/* ... */} + + ``` + + + + In Astro, pass the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. + + ```tsx {{ filename: 'astro.config.mjs', mark: [[6, 10]] }} + import { defineConfig } from 'astro/config' + import clerk from '@clerk/astro' + + export default defineConfig({ + integrations: [ + clerk({ + localization: { + formButtonPrimary: 'LETS GO!', + }, + }), + ], + }) + ``` + - - In JavaScript, pass the `localization` prop to the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + In JavaScript, pass the `localization` prop to the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. - Use the following tabs to view the code necessary for each file. + Use the following tabs to view the code necessary for each file. - - ```js {{ filename: 'main.js', mark: [[6, 10]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' + + ```js {{ filename: 'main.js', mark: [[6, 10]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - const clerk = new Clerk(clerkPubKey) - await clerk.load({ - localization: { - formButtonPrimary: 'LETS GO!', - }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In Vue, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - - ```ts {{ filename: 'src/main.ts', mark: [[6, 10]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - - const app = createApp(App) - app.use(clerkPlugin, { + const clerk = new Clerk(clerkPubKey) + await clerk.load({ localization: { formButtonPrimary: 'LETS GO!', }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [[3, 7]] }} - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - localization: { - formButtonPrimary: 'LETS GO!', - }, - }, - }) - ``` - + const userButtonDiv = document.getElementById('user-button') - - In Fastify, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'server.ts', mark: [[6, 10]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + const signInDiv = document.getElementById('sign-in') - const fastify = Fastify({ logger: true }) + clerk.mountSignIn(signInDiv) + } + ``` - fastify.register(clerkPlugin, { - localization: { - formButtonPrimary: 'LETS GO!', - }, - }) + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + ``` - - + + -You can also customize multiple entries by passing multiple keys. The following example updates the "to continue to" subtitles on the `` component to say "to access" instead. + + In Vue, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. + ```ts {{ filename: 'src/main.ts', mark: [[6, 10]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' - ```tsx {{ prettier: false, mark: [[1, 10], 12] }} - const localization = { - signUp: { - start: { - subtitle: 'to access {{applicationName}}', - }, - emailCode: { - subtitle: 'to access {{applicationName}}', - }, + const app = createApp(App) + app.use(clerkPlugin, { + localization: { + formButtonPrimary: 'LETS GO!', + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [[3, 7]] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { + localization: { + formButtonPrimary: 'LETS GO!', }, - } + }, + }) + ``` + - - {/* ... */} - - ``` - - - - In Astro, pass the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. - - ```tsx {{ filename: 'astro.config.mjs', mark: [[6, 17]] }} - import { defineConfig } from 'astro/config' - import clerk from '@clerk/astro' - - export default defineConfig({ - integrations: [ - clerk({ - localization: { - signUp: { - start: { - subtitle: 'to access {{applicationName}}', - }, - emailCode: { - subtitle: 'to access {{applicationName}}', - }, - }, - }, - }), - ], - }) - ``` - + + In Fastify, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. - - In JavaScript, pass the `localization` prop to the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + ```ts {{ filename: 'server.ts', mark: [[6, 10]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' - Use the following tabs to view the code necessary for each file. + const fastify = Fastify({ logger: true }) - - ```js {{ filename: 'main.js', mark: [[6, 17]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' + fastify.register(clerkPlugin, { + localization: { + formButtonPrimary: 'LETS GO!', + }, + }) + ``` + - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY +You can also customize multiple entries by passing multiple keys. The following example updates the "to continue to" subtitles on the `` component to say "to access" instead. - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + + For React-based SDKs, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. + + ```tsx {{ prettier: false, mark: [[1, 10], 12] }} + const localization = { + signUp: { + start: { + subtitle: 'to access {{applicationName}}', + }, + emailCode: { + subtitle: 'to access {{applicationName}}', + }, + }, + } + + + {/* ... */} + + ``` + + + + In Astro, pass the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. + + ```tsx {{ filename: 'astro.config.mjs', mark: [[6, 17]] }} + import { defineConfig } from 'astro/config' + import clerk from '@clerk/astro' + + export default defineConfig({ + integrations: [ + clerk({ localization: { signUp: { start: { @@ -458,55 +430,25 @@ You can also customize multiple entries by passing multiple keys. The following }, }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In Vue, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - - ```ts {{ filename: 'src/main.ts', mark: [[6, 17]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - - const app = createApp(App) - app.use(clerkPlugin, { + }), + ], + }) + ``` + + + + In JavaScript, pass the `localization` prop to the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[6, 17]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ localization: { signUp: { start: { @@ -518,42 +460,76 @@ You can also customize multiple entries by passing multiple keys. The following }, }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [[3, 14]] }} - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - localization: { - signUp: { - start: { - subtitle: 'to access {{applicationName}}', - }, - emailCode: { - subtitle: 'to access {{applicationName}}', - }, - }, - }, - }, - }) + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } ``` - - - In Fastify, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + - ```ts {{ filename: 'server.ts', mark: [[6, 17]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + + In Vue, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - const fastify = Fastify({ logger: true }) + ```ts {{ filename: 'src/main.ts', mark: [[6, 17]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' - fastify.register(clerkPlugin, { + const app = createApp(App) + app.use(clerkPlugin, { + localization: { + signUp: { + start: { + subtitle: 'to access {{applicationName}}', + }, + emailCode: { + subtitle: 'to access {{applicationName}}', + }, + }, + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [[3, 14]] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { localization: { signUp: { start: { @@ -564,10 +540,34 @@ You can also customize multiple entries by passing multiple keys. The following }, }, }, - }) - ``` - - + }, + }) + ``` + + + + In Fastify, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'server.ts', mark: [[6, 17]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + localization: { + signUp: { + start: { + subtitle: 'to access {{applicationName}}', + }, + emailCode: { + subtitle: 'to access {{applicationName}}', + }, + }, + }, + }) + ``` + ### Example: Customize error messages @@ -575,11 +575,12 @@ You can customize Clerk's default error messages by targeting the `unstable__err The following example updates the `not_allowed_access` error message. This message appears when a user tries to sign in with an email domain that isn't allowed to access your application. -", "Astro", "JavaScript", "Vue", "Nuxt", "Fastify"]}> - - For any SDK using ``, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. + + For React-based SDKs, pass the `localization` prop to the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[1, 6], 8] }} + ```tsx {{ prettier: false, mark: [[1, 6], 8] }} const localization = { unstable__errors: { not_allowed_access: @@ -590,99 +591,44 @@ The following example updates the `not_allowed_access` error message. This messa {/* ... */} - ``` - - - - In Astro, pass the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. - - ```tsx {{ filename: 'astro.config.mjs', mark: [[6, 13]] }} - import { defineConfig } from 'astro/config' - import clerk from '@clerk/astro' - - export default defineConfig({ - integrations: [ - clerk({ - localization: { - unstable__errors: { - not_allowed_access: - 'Send us an email if you want your corporate email domain allowlisted for access', - }, - }, - }), - ], - }) - ``` - - - - In JavaScript, pass the `localization` prop to the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + ``` + - Use the following tabs to view the code necessary for each file. + + In Astro, pass the `localization` prop to the [`clerk()`](/docs/reference/astro/overview) integration. - - ```js {{ filename: 'main.js', mark: [[6, 13]], collapsible: true }} - import { Clerk } from '@clerk/clerk-js' + ```tsx {{ filename: 'astro.config.mjs', mark: [[6, 13]] }} + import { defineConfig } from 'astro/config' + import clerk from '@clerk/astro' - const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY - - const clerk = new Clerk(clerkPubKey) - await clerk.load({ + export default defineConfig({ + integrations: [ + clerk({ localization: { unstable__errors: { not_allowed_access: 'Send us an email if you want your corporate email domain allowlisted for access', }, }, - }) - - if (clerk.isSignedIn) { - document.getElementById('app').innerHTML = ` -
- ` - - const userButtonDiv = document.getElementById('user-button') - - clerk.mountUserButton(userButtonDiv) - } else { - document.getElementById('app').innerHTML = ` -
- ` - - const signInDiv = document.getElementById('sign-in') - - clerk.mountSignIn(signInDiv) - } - ``` - - ```html {{ filename: 'index.html' }} - - - - - - - Clerk + JavaScript App - - -
- - - - ``` - - - - - In Vue, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - - ```ts {{ filename: 'src/main.ts', mark: [[6, 13]] }} - import { createApp } from 'vue' - import App from './App.vue' - import { clerkPlugin } from '@clerk/vue' - - const app = createApp(App) - app.use(clerkPlugin, { + }), + ], + }) + ``` + + + + In JavaScript, pass the `localization` prop to the [`clerk.load()`](/docs/reference/javascript/clerk#load) method. + + Use the following tabs to view the code necessary for each file. + + + ```js {{ filename: 'main.js', mark: [[6, 13]], collapsible: true }} + import { Clerk } from '@clerk/clerk-js' + + const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY + + const clerk = new Clerk(clerkPubKey) + await clerk.load({ localization: { unstable__errors: { not_allowed_access: @@ -690,45 +636,99 @@ The following example updates the `not_allowed_access` error message. This messa }, }, }) - app.mount('#app') - ``` - - - In Nuxt, pass the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + if (clerk.isSignedIn) { + document.getElementById('app').innerHTML = ` +
+ ` - ```ts {{ filename: 'nuxt.config.ts', mark: [[3, 10]] }} - export default defineNuxtConfig({ - modules: ['@clerk/nuxt'], - clerk: { - localization: { - unstable__errors: { - not_allowed_access: - 'Send us an email if you want your corporate email domain allowlisted for access', - }, - }, - }, - }) + const userButtonDiv = document.getElementById('user-button') + + clerk.mountUserButton(userButtonDiv) + } else { + document.getElementById('app').innerHTML = ` +
+ ` + + const signInDiv = document.getElementById('sign-in') + + clerk.mountSignIn(signInDiv) + } ``` - - - In Fastify, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + ```html {{ filename: 'index.html' }} + + + + + + + Clerk + JavaScript App + + +
+ + + + ``` + + - ```ts {{ filename: 'server.ts', mark: [[6, 13]] }} - import Fastify from 'fastify' - import { clerkPlugin } from '@clerk/fastify' + + In Vue, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/vue/overview) integration. - const fastify = Fastify({ logger: true }) + ```ts {{ filename: 'src/main.ts', mark: [[6, 13]] }} + import { createApp } from 'vue' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' - fastify.register(clerkPlugin, { + const app = createApp(App) + app.use(clerkPlugin, { + localization: { + unstable__errors: { + not_allowed_access: + 'Send us an email if you want your corporate email domain allowlisted for access', + }, + }, + }) + app.mount('#app') + ``` + + + + In Nuxt, pass the `localization` prop to the [`defineNuxtConfig()`](/docs/reference/nuxt/clerk-middleware) integration. + + ```ts {{ filename: 'nuxt.config.ts', mark: [[3, 10]] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt'], + clerk: { localization: { unstable__errors: { not_allowed_access: 'Send us an email if you want your corporate email domain allowlisted for access', }, }, - }) - ``` - - + }, + }) + ``` + + + + In Fastify, pass the `localization` prop to the [`clerkPlugin()`](/docs/reference/fastify/clerk-plugin) integration. + + ```ts {{ filename: 'server.ts', mark: [[6, 13]] }} + import Fastify from 'fastify' + import { clerkPlugin } from '@clerk/fastify' + + const fastify = Fastify({ logger: true }) + + fastify.register(clerkPlugin, { + localization: { + unstable__errors: { + not_allowed_access: + 'Send us an email if you want your corporate email domain allowlisted for access', + }, + }, + }) + ``` + From a1f1718f2d1cdbaeebc6c3a130ae1a1678d03de5 Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Wed, 29 Oct 2025 15:06:15 -0600 Subject: [PATCH 13/19] Fix linting --- docs/_partials/customizing-clerk-info.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_partials/customizing-clerk-info.mdx b/docs/_partials/customizing-clerk-info.mdx index 1977a743a8..ba7a02de8f 100644 --- a/docs/_partials/customizing-clerk-info.mdx +++ b/docs/_partials/customizing-clerk-info.mdx @@ -1 +1 @@ -It is passed as a parameter to the [`appearance`](/docs/guides/customizing-clerk/appearance-prop/overview) prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. \ No newline at end of file +It is passed as a parameter to the [`appearance`](/docs/guides/customizing-clerk/appearance-prop/overview) prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [``](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin. From 929ab2f99cafd96b7e27ddb9abb48370efea2f10 Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Wed, 29 Oct 2025 15:10:12 -0600 Subject: [PATCH 14/19] Fix issue with themes page --- .../appearance-prop/themes.mdx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index 8960a78c0e..0919bab78c 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -102,7 +102,7 @@ In the following example, the "Dark" theme is applied to all Clerk components. > For React-based SDKs, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ````tsx {{ prettier: false, mark: [[3, 7]] }} + ```tsx {{ prettier: false, mark: [[3, 7]] }} import { dark } from '@clerk/themes' {/* ... */} - `` - + ``` + - - In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. + + In Astro, pass the `theme` property to the `appearance` prop of the [`clerk()`](/docs/reference/astro/overview) integration. - ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} - import clerk from '@clerk/astro' - import { dark } from '@clerk/themes' + ```js {{ filename: 'astro.config.mjs', mark: [2, [7, 9]] }} + import clerk from '@clerk/astro' + import { dark } from '@clerk/themes' - export default defineConfig({ - integrations: [ - clerk({ - appearance: { - theme: dark, - }, - }), - ], - }) - ```` + export default defineConfig({ + integrations: [ + clerk({ + appearance: { + theme: dark, + }, + }), + ], + }) + ``` From 583edfe8dffa4676cc5f4048f33f39443851da82 Mon Sep 17 00:00:00 2001 From: Sarah Soutoul Date: Wed, 29 Oct 2025 17:16:25 -0600 Subject: [PATCH 15/19] Fix highlighting + add more examples --- .../appearance-prop/overview.mdx | 182 ++++++++++++++---- .../appearance-prop/themes.mdx | 26 +-- .../guides/customizing-clerk/localization.mdx | 72 +++---- 3 files changed, 198 insertions(+), 82 deletions(-) diff --git a/docs/guides/customizing-clerk/appearance-prop/overview.mdx b/docs/guides/customizing-clerk/appearance-prop/overview.mdx index f58f7589ab..c1af7dd7bb 100644 --- a/docs/guides/customizing-clerk/appearance-prop/overview.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/overview.mdx @@ -138,22 +138,44 @@ Remove the `cl-` prefix from a class and use it as the key for a new object in t The following example shows how to style the primary button in a `` component with custom CSS classes: -```tsx {{ mark: [4] }} - + ```tsx {{ mark: [4] }} + + ``` + + + + ```vue {{ mark: [4, 10] }} + + + + ``` + #### Use Tailwind classes to style Clerk components -To use Tailwind CSS v4, you must set the `cssLayerName` property to ensure that Tailwind's utility styles are applied after Clerk's styles. It's recommended to add this to the `` that wraps your app so that it's applied to all Clerk components, as shown in the following example. The example names the layer `clerk` but you can name it anything you want. +To use Tailwind CSS v4, you must set the `cssLayerName` property to ensure that Tailwind's utility styles are applied after Clerk's styles. It's recommended to add this to the `` or the SDK's Clerk integration that wraps your app so that it's applied to all Clerk components, as shown in the following example. The example names the layer `clerk` but you can name it anything you want. - + + The following example is written for Next.js App Router but can be adapted for any React-based SDK. + ```tsx {{ mark: ["cssLayerName: 'clerk'"] }} import { ClerkProvider } from '@clerk/nextjs' @@ -244,6 +266,27 @@ To use Tailwind CSS v4, you must set the `cssLayerName` property to ensure that + + + ```tsx {{ mark: ["cssLayerName: 'clerk'"] }} + export default defineNuxtConfig({ + modules: ['@clerk/nuxt', '@nuxtjs/tailwindcss'], + css: ['@/assets/css/global.css'], + clerk: { + appearance: { + cssLayerName: 'clerk', + }, + }, + }) + ``` + + ```css {{ mark: ['clerk'] }} + @layer theme, base, clerk, components, utilities; + @import 'tailwindcss'; + ``` + + + ```html {{ mark: ["cssLayerName: 'clerk'"] }} @@ -268,15 +311,35 @@ To use Tailwind CSS v4, you must set the `cssLayerName` property to ensure that Then, you can use Tailwind's classes to style the elements of the Clerk component. The following example shows how to use Tailwind classes to style the primary button in a `` component: -```tsx {{ mark: [4] }} - + ```tsx {{ mark: [4] }} + + ``` + + + + ```vue {{ mark: [4, 10] }} + + + + ``` + #### Use CSS modules to style Clerk components @@ -293,21 +356,43 @@ Create your module file and add the CSS you want to apply, as shown in the follo Then you can apply this by importing the file and using the classes whenever required: -```tsx {{ mark: [1, 8] }} -import styles from '../styles/SignIn.module.css' + + ```tsx {{ mark: [1, 8] }} + import styles from '../styles/SignIn.module.css' + + export default function CustomSignIn() { + return ( + + ) + } + ``` + + + + ```vue {{ mark: [2, 6, 12] }} + -export default function CustomSignIn() { - return ( - - ) -} -``` + + ``` + ### Use inline CSS objects to style Clerk components @@ -315,12 +400,34 @@ You can style the elements of a Clerk component with inline CSS objects. The following example shows how to style the primary button in a `` component with an inline CSS object: -```tsx {{ mark: [[4, 11]] }} - + ```tsx {{ mark: [[4, 11]] }} + + ``` + + + + ```vue {{ mark: [[4, 11], 17] }} + + + + ``` + ## Next steps diff --git a/docs/guides/customizing-clerk/appearance-prop/themes.mdx b/docs/guides/customizing-clerk/appearance-prop/themes.mdx index 0919bab78c..77931c2a7e 100644 --- a/docs/guides/customizing-clerk/appearance-prop/themes.mdx +++ b/docs/guides/customizing-clerk/appearance-prop/themes.mdx @@ -102,7 +102,7 @@ In the following example, the "Dark" theme is applied to all Clerk components. > For React-based SDKs, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[3, 7]] }} + ```tsx {{ prettier: false, mark: [1, [4, 6]] }} import { dark } from '@clerk/themes' - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + ```js {{ filename: 'main.js', mark: [2, [8, 10]], collapsible: true }} import { Clerk } from '@clerk/clerk-js' import { dark } from '@clerk/themes' @@ -254,7 +254,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal > For React-based SDKs, pass the `theme` property to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[3, 7]] }} + ```tsx {{ prettier: false, mark: [1, [4, 6]] }} import { dark, neobrutalism } from '@clerk/themes' - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + ```js {{ filename: 'main.js', mark: [2, [8, 10]], collapsible: true }} import { Clerk } from '@clerk/clerk-js' + import { dark, neobrutalism } from '@clerk/themes' const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY @@ -405,7 +406,7 @@ In the following example, the "Neobrutalism" theme is applied to all instances o > For React-based SDKs, pass the `theme` and `signIn` properties to the `appearance` prop of the [``](/docs/reference/components/clerk-provider) component. - ```tsx {{ prettier: false, mark: [[3, 7]] }} + ```tsx {{ prettier: false, mark: [1, [4, 7]] }} import { dark, neobrutalism } from '@clerk/themes' - ```js {{ filename: 'main.js', mark: [[8, 12]], collapsible: true }} + ```js {{ filename: 'main.js', mark: [2, [8, 11]], collapsible: true }} import { Clerk } from '@clerk/clerk-js' + import { dark, neobrutalism } from '@clerk/themes' const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY @@ -560,7 +562,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the The following example is written for Next.js App Router but can be adapted for any React-based SDK. - ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[5, 12]] }} + ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [2, [6, 10]] }} import { SignIn } from '@clerk/nextjs' import { dark } from '@clerk/themes' @@ -577,7 +579,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the - ```astro {{ filename: 'pages/sign-in.astro', mark: [3, [9, 11]] }} + ```astro {{ filename: 'pages/sign-in.astro', mark: [3, [7, 9]] }} --- import { SignIn } from '@clerk/astro/components' import { dark } from '@clerk/themes' @@ -592,7 +594,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the - ```vue {{ filename: 'pages/sign-in.vue', mark: [6] }} + ```vue {{ filename: 'pages/sign-in.vue', mark: [3, 7] }}