skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

clerk-custom-ui

Build custom Clerk sign-in and sign-up flows and style Clerk components with themes and appearance props.

Updated Apr 19, 2026
Search Tags:#theming#authentication#nextjs#react hooks#clerk#appearance#custom sign-in
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill clerk-custom-ui-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-custom-ui
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/clerk-custom-ui
Command: npx skills add https://github.com/divinaarmuela/Content --skill clerk-custom-ui-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/ui, and includes references (resource) components.

What problem does it solve? Developers using Clerk often need to replace the default hosted authentication UI with custom-branded sign-in/sign-up flows or restyle Clerk's pre-built components to match their design system, which requires navigating version-specific hook APIs and appearance options. ## Core Features & Use Cases - Custom Authentication Flows: Build bespoke sign-in and sign-up UIs using the useSignIn and useSignUp hooks, with separate references for Core 2 (legacy SDK) and the current SDK (v7+). - Appearance Customization: Apply themes (dark, neobrutalism, shadcn, simple), variables (colors, fonts, border radius), and options (logo, social button layout) via the appearance prop. - Conditional Rendering: Use the Show component to gate content by auth state, role, permission, plan, or feature. - Use Case: A Next.js app using shadcn/ui needs a branded login page with email/password plus MFA; this Skill provides the correct hook API for the installed SDK version and applies the shadcn theme so Clerk components match the existing design system. ## Quick Start Ask the AI to build a custom Clerk sign-in page with email and password using the useSignIn hook and apply the shadcn theme to the ClerkProvider.

Frequently Asked Questions about clerk-custom-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom sign-in page with Clerk?▼

Use the useSignIn hook to create a custom sign-in flow. In the current SDK, call signIn.password() with the identifier and password, handle MFA via signIn.mfa methods, then call signIn.finalize() to activate the session.

How do I customize Clerk component colors and themes?▼

Pass an appearance prop to Clerk components or ClerkProvider with variables like colorPrimary and borderRadius, or apply pre-built themes such as dark, shadcn, or neobrutalism imported from @clerk/ui/themes.

What is the difference between Clerk Core 2 and the current SDK for custom flows?▼

Core 2 uses signIn.create, prepareFirstFactor, and setActive, while the current SDK uses namespaced methods like signIn.password, signIn.mfa.verifyTOTP, and signIn.finalize. The appearance options property was also named layout in Core 2.

Does Clerk support shadcn/ui styling?▼

Yes, Clerk provides a shadcn theme imported from @clerk/ui/themes along with a shadcn.css stylesheet. If the project has a components.json file, apply the shadcn theme first so Clerk components match the existing design system.

Why is my Clerk appearance customization not applying?▼

Common causes include using primaryColor instead of colorPrimary, placing logoImageUrl outside the options object, or using layout instead of options on the current SDK. Verify the property names match your installed SDK version.

How do I handle MFA in a custom Clerk sign-in flow?▼

When signIn.status is needs_second_factor, use signIn.mfa.verifyTOTP for authenticator apps, verifyBackupCode for backup codes, or send and verify email/phone codes. After verification completes, call signIn.finalize to activate the session.

Related Skills

Explore More Software Engineering Skills→
awfixers-stuffawfixers-stuff

clerk-setup

Detect a project's framework and apply Clerk quickstart authentication setup.

Official
Intermediate
mahg-esmahg-es
3

auth-middleware

Implement JWT-based authenticate and authorize middleware for Express routes.

Official
Advanced
Yash-AwasthiYash-Awasthi

clerk-expo

Implement Clerk authentication in Expo and React Native apps using @clerk/expo.

Community
Advanced
celeroncoderceleroncoder

clerk-custom-ui

Build custom Clerk sign-in and sign-up flows and style Clerk components with themes and appearance props.

Community
Intermediate