feat(clerk-js): add theme/preset selector and tailwind toggle to sandbox

[nikosdouvlis]

Summary

The sandbox had no way to switch themes or apply appearance presets at runtime - testing different themes required code changes. Tailwind CSS also couldn't be toggled off.

• Theme selector dropdown (dark, shadesOfPurple, neobrutalism, shadcn) with sessionStorage persistence
• Preset selector with dynamically populated dropdown - other branches can register presets by adding to the presets map without touching the dropdown HTML
• presetToAppearance helper to convert preset configs to appearance props
• Tailwind CSS toggle with no-tailwind CSS fallback, scoped to [data-sidebar] to prevent host-page styles leaking into Clerk components
• Variable overrides only apply when using the default theme (prebuilt themes define their own)

Test plan

• Switch between themes in the dropdown, verify components re-render with the selected theme
• Toggle Tailwind off, verify sidebar still renders correctly
• Verify theme/preset selections persist across page navigation

Summary by CodeRabbit

• New Features

  • Sandbox supports multiple visual themes and presets with dynamic selectors in both UI panels.
  • Theme and preset selections persist and apply at runtime; initial selections are respected to avoid unintended overrides.
  • Added a toggle to enable/disable Tailwind styling; choice persists and reloads the sandbox view.

• Chores

  • Added a changeset file for the release.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Mar 11, 2026 3:44pm

[changeset-bot]

🦋 Changeset detected

Latest commit: ea8da17

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@8038

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: ea8da17

[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: 81fd095d-c9f1-4b66-bdb8-bc07d8451fd1

📥 Commits

Reviewing files that changed from the base of the PR and between 2823394 and ea8da17.

📒 Files selected for processing (1)

• .changeset/cyan-taxis-float.md

✅ Files skipped from review due to trivial changes (1)

• .changeset/cyan-taxis-float.md

---

📝 Walkthrough

Walkthrough

Adds runtime theming and preset support to the Clerk JS sandbox. app.ts introduces a themes registry and a presets registry, reads initialTheme and initialPreset from sessionStorage, exposes UI handlers to switch themes and presets at runtime, and passes appearance (theme plus preset-derived values) into Clerk.load. After load it calls updateTheme and updatePreset and only applies appearance variables when no initialTheme is present. template.html adds theme and preset selects to both UI panels and a Tailwind toggle stored in localStorage that conditionally loads Tailwind or injects fallback CSS.

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding theme/preset selectors and a Tailwind toggle to the sandbox app.

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

---

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