Changelog: Page 8

Jul 28

End billing subscriptions immediately with the new End button

Category: Dashboard
Published: Jul 28

Immediately terminate subscriptions and revoke feature access with the new End button in the Dashboard

We've added a new End button to subscription management in the Clerk Dashboard, giving you the ability to immediately end subscriptions and revoke user access to features.

Previously, you could only Cancel subscriptions, which would stop recurring charges but allow users to retain access until the end of their current billing cycle. The new End button goes further by immediately terminating the subscription and revoking access to all associated features.

This is particularly useful when processing refunds - you can immediately remove access to prevent further usage after issuing a refund.

You can find the End button alongside the existing Cancel button in the subscription details page of any user or organization in the Clerk Dashboard. The Cancel button remains available for standard subscription cancellations where you want to honor the user's paid period.

At the moment, ending a subscription is only available in the Dashboard but we'll be supporting this via the Backend API in the future.

Jul 25

Workspace level settings in the Dashboard

Category: Dashboard
Published: Jul 25

A new place to manage your workspace level settings

Workspace level settings like your Settings, Billing, and Team Members have a new location in the Clerk Dashboard. Rather than managing them from the "Manage" button under the organization switcher and inside of a modal, you can find these settings whenever you navigate outside of the context of a single application.

Stay tuned for even more improvements to these sections over the coming weeks.

Jul 24

Button components for Clerk Billing

Category: Billing
Published: Jul 24

Three new billing buttons for implementing checkout, plan details, and subscription management in your applications.

Previously, you could only access these experiences through <UserProfile />, <OrganizationProfile /> and <PricingTable /> components, but now you can use these new buttons to access them in a more flexible way.

`<CheckoutButton>`

The <CheckoutButton> component provides a simple way to initiate checkout flows in your application. It handles the entire checkout process either for users or organizations.

import { CheckoutButton } from '@clerk/nextjs/experimental'

export default function CheckoutPage() {
  return (
    <CheckoutButton planId="cplan_xxxx">
      <Button>Checkout</Button>
    </CheckoutButton>
  )
}

`<PlanDetailsButton>`

The <PlanDetailsButton> component allows users to view detailed information about a specific plan, including pricing, features, and other plan-specific details.

import { PlanDetailsButton } from '@clerk/nextjs/experimental'

export default function AccountPage() {
  return (
    <PlanDetailsButton planId="cplan_xxxx">
      <Button>Plan Details</Button>
    </PlanDetailsButton>
  )
}

`<SubscriptionDetailsButton>`

The <SubscriptionDetailsButton> component allows users to view and manage their subscription details, whether for their personal account or organization.

import { SubscriptionDetailsButton } from '@clerk/nextjs/experimental'

export default function BillingPage() {
  return (
    <SubscriptionDetailsButton>
      <Button>Subscription Details</Button>
    </SubscriptionDetailsButton>
  )
}

For more detailed information about these components, check out our documentation:

Note

These components are currently exported as experimental while we harden the API.

Jul 23

shadcn/ui theme compatibility

Category: Product
Published: Jul 23

Introducing a new Clerk theme based on shadcn/ui that styles Clerk's components according to your shadcn/ui theme.

Clerk components now support a dedicated shadcn/ui theme that automatically matches your application's existing shadcn/ui theme configuration. Built on the new CSS variables support, this theme ensures Clerk's authentication UI feels native to your shadcn/ui-based applications.

Installation

To install the shadcn theme, run the following command to install the @clerk/themes package:

npm

yarn

pnpm

bun

terminal

npm install @clerk/themes

terminal

yarn add @clerk/themes

terminal

pnpm add @clerk/themes

terminal

bun add @clerk/themes

Then pass the shadcn theme to the ClerkProvider component as the baseTheme property:

app/layout.tsx

import { shadcn } from '@clerk/themes'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <ClerkProvider
      appearance={{
        baseTheme: shadcn,
      }}
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

For more information on Clerk themes, see the themes documentation.

Jul 22

Dark Mode for the Clerk Dashboard

Category: Dashboard
Published: Jul 22

It's the Clerk Dashboard but darker.

Experience the Clerk Dashboard in Dark Mode. Your eyes will thank you.

To set your preference, head to your avatar icon in the top-right of the dashboard, select "Manage Account" and then head to the Preferences tab.

Jul 15

Clerk CSS variables support

Category: Product
Published: Jul 15

Clerk now supports theming via Clerk CSS variables.

Following last week's update that enabled CSS variables in Clerk's appearance system, you can now customize the theme of Clerk components by defining Clerk CSS variables in your application's stylesheets, no CSS-in-JS required!

Define Clerk variables through CSS variables like so:

styles.css

:root {
  --clerk-color-primary: #6d47ff; /* colorPrimary */
}

For more details on the supported variables, see the variables properties documentation.

Included in this release, we've also taken the opportunity to improve the naming of our variables and add additional variables to make theming more flexible.

Deprecated variables

The following properties are deprecated as of July 15th, 2025 and will be removed in the next major version of Clerk. We recommend migrating to the new properties as soon as possible.

Deprecated	New
`colorText`	`colorForeground`
`colorTextOnPrimaryBackground`	`colorPrimaryForeground`
`colorTextSecondary`	`colorMutedForeground`
`spacingUnit`	`spacing`
`colorInputText`	`colorInputForeground`
`colorInputBackground`	`colorInput`

New variables

Variable	Description
`colorRing`	The color of the ring when an interactive element is focused.
`colorMuted`	The background color for elements of lower importance, eg: a muted background.
`colorShadow`	The base shadow color used in the components.
`colorBorder`	The base border color used in the components.
`colorModalBackdrop`	The background color of the modal backdrop.

For more details, including important details about browser compatibility considerations, see the Clerk CSS variables documentation.

Clerk Changelog

<CheckoutButton>

<PlanDetailsButton>

<SubscriptionDetailsButton>

Installation

Deprecated variables

New variables

`<CheckoutButton>`

`<PlanDetailsButton>`

`<SubscriptionDetailsButton>`