Changelog: Page 6

Jul 29

New simple theme for easier customization

Category: Product
Published: Jul 29

A minimal theme with stripped-down styling that provides a clean foundation for custom designs.

You can now opt into a simpler theme for customizing Clerk components. This theme is a stripped down version of the default Clerk theme that removes advanced styling techniques, making it easier to apply your own custom styles without complex overrides.

To use the simple theme, set theme to simple:

<ClerkProvider
  appearance={{
    theme: 'simple',
  }}
/>

To learn more about themes and how to customize Clerk components, check out our theme documentation.

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.

Clerk Changelog

<CheckoutButton>

<PlanDetailsButton>

<SubscriptionDetailsButton>

Installation

`<CheckoutButton>`

`<PlanDetailsButton>`

`<SubscriptionDetailsButton>`