Skip to main content
Docs

Component Versioning

Clerk's components are versioned independently from the core Clerk JavaScript SDK, and updates are pushed out when a new release is triggered. This allows most applications to receive regular component updates and refinements without needing to manually update dependencies.

For users that rely on advanced customization of Clerk's components, it is recommended that you specify an explicit component version. This ensures your application is not impacted by component updates that might change the DOM structure in a way that breaks custom CSS.

@clerk/ui package

Clerk's components are published under the @clerk/ui npm package. While this package is published separately to npm, it is intended to be used in combination with Clerk's core JavaScript SDK, where it provides the implementation for Clerk's prebuilt components.

Specifying a component version

To pin Clerk's components to a specific version in your application, install the @clerk/ui package using your preferred package manager.

terminal
npm install @clerk/ui@latest
terminal
pnpm add @clerk/ui@latest
terminal
yarn add @clerk/ui@latest
terminal
bun add @clerk/ui@latest

Next, import ui from the @clerk/ui package and pass it to your Clerk configuration. The setup varies by SDK:

Pass ui to the <ClerkProvider> component.

import { ClerkProvider } from '@clerk/nextjs' // or '@clerk/react'
import { ui } from '@clerk/ui'

export default function Layout({ children }) {
  return <ClerkProvider ui={ui}>{children}</ClerkProvider>
}

Pass ui to the clerk() integration in your Astro config.

astro.config.mjs
import { defineConfig } from 'astro/config'
import clerk from '@clerk/astro'
import { ui } from '@clerk/ui'

export default defineConfig({
  integrations: [clerk({ ui })],
})

Pass ui to the clerkPlugin options.

src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { clerkPlugin } from '@clerk/vue'
import { ui } from '@clerk/ui'

const app = createApp(App)
app.use(clerkPlugin, {
  publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,
  ui,
})
app.mount('#app')

Pass ui to the clerk property in your Nuxt config.

nuxt.config.ts
import { ui } from '@clerk/ui'

export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  clerk: {
    ui,
  },
})

Pass ui to clerk.load().

import { Clerk } from '@clerk/clerk-js'
import { ui } from '@clerk/ui'

const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load({ ui })

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub