clerk-themez
Version:
A collection of themes for Clerk Auth with hidden logo, clerk-themes-extend
433 lines (302 loc) • 11.8 kB
Markdown
# Clerk-Themez
**Clerk-Themez** is a collection of custom themes designed specifically for Clerk authentication components. With these themes, you can style Clerk’s sign-in, sign-up, and user button management sections globally by importing the theme once in your root or layout file.
## Features
- 25 custom themes to choose from
- Global application of themes across all Clerk auth sections
- Works with Next.js and other frameworks
## Demo Video
[](https://www.youtube.com/watch?v=nkMluXSstJo "Click to Watch!")
## Installation
### Step 1: To install the `clerk-themez` package, run:
```bash
npm install clerk-themez
```
### Step 2: To use the `clerk-themez` package, must run to install clerk:
```bash
npm install @clerk/nextjs
```
### Step 3: To use the `clerk-themez` package, must run to install clerk theme:
```bash
npm install @clerk/themes
```
### Step 4: Create Sign-in Page (`src/app/(auth)/sign-in/[[...sign-in]]/page.tsx`):
```tsx
import { SignIn } from '@clerk/nextjs';
import React from 'react';
const SignInPage = () => {
return (
<main className="flex items-center justify-center min-h-screen relative ">
<SignIn />
</main>
);
};
export default SignInPage;
```
### Step 5: Create Sign-up Page (`src/app/(auth)/sign-up/[[...sign-up]]/page.tsx`):
```tsx
import { SignUp } from "@clerk/nextjs";
import React from "react";
const SignUpPage = () => {
return (
<main className="flex items-center justify-center min-h-screen relative ">
<SignUp />
</main>
);
};
export default SignUpPage;
```
### Step 6: Create `.env.local`:
```bash
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<add your key>
CLERK_SECRET_KEY=<add your key>
# That must add
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
```
### Step 7: Must import this otherwise themes not work properly in your root directory.
```tsx
import { neobrutalism } from "@clerk/themes";
```
### Step 8: Must add `neobrutalism` and `variables: { colorPrimary: "#fa0053" },` this in your `<ClerkProvider>` , in your root directory :
```tsx
<ClerkProvider
appearance={{
baseTheme: neobrutalism,
variables: { colorPrimary: "#fa0053" },
}}
>
<html lang="en">
<body >{children}</body>
</html>
</ClerkProvider>
```
### Step 9: import theme in your root directory:
```tsx
import 'clerk-themez/themes/<themename>.css';
```
### Step 10: Create `middleware.ts or middleware.js` in root directory ( Example :`src/middleware.ts`(next.js)):
```tsx
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
};
```
## Usage Example
Once installed, you can easily apply a theme globally by importing it into your root or layout file.
### Import the Theme Globally
In a **Next.js** project, import the theme in your `layout.tsx` file for it to apply across all Clerk components (such as `SignIn`, `SignUp`, and the `UserButton`).
**Example (Next.js):**
```tsx
// src/app/layout.tsx
import type { Metadata } from "next";
import { ClerkProvider } from "@clerk/nextjs";
import { neobrutalism } from "@clerk/themes";
import 'clerk-themez/themes/<themename>.css'; // Import the chosen theme
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClerkProvider
appearance={{
baseTheme: neobrutalism,
variables: { colorPrimary: "#fa0053" },
}}
>
<html lang="en">
<body >{children}</body>
</html>
</ClerkProvider>
);
}
```
Replace `<themename>` with the name of your preferred theme from the list below.
### Apply to Clerk Components
By importing the theme in the root file (`layout.tsx` for Next.js), the styles will automatically apply to all Clerk authentication components across your app, including:
- Sign-in page
- Sign-up page
- User management sections (e.g., `UserButton`)
### Other Frameworks
In other frameworks (e.g., React, Vue, etc.), you can achieve the same effect by importing the theme in your root component or the entry point of your application.
For example, in a **React** project, import the theme in the `App.js` or `App.tsx` file:
```jsx
// App.js
import 'clerk-themez/themes/<themename>.css';
function App() {
return (
<div className="App">
{/* Your components */}
</div>
);
}
export default App;
```
### Available Themes
Here is a list of available themes:
Here is the list with all the themes arranged in the same format:
- **cosmicflux**
```js
import 'clerk-themez/themes/cosmicflux.css';
```
- **blackbluish**
```js
import 'clerk-themez/themes/blackbluish.css';
```
- **blueblush**
```js
import 'clerk-themez/themes/blueblush.css';
```
- **bluresh**
```js
import 'clerk-themez/themes/bluresh.css';
```
- **darklitflux**
```js
import 'clerk-themez/themes/darklitflux.css';
```
- **dreamscape**
```js
import 'clerk-themez/themes/dreamscape.css';
```
- **ember**
```js
import 'clerk-themez/themes/ember.css';
```
- **floatball**
```js
import 'clerk-themez/themes/floatball.css';
```
- **glassyblack**
```js
import 'clerk-themez/themes/glassyblack.css';
```
- **glassybluesh**
```js
import 'clerk-themez/themes/glassybluesh.css';
```
- **glassygreesh**
```js
import 'clerk-themez/themes/glassygreesh.css';
```
- **leafgreen**
```js
import 'clerk-themez/themes/leafgreen.css';
```
- **moonlit**
```js
import 'clerk-themez/themes/moonlit.css';
```
- **moonlitflux**
```js
import 'clerk-themez/themes/moonlitflux.css';
```
- **neonwave**
```js
import 'clerk-themez/themes/neonwave.css';
```
- **nightdream**
```js
import 'clerk-themez/themes/nightdream.css';
```
- **pinkbless**
```js
import 'clerk-themez/themes/pinkbless.css';
```
- **pinkdrish**
```js
import 'clerk-themez/themes/pinkdrish.css';
```
- **pinkesh**
```js
import 'clerk-themez/themes/pinkesh.css';
```
- **prismatic**
```js
import 'clerk-themez/themes/prismatic.css';
```
- **sunsetblaze**
```js
import 'clerk-themez/themes/sunsetblaze.css';
```
- **waveflux**
```js
import 'clerk-themez/themes/waveflux.css';
```
- **whisperflux**
```js
import 'clerk-themez/themes/whisperflux.css';
```
- **whitegrain**
```js
import 'clerk-themez/themes/whitegrain.css';
```
- **zestful**
```js
import 'clerk-themez/themes/zestful.css';
```
# Theme Customization
If you want to tweak the themes to match your app's branding, you can modify the CSS Class directly or use the provided styles as a base.
```css
.cl-backLink,.cl-button,.cl-button:focus,.cl-button:hover,.cl-dividerLine,.cl-dividerText,.cl-footer,.cl-footerActionText,.cl-formFieldInput,.cl-formFieldInputShowPasswordButton,.cl-formFieldInputShowPasswordButton:hover,.cl-formFieldLabel,.cl-formFieldRadioLabelTitle,.cl-formResendCodeLink,.cl-headerSubtitle,.cl-headerTitle,.cl-identityPreviewEditButton,.cl-identityPreviewText,.cl-internal-10vqj2v,.cl-internal-1338bh3,.cl-internal-13lvar6,.cl-internal-13u79ez,.cl-internal-162hn3d,.cl-internal-178xxbv,.cl-internal-17jfncx,.cl-internal-18msqv3,.cl-internal-1b2ebjn,.cl-internal-1dauvpw,.cl-internal-1e86so8,.cl-internal-1e86so8:focus,.cl-internal-1e86so8:hover,.cl-internal-1fsy72e,.cl-internal-1fy2g6e,.cl-internal-1fy2g6e:hover,.cl-internal-1hp5nqm,.cl-internal-1jcsuiw,.cl-internal-1jokxdd,.cl-internal-1k60c9o,.cl-internal-1mwxfst,.cl-internal-1y71s3o,.cl-internal-3f8jnx,.cl-internal-617r0v,.cl-internal-6ni1dv,.cl-internal-6ni1dv:hover,.cl-internal-bzdfjc,.cl-internal-csc3r5,.cl-internal-d2hd6e:hover,.cl-internal-d5dzke,.cl-internal-df7v37,.cl-internal-hy4pby,.cl-internal-k7p5wl,.cl-internal-mg5k16 .bg-white,.cl-internal-n0yayv,.cl-internal-s825v9 .cl-internal-1agciv4,.cl-internal-s825v9:hover,.cl-internal-xpydm8,.cl-internal-zqxz1f,.cl-menuItem:hover,.cl-navbarMobileMenuRow,.cl-otpCodeFieldInput,.cl-profileSectionTitleText,.cl-signIn-root,.cl-signIn-start,.cl-signUp-root,.cl-signUp-start,.cl-socialButtonsBlockButton,.cl-socialButtonsBlockButton:hover,.cl-socialButtonsBlockButtonText,.cl-userButtonPopoverActionButton,.cl-userButtonPopoverActionButton:hover,.cl-userButtonTrigger,.cl-userPreview,.cl-userPreviewSecondaryIdentifier
```
## Contributing
If you'd like to contribute to this collection of themes, feel free to fork the repository and submit a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more details.