feat(ui): Add flush appearance option

[alexcarpenter]

Description

Introduce new elevation appearance option that allows rendering components "flush" on the page vs being wrapped in a card. Options include raised|flush with raised being the default for backwards compat.

Note this only applies to page-mounted components modals/popovers always use raised.

Raised	Flush

Docs: clerk/clerk-docs#3355

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 15, 2026 6:46pm

[changeset-bot]

🦋 Changeset detected

Latest commit: e3bc1bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Minor
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 1cce370e-9e69-4390-afa6-4976bf00ae6a

📥 Commits

Reviewing files that changed from the base of the PR and between 6b27d54 and e3bc1bc.

📒 Files selected for processing (11)

• .changeset/card-elevation-option.md
• packages/clerk-js/sandbox/app.ts
• packages/clerk-js/sandbox/template.html
• packages/ui/src/customizables/AppearanceContext.tsx
• packages/ui/src/customizables/index.ts
• packages/ui/src/customizables/parseAppearance.ts
• packages/ui/src/elements/Card/CardRoot.tsx
• packages/ui/src/elements/PopoverCard.tsx
• packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx
• packages/ui/src/internal/appearance.ts
• packages/ui/src/themes/shadcn.ts

---

📝 Walkthrough

Walkthrough

This pull request adds a new elevation appearance option for card-based UI components. The feature introduces a configurable switch between 'raised' (default, with shadow and border) and 'flush' (flat against container, no border/shadow). The implementation flows from schema definition through component rendering, theme styling, and sandbox tooling. Modal cards always render raised; popovers and profile cards are locked to raised. The CardRoot component reads modal context and derives elevation from options or explicit props, applying FLUSH_ELEMENTS style overrides when flush. The shadcn theme uses a data-[elevation=flush] attribute hook to conditionally remove shadow and border. The sandbox adds HTML controls and sessionStorage persistence for testing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(ui): Add flush appearance option' directly and clearly summarizes the main feature being introduced—a new appearance option for card elevation.
Description check	✅ Passed	The description is directly related to the changeset, explaining the new elevation option, its values, scope, and including visual examples and documentation links.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8510

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8510

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8510

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8510

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8510

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8510

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8510

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8510

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8510

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8510

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8510

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8510

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8510

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8510

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8510

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8510

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8510

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8510

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8510

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8510

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8510

commit: e3bc1bc

[wobsoriano]

✨