skills.rest
Rajaryan1726
Rajaryan1726COMMUNITY
Explore all skills by this author →
GitHub

clerk-custom-ui

Build custom Clerk sign-in and sign-up flows and style authentication components.

Updated Aug 22, 2026
Search Tags:#theming#authentication#react#clerk#appearance#custom sign-in#usesignin
One-click install
npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-custom-ui-rajaryan1726
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-custom-ui
Source: https://github.com/Rajaryan1726/ai-code-review-system/tree/main/client/.agents/skills/clerk-custom-ui
Command: npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-custom-ui-rajaryan1726

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers using Clerk for authentication often need to replace the default hosted UI with custom sign-in/sign-up flows or restyle Clerk components to match their brand, but the APIs differ significantly between SDK versions (Core 2 vs current SDK), causing confusion and broken implementations. ## Core Features & Use Cases - Custom Authentication Flows: Build bespoke sign-in and sign-up experiences using the useSignIn and useSignUp hooks, covering password, SSO/OAuth, passkey, Web3, email/phone OTP, MFA, password reset, and device trust. - Appearance Customization: Theme and style Clerk's pre-built components via the appearance prop — variables (colors, fonts, radius), options (logo, social buttons), and pre-built themes like dark, neobrutalism, and shadcn. - Version-Aware Guidance: Separate reference docs for Core 2 (older SDK) and the current SDK, so the correct hook API is used based on the project's installed version. - Use Case: A React app with shadcn/ui needs a branded login page with email OTP and MFA. The skill detects the SDK version, applies the shadcn theme to Clerk components, and provides the correct useSignIn custom flow code. ## Quick Start Ask the AI to build a custom Clerk sign-in page with email and password using the installed SDK version, applying the shadcn theme to match the app's design system.

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 if needed, then call signIn.finalize() to activate the session.

How do I customize Clerk component colors and themes?▼

Pass an appearance prop to Clerk components with variables like colorPrimary and borderRadius, or apply a pre-built theme such as dark or shadcn from @clerk/ui/themes. Options like logoImageUrl and socialButtonsVariant control layout details.

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

Core 2 uses signIn.create(), prepareFirstFactor, and setActive, while the current SDK uses namespaced methods like signIn.password() and signIn.finalize() with structured errors. Themes moved from @clerk/themes to @clerk/ui, and the layout property was renamed to options.

Does Clerk support the shadcn/ui design system?▼

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 Core 2 property names on the current SDK. Verify the installed SDK version and use the matching property names.

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

When signIn.status is needs_second_factor, use signIn.mfa methods such as verifyTOTP, verifyBackupCode, or sendPhoneCode followed by verifyPhoneCode. After verification completes, call signIn.finalize() to activate the session.

Related Skills

Explore More Software Engineering Skills→
oaknationaloaknational
7

clerk-custom-ui

Customize Clerk authentication UI colors, layout, and typography in React and Next.js apps.

Official
Intermediate
AlexDevFlowAlexDevFlow

authentication-authorization-clerk

Implements Clerk auth and role/subscription-based access control in Next.js App Router.

Community
Advanced
Aditya07024Aditya07024

clerk-custom-ui

Build custom Clerk sign-in and sign-up interfaces with hooks and appearance settings.

Community
Advanced
Sim-hub22Sim-hub22

clerk-custom-ui

Customize Clerk authentication flows and component appearance with hooks and themes.

Community
Intermediate