feat: Complete migration from @mui/base to @base-ui-components/react #1
Conversation
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
This commit finalizes the migration from `@mui/base` to `@base-ui-components/react`. Key changes include: - Uninstalled `@mui/base` and installed `@base-ui-components/react`. - Migrated existing components (`Input`, `Button`, `MenuItem`) to use alternatives from `@base-ui-components/react` or native HTML elements styled with Tailwind CSS. - `Input` now uses `@base-ui-components/react/input`. - `Button` now uses a native `<button>` element. - `MenuItem` now uses `@base-ui-components/react/menu`. - Refactored `ExpandableMenuItem` to use `@base-ui-components/react/collapsible`, removing the last remaining `@mui/base/useTransition` hooks and the custom `SlideDown` component. - Added all 26 available components from `@base-ui-components/react` to the UI kit page (`src/app/ui-kit/page.tsx`) with basic examples and Tailwind CSS styling. Components added include Accordion, AlertDialog, Avatar, Checkbox, Collapsible, Dialog, Field, Fieldset, Form, Input, Menu, Meter, NumberField, Popover, PreviewCard, Progress, RadioGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toast, Toggle, ToggleGroup, Toolbar, and Tooltip. - Configured application layout for portal elements as required by `@base-ui-components/react`. - Ensured no import statements from `@mui/base` remain in the `src` directory.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR finalizes the migration from MUI’s base components to the new @base-ui-components/react library and updates the UI kit with examples for all base-ui components.
- Migrates
Input,Button,MenuItem, andExpandableMenuItemto use@base-ui-components/reactor native HTML elements styled with Tailwind. - Adds examples for all 26 base-ui components on the UI kit page and configures the global layout to support portal-based components (e.g.,
Toast). - Updates dependencies and global CSS to support the new component library.
Reviewed Changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/MenuItem/Base/index.tsx | Swapped out MUI Button import for custom Button and added variant. |
| src/components/ui/Input/index.tsx | Replaced MUI Input with Base Input, updated props/types/styles. |
| src/components/ui/Button/index.tsx | Refactored Button to use useRender/mergeProps; updated typing. |
| src/components/ui/AvatarExample/index.tsx | Added Avatar examples using Base UI’s Avatar component. |
| src/components/ui/AlertDialogExample/index.tsx | Created an AlertDialog example with Base UI Dialog components. |
| src/components/ui/AccordionExample/index.tsx | Added Accordion example; uses React Icons for toggles. |
| src/components/app/common/SidebarMenu/index.tsx | Changed “All components” link to use Button’s render prop. |
| src/app/layout.tsx | Wrapped app children in Toast.Provider for base-ui toasts. |
| src/app/globals.css | Added .root { isolation: isolate; } for portal isolation. |
| src/app/dashboard/tasks/[...slug]/page.tsx | Added optional chaining when reading slug[0]. |
| package.json | Added @base-ui-components/react and bumped existing deps. |
Comments suppressed due to low confidence (1)
package.json:15
- The migration off MUI base is complete, but
@mui/baseis still listed in dependencies. Remove it if it’s no longer used to slim down the dependency tree.
"@mui/base": "5.0.0-beta.70",
Comment on lines
+4
to
+5
| import { useRender } from '@base-ui-components/react/use-render' | ||
| import { mergeProps } from '@base-ui-components/react/merge-props'; |
There was a problem hiding this comment.
The imports useRender and mergeProps are not used in this file. Consider removing them to keep the code clean.
Suggested change
| import { useRender } from '@base-ui-components/react/use-render' | |
| import { mergeProps } from '@base-ui-components/react/merge-props'; | |
| // Removed unused imports `useRender` and `mergeProps`. |
|
|
||
| export interface ButtonProps extends BaseButtonProps { | ||
| // Updated ButtonProps to extend React.ButtonHTMLAttributes | ||
| export interface ButtonProps extends useRender.ComponentProps<'button'> { |
There was a problem hiding this comment.
useRender.ComponentProps<'button'> may not exist as a type. Consider extending React.ButtonHTMLAttributes<HTMLButtonElement> instead for proper typing.
Suggested change
| export interface ButtonProps extends useRender.ComponentProps<'button'> { | |
| export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { |
Comment on lines
+31
to
+34
| <button> | ||
| <span>Accordion Item 1</span> | ||
| <FiMinus className="h-5 w-5" /> | ||
| </button> |
There was a problem hiding this comment.
You have a <button> inside <Accordion.Trigger>, which itself renders a button. This nests interactive elements and can cause accessibility issues. Replace the inner <button> with a non-interactive element like <div> or <span>.
Suggested change
| <button> | |
| <span>Accordion Item 1</span> | |
| <FiMinus className="h-5 w-5" /> | |
| </button> | |
| <div> | |
| <span>Accordion Item 1</span> | |
| <FiMinus className="h-5 w-5" /> | |
| </div> |
Comment on lines
+82
to
+83
| render={<Link href="/ui-kit" passHref legacyBehavior>All components</Link>} | ||
| /> |
There was a problem hiding this comment.
[nitpick] Using a render prop with Link here diverges from the asChild pattern used elsewhere. Consider using <Button asChild><Link href="/ui-kit">All components</Link></Button> for consistency.
Suggested change
| render={<Link href="/ui-kit" passHref legacyBehavior>All components</Link>} | |
| /> | |
| asChild | |
| > | |
| <Link href="/ui-kit" passHref legacyBehavior>All components</Link> | |
| </Button> |
| <body className={inter.className}> | ||
| <div className="root"> | ||
| <Toast.Provider> | ||
| {children} |
There was a problem hiding this comment.
You’ve added <Toast.Provider> but no <Toast.Viewport>. Without a viewport, toast notifications may not render or position correctly. Add <Toast.Viewport /> inside the provider as per the library docs.
Suggested change
| {children} | |
| {children} | |
| <Toast.Viewport /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This commit finalizes the migration from
@mui/baseto@base-ui-components/react.Key changes include:
@mui/baseand installed@base-ui-components/react.Input,Button,MenuItem) to use alternatives from@base-ui-components/reactor native HTML elements styled with Tailwind CSS.Inputnow uses@base-ui-components/react/input.Buttonnow uses a native<button>element.MenuItemnow uses@base-ui-components/react/menu.ExpandableMenuItemto use@base-ui-components/react/collapsible, removing the last remaining@mui/base/useTransitionhooks and the customSlideDowncomponent.@base-ui-components/reactto the UI kit page (src/app/ui-kit/page.tsx) with basic examples and Tailwind CSS styling. Components added include Accordion, AlertDialog, Avatar, Checkbox, Collapsible, Dialog, Field, Fieldset, Form, Input, Menu, Meter, NumberField, Popover, PreviewCard, Progress, RadioGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toast, Toggle, ToggleGroup, Toolbar, and Tooltip.@base-ui-components/react.@mui/baseremain in thesrcdirectory.