clerk-themez

v1.0.9

Published

2 months ago

A collection of themes for Clerk Auth with hidden logo, clerk-themes-extend

Downloads

0High
0Medium
0Low

ahkamboh

clerk themes clerk-auth clerk-auth-themes clerk-themes-extend

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

Installation

Step 1: To install the `clerk-themez` package, run:

  npm install clerk-themez

Step 2: To use the `clerk-themez` package, must run to install clerk:

  npm install @clerk/nextjs

Step 3: To use the `clerk-themez` package, must run to install clerk theme:

 npm install @clerk/themes

Step 4: Create Sign-in Page (`src/app/(auth)/sign-in/[[...sign-in]]/page.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`):

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`:

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.

  import { neobrutalism } from "@clerk/themes";

Step 8: Must add `neobrutalism` and `variables: { colorPrimary: "#fa0053" },` this in your `<ClerkProvider>` , in your root directory :

    <ClerkProvider
    appearance={{
      baseTheme: neobrutalism,
      variables: { colorPrimary: "#fa0053" },
    }}
  >
    <html lang="en">
      <body >{children}</body>
    </html>
  </ClerkProvider>

Step 9: import theme in your root directory:

  import 'clerk-themez/themes/<themename>.css';

Step 10: Create `middleware.ts or middleware.js` in root directory ( Example :`src/middleware.ts`(next.js)):

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):

// 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:

// 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

   import 'clerk-themez/themes/cosmicflux.css';

blackbluish

   import 'clerk-themez/themes/blackbluish.css';

blueblush

   import 'clerk-themez/themes/blueblush.css';

bluresh

   import 'clerk-themez/themes/bluresh.css';

darklitflux

   import 'clerk-themez/themes/darklitflux.css';

dreamscape

   import 'clerk-themez/themes/dreamscape.css';

ember

   import 'clerk-themez/themes/ember.css';

floatball

   import 'clerk-themez/themes/floatball.css';

glassyblack

   import 'clerk-themez/themes/glassyblack.css';

glassybluesh

   import 'clerk-themez/themes/glassybluesh.css';

glassygreesh

   import 'clerk-themez/themes/glassygreesh.css';

leafgreen

   import 'clerk-themez/themes/leafgreen.css';

moonlit

   import 'clerk-themez/themes/moonlit.css';

moonlitflux

   import 'clerk-themez/themes/moonlitflux.css';

neonwave

   import 'clerk-themez/themes/neonwave.css';

nightdream

   import 'clerk-themez/themes/nightdream.css';

pinkbless

   import 'clerk-themez/themes/pinkbless.css';

pinkdrish

   import 'clerk-themez/themes/pinkdrish.css';

pinkesh

   import 'clerk-themez/themes/pinkesh.css';

prismatic

   import 'clerk-themez/themes/prismatic.css';

sunsetblaze

   import 'clerk-themez/themes/sunsetblaze.css';

waveflux

   import 'clerk-themez/themes/waveflux.css';

whisperflux

   import 'clerk-themez/themes/whisperflux.css';

whitegrain

   import 'clerk-themez/themes/whitegrain.css';

zestful

   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.

.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 file for more details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme