Skills

clerk-custom-ui

Installation
Summary

Build custom authentication flows and visually brand Clerk components with hooks and appearance styling.

  • Provides useSignIn and useSignUp hooks for building custom sign-in/sign-up UI; API differs between Core 2 and current SDK versions
  • Appearance customization via variables (colors, typography, borders), options (logo, social button layout), and pre-built themes (dark, neobrutalism, shadcn, simple)
  • shadcn theme automatically matches shadcn/ui projects when components.json is present; theme stacking allows layering multiple themes with precedence
  • Requires ClerkProvider wrapper; SDK version determines which custom flow references and appearance property names (layout in Core 2, options in current) to use
SKILL.md

Custom UI

Prerequisite: Ensure ClerkProvider wraps your app. See clerk-setup skill.

Version: Check package.json for the SDK version — see clerk skill for the version table. This determines which custom flow references to use below.

This skill covers two areas:

  1. Custom authentication flows — build your own sign-in/sign-up UI with hooks
  2. Appearance customization — theme, style, and brand Clerk's pre-built components

What Do You Need?

Task Reference
Custom sign-in (Core 2 / LTS) core-2/custom-sign-in.md
Custom sign-up (Core 2 / LTS) core-2/custom-sign-up.md
Custom sign-in (Current SDK v7+) core-3/custom-sign-in.md
Custom sign-up (Current SDK v7+) core-3/custom-sign-up.md
Show component pattern (Current SDK) core-3/show-component.md
Related skills

More from clerk/skills

Installs
6.7K
Repository
clerk/skills
GitHub Stars
40
First Seen
Jan 30, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass