docs(guides): add framework usage examples for Vite, Next.js, and Remix#1959
Conversation
Closes #1842. Co-authored-by: Cursor <cursoragent@cursor.com>
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis PR adds a new “Framework usage” docs guide (MDX) with setup examples for Vite, Next.js App Router, and Remix, wires the guide into a docs page with SEO metadata, registers the guide in the site navigation, and cross-links it from the first-steps usage guide. ChangesFramework Usage Guide
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/app/docs/guides/framework-usage/content.mdx`:
- Around line 39-60: The Theme wrappers shown alongside the import of
'`@radui/ui/themes/default.css`' are missing the classNamespace prop so the CSS
selectors (rad-ui-*) won't match; update each Theme usage (e.g., the Theme
component in the Vite App.tsx example, the Theme in Next providers.tsx, and the
Theme in the Remix route component) to include classNamespace="rad-ui" (e.g.,
<Theme classNamespace="rad-ui" appearance="light" accentColor="indigo">) so
generated class names align with the provided stylesheet.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 557e262c-de5a-441f-8c1f-ebfaf34d5c39
📒 Files selected for processing (5)
docs/app/docs/docsNavigationSections.tsxdocs/app/docs/first-steps/usage/content.mdxdocs/app/docs/guides/framework-usage/content.mdxdocs/app/docs/guides/framework-usage/page.tsxdocs/app/docs/guides/framework-usage/seo.ts
| import '@radui/ui/themes/default.css' | ||
|
|
||
| ReactDOM.createRoot(document.getElementById('root')!).render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| ) | ||
| ``` | ||
|
|
||
| ```tsx | ||
| // src/App.tsx | ||
| import Theme from '@radui/ui/Theme' | ||
| import Button from '@radui/ui/Button' | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <Theme appearance="light" accentColor="indigo"> | ||
| <Button>Get started</Button> | ||
| </Theme> | ||
| ) | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="docs/app/docs/guides/framework-usage/content.mdx"
test -f "$FILE" || { echo "Missing $FILE"; exit 1; }
echo "== file: $FILE =="
sed -n '1,220p' "$FILE" | nl -ba | sed -n '1,220p'
echo
echo "== occurrences of `@radui/ui/themes/default.css` in $FILE =="
rg -n "`@radui/ui/themes/default`\.css" "$FILE" || true
echo
echo "== occurrences of classNamespace in $FILE =="
rg -n "classNamespace" "$FILE" || true
echo
echo "== occurrences of <Theme " in $FILE =="
rg -n "<Theme\b" "$FILE" || true
echo
echo "== show relevant Theme snippets blocks (around 39-60, 71-111, 123-159) =="
python3 - <<'PY'
import itertools,sys
path="docs/app/docs/guides/framework-usage/content.mdx"
ranges=[(30,75),(65,120),(115,175)]
for a,b in ranges:
print(f"\n--- {path}:{a}-{b} ---")
with open(path,'r',encoding='utf-8') as f:
for i,line in enumerate(f, start=1):
if a<=i<=b:
print(f"{i:4d}: {line.rstrip()}")
PY
echo
echo "== locate any other files referencing classNamespace for rad-ui theme =="
rg -n "classNamespace=\"rad-ui\"|classNamespace" docs/app/docs -S || true
echo
echo "== locate Theme component docs/usage in repo (if present) =="
rg -n "function App\(" docs/app/docs -S || trueRepository: rad-ui/ui
Length of output: 175
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="docs/app/docs/guides/framework-usage/content.mdx"
test -f "$FILE" || { echo "Missing $FILE"; exit 1; }
echo "== file: $FILE =="
python3 - <<PY
path="$FILE"
with open(path,'r',encoding='utf-8') as f:
for i,line in enumerate(f, start=1):
if i<=220:
print(f"{i:4d}: {line.rstrip()}")
PY
echo
echo "== occurrences of `@radui/ui/themes/default.css` in $FILE =="
rg -n "`@radui/ui/themes/default`\.css" "$FILE" || true
echo
echo "== occurrences of classNamespace in $FILE =="
rg -n "classNamespace" "$FILE" || true
echo
echo "== occurrences of <Theme\\b in $FILE =="
rg -n "<Theme\\b" "$FILE" || true
echo
echo "== show relevant Theme snippets blocks (around 39-60, 71-111, 123-159) =="
python3 - <<'PY'
path="docs/app/docs/guides/framework-usage/content.mdx"
ranges=[(35,70),(70,120),(120,170)]
with open(path,'r',encoding='utf-8') as f:
lines=list(f)
for a,b in ranges:
print(f"\n--- {path}:{a}-{b} ---")
for i in range(a-1,b):
if 0<=i<len(lines):
print(f"{i+1:4d}: {lines[i].rstrip()}")
PY
echo
echo "== locate any other files referencing classNamespace for rad-ui theme =="
rg -n "classNamespace=\"rad-ui\"|classNamespace" docs/app/docs -S || true
echo
echo "== check for rad-ui Theme component usage examples =="
rg -n "<Theme\\b" docs/app/docs -S || trueRepository: rad-ui/ui
Length of output: 12558
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show classNamespace guidance in first-steps usage
FILE="docs/app/docs/first-steps/usage/content.mdx"
test -f "$FILE" || { echo "Missing $FILE"; exit 1; }
python3 - <<'PY'
path="docs/app/docs/first-steps/usage/content.mdx"
start=40
end=140
with open(path,'r',encoding='utf-8') as f:
lines=f.readlines()
for i in range(start-1,end):
if i < len(lines):
print(f"{i+1:4d}: {lines[i].rstrip()}")
PY
echo "== grep for 'default Rad UI CSS' and 'generated class names' phrases =="
rg -n "default Rad UI CSS|generated class names|class names|match the selectors" docs/app/docs/first-steps/usage/content.mdx -S || true
echo
echo "== Theme docs example_1.tsx =="
FILE2="docs/app/docs/components/theme/docs/example_1.tsx"
test -f "$FILE2" && cat -n "$FILE2" | sed -n '1,120p' || true
echo
echo "== Theme component docs usage in theme anatomy etc (small) =="
FILE3="docs/app/docs/components/theme/docs/anatomy.tsx"
test -f "$FILE3" && cat -n "$FILE3" | sed -n '1,120p' || trueRepository: rad-ui/ui
Length of output: 5113
Add classNamespace="rad-ui" to each Theme wrapper used with @radui/ui/themes/default.css.
In docs/app/docs/guides/framework-usage/content.mdx (Vite, Next.js App Router, and Remix), the examples import/link @radui/ui/themes/default.css, but the <Theme> components omit classNamespace. The Theme docs state that the default theme stylesheet expects generated namespaced classes (e.g. rad-ui-*), and Theme does not add them by default—so the rendered components won’t match the CSS selectors as described. Add classNamespace="rad-ui" to the <Theme> in each snippet (Vite App.tsx, Next providers.tsx, Remix route component).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/app/docs/guides/framework-usage/content.mdx` around lines 39 - 60, The
Theme wrappers shown alongside the import of '`@radui/ui/themes/default.css`' are
missing the classNamespace prop so the CSS selectors (rad-ui-*) won't match;
update each Theme usage (e.g., the Theme component in the Vite App.tsx example,
the Theme in Next providers.tsx, and the Theme in the Remix route component) to
include classNamespace="rad-ui" (e.g., <Theme classNamespace="rad-ui"
appearance="light" accentColor="indigo">) so generated class names align with
the provided stylesheet.
Co-authored-by: Cursor <cursoragent@cursor.com>
CoverageThis report compares the PR with the base branch. "Δ" shows how the PR affects each metric.
Coverage improved or stayed the same. Great job! Run |
1 participant
Summary
Closes #1842.
Test plan
@radui/uiper-component imports and optional theme CSS./docs/guides/framework-usage.Made with Cursor
Summary by CodeRabbit