shadcn-compatible · MUI · Tailwind CSS

Crafted components & blocks for MUI

A curated collection of beautifully crafted components and blocks built on Material UI + Tailwind CSS. Copy components directly into your project — you own every line.

Explore components: clone the repo, run pnpm install, then pnpm storybook and open the Introduction story (or browse any story at http://localhost:6006).

39	Components
shadcn	Registry format
RHF	react-hook-form
TS	TypeScript

The README banner uses apps/storybook/public/readme.png. On GitHub it loads from
https://raw.githubusercontent.com/LeulAria/MUIcn/main/apps/storybook/public/readme.png (default branch main). You can also use a relative image in markdown, e.g. ![MUIcn](./apps/storybook/public/readme.png).

---

Installation

1. Set up your project

Install MUI and Emotion:

pnpm add @mui/material @emotion/react @emotion/styled

For form components, also install react-hook-form:

pnpm add react-hook-form

2. Add the registry

Initialise shadcn in your project:

npx shadcn@latest init

Then add MUIcn to your components.json:

{
  "registries": {
    "muicn": {
      "url": "https://muicn.leularia.com/r"
    }
  }
}

3. Add components

Install any component — it lands in components/ui/ as a real, editable file:

npx shadcn@latest add muicn/button
npx shadcn@latest add muicn/textfield
npx shadcn@latest add muicn/select-field

---

Theme

Wrap your app with the MUIcn ThemeProvider:

import { ThemeProvider, CssBaseline } from "@mui/material";
import { theme } from "@/components/ui/theme";

export default function RootLayout({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

---

react-hook-form integration

Form components have first-class react-hook-form support. Pass control and name to activate it — errors, refs, and blur are wired automatically.

import { useForm } from "react-hook-form";
import { TextField } from "@/components/ui/textfield";

type FormValues = { email: string };

export function LoginForm() {
  const { control, handleSubmit } = useForm<FormValues>();

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <TextField
        control={control}
        name="email"
        label="Email"
        rules={{ required: "Email is required" }}
        fullWidth
      />
    </form>
  );
}

Without control, it behaves exactly like a standard MUI TextField — onChange, onBlur, and ref are all still exposed.