How do I install the Clerk Custom UI skill?

Run npx skillmds add majiayu000/clerk-custom-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Clerk Custom UI safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Clerk Custom UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Clerk Custom UI free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Clerk Custom UI?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Clerk Custom UI by majiayu000 — Agent Skill

Name: Clerk Custom UI
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

File contents

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`)

layout (structure, logo, social buttons)

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)

---name: clerk-custom-uidescription: Customize Clerk component appearance - themes, layout, colors, fonts, CSS. Use for appearance styling, visual customization, branding.license: MIT--- # 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 ```typescript <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`) | ### layout (structure, logo, social buttons) | 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: ```typescript import { shadcn } from '@clerk/themes' <ClerkProvider appearance={{ theme: shadcn, }} /> ``` Also import shadcn CSS in your global.css: ```css @import 'tailwindcss'; @import '@clerk/themes/shadcn.css'; ``` ## Workflow 1. Identify customization needs (colors, layout, theme, CSS) 2. WebFetch the appropriate documentation from table above 3. Follow official code examples from the docs 4. 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) |

Frequently asked questions