clerk-custom-uilisted

# Custom UI > **Prerequisite**: Ensure `ClerkProvider` wraps your app. See `clerk-setup` skill. > > **Version**: Check `package.json` for the SDK version — see `clerk` skill for the version table. This determines which custom flow references to use below. This skill covers two areas: 1. **Custom authentication flows** — build your own sign-in/sign-up UI with hooks 2. **Appearance customization** — theme, style, and brand Clerk's pre-built components ## What Do You Need? | Task | Reference | |------|-----------| | Custom sign-in (Core 2 / LTS) | core-2/custom-sign-in.md | | Custom sign-up (Core 2 / LTS) | core-2/custom-sign-up.md | | Custom sign-in (Current SDK v7+) | core-3/custom-sign-in.md | | Custom sign-up (Current SDK v7+) | core-3/custom-sign-up.md | | Show component pattern (Current SDK) | core-3/show-component.md | ## Custom Flow References | Task | Core 2 | Current | |------|--------|---------| | Custom sign-in (useSignIn) | `core-2/custom-sign-in.md` | `core-3/custom-sign-in.md` | | Custom sign-up (useSignUp) | `core-2/custom-sign-up.md` | `core-3/custom-sign-up.md` | | `<Show>` component | *(use `<SignedIn>`, `<SignedOut>`, `<Protect>`)* | `core-3/show-component.md` | --- ## Appearance Customization Appearance customization applies to both Core 2 and the current SDK. ### Component Customization Options | Task | Documentation | |------|---------------| | Appearance prop overview | https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/over