Migration

From Material UI

MUI is comprehensive but heavy — a full theme engine, a lot of runtime CSS-in-JS. Nova gives you a smaller surface with sharper defaults and better tree-shaking.

Overview

Nova doesn't try to replicate Material Design. If you need Material's exact metaphors, stay. If you're using MUI as a generic library, Nova is a lighter, more opinionated alternative.

Install alongside

Add Nova without removing your current library. Migrate page-by-page.

tsx

bun add @novix-ui/react
# incremental: keep @mui/material installed during migration

Component mapping

From	Nova	Notes
Button (contained/outlined/text)	Button (primary/outline/ghost)	Same intent spectrum.
IconButton	IconButton	aria-label required by types.
TextField	Input + Label	Nova splits the monolith into composable pieces.
Paper	Card	Nova's Card has the Moon-Edge highlight built in.
ThemeProvider (MUI)	ThemeProvider (Nova)	Sets CSS tokens instead of context objects.

Code diff

Before

tsx

<Button variant="contained" color="primary" startIcon={<SearchIcon />}>
  Search
</Button>

After (Nova)

tsx

import { Button } from "@novix-ui/react";
import { Search } from "lucide-react";
 
<Button variant="primary" leadingIcon={<Search />}>Search</Button>

Common traps

MUI uses Emotion under the hood. Nova has no CSS-in-JS runtime — remove Emotion once you're fully migrated to shrink the bundle.
MUI's sx prop won't work on Nova components. Use className with Tailwind utilities.
Material Design elevation is stateful; Nova's Card ships one layered shadow. Don't try to recreate the 24 MUI elevation levels — Nova uses two.