Puck-MUI

A utility library to integrate Material-UI (MUI) components with Puck, providing pre-built MUI components for use in the Puck visual editor.

Demo

Visit https://peoplekit.github.io/puck-mui/ to try a demo.

View the demo source code here.

Overview

puck-mui provides a set of ready-to-use Material-UI components that are compatible with the Puck visual editor. These components simplify the integration of MUI into your Puck-based applications, allowing for easy customization and rapid UI development.

Getting Started

Step 1: Install Dependencies

First, ensure that you have both Puck and Material-UI (MUI) installed in your project. If not follow their getting started documentation.

npm install @mui/material @emotion/react @emotion/styled

Then install puck-mui

npm install puck-mui

Step 2: Configure Puck and puck-mui

In your React app, import and configure puck-mui components along with the Puck editor. Here's a simple example of how to render a Puck editor using Material-UI components:

// App.jsx
import { Config, Puck } from '@measured/puck';
import '@measured/puck/puck.css';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';

import { config } from 'puck-mui';

// Create a custom MUI theme (optional)
const theme = createTheme({});

// Initial data structure for the editor
const initialData = {};

// Function to handle data save
const save = (data) => {
  console.log("Saved data: ", data);
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Puck config={config as Config} data={initialData} onPublish={save} />
    </ThemeProvider>
  );
}

export default App;

Customization - Adding Your Own Components

You can add your own custom components to the Puck editor by extending the config object with your own components. Here's an example of how to add a custom component to the editor:

const customConfig = {
  ...config,
  components: {
    ...config.components,
    'custom-component': {
      label: 'Custom Component',
      fields: [...],
      defaultProps: { ... },
      render: (props) => {
        return <CustomComponent {...props} />;
      },
    },
  },
};

Or import the desired component from puck-mui and add it to the config object: All Component matching the Material-UI component name with a prefix P are available in puck-mui.

import { PDivider } from 'puck-mui';

const config = {
  components: {
    divider: PDivider,
  }
};

Contributing

Contributions are welcome! If you'd like to contribute new components, features, or bug fixes to puck-mui, feel free to open an issue or submit a pull request.