Extending PuckUI overrides

UI overrides

💡

The overrides API is highly experimental and is likely to experience breaking changes.

Overrides allow you to change how Puck renders its default interface. It can be used with or without composition.

There are many different overrides available. See the overrides API reference for the full list.

Implementing an override

Use the overrides prop to implement an override:


import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck
      // ...
      overrides={{
        // Render a custom element for each item in the component list
        drawerItem: ({ name }) => (
          <div style={{ backgroundColor: "hotpink" }}>{name}</div>
        ),
      }}
    />
  );
}

Overriding field types

You can override all fields of certain type by specifying the fieldTypes override.


import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck
      // ...
      overrides={{
        fieldTypes: {
          // Override all text fields with a custom input
          text: ({ name, onChange, value }) => (
            <input
              defaultValue={value}
              name={name}
              onChange={(e) => onChange(e.currentTarget.value)}
              style={{ border: "1px solid black", padding: 4 }}
            />
          ),
        },
      }}
    />
  );
}

Introducing new field types

Specify new field types to expose new fields to your components.


import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck
      // ...
      overrides={{
        fieldTypes: {
          myField: ({ name, onChange, value }) => <div />,
        },
      }}
    />
  );
}

TypeScript consideration: When introducing new field types with TypeScript, you’ll need to extend the available field types with the ConfigWithExtensions type.

Examples

Custom publish button

A common use case is to override the Puck header. You can either use the header override to change the entire header, or use the headerActions override to inject new controls into the header and change the publish button.

Here’s an example that also leverage the internal Puck API to replace the default publish button with a custom one:


import { Puck, createUsePuck } from "@measured/puck";
 
const usePuck = createUsePuck();
 
const save = () => {};
 
export function Editor() {
  return (
    <Puck
      // ...
      overrides={{
        headerActions: ({ children }) => {
          const appState = usePuck((s) => s.appState);
 
          return (
            <>
              <button
                onClick={() => {
                  save(appState.data);
                }}
              >
                Save
              </button>
 
              {/* Render default header actions, such as the default Button */}
              {/*{children}*/}
            </>
          );
        },
      }}
    />
  );
}