feat: Complete migration from @mui/base to @base-ui-components/react #1

hasdfa · 2025-05-21T18:40:17Z

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.

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.

vercel · 2025-05-21T18:40:21Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
base-ui-tailwindcss-dashboard-wge2	❌ Failed (Inspect)			May 21, 2025 7:57pm

Copilot

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, and ExpandableMenuItem to use @base-ui-components/react or 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/base is 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",

Copilot · 2025-05-22T14:56:16Z

src/components/ui/MenuItem/Base/index.tsx

+import { useRender } from '@base-ui-components/react/use-render'
+import { mergeProps } from '@base-ui-components/react/merge-props';


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`.

Copilot · 2025-05-22T14:56:17Z

src/components/ui/Button/index.tsx


-export interface ButtonProps extends BaseButtonProps {
+// Updated ButtonProps to extend React.ButtonHTMLAttributes
+export interface ButtonProps extends useRender.ComponentProps<'button'> {


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> {

Copilot · 2025-05-22T14:56:17Z

src/components/ui/AccordionExample/index.tsx

+                <button>
+                  <span>Accordion Item 1</span>
+                  <FiMinus className="h-5 w-5" />
+                </button>


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>

Copilot · 2025-05-22T14:56:17Z

src/components/app/common/SidebarMenu/index.tsx

+          render={<Link href="/ui-kit" passHref legacyBehavior>All components</Link>}
+        />


[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>

Copilot · 2025-05-22T14:56:18Z

src/app/layout.tsx

+      <body className={inter.className}>
+        <div className="root">
+          <Toast.Provider>
+            {children}


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 />

fixed

1fdb9a9

vercel bot had a problem deploying to Preview May 21, 2025 19:57 Failure

hasdfa requested a review from Copilot May 22, 2025 14:52

Copilot AI reviewed May 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Complete migration from @mui/base to @base-ui-components/react #1

feat: Complete migration from @mui/base to @base-ui-components/react #1

Uh oh!

hasdfa commented May 21, 2025

Uh oh!

vercel bot commented May 21, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 22, 2025

Uh oh!

Copilot AI May 22, 2025

Uh oh!

Copilot AI May 22, 2025

Uh oh!

Copilot AI May 22, 2025

Uh oh!

Copilot AI May 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		import { useRender } from '@base-ui-components/react/use-render'
		import { mergeProps } from '@base-ui-components/react/merge-props';

	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 useRender.ComponentProps<'button'> {
	export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

		render={<Link href="/ui-kit" passHref legacyBehavior>All components</Link>}
		/>

feat: Complete migration from @mui/base to @base-ui-components/react #1

Are you sure you want to change the base?

feat: Complete migration from @mui/base to @base-ui-components/react #1

Uh oh!

Conversation

hasdfa commented May 21, 2025

Uh oh!

vercel bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 22, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel bot commented May 21, 2025 •

edited

Loading