āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/customizing-clerk/appearance-prop/captcha ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
captcha prop'
description: Utilize Clerk's captcha prop in order to change the appearance of the CAPTCHA widget.{/* 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.
The CAPTCHA widget theme. Defaults to auto.
size'normal' | 'flexible' | 'compact'The CAPTCHA widget size. Defaults to normal.
languagestringThe CAPTCHA widget language/locale. When setting the language for CAPTCHA, this is how localization is prioritized:
appearance.captcha.language: Set by this language property.localization.locale: Set by the localization prop on <ClerkProvider>. Some languages are supported by Clerk but not by Cloudflare Turnstile, which is used for the CAPTCHA widget. See Cloudflare Turnstile's supported languages.en-US: Clerk's default language.
</Properties>
<Tabs items={["Next.js", "Astro", "React", "Remix", "Nuxt", "Vue"]}> <Tab> ```tsx {{ prettier: false, filename: 'app.tsx' }} import { ClerkProvider } from '@clerk/nextjs';
<ClerkProvider
appearance={{
captcha: {
theme: 'dark',
size: 'flexible',
language: 'es-ES',
}
}}
>
{/* ... */}
</ClerkProvider>;
```
export default defineConfig({
integrations: [
clerk({
appearance: {
captcha: {
theme: 'dark',
size: 'flexible',
language: 'es-ES',
},
},
}),
],
})
```
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 (
<ClerkProvider
appearance={{
captcha: {
theme: 'dark',
size: 'flexible',
language: 'es-ES',
},
}}
publishableKey={clerkPubKey}
>
{/* ... */}
</ClerkProvider>
)
}
export default App
```
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 (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
)
}
export default ClerkApp(App, {
appearance: {
captcha: {
theme: 'dark',
size: 'flexible',
language: 'es-ES',
},
},
})
```
const app = createApp(App)
app.use(clerkPlugin, {
appearance: {
captcha: {
theme: 'dark',
size: 'flexible',
language: 'es-ES',
},
},
})
app.mount('#app')
```
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā