Does it work with shadcn/ui?

Yes, the skill includes specific instructions for importing and applying the shadcn theme and CSS to Clerk components.

How do I customize Clerk component colors?

You can use the appearance prop and modify the variables object to change primary colors, backgrounds, and other CSS variables to match your brand.

Can I use this skill to create a dark mode?

Yes, it supports pre-built dark themes from @clerk/ui and provides instructions for implementing CSS color-scheme support for automatic toggling.

Can I build my own sign-in form instead of using pre-built components?

Absolutely. This skill provides documentation and implementation patterns for using the useSignIn and useSignUp hooks for completely custom auth flows.

Clerk Custom UI

Name: Clerk Custom UI
Author: clerk

byclerk

•

デザインツール

Customizes Clerk authentication components and implements bespoke sign-in/sign-up flows using hooks and themes.

The Clerk Custom UI skill provides Claude with the specialized knowledge required to style and extend Clerk's authentication suite. It enables developers to modify the look and feel of pre-built components through the appearance prop—adjusting variables like colors, fonts, and border radii—or build entirely custom, headless authentication interfaces using the useSignIn and useSignUp hooks. With built-in support for popular design systems like shadcn/ui and version-specific guidance for various Clerk SDKs, it ensures a seamless, brand-aligned user experience for any web application.

主な機能

0113 GitHub stars

02Implementation patterns for headless authentication flows using React hooks

03Detailed configuration for branding variables including colors, typography, and spacing

04Component-level layout customization for logos, social buttons, and field visibility

05Version-aware guidance for Core 2 and current Clerk SDK compatibility

06Theme support for Dark Mode, shadcn/ui, Neobrutalism, and custom brand themes

ユースケース

01Building a fully custom authentication experience with bespoke input fields and logic

02Matching Clerk's pre-built components to a company's specific brand style guide

03Implementing a dark mode toggle that synchronizes Clerk components with the app theme

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add clerk/skills custom-ui

For use in Claude.ai and ChatGPT

Download Skill