Migration

From Chakra UI

Chakra uses style props and a runtime theme. Nova uses Tailwind utility classes and CSS-first tokens — smaller runtime, sharper defaults.

Overview

The mental leap is trading style props for utility classes. Everything else — accessibility, composition, controlled/uncontrolled patterns — feels familiar.

Install alongside

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

tsx

bun add @novix-ui/react tailwindcss
# incremental: keep @chakra-ui/react installed during migration

Component mapping

From	Nova	Notes
Button	Button	Variants: solid/subtle → primary/secondary/ghost.
IconButton	IconButton	Same shape, stricter aria-label.
Input / FormControl	Input + Label	Compose instead of a monolith.
Box / Flex	<div> + Tailwind utilities	No runtime style prop engine.
useColorMode	useTheme	Same idea, no CSS-in-JS.

Code diff

Before

tsx

<Button colorScheme="brand" leftIcon={<Search />}>
  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

Chakra's dark mode toggles a data attribute at the top of the tree. Nova ships an equivalent ThemeProvider — wire it in your root once.
Style props like <Box mt={4}> become <div className='mt-4'>. Grep for 'as=' and 'sx=' to find them.
Chakra's default border radius is 6px; Nova is 10–14px squircle-ish. Don't hard-code radii — inherit from tokens.