feat(docsite): add 'Use this theme' install block on /themes#3093
Merged
Conversation
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
🚀 Vercel Preview Deployment
|
nynexman4464
force-pushed
the
navi/feat/themes-install-action
branch
2 times, most recently
from
8086c2d to
a742ca7
Compare
nynexman4464
force-pushed
the
navi/feat/themes-install-action
branch
from
99f9247 to
36d1470
Compare
nynexman4464
requested review from
cixzhang,
ejhammond,
imdreamrunner,
josephfarina,
marie-lucas and
thedjpetersen
as code owners
cixzhang
approved these changes
Jun 26, 2026
The /themes explorer renders a themed preview but doesn't tell visitors
how to use the theme they're previewing in their own app. They have to
guess that there's an npm package, or navigate to /docs/theme to find
the install + import pattern.
Add a ThemeInstallBlock above the showcase card that surfaces the two
canonical steps inline:
npm install @astryxdesign/theme-<slug>
import {<slug>Theme} from '@astryxdesign/theme-<slug>';
<Theme theme={<slug>Theme}>...</Theme>
Both snippets are copyable and update reactively as the visitor switches
themes in the picker. The block links out to /docs/theme for the longer
SSR / dark mode / customization story so it stays compact.
Closes #3082 (themes-page half)
The install block was leading the right column, pushing the themed preview down so far you couldn't see the actual theme without scrolling. Flipping the order: showcase first (it's why you came), install snippet second (the next step once you've decided you like it).
Dropped the outer Card wrapper and the per-code-block Card wrappers (CodeBlock already has its own card variant — nesting them doubled the border). Removed the custom stylex sheet; the parent surface handles width and the code blocks render edge-to-edge inside it.
Contributor
|
We intentionally removed individual theme installation from the docsite, since most people will want to customize the look and feel for their own products anyway. I'd refrain from adding it unless someone specifically requests it and we can dig into the use-case more. |
Split showcaseBlock into contentBlock (width cap + centering, shared between showcase and install) and showcaseClip (overflow + radius, only relevant to the showcase). Install block now sits at the same 1200px content width and centers on wide viewports.
xstyle override of width wasn't winning vs CodeBlock's default fit-content rule. CodeBlock has a dedicated width prop for this exact purpose — use it directly.
nynexman4464
force-pushed
the
navi/feat/themes-install-action
branch
from
7214d1d to
3804476
Compare
rubyycheung
added a commit
that referenced
this pull request
Jun 29, 2026
Remove the ThemeInstallBlock (npm install + import snippet) that landed on /themes in #3093. It conflicts with this branch's direction: themes aren't installed as packages, they're copied into your own project via "Use this theme". Restore the single showcaseBlock style (the contentBlock /showcaseClip split only existed to share width with the install block). Co-authored-by: Cursor <cursoragent@cursor.com>
rubyycheung
added a commit
that referenced
this pull request
Jun 29, 2026
…3241) * feat(themes): copy-a-theme flow on /themes + `astryx theme add` CLI Reframe the /themes page so people copy any theme into their own project instead of installing it: Astryx ships a default theme built into core, and every theme in the gallery is a starting point you own. The primary "Use this theme" action opens a popover with a CLI command; "Try in Playground" is secondary, and the preview mode toggle moves beside the page title. Add a real `astryx theme add <slug> [path]` command (plus `theme list`) that scaffolds a theme's source into the consumer's project, backed by theme sources bundled into the CLI via scripts/generate-cli-themes.mjs (wired into the root build). Adds ERR_UNKNOWN_THEME, exposes themeAdd via the programmatic API, and covers the new commands in the API/CLI parity test. Co-authored-by: Cursor <cursoragent@cursor.com> * refactor(themes): drop the npm-install block from /themes Remove the ThemeInstallBlock (npm install + import snippet) that landed on /themes in #3093. It conflicts with this branch's direction: themes aren't installed as packages, they're copied into your own project via "Use this theme". Restore the single showcaseBlock style (the contentBlock /showcaseClip split only existed to share width with the install block). Co-authored-by: Cursor <cursoragent@cursor.com> * chore(themes): trim verbose comment in ThemeCommandBlock.module.css Co-authored-by: Cursor <cursoragent@cursor.com> * style(themes): use body text for the theme-command popover copy Co-authored-by: Cursor <cursoragent@cursor.com> * style(themes): use primary text color for the theme-command popover copy Co-authored-by: Cursor <cursoragent@cursor.com> * fix(cli): register theme add/list response types + drop unused var Add `theme add` and `theme list` to the RESPONSE_TYPES/EXAMPLES manifest maps (the drift-guard test requires every JSON-supported command to declare its response types), and remove an unused destructured variable in the `theme add` human output that failed lint. Co-authored-by: Cursor <cursoragent@cursor.com> * fix(cli): consistent theme build outputs + accurate import guidance Addresses PR review feedback on `astryx theme add` / `theme build`: - Derive the default CSS output name from the theme name (like the JS module) so .css/.js/.d.ts share one scheme; building gothicTheme.ts produced gothicTheme.css but gothic.js — now both are gothic.*. An explicit --out still wins (theme packages pass -o dist/theme.css). - Stop fabricating a cwd-rooted import path (./src/...) in the install / scaffold instructions; show bare ./<name> specifiers with a note to point them at where the files landed, since the import is relative to the consumer's own file (wrong when it already lives under src/). - Reference the actual emitted CSS basename (honors --out) instead of assuming <name>.css. - Add `variant` to card's known props so themes adding card color variants (e.g. Gothic) no longer trigger a false "Unknown prop" warning. Co-authored-by: Cursor <cursoragent@cursor.com> * chore(cli): trim verbose comments in theme build changes Co-authored-by: Cursor <cursoragent@cursor.com> * fix(cli): keep the subdir in theme import paths, only strip src/ Per PR review: stripping the path down to a bare `./gothicTheme` lost the `themes/gothic/` segment people actually need. Now drop only a leading `src/` (most consumers import from a file under src/) and keep the rest, so `theme add`/`theme build` emit `./themes/gothic/gothicTheme`. Co-authored-by: Cursor <cursoragent@cursor.com> * chore(cli): remove unnecessary comments from theme add/build/bundler Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #3082 (themes-page half).
The
/themesexplorer renders a themed preview but doesn't tell visitors how to actually use the theme in their app — they had to navigate to/docs/themeto find the install + import pattern.Adds a "Use the {Theme} theme" block below the themed preview with two copyable snippets:
Both update reactively as the picker changes. Links out to
/docs/themefor the longer SSR / dark mode / customization story.Sibling PRs: #3094 adds the install step to
/docs/themeitself; #3140 fixes the showcase preview's demo links.