Conversation
WalkthroughThe changes update multiple UI component files to import Radix UI primitives from the new unified Changes
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Visit the preview URL for this PR (updated for commit 6637281): https://remix-spa-example--pr22-chore-bump-xt4styvy.web.app (expires Fri, 20 Jun 2025 07:46:51 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 48e666b485811f0b1bcd4fa4838b32a205a3ce05 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
package.json (1)
12-12:--cache+-wcan leave files half-formatted
prettier --cache -w .rewrites only the files already in the cache.
If someone adds new files or blows the cache, formatting drift might sneak in.
Dropping--cache(or keeping it on the read-onlyformatscript only) gives more predictable results.- "format:fix": "prettier --cache -w .", + "format:fix": "prettier -w .",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
app/components/ui/alert-dialog.tsx(1 hunks)app/components/ui/avatar.tsx(1 hunks)app/components/ui/button.tsx(3 hunks)app/components/ui/dialog.tsx(1 hunks)app/components/ui/dropdown-menu.tsx(1 hunks)app/components/ui/label.tsx(1 hunks)app/components/ui/tabs.tsx(1 hunks)package.json(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Deploy Preview
- GitHub Check: build_and_preview
🔇 Additional comments (8)
app/components/ui/avatar.tsx (1)
1-1: Import migration looks goodThe new
radix-uinamespace exports anAvatarobject with.Root/.Image/.Fallback;
the alias + type-safe generics compile cleanly.app/components/ui/alert-dialog.tsx (1)
1-1: Consistent primitive aliasing – niceStraightforward switch to the monorepo import; no behavioural change. ✅
app/components/ui/label.tsx (1)
1-1: LGTMLabel primitives migrated correctly; nothing else touched.
app/components/ui/tabs.tsx (1)
1-1: Tabs import updated correctlyNo further issues spotted.
app/components/ui/dialog.tsx (1)
2-2: Verify thatradix-uiactually re-exports the Dialog primitive in the expected shape
DialogPrimitive.Root,DialogPrimitive.Trigger, … are consumed throughout this file. Please make sure the newradix-uipackage ships aDialogexport that exposes the exact same sub-components; otherwise this will be a run-time undefined-property failure that TypeScript will not catch in JS/TSX emit-only mode.app/components/ui/dropdown-menu.tsx (1)
2-2: Same diligence needed for the DropdownMenu exportIf
radix-uidoes not provideDropdownMenu.Root/.Item/… the render path will break silently. Please confirm the new bundle’s API surface or pin an exact version known to include it.app/components/ui/button.tsx (2)
2-2: ConfirmSlotexport parity in the new packageThe code relies on the
Slotprimitive exposing both.Slotand.Slottableproperties. Double-check thatradix-uikeeps this contract; a mismatch will manifest asundefined is not a functionat run-time.
65-65: Follow-up: keep an eye on.Slottable
SlotPrimitive.Slottablestill assumes the property exists. After fixing the line above, verify this property is exported; if not, replace it with a fragment (<>) or remove the wrapper altogether.
| "zodix": "^0.4.4", | ||
| "radix-ui": "latest" | ||
| }, |
There was a problem hiding this comment.
Pin radix-ui instead of using latest
Unpinned versions make reproducible builds impossible and silently pull breaking
changes. Radix v2 is already out – pin to the exact major you intend to stay on
and rely on Renovate/Dependabot for upgrades.
- "radix-ui": "latest"
+ "radix-ui": "^2.0.1"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "zodix": "^0.4.4", | |
| "radix-ui": "latest" | |
| }, | |
| "zodix": "^0.4.4", | |
| "radix-ui": "^2.0.1" | |
| }, |
🤖 Prompt for AI Agents
In package.json around lines 43 to 45, the dependency "radix-ui" is set to
"latest", which prevents reproducible builds and risks pulling breaking changes.
Replace "latest" with a specific version number pinned to the major version you
want to use, for example, "^1.0.0" or the exact version you have tested. Use
Renovate or Dependabot to manage future upgrades safely.
| "@conform-to/react": "^1.5.0", | ||
| "@conform-to/zod": "^1.5.0", | ||
| "@radix-ui/react-alert-dialog": "^1.1.13", | ||
| "@radix-ui/react-avatar": "^1.1.9", | ||
| "@radix-ui/react-dialog": "^1.1.13", | ||
| "@radix-ui/react-dropdown-menu": "^2.1.14", | ||
| "@radix-ui/react-label": "^2.1.6", | ||
| "@radix-ui/react-slot": "^1.2.2", | ||
| "@radix-ui/react-tabs": "^1.1.11", | ||
| "@radix-ui/react-toast": "^1.2.13", | ||
| "@react-router/node": "7.6.0", | ||
| "@tailwindcss/vite": "^4.1.6", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Left-over scoped Radix package creates duplicate bundles
Only toast keeps the old scoped namespace:
"@radix-ui/react-toast": "^1.2.13",
If the new monorepo also exports Toast, you’ll ship two copies of Radix.
Verify usage and migrate or mark why toast is special.
🏁 Script executed:
#!/bin/bash
# Find every import that still references the old scoped packages
rg --no-heading -n "@radix-ui/react-" | headLength of output: 615
Remove unused @radix-ui/react-toast dependency
We ran rg --no-heading -n "@radix-ui/react-" and found no imports of @radix-ui/react-toast in the codebase (only in package.json and pnpm-lock.yaml). This suggests it’s no longer used and can be removed to avoid shipping unnecessary bundles.
• package.json, line 20: remove
"@radix-ui/react-toast": "^1.2.13",
If you have a future need for Radix Toast, re-add it then or document why this package remains special.
🤖 Prompt for AI Agents
In package.json around lines 18 to 22, the dependency "@radix-ui/react-toast" is
no longer used anywhere in the codebase, causing unnecessary bundle duplication.
Remove the line containing "@radix-ui/react-toast": "^1.2.13" from the
dependencies to avoid shipping unused code. If Radix Toast is needed later, you
can re-add it with proper justification.
| isLoading?: boolean | ||
| }) { | ||
| const Comp = asChild ? Slot : 'button' | ||
| const Comp = asChild ? SlotPrimitive.Slot : 'button' |
There was a problem hiding this comment.
Run-time bug – .Slot property is very likely undefined
SlotPrimitive is already the component you want to render. Dereferencing .Slot adds an extra level that does not exist in the original API and will crash:
- const Comp = asChild ? SlotPrimitive.Slot : 'button'
+ const Comp = asChild ? SlotPrimitive : 'button'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const Comp = asChild ? SlotPrimitive.Slot : 'button' | |
| const Comp = asChild ? SlotPrimitive : 'button' |
🤖 Prompt for AI Agents
In app/components/ui/button.tsx at line 54, the code incorrectly accesses
SlotPrimitive.Slot, but SlotPrimitive itself is the component to use. Remove the
.Slot dereference and assign Comp directly to SlotPrimitive when asChild is true
to prevent runtime errors.
1 participant
This pull request refactors the imports for Radix UI components across multiple files to use the new
radix-uipackage instead of individual@radix-ui/react-*packages. Additionally, it updates thepackage.jsonfile to remove the old Radix UI dependencies, add the newradix-uipackage, and introduce a new script for formatting code.Refactoring Radix UI imports:
app/components/ui/alert-dialog.tsxto useAlertDialogfromradix-uiinstead of@radix-ui/react-alert-dialog.app/components/ui/avatar.tsxto useAvatarfromradix-uiinstead of@radix-ui/react-avatar.app/components/ui/button.tsxto useSlotfromradix-uiinstead of@radix-ui/react-slot, and updated references toSlotandSlottablein theButtoncomponent. [1] [2] [3]app/components/ui/dialog.tsx,app/components/ui/dropdown-menu.tsx,app/components/ui/label.tsx, andapp/components/ui/tabs.tsxto use their respective components fromradix-ui. [1] [2] [3] [4]Updates to
package.json:@radix-ui/react-*dependencies and added the newradix-uipackage. [1] [2]format:fixfor applying Prettier formatting fixes.Summary by CodeRabbit