clerk-custom-ui

用途：该技能用于自定义 Clerk 组件的外观，包括主题、布局、颜色、字体与 CSS，适用于外观样式调整、视觉定制和品牌化场景。

前提条件：需要确保应用已被 ClerkProvider 包裹，具体见 setup/ 目录。

主要能力（组件定制选项）：提供 appearance 属性总览、layout（结构、logo、按钮）、themes（预置的深色/浅色主题）、variables（颜色、字体、间距）、CAPTCHA 配置、自带 CSS 等文档入口，对应链接分别为：

• 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（颜色、排版、边框）常用属性：

• colorPrimary：全局主色
• colorBackground：背景色
• borderRadius：边框圆角（默认 0.375rem）

layout（结构、logo、社交按钮）常用属性：

• logoImageUrl：自定义 logo 的 URL
• socialButtonsVariant：'blockButton' | 'iconButton' | 'auto'
• socialButtonsPlacement：'top' | 'bottom'

shadcn 主题：如果项目包含 components.json（已安装 shadcn/ui），可使用 shadcn 主题： import { shadcn } from '@clerk/themes'

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

同时需要在 global.css 中导入 shadcn CSS： @import 'tailwindcss'; @import '@clerk/themes/shadcn.css';

工作流：

1. 确定定制需求（颜色、布局、主题、CSS）
2. 通过 WebFetch 获取上表中的相应文档
3. 遵循文档中的官方代码示例
4. 将 appearance 属性应用到你的 Clerk 组件

常见问题与解决：

• 颜色未生效：使用 colorPrimary，而不是 primaryColor
• logo 不显示：将 logoImageUrl 放在 layout: {} 内
• 社交按钮不正确：在 layout 中添加 socialButtonsVariant: 'iconButton'
• 样式不生效：使用 appearance 属性，而非直接写 CSS（自带 CSS 的情况除外）

限制：资料未提供收费、价格、平台支持范围及具体效果等信息。