WIP.

Old MIUI inspired design components for React. Breaking changes may happen until 1.0.0.

Usage:

• Import cssReset named export and include it in <style> tag
• Import injectGlobalStyles function, call it from your root component
• Import getCssText named export, call it and include result in <style> tag (SSR only)
• Import any needed component from named exports

Components migrated to Panda CSS (Toggle, Input) are not styled by runtime CSS-in-JS — pick one of the two modes below.

Styles: zero-config mode

Import the prebuilt stylesheet once (e.g. in your root component):

import "react-miui/panda.css";

It contains styles for all migrated components (grows with the library).

Styles: Panda CSS mode (recommended)

If your app runs Panda CSS, skip panda.css and use the preset — CSS will be generated only for the react-miui components your code actually uses:

// panda.config.ts
import { defineConfig } from "@pandacss/dev";
import reactMiuiPreset from "react-miui/panda-preset";

export default defineConfig({
    presets: ["@pandacss/preset-base", reactMiuiPreset],
    jsxFramework: "react", // required for component usage tracking
    include: ["./src/**/*.{ts,tsx}"],
    // ...
});

Caveat: usage tracking is name-based (per-file AST scan, no import resolution). Don't alias component imports (import { Input as MyInput } — styles won't be emitted); if you must, extend the recipe in your config: theme: { extend: { slotRecipes: { input: { jsx: ["Input", "MyInput"] } } } }.

For next.js projects add this to your next.config.js (styles are shipped as source for bundlers):

module.exports = {
    transpilePackages: ["react-miui"],
};