Skip to content

chore: Add docs for appearance options elevation #3355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
alexcarpenter wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

chore: Add docs for appearance options elevation #3355

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion docs/guides/customizing-clerk/appearance-prop/options.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, tanstack-

{/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L538 */}

The `options` property can be used to change the layout of the [`<SignIn/>`](/docs/reference/components/authentication/sign-in) and [`<SignUp/>`](/docs/reference/components/authentication/sign-up) components, as well as set important links to your support, terms, and privacy pages.
The `options` property can be used to change the layout and behavior of Clerk's prebuilt components, as well as set important links to your support, terms, and privacy pages.

## Properties

Expand All @@ -18,6 +18,13 @@ The `options` property can be used to change the layout of the [`<SignIn/>`](/do

---

- `elevation`
- `'raised' | 'flush'`

Controls the visual elevation of card-based components. `'raised'` renders the card with its border, box-shadow, border-radius, and padding. `'flush'` removes the card border, box-shadow, border-radius, outer padding, and footer background so the component sits flat against its container. Applies to page-mounted card-based components such as [`<SignIn />`](/docs/reference/components/authentication/sign-in), [`<SignUp />`](/docs/reference/components/authentication/sign-up), [`<Waitlist />`](/docs/reference/components/authentication/waitlist), [`<CreateOrganization />`](/docs/reference/components/organization/create-organization), and [`<OrganizationList />`](/docs/reference/components/organization/organization-list). Does not affect profile components ([`<UserProfile />`](/docs/reference/components/user/user-profile), [`<OrganizationProfile />`](/docs/reference/components/organization/organization-profile)) or popover components ([`<UserButton />`](/docs/reference/components/user/user-button), [`<OrganizationSwitcher />`](/docs/reference/components/organization/organization-switcher)), which always render as raised. When a component is opened as a modal, it always renders as raised regardless of this setting. Defaults to `'raised'`.

---

- `helpPageUrl`
- `string`

Expand Down
Loading