Gathering detailed insights and metrics for clerk-themez
Gathering detailed insights and metrics for clerk-themez
Installations
npm install clerk-themezDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
20.11.1
NPM Version
10.8.1
Score
48
Supply Chain
90.3
Quality
81.7
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
903
Last Day
2
Last Week
11
Last Month
36
Last Year
903
Maintainers
1
Package Meta Information
Latest Version
1.0.9
Package Id
clerk-themez@1.0.9
Unpacked Size
140.35 kB
Size
37.32 kB
File Count
29
NPM Version
10.8.1
Node Version
20.11.1
Published on
Sep 16, 2024
Total Downloads
Cumulative downloads
Total Downloads
903
Last Day
0%
2
Compared to previous day
Last Week
83.3%
11
Compared to previous week
Last Month
-32.1%
36
Compared to previous month
Last Year
0%
903
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
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:
1 npm install clerk-themez
Step 2: To use the clerk-themez package, must run to install clerk:
1 npm install @clerk/nextjs
Step 3: To use the clerk-themez package, must run to install clerk theme:
1 npm install @clerk/themes
Step 4: Create Sign-in Page (src/app/(auth)/sign-in/[[...sign-in]]/page.tsx):
1import { SignIn } from '@clerk/nextjs'; 2import React from 'react'; 3 4const SignInPage = () => { 5 return ( 6 <main className="flex items-center justify-center min-h-screen relative "> 7 <SignIn /> 8 </main> 9 ); 10}; 11 12export default SignInPage;
Step 5: Create Sign-up Page (src/app/(auth)/sign-up/[[...sign-up]]/page.tsx):
1import { SignUp } from "@clerk/nextjs"; 2import React from "react"; 3 4const SignUpPage = () => { 5 return ( 6 <main className="flex items-center justify-center min-h-screen relative "> 7 <SignUp /> 8 </main> 9 ); 10}; 11 12export default SignUpPage;
Step 6: Create .env.local:
1NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<add your key> 2CLERK_SECRET_KEY=<add your key> 3# That must add 4NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 5NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
Step 7: Must import this otherwise themes not work properly in your root directory.
1 import { neobrutalism } from "@clerk/themes";
Step 8: Must add neobrutalism and variables: { colorPrimary: "#fa0053" }, this in your <ClerkProvider> , in your root directory :
1 <ClerkProvider 2 appearance={{ 3 baseTheme: neobrutalism, 4 variables: { colorPrimary: "#fa0053" }, 5 }} 6 > 7 <html lang="en"> 8 <body >{children}</body> 9 </html> 10 </ClerkProvider>
Step 9: import theme in your root directory:
1 import 'clerk-themez/themes/<themename>.css';
Step 10: Create middleware.ts or middleware.js in root directory ( Example :src/middleware.ts(next.js)):
1import { clerkMiddleware } from "@clerk/nextjs/server"; 2 3export default clerkMiddleware(); 4 5export const config = { 6 matcher: [ 7 // Skip Next.js internals and all static files, unless found in search params 8 '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', 9 // Always run for API routes 10 '/(api|trpc)(.*)', 11 ], 12};
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):
1// src/app/layout.tsx 2 3import type { Metadata } from "next"; 4import { ClerkProvider } from "@clerk/nextjs"; 5import { neobrutalism } from "@clerk/themes"; 6import 'clerk-themez/themes/<themename>.css'; // Import the chosen theme 7export default function RootLayout({ 8 children, 9}: Readonly<{ 10 children: React.ReactNode; 11}>) { 12 return ( 13 <ClerkProvider 14 appearance={{ 15 baseTheme: neobrutalism, 16 variables: { colorPrimary: "#fa0053" }, 17 }} 18 > 19 <html lang="en"> 20 <body >{children}</body> 21 </html> 22 </ClerkProvider> 23 ); 24} 25
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:
1// App.js 2 3import 'clerk-themez/themes/<themename>.css'; 4 5function App() { 6 return ( 7 <div className="App"> 8 {/* Your components */} 9 </div> 10 ); 11} 12 13export 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
1 import 'clerk-themez/themes/cosmicflux.css';
- blackbluish
1 import 'clerk-themez/themes/blackbluish.css';
- blueblush
1 import 'clerk-themez/themes/blueblush.css';
- bluresh
1 import 'clerk-themez/themes/bluresh.css';
- darklitflux
1 import 'clerk-themez/themes/darklitflux.css';
- dreamscape
1 import 'clerk-themez/themes/dreamscape.css';
- ember
1 import 'clerk-themez/themes/ember.css';
- floatball
1 import 'clerk-themez/themes/floatball.css';
- glassyblack
1 import 'clerk-themez/themes/glassyblack.css';
- glassybluesh
1 import 'clerk-themez/themes/glassybluesh.css';
- glassygreesh
1 import 'clerk-themez/themes/glassygreesh.css';
- leafgreen
1 import 'clerk-themez/themes/leafgreen.css';
- moonlit
1 import 'clerk-themez/themes/moonlit.css';
- moonlitflux
1 import 'clerk-themez/themes/moonlitflux.css';
- neonwave
1 import 'clerk-themez/themes/neonwave.css';
- nightdream
1 import 'clerk-themez/themes/nightdream.css';
- pinkbless
1 import 'clerk-themez/themes/pinkbless.css';
- pinkdrish
1 import 'clerk-themez/themes/pinkdrish.css';
- pinkesh
1 import 'clerk-themez/themes/pinkesh.css';
- prismatic
1 import 'clerk-themez/themes/prismatic.css';
- sunsetblaze
1 import 'clerk-themez/themes/sunsetblaze.css';
- waveflux
1 import 'clerk-themez/themes/waveflux.css';
- whisperflux
1 import 'clerk-themez/themes/whisperflux.css';
- whitegrain
1 import 'clerk-themez/themes/whitegrain.css';
- zestful
1 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.
1.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.
No vulnerabilities found.
No security vulnerabilities found.