# Clerk Changelog — Page 17
# shadcn/ui theme compatibility
URL: https://clerk.com/changelog/2025-07-23-shadcn-theme.md
Date: 2025-07-23
Category: Product
Description: 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](/changelog/2025-07-15-clerk-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:
```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
```
Then pass the shadcn theme to the ClerkProvider component as the `baseTheme` property:
```tsx {{ filename: 'app/layout.tsx', mark: ['shadcn'] }}
import { shadcn } from '@clerk/themes'
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
{children}
)
}
```
For more information on Clerk themes, see the [themes documentation](/docs/customization/themes#shadcn).
---
# Dark Mode for the Clerk Dashboard
URL: https://clerk.com/changelog/2025-07-22-dashboard-dark-mode.md
Date: 2025-07-22
Category: Dashboard
Description: It's the Clerk Dashboard but darker.
Experience the [Clerk Dashboard](https://dashboard.clerk.com) 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 CSS variables support
URL: https://clerk.com/changelog/2025-07-15-clerk-css-variables-support.md
Date: 2025-07-15
Category: Product
Description: Clerk now supports theming via Clerk CSS variables.
Following last week's update that enabled [CSS variables in Clerk's appearance system](/changelog/2025-07-08-css-variables-support), 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:
```css {{ filename: 'styles.css', mark: ['--clerk-color-primary'] }}
:root {
--clerk-color-primary: #6d47ff; /* colorPrimary */
}
```
For more details on the supported variables, see the [variables properties](/docs/customization/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](/docs/customization/variables#using-css-variables) documentation.
---
# Clerk is now available on the Vercel Marketplace
URL: https://clerk.com/changelog/2025-07-14-vercel-marketplace-integration.md
Date: 2025-07-14
Category: Integrations
Description: Configure and integrate Clerk directly through the Vercel Marketplace.
Clerk is now available on the [Vercel Marketplace](https://vercel.com/marketplace/clerk) in its new *Authentication* category. With one-click setup, automatic environment variable sync, and unified billing through Vercel, it's easier than ever to integrate Clerk into your Vercel projects.
With the marketplace integration you can:
- Leverage all of Clerk's existing features, such as Organizations and Clerk Billing
- Create a Clerk account and spin up Clerk applications directly from the Vercel dashboard
- Sync your Clerk API keys into your Vercel project's environment variables
- Manage billing through your existing Vercel account
Get started with [Clerk on the Vercel Marketplace](https://vercel.com/marketplace/clerk).
> \[!TIP]
> Deploy an example Next.js application and install the Clerk integration with our template.
---
# Organization Invitation Sorting
URL: https://clerk.com/changelog/2025-07-11-org-invitation-sorting.md
Date: 2025-07-11
Category: API
Description:
We’ve added support for ordering organization invitations when listing them via the `/organizations/{organization_id}/invitations` endpoint, allowing sorting by creation date or email address in ascending or descending order using the new optional `order_by` parameter.
## Ordering Options
- `+created_at` - Sort by creation date in ascending order
- `-created_at` - Sort by creation date in descending order (default)
- `+email_address` - Sort by email address in ascending order
- `-email_address` - Sort by email address in descending order
For more information, see our [Backend API documentation](https://clerk.com/docs/reference/backend-api/tag/Organization-Invitations#operation/ListOrganizationInvitations).
---
# Introducing top-level Features. Plus redesigned Roles & Permissions
URL: https://clerk.com/changelog/2025-07-10-top-level-features-plus-roles-and-permissions.md
Date: 2025-07-10
Category: Dashboard
Description: Model your app's features right inside of Clerk
We’re excited to introduce a new top-level **Feature** construct for your applications.
Features are utilized inside of our Billing product, like inside your `` implementations, as well as within your app's roles & permissions where you can easily attach permissions to features for authorization checks using our [`has()`, `protect()`, and `` helpers](/blog/introducing-authorization).
As part of this update, we’ve also redesigned the **Roles & Permissions** page in the [Clerk Dashboard](https://dashboard.clerk.com), making it easier to manage user roles and their associated system or feature permissions.
Manage your app’s feature definitions in the [Feature Management](https://dashboard.clerk.com/~/features) section of the Dashboard starting today, or as part of your [Roles & Permissions](https://dashboard.clerk.com/~/organizations-settings/roles) configuration.