From f4e36f3b357e95bcb1c2742d0c8a7e7fe32a8a7e Mon Sep 17 00:00:00 2001 From: Mike Pitre <12040919+mikepitre@users.noreply.github.com> Date: Thu, 6 Nov 2025 18:10:50 -0500 Subject: [PATCH 1/3] replace ios "components" with "views" --- docs/_partials/ios/customization.mdx | 4 +-- docs/getting-started/quickstart.ios.mdx | 8 +++--- .../components/authentication/auth-view.mdx | 2 +- docs/reference/components/overview.ios.mdx | 10 +++---- .../components/user/user-button.ios.mdx | 8 +++--- .../components/user/user-profile-view.mdx | 8 +++--- docs/reference/ios/clerk-theme.mdx | 26 +++++++++---------- 7 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/_partials/ios/customization.mdx b/docs/_partials/ios/customization.mdx index b1dfe39c35..dc988aae07 100644 --- a/docs/_partials/ios/customization.mdx +++ b/docs/_partials/ios/customization.mdx @@ -1,3 +1,3 @@ -To learn how to customize Clerk iOS components, see the [dedicated guide](/docs/reference/ios/clerk-theme). +To learn how to customize Clerk iOS views, see the [dedicated guide](/docs/reference/ios/clerk-theme). -If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides](/docs/guides/development/custom-flows/overview). +If Clerk's prebuilt views don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides](/docs/guides/development/custom-flows/overview). diff --git a/docs/getting-started/quickstart.ios.mdx b/docs/getting-started/quickstart.ios.mdx index 49b8407892..73056c66a9 100644 --- a/docs/getting-started/quickstart.ios.mdx +++ b/docs/getting-started/quickstart.ios.mdx @@ -105,11 +105,11 @@ icon: "clerk", } ``` - ## Use Clerk's prebuilt components + ## Use Clerk's prebuilt views - Clerk provides prebuilt SwiftUI components that handle authentication flows and user management, eliminating the need to build custom forms and flows. + Clerk provides prebuilt SwiftUI views that handle authentication flows and user management, eliminating the need to build custom forms and flows. - Update your `ContentView` to use Clerk's prebuilt components. Replace the existing content with the following code: + Update your `ContentView` to use Clerk's prebuilt views. Replace the existing content with the following code: ```swift {{ filename: 'ContentView.swift', mark: [2, 5, 6, [9, 21]] }} import SwiftUI @@ -137,7 +137,7 @@ icon: "clerk", } ``` - The updated `ContentView` uses two key Clerk components: + The updated `ContentView` uses two key Clerk views: - [`AuthView`](/docs/reference/components/authentication/auth-view): A comprehensive authentication view that handles sign-in and sign-up flows, including email verification, password reset, and multi-factor authentication. It's presented as a sheet when the user taps "Sign in". diff --git a/docs/reference/components/authentication/auth-view.mdx b/docs/reference/components/authentication/auth-view.mdx index ecc22d037c..f0757d2ed1 100644 --- a/docs/reference/components/authentication/auth-view.mdx +++ b/docs/reference/components/authentication/auth-view.mdx @@ -32,7 +32,7 @@ The `AuthView` renders a comprehensive authentication interface with support for ## Usage -The following examples show how to use the `AuthView` component in your iOS app. +The following examples show how to use the `AuthView` in your iOS app. ### Basic usage as a dismissable sheet diff --git a/docs/reference/components/overview.ios.mdx b/docs/reference/components/overview.ios.mdx index 5e75c4abab..fa08a83b37 100644 --- a/docs/reference/components/overview.ios.mdx +++ b/docs/reference/components/overview.ios.mdx @@ -1,12 +1,12 @@ --- -title: Component Reference -description: A list of Clerk's comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application. +title: View Reference +description: A list of Clerk's comprehensive suite of views designed to seamlessly integrate authentication and multi-tenancy into your application. sdk: ios --- -Clerk offers a comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application. With Clerk components, you can easily customize the appearance of authentication components and pages, manage the entire authentication flow to suit your specific needs, and even build robust SaaS applications. +Clerk offers a comprehensive suite of views designed to seamlessly integrate authentication and multi-tenancy into your application. With Clerk views, you can easily customize the appearance of authentication views and pages, manage the entire authentication flow to suit your specific needs, and even build robust SaaS applications. -## Clerk iOS components +## Clerk iOS views - [`AuthView`](/docs/reference/components/authentication/auth-view) - Renders a full authentication interface, supporting multiple sign-up and sign-in methods, multi-factor authentication (MFA), and password recovery flows. - [`UserButton`](/docs/reference/components/user/user-button) - Displays the signed-in user's profile image. @@ -20,7 +20,7 @@ Clerk offers a comprehensive suite of components designed to seamlessly integrat -By default, Clerk displays a **Secured by Clerk** badge on Clerk components. You can remove this branding by following these steps: +By default, Clerk displays a **Secured by Clerk** badge on Clerk views. You can remove this branding by following these steps: 1. In the Clerk Dashboard, navigate to your application's [**Settings**](https://dashboard.clerk.com/~/settings). 1. Under **Branding**, toggle on the **Remove "Secured by Clerk" branding** option. diff --git a/docs/reference/components/user/user-button.ios.mdx b/docs/reference/components/user/user-button.ios.mdx index 4d53ca9226..3289d50a41 100644 --- a/docs/reference/components/user/user-button.ios.mdx +++ b/docs/reference/components/user/user-button.ios.mdx @@ -1,19 +1,19 @@ --- title: '`UserButton`' -description: Clerk's UserButton component renders a circular button that displays the current user's profile image and opens the user profile when tapped. +description: Clerk's UserButton renders a circular button that displays the current user's profile image and opens the user profile when tapped. sdk: ios --- -![The UserButton component is a circular button that displays the signed-in user's profile image.](/docs/images/ui-components/ios-user-button.png) +![The UserButton is a circular button that displays the signed-in user's profile image.](/docs/images/ui-components/ios-user-button.png) -The `UserButton` component is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the [`UserProfileView`](/docs/reference/components/user/user-profile-view). +The `UserButton` is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the [`UserProfileView`](/docs/reference/components/user/user-profile-view). > [!IMPORTANT] > The `UserButton` only appears when a user is signed in. ## Usage -The following examples show how to use the `UserButton` component in your iOS app. +The following examples show how to use the `UserButton` in your iOS app. ### Basic usage diff --git a/docs/reference/components/user/user-profile-view.mdx b/docs/reference/components/user/user-profile-view.mdx index e36b529966..81af990dcc 100644 --- a/docs/reference/components/user/user-profile-view.mdx +++ b/docs/reference/components/user/user-profile-view.mdx @@ -1,12 +1,12 @@ --- title: '`UserProfileView`' -description: Clerk's UserProfileView component renders a beautiful, full-featured account management UI that allows users to manage their profile and security settings. +description: Clerk's UserProfileView renders a beautiful, full-featured account management UI that allows users to manage their profile and security settings. sdk: ios --- -![The UserProfileView component renders a comprehensive user profile interface that displays user information and provides account management options.](/docs/images/ui-components/ios-user-profile-view.png){{ style: { maxWidth: '460px' } }} +![The UserProfileView renders a comprehensive user profile interface that displays user information and provides account management options.](/docs/images/ui-components/ios-user-profile-view.png){{ style: { maxWidth: '460px' } }} -The `UserProfileView` component renders a comprehensive user profile interface that displays user information and provides account management options. It includes personal information, security settings, account switching, and sign-out functionality. +The `UserProfileView` renders a comprehensive user profile interface that displays user information and provides account management options. It includes personal information, security settings, account switching, and sign-out functionality. > [!IMPORTANT] > The `UserProfileView` only appears when a user is signed in. @@ -22,7 +22,7 @@ The `UserProfileView` component renders a comprehensive user profile interface t ## Usage -The following examples show how to use the `UserProfileView` component in your iOS app. +The following examples show how to use the `UserProfileView` in your iOS app. ### Dismissible sheet presentation diff --git a/docs/reference/ios/clerk-theme.mdx b/docs/reference/ios/clerk-theme.mdx index c75443ec8b..c3c0ef56b5 100644 --- a/docs/reference/ios/clerk-theme.mdx +++ b/docs/reference/ios/clerk-theme.mdx @@ -1,10 +1,10 @@ --- title: '`ClerkTheme`' -description: Utilize Clerk's ClerkTheme to adjust the general styles of the iOS components, like colors, fonts, and design properties. +description: Utilize Clerk's ClerkTheme to adjust the general styles of the iOS views, like colors, fonts, and design properties. sdk: ios --- -The `ClerkTheme` is used to customize the appearance of Clerk iOS components by adjusting colors, fonts, and design properties. It provides a comprehensive theming system that allows you to create a consistent visual experience across all Clerk components. +The `ClerkTheme` is used to customize the appearance of Clerk iOS views by adjusting colors, fonts, and design properties. It provides a comprehensive theming system that allows you to create a consistent visual experience across all Clerk views. ## Structure @@ -22,7 +22,7 @@ The `colors` property contains the following color options: - `primary` - `Color` - The primary color used throughout the components. + The primary color used throughout the views. --- @@ -92,7 +92,7 @@ The `colors` property contains the following color options: - `neutral` - `Color` - The color that will be used to generate the neutral shades the components use. + The color that will be used to generate the neutral shades the views use. --- @@ -113,14 +113,14 @@ The `colors` property contains the following color options: - `shadow` - `Color` - The base shadow color used in the components. + The base shadow color used in the views. --- - `border` - `Color` - The base border color used in the components. + The base border color used in the views. ## Fonts @@ -190,16 +190,16 @@ The `design` property contains the following design options: - `borderRadius` - `CGFloat` - The border radius used throughout the components. By default, this is set to `6.0`. + The border radius used throughout the views. By default, this is set to `6.0`. ## Usage -You can customize Clerk iOS components by creating a `ClerkTheme` and applying it to the SwiftUI environment. +You can customize Clerk iOS views by creating a `ClerkTheme` and applying it to the SwiftUI environment. -### Apply a custom theme to all Clerk components +### Apply a custom theme to all Clerk views -To customize all Clerk components in your app, create a `ClerkTheme` and apply it to your root view using the environment. +To customize all Clerk views in your app, create a `ClerkTheme` and apply it to your root view using the environment. ```swift import SwiftUI @@ -224,9 +224,9 @@ struct MyApp: App { } ``` -### Apply a theme to specific components +### Apply a theme to specific views -You can apply a theme to specific Clerk components by using the environment modifier on individual views. The theme used here will apply to all children of this view. +You can apply a theme to specific Clerk views by using the environment modifier on individual views. The theme used here will apply to all children of this view. ```swift struct SignInView: View { @@ -298,7 +298,7 @@ struct CustomFontView: View { ## Light and Dark Mode Support -Clerk iOS components automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences. +Clerk iOS views automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences.
![Light Mode](/docs/images/ui-components/ios-user-profile-view.png){{ style: { maxWidth: '230px' } }} From aea28a8852bdaad2ff3b75352d31a91659de1f2e Mon Sep 17 00:00:00 2001 From: Nick Wylynko Date: Fri, 7 Nov 2025 11:27:03 -0800 Subject: [PATCH 2/3] Dedicated section of the docs for ios views, renamed from ios components (#2777) --- docs/getting-started/quickstart.ios.mdx | 4 +- docs/manifest.json | 70 ++++++++++++------- .../authentication/auth-view.mdx | 0 .../overview.ios.mdx => views/overview.mdx} | 6 +- .../user/user-button.mdx} | 2 +- .../user/user-profile-view.mdx | 0 package.json | 2 +- redirects/static/docs.json | 20 ++++++ 8 files changed, 70 insertions(+), 34 deletions(-) rename docs/reference/{components => views}/authentication/auth-view.mdx (100%) rename docs/reference/{components/overview.ios.mdx => views/overview.mdx} (66%) rename docs/reference/{components/user/user-button.ios.mdx => views/user/user-button.mdx} (94%) rename docs/reference/{components => views}/user/user-profile-view.mdx (100%) diff --git a/docs/getting-started/quickstart.ios.mdx b/docs/getting-started/quickstart.ios.mdx index 73056c66a9..7cf67afc76 100644 --- a/docs/getting-started/quickstart.ios.mdx +++ b/docs/getting-started/quickstart.ios.mdx @@ -139,9 +139,9 @@ icon: "clerk", The updated `ContentView` uses two key Clerk views: - - [`AuthView`](/docs/reference/components/authentication/auth-view): A comprehensive authentication view that handles sign-in and sign-up flows, including email verification, password reset, and multi-factor authentication. It's presented as a sheet when the user taps "Sign in". + - [`AuthView`](/docs/reference/views/authentication/auth-view): A comprehensive authentication view that handles sign-in and sign-up flows, including email verification, password reset, and multi-factor authentication. It's presented as a sheet when the user taps "Sign in". - - [`UserButton`](/docs/reference/components/user/user-button): A circular button that displays the user's profile image. When tapped, it automatically presents the [`UserProfileView`](/docs/reference/components/user/user-profile-view) where users can manage their account, update their profile, and sign out. + - [`UserButton`](/docs/reference/views/user/user-button): A circular button that displays the user's profile image. When tapped, it automatically presents the [`UserProfileView`](/docs/reference/views/user/user-profile-view) where users can manage their account, update their profile, and sign out. ## Create your first user diff --git a/docs/manifest.json b/docs/manifest.json index 5792461b6e..13bd84641e 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -3099,10 +3099,6 @@ { "title": "``", "href": "/docs/reference/components/authentication/waitlist" - }, - { - "title": "`AuthView`", - "href": "/docs/reference/components/authentication/auth-view" } ] ] @@ -3114,33 +3110,11 @@ [ { "title": "``", - "href": "/docs/reference/components/user/user-button", - "sdk": [ - "astro", - "chrome-extension", - "expo", - "nextjs", - "nuxt", - "react", - "react-router", - "remix", - "tanstack-react-start", - "vue", - "js-frontend" - ] - }, - { - "title": "`UserButton`", - "href": "/docs/reference/components/user/user-button", - "sdk": ["ios"] + "href": "/docs/reference/components/user/user-button" }, { "title": "``", "href": "/docs/reference/components/user/user-profile" - }, - { - "title": "`UserProfileView`", - "href": "/docs/reference/components/user/user-profile-view" } ] ] @@ -3289,6 +3263,48 @@ ] } ], + [ + { + "title": "Views", + "icon": "box", + "items": [ + [ + { + "title": "Overview", + "href": "/docs/reference/views/overview" + }, + { + "title": "Authentication views", + "collapse": false, + "items": [ + [ + { + "title": "`AuthView`", + "href": "/docs/reference/views/authentication/auth-view" + } + ] + ] + }, + { + "title": "User views", + "collapse": false, + "items": [ + [ + { + "title": "`UserButton`", + "href": "/docs/reference/views/user/user-button" + }, + { + "title": "`UserProfileView`", + "href": "/docs/reference/views/user/user-profile-view" + } + ] + ] + } + ] + ] + } + ], [ { "title": "API Reference", diff --git a/docs/reference/components/authentication/auth-view.mdx b/docs/reference/views/authentication/auth-view.mdx similarity index 100% rename from docs/reference/components/authentication/auth-view.mdx rename to docs/reference/views/authentication/auth-view.mdx diff --git a/docs/reference/components/overview.ios.mdx b/docs/reference/views/overview.mdx similarity index 66% rename from docs/reference/components/overview.ios.mdx rename to docs/reference/views/overview.mdx index fa08a83b37..5e21b4b229 100644 --- a/docs/reference/components/overview.ios.mdx +++ b/docs/reference/views/overview.mdx @@ -8,9 +8,9 @@ Clerk offers a comprehensive suite of views designed to seamlessly integrate aut ## Clerk iOS views -- [`AuthView`](/docs/reference/components/authentication/auth-view) - Renders a full authentication interface, supporting multiple sign-up and sign-in methods, multi-factor authentication (MFA), and password recovery flows. -- [`UserButton`](/docs/reference/components/user/user-button) - Displays the signed-in user's profile image. -- [`UserProfileView`](/docs/reference/components/user/user-profile-view) - Renders a complete user profile interface with personal information, security settings, account switching, and sign-out options. +- [`AuthView`](/docs/reference/views/authentication/auth-view) - Renders a full authentication interface, supporting multiple sign-up and sign-in methods, multi-factor authentication (MFA), and password recovery flows. +- [`UserButton`](/docs/reference/views/user/user-button) - Displays the signed-in user's profile image. +- [`UserProfileView`](/docs/reference/views/user/user-profile-view) - Renders a complete user profile interface with personal information, security settings, account switching, and sign-out options. ## Customization diff --git a/docs/reference/components/user/user-button.ios.mdx b/docs/reference/views/user/user-button.mdx similarity index 94% rename from docs/reference/components/user/user-button.ios.mdx rename to docs/reference/views/user/user-button.mdx index 3289d50a41..8f99fce5e3 100644 --- a/docs/reference/components/user/user-button.ios.mdx +++ b/docs/reference/views/user/user-button.mdx @@ -6,7 +6,7 @@ sdk: ios ![The UserButton is a circular button that displays the signed-in user's profile image.](/docs/images/ui-components/ios-user-button.png) -The `UserButton` is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the [`UserProfileView`](/docs/reference/components/user/user-profile-view). +The `UserButton` is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the [`UserProfileView`](/docs/reference/views/user/user-profile-view). > [!IMPORTANT] > The `UserButton` only appears when a user is signed in. diff --git a/docs/reference/components/user/user-profile-view.mdx b/docs/reference/views/user/user-profile-view.mdx similarity index 100% rename from docs/reference/components/user/user-profile-view.mdx rename to docs/reference/views/user/user-profile-view.mdx diff --git a/package.json b/package.json index aca5cc8d7d..c76c8c7f94 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "typedoc:link": "tsx scripts/link-typedoc.ts", "typedoc:extract-pages": "tsx scripts/extract-typedoc-pages.ts", "typedoc:extract-pages:with-src": "tsx scripts/extract-typedoc-pages.ts --with-src", - "move-doc": "node scripts/move-doc.mjs", + "move-doc": "bun scripts/move-doc.ts", "delete-doc": "node scripts/delete-doc.mjs", "migrate-sdk-scoping": "tsx scripts/migrate-sdk-scoping.ts", "migrate-api-reference-links": "tsx scripts/migrate-api-reference-links.ts" diff --git a/redirects/static/docs.json b/redirects/static/docs.json index 5d87745b86..5cdfd7e25e 100644 --- a/redirects/static/docs.json +++ b/redirects/static/docs.json @@ -4178,5 +4178,25 @@ "source": "/docs/authentication/saml/google", "destination": "/docs/guides/configure/auth-strategies/enterprise-connections/saml/google", "permanent": true + }, + { + "source": "/docs/ios/reference/components/overview", + "destination": "/docs/reference/views/overview", + "permanent": true + }, + { + "source": "/docs/reference/components/authentication/auth-view", + "destination": "/docs/reference/views/authentication/auth-view", + "permanent": true + }, + { + "source": "/docs/ios/reference/components/user/user-button", + "destination": "/docs/reference/views/user/user-button", + "permanent": true + }, + { + "source": "/docs/reference/components/user/user-profile-view", + "destination": "/docs/reference/views/user/user-profile-view", + "permanent": true } ] From 83d892e1524ef1471c95c9f1abb188bfff1dad1d Mon Sep 17 00:00:00 2001 From: Nick Wylynko Date: Mon, 10 Nov 2025 11:16:38 -0800 Subject: [PATCH 3/3] ios - filter out UI components homepage (#2778) --- docs/index.mdx | 64 ++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 47 insertions(+), 17 deletions(-) diff --git a/docs/index.mdx b/docs/index.mdx index 1ec5c5b107..90dbd0d524 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -6,29 +6,59 @@ template: wide Find all the guides and resources you need to develop with Clerk. - - - [Quickstarts & Tutorials](/docs/getting-started/quickstart/overview) - - Explore our end-to-end tutorials and getting started guides for different application stacks using Clerk. - - {} + + + - [Quickstarts & Tutorials](/docs/getting-started/quickstart/overview) + - Explore our end-to-end tutorials and getting started guides for different application stacks using Clerk. + - {} - --- + --- - - [UI Components](/docs/reference/components/overview) - - Clerk's prebuilt UI components give you a beautiful, fully-functional user management experience in minutes. - - {} + - [UI Components](/docs/reference/components/overview) + - Clerk's prebuilt UI components give you a beautiful, fully-functional user management experience in minutes. + - {} - --- + --- - - [SDK Reference](/docs/reference/overview) - - Dig into our SDK reference documentation. We have everything you need to get started setting up authentication with Clerk. - - {} + - [SDK Reference](/docs/reference/overview) + - Dig into our SDK reference documentation. We have everything you need to get started setting up authentication with Clerk. + - {} - --- + --- - - [Security](/docs/guides/secure/restricting-access) - - Account security is the top concern of every feature we build. This documentation lists some of the many protections included with Clerk. - - {} - + - [Security](/docs/guides/secure/restricting-access) + - Account security is the top concern of every feature we build. This documentation lists some of the many protections included with Clerk. + - {} + + + + + + - [Quickstarts & Tutorials](/docs/getting-started/quickstart/overview) + - Explore our end-to-end tutorials and getting started guides for different application stacks using Clerk. + - {} + + --- + + - [Views](/docs/reference/views/overview) + - Clerk's prebuilt Views give you a beautiful, fully-functional user management experience in minutes. + - {} + + --- + + - [SDK Reference](/docs/reference/overview) + - Dig into our SDK reference documentation. We have everything you need to get started setting up authentication with Clerk. + - {} + + --- + + - [Security](/docs/guides/secure/restricting-access) + - Account security is the top concern of every feature we build. This documentation lists some of the many protections included with Clerk. + - {} + + ## Explore by frontend framework