Skip to content

Commit

Permalink
(chore) DOCS-9680 add list of components to component reference overv…
Browse files Browse the repository at this point in the history
…iew (#1800)
  • Loading branch information
alexisintech authored and royanger committed Dec 16, 2024
1 parent 292e1c8 commit 276b09f
Showing 1 changed file with 36 additions and 3 deletions.
39 changes: 36 additions & 3 deletions docs/components/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,48 @@ description: A list of Clerk's comprehensive suite of components designed to sea

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.

To get started, select a component from the navigation on the left.
## UI components

## What are control components?
- [`<SignIn />`](/docs/components/authentication/sign-in)
- [`<SignUp />`](/docs/components/authentication/sign-up)
- [`<GoogleOneTap />`](/docs/components/authentication/google-one-tap)
- [`<UserButton />`](/docs/components/user/user-button)
- [`<UserProfile />`](/docs/components/user/user-profile)
- [`<CreateOrganization />`](/docs/components/organization/create-organization)
- [`<OrganizationProfile />`](/docs/components/organization/organization-profile)
- [`<OrganizationSwitcher />`](/docs/components/organization/organization-switcher)
- [`<OrganizationList />`](/docs/components/organization/organization-list)
- [`<Waitlist />`](/docs/components/waitlist)

## Control components

{/* TODO(Alexis): update with new callout */}

Control components manage authentication-related behaviors in your application. They handle tasks such as controlling content visibility based on user authentication status, managing loading states during authentication processes, and redirecting users to appropriate pages. Control components render at `<Loading />` and `<Loaded />` states for assertions on the [`Clerk` object](/docs/references/javascript/clerk/clerk). A common example is the [`<SignedIn>`](/docs/components/control/signed-in) component, which allows you to conditionally render content only when a user is authenticated.

- [`<AuthenticateWithRedirectCallback />`](/docs/components/control/authenticate-with-callback)
- [`<ClerkLoaded />`](/docs/components/control/clerk-loaded)
- [`<ClerkLoading />`](/docs/components/control/clerk-loading)
- [`<Protect />`](/docs/components/protect)
- [`<MultisessionAppSupport />`](/docs/components/control/multi-session)
- [`<RedirectToSignIn />`](/docs/components/control/redirect-to-signin)
- [`<RedirectToSignUp />`](/docs/components/control/redirect-to-signup)
- [`<RedirectToUserProfile />`](/docs/components/control/redirect-to-userprofile)
- [`<RedirectToOrganizationProfile />`](/docs/components/control/redirect-to-organizationprofile)
- [`<RedirectToCreateOrganization />`](/docs/components/control/redirect-to-createorganization)
- [`<SignedIn />`](/docs/components/control/signed-in)
- [`<SignedOut />`](/docs/components/control/signed-out)

## Unstyled components

- [`<SignInButton />`](/docs/components/unstyled/sign-in-button)
- [`<SignInWithMetamask />`](/docs/components/unstyled/sign-in-with-metamask)
- [`<SignUpButton />`](/docs/components/unstyled/sign-up-button)
- [`<SignOutButton />`](/docs/components/unstyled/sign-out-button)

## Customization Guides

- [Theme components with the appearance prop](/docs/customization/overview)
- [Customize components with the `appearance` prop](/docs/customization/overview)
- [Localize components with the `localization` prop (experimental)](/docs/customization/localization)
- [Add pages to the `<UserProfile />` component](/docs/customization/user-profile)
- [Add pages to the `<OrganizationProfile />` component](/docs/customization/organization-profile)
Expand Down

0 comments on commit 276b09f

Please sign in to comment.