clerk-custom-ui
Customize Clerk component appearance - themes, layout, colors, fonts, CSS. Use for appearance styling, visual customization, branding.
소스 정보
- 저장소
- mediar-ai/skillhubz
- 최근 소스 활동
- 2026년 3월 1일 22:57
- 감지된 SKILL.md 언어
- 영어
- 스타
- 7
- 포크
- 4
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
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
```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) |
GitHub에서 보기