Changelog

Dark mode now lives in the color tokens, components take their font from the page, and init sets up the page itself. Two of these changes remove exports that existing projects may import, so this entry starts with the upgrade steps.

Upgrading an existing project

Your lib/ files are yours, so nothing changes until you update them. Run npx @madeui/cli diff theme to see what the registry’s tokens look like now, then:

• Replace darkTheme. It is gone: every color token is a light-dark(light, dark) pair instead. Put colorScheme from lib/themes.ts on <html>, and make a theme toggle write data-theme="light" or "dark" on <html> instead of swapping a class. See Dark mode.
• Move your font to <html>. The font token is gone and components set no font-family: they inherit the page’s font. If you changed font.sans, set that family on <html> instead. See Fonts.
• Add page to <body>. It gives the page its background and text color from the tokens, so the page switches with the components. See Page styles.

add theme --overwrite replaces all three token files, so review the diff patches first if you edited your colors.

What’s new

• Dark mode through color-scheme — the page follows the OS setting with no JavaScript, and a toggle only writes one attribute, so it works with next-themes and any other theme library. Scrollbars and native form controls turn dark too. The docs cover a toggle that doesn’t flash on load
• Brand themes compose with dark mode — a stylex.createTheme theme can use light-dark() pairs, so one theme covers both modes
• Page styles from init — madeui init (CLI 1.3.0) puts colorScheme on <html> and page on <body> in your root layout (Next.js) or entry (Vite). If it can’t safely edit the file, it prints the snippet instead
• Components inherit the page font — whatever font your app already uses, next/font included, reaches every component and every portaled popup
• madeui diff — compares your installed components with the registry and marks each file same, differs, or missing, with a patch for the ones that differ. --json gives agents the patches and a fix command, and --exit-code fails CI when anything differs. See CLI
• Safer add --overwrite — it replaces only the components you name, so a rethemed tokens.stylex.ts is no longer overwritten as a dependency
• A breakpoint scale — breakpoint in constants.stylex.ts (sm 640px through xxl 1536px) for mobile-first responsive styles, in place of literal media queries. Overlapping keys need @stylexjs/* 0.19.1 or later to come out in width order

Also in this release: Command Dialog is centered on the page again and scales in like the other dialogs, and its input stays put while the list filters.

Five components that needed behavior we were not going to re-implement: date grids, touch carousels, panel resizing, chart layout. Each one names the package it installs on its docs page, and madeui add installs it for you.

• Calendar — a month grid for one day, several days, or a range, with dropdown month and year navigation. Two sizes. Built on react-day-picker, styled slot by slot, so the day buttons and chevrons are your components
• Date Picker — the calendar in a popover behind a button, single or range, with a formatted value and preset shortcuts
• Carousel — slides with previous/next buttons and dots, horizontal or vertical, on embla-carousel-react. Autoplay is a documented recipe rather than a prop
• Resizable — panel groups you drag or resize from the keyboard, with an optional handle grip, on react-resizable-panels. Layout persistence is a documented recipe
• Chart — bar, line, area, donut, radar, radial and sparkline, on recharts. A ChartConfig object names and colors each series once, and the tooltip and legend read from it. Recharts’ own elements are composed directly, so its API stays its API

Charts are laid out in the browser, so ChartContainer reserves its box with an aspect ratio and the plot arrives without moving the page. The component’s docs page says so where you will read it.

Also in this release: six themed chart1–chart6 color tokens for categorical series, in light and dark.

The first release: a component library you own, built on Base UI and StyleX. Components are copied into your project as editable source — no package to depend on, no class-name soup to fight.

• 54 components — from Button and Dialog to Combobox with multi-select chips, Command palette, Drawer, Toast, and less common ones like Autocomplete, Meter, Number Field, Toolbar, and Checkbox Group
• Base UI underneath — accessibility, focus management, and positioning from headless primitives; every state styled via data attributes
• StyleX styling — compile-time atomic CSS, design tokens for every color/space/type/motion value, dark mode as a single theme object
• Consistent API — variant, size, and a style prop merged last on every component; agents and humans learn one pattern
• Docs with live previews — focused examples for every feature, plus guides for installation, theming, and dark mode
• Two install paths — the madeui CLI (init wires the StyleX build), or the shadcn CLI against our registry