clerk-custom-ui

Build custom authentication flows and themes for Clerk UI components.

66|4|Updated Jan 6, 2026
One-click install
npx skills add https://github.com/clerk/skills --skill clerk-custom-ui-clerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-custom-ui
Source: https://github.com/clerk/skills/tree/main/skills/core/clerk-custom-ui
Command: npx skills add https://github.com/clerk/skills --skill clerk-custom-ui-clerk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend developers implement custom authentication flows and fully brandable Clerk UI components so teams can replace or extend Clerk's hosted widgets while preserving session behavior and security across SDK versions.

Core Features & Use Cases

  • Custom authentication flows: Build sign-in and sign-up experiences (email/password, phone OTP, SSO, passkeys) using hook-based APIs and finalize sessions with session tasks and error handling.
  • Appearance and theming: Customize colors, fonts, logos, layout, and theme stacking including shadcn and dark/light themes to match a project's design system.
  • SDK compatibility and migration: Guidance for Core 2 and current SDK differences, migration notes (Show vs SignedIn/SignedOut), and patterns for Next.js, React, React Router, and Expo.
  • Real-world use case: Implement a branded Next.js sign-in flow with MFA and SSO that uses ClerkProvider, custom forms wired to hooks, and appearance props for visual parity with an existing design system.

Quick Start

Implement a branded sign-in and sign-up flow by wrapping your app with ClerkProvider, applying appearance props, and building forms with the useSignIn and useSignUp hooks.

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 Clerk sign-in flow in Next.js?

Build a custom Clerk sign-in flow in Next.js by wrapping your app with ClerkProvider and using the useSignIn hook to wire custom forms for email/password, phone OTP, SSO, and passkeys while handling session finalization and errors.

Can I customize Clerk UI components to match my design system?

Yes, you can customize Clerk UI components to match your design system by applying appearance props for colors, fonts, logos, and layout, and by implementing theme stacking including shadcn and dark/light themes.

Does Clerk custom authentication support SSO and passkeys?

Clerk custom authentication flows support SSO and passkeys alongside email/password and phone OTP, utilizing hook-based APIs like useSignIn and useSignUp to manage these methods and finalize user sessions securely.

How do I migrate Clerk authentication components from Core 2 to the current SDK?

Migrate Clerk authentication components from Core 2 to the current SDK by following migration notes that cover differences between Show and SignedIn/SignedOut components, and applying updated patterns for Next.js, React, and Expo.

What frameworks are supported for building custom Clerk sign-up flows?

Building custom Clerk sign-up flows is supported for frontend frameworks including Next.js, React, React Router, and Expo, using the useSignUp hook to manage custom form submissions and session tasks.