Normalize demo page styling

[tannerlinsley]

Summary

• Add shared demo page, panel, card, form, button, alert, table, and list styling primitives to the React and Solid base templates.
• Update generated demo routes/components to use the base template styling instead of bespoke full-page gradients and mismatched color treatments.
• Fix AI guitar demo links to use the /demo route prefix.
• Add a patch changeset for @tanstack/create and @tanstack/cli.

Validation

• pnpm --filter @tanstack/create build
• pnpm --filter @tanstack/create test
• pnpm --filter @tanstack/cli build
• pnpm --filter @tanstack/cli test:e2e:blocking -- packages/cli/tests-e2e/addons-smoke.spec.ts
• git diff --check

Summary by CodeRabbit

Release Notes

• Style

  • Standardized demo and example pages across all frameworks to use a unified design system with consistent CSS utility classes and theme-based variables, replacing hardcoded color schemes.

• Chores

  • Updated dependency release metadata for patch version changes.

[coderabbitai]

Looking for one thing? Review this PR in Change Stack to search files, summaries, diffs, and code without losing your place.

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d1a9cc98-8914-40e6-8baf-c92c30a635be

📥 Commits

Reviewing files that changed from the base of the PR and between efb411e and 2ca3ed9.

📒 Files selected for processing (58)

• .changeset/quiet-demo-surfaces.md
• packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
• packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx
• packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.css
• packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx
• packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx
• packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-structured.tsx
• packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx
• packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx
• packages/create/src/frameworks/react/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx
• packages/create/src/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx
• packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx
• packages/create/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx
• packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx
• packages/create/src/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx
• packages/create/src/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx
• packages/create/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs
• packages/create/src/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs
• packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs
• packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs
• packages/create/src/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx
• packages/create/src/frameworks/react/add-ons/neon/assets/src/routes/demo/neon.tsx
• packages/create/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx
• packages/create/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs
• packages/create/src/frameworks/react/add-ons/posthog/assets/src/routes/demo/posthog.tsx
• packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx
• packages/create/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx.ejs
• packages/create/src/frameworks/react/add-ons/sentry/assets/src/routes/demo/sentry.testing.tsx
• packages/create/src/frameworks/react/add-ons/store/assets/src/lib/demo-store-devtools.tsx
• packages/create/src/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs
• packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
• packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
• packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
• packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
• packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
• packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/media.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/quote.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/markdown-content.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/pagination.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/search.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/strapi-image.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.$articleId.tsx
• packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.tsx
• packages/create/src/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx
• packages/create/src/frameworks/react/add-ons/table/assets/src/routes/demo/table.tsx.ejs
• packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/routes/demo/tanstack-query.tsx.ejs
• packages/create/src/frameworks/react/add-ons/workos/assets/src/components/workos-user.tsx
• packages/create/src/frameworks/react/add-ons/workos/assets/src/routes/demo/workos.tsx
• packages/create/src/frameworks/react/project/base/src/styles.css.ejs
• packages/create/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx
• packages/create/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/convex.tsx
• packages/create/src/frameworks/solid/add-ons/form/assets/src/routes/demo.form.tsx.ejs
• packages/create/src/frameworks/solid/add-ons/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx
• packages/create/src/frameworks/solid/add-ons/store/assets/src/routes/demo.store.tsx.ejs
• packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx
• packages/create/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx
• packages/create/src/frameworks/solid/project/base/src/styles.css.ejs

---

📝 Walkthrough

Walkthrough

This PR normalizes all generated demo pages across React and Solid frameworks to use a unified CSS variable-based styling system with reusable demo-* component classes, replacing custom gradients and scattered hardcoded colors.

Changes

Demo Page Styling System Overhaul

Layer / File(s)	Summary
CSS Foundation & Changeset .changeset/quiet-demo-surfaces.md, packages/create/src/frameworks/react/project/base/src/styles.css.ejs, packages/create/src/frameworks/solid/project/base/src/styles.css.ejs	Adds release metadata and comprehensive .demo-page, .demo-panel, .demo-input, .demo-button, .demo-textarea, .demo-muted, .demo-alert, and related utility classes to both React and Solid base templates, providing a reusable design system foundation.
AI Feature Demos packages/create/src/frameworks/react/add-ons/ai/assets/src/components/*.tsx, packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/ai/assets/src/routes/demo/*.css	Updates AI assistant, image generation, structured output components and guitar recommendation pages to use demo-* classes and CSS variable tokens (--lagoon-deep, --sea-ink, --line, --chip-bg); changes guitar routes from /example/guitars to /demo/guitars and updates all UI styling while preserving component logic.
Authentication & User Management Demos packages/create/src/frameworks/react/add-ons/better-auth/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/clerk/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/workos/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo*.tsx	Restyled better-auth, clerk, and workos demo pages with demo-page/demo-panel containers, demo-input form controls, demo-button submit buttons, and demo-alert error messages while keeping sign-in/sign-out flows intact.
Data Management Demos packages/create/src/frameworks/react/add-ons/convex/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/db/assets/src/components/*.tsx, packages/create/src/frameworks/react/add-ons/db/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/*.ejs, packages/create/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/*.ejs, packages/create/src/frameworks/react/add-ons/neon/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/*.tsx	Updated convex, db-chat, drizzle, prisma, neon, and powersync demos with demo-page/demo-panel layouts, demo-input/demo-button styled controls, and CSS variable-driven todo item styling (--lagoon-deep, --sea-ink, --line) for completed/incomplete states while preserving data queries and mutations.
Query & Form-based Demos packages/create/src/frameworks/react/add-ons/apollo-client/assets/src/routes/demo*.tsx, packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/routes/demo/*.ejs, packages/create/src/frameworks/react/add-ons/tRPC/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/form/assets/src/components/*.ejs, packages/create/src/frameworks/react/add-ons/form/assets/src/routes/demo/*.ejs, packages/create/src/frameworks/react/add-ons/table/assets/src/routes/demo/*.ejs, packages/create/src/frameworks/react/add-ons/mcp/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo*.ejs	Restyled apollo-client, tanstack-query, tRPC, form address/simple, table, MCP, oRPC, and paraglide i18n demos with demo-page/demo-panel containers and demo-input/demo-button/demo-textarea styled controls; updated form component templates (shadcn and non-shadcn) to use demo-input, demo-textarea, demo-select with text-[var(--sea-ink)] labels.
Content Management (Strapi) Demos packages/create/src/frameworks/react/add-ons/strapi/assets/src/components/*.tsx, packages/create/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/*.tsx	Updated all strapi routes and supporting components (markdown-content, pagination, search, strapi-image, media, quote blocks) to use demo-page/demo-panel/demo-card, demo-pill badges, demo-muted text, and CSS variable-based colors for fallbacks and lists; changed borders to use --line and backgrounds to --chip-bg.
Component Library & Utilities packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/*.tsx, packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/store/assets/src/routes/demo/*.ejs, packages/create/src/frameworks/react/add-ons/store/assets/src/lib/demo*.tsx, packages/create/src/frameworks/solid/add-ons/store/assets/src/routes/demo*.ejs	Updated storybook button/dialog/input/radio/slider components and demo route to use demo-button/demo-input/demo-panel styling; updated store demo pages and devtools to use demo-input for inputs and demo-list-item/demo-muted for display, simplifying Tailwind class lists.
Monitoring & Analytics Demos packages/create/src/frameworks/react/add-ons/sentry/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/react/add-ons/posthog/assets/src/routes/demo/*.tsx, packages/create/src/frameworks/solid/add-ons/sentry/assets/src/routes/demo/*.tsx	Refactored sentry demo page and components (SentryButton, FeatureCard, ResultBadge, ProgressBar) to use demo-page/demo-alert/demo-panel/demo-button/demo-pill classes and CSS variables for colors (--lagoon, --palm, --line); updated posthog page with new container/link styling; both maintain testing and event tracking logic.

🎯 3 (Moderate) | ⏱️ ~25 minutes

🐰 Hops through the demo garden, replanting each style with care,
From gradients grown wild to tokens fair—
Base template beauty blooms everywhere,
Where once were scattered hues in the air! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch taren/normalize-demo-styling