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