clerk-custom-ui

Name: clerk-custom-ui
Author: clerk

by @clerk in Tools

# Install this skill:

npx skills add clerk/skills --skill "clerk-custom-ui"

Install specific skill from multi-skill repository

# Description

Customize Clerk component appearance - themes, layout, colors, fonts, CSS. Use for appearance styling, visual customization, branding.

# SKILL.md

name: clerk-custom-ui
description: Customize Clerk component appearance - themes, layout, colors, fonts, CSS. Use for appearance styling, visual customization, branding.
allowed-tools: WebFetch
license: MIT
metadata:
author: clerk
version: "1.0.0"

Component Customization

Prerequisite: Ensure ClerkProvider wraps your app. See setup/.

Component Customization Options

Task	Documentation
Appearance prop overview	https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/overview
Layout (structure, logo, buttons)	https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/layout
Themes (pre-built dark/light)	https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/themes
Variables (colors, fonts, spacing)	https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/variables
CAPTCHA configuration	https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/captcha
Bring your own CSS	https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/bring-your-own-css

Appearance Pattern

<SignIn
  appearance={{
    variables: {
      colorPrimary: '#0000ff',
      borderRadius: '0.5rem',
    },
    layout: {
      logoImageUrl: '/logo.png',
      socialButtonsVariant: 'iconButton',
    },
  }}
/>

variables (colors, typography, borders)

Property	Description
`colorPrimary`	Primary color throughout
`colorBackground`	Background color
`borderRadius`	Border radius (default: `0.375rem`)

Property	Description
`logoImageUrl`	URL to custom logo
`socialButtonsVariant`	`'blockButton'` \| `'iconButton'` \| `'auto'`
`socialButtonsPlacement`	`'top'` \| `'bottom'`

shadcn Theme

If the project has components.json (shadcn/ui installed), use the shadcn theme:

import { shadcn } from '@clerk/themes'

<ClerkProvider
  appearance={{
    theme: shadcn,
  }}
/>

Also import shadcn CSS in your global.css:

@import 'tailwindcss';
@import '@clerk/themes/shadcn.css';

Workflow

Identify customization needs (colors, layout, theme, CSS)
WebFetch the appropriate documentation from table above
Follow official code examples from the docs
Apply appearance prop to your Clerk components

Common Pitfalls

Issue	Solution
Colors not applying	Use `colorPrimary` not `primaryColor`
Logo not showing	Put `logoImageUrl` inside `layout: {}`
Social buttons wrong	Add `socialButtonsVariant: 'iconButton'` in `layout`
Styling not working	Use appearance prop, not direct CSS (unless with bring-your-own-css)

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.