Docs
Integrating Puck
Categories

Categories

Categories allow you to group components in the left side bar.

Creating categories

Use the categories API to define the component categories.

const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
    },
  },
  // ...
};

Components can appear in separate categories:

const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
    },
    foundational: {
      components: ["HeadingBlock"],
    },
  },
  // ...
};

You can also change the label, collapse and hide categories:

const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
      label: "Text",
      defaultExpanded: false, // Collapse this category by default
    },
    foundational: {
      components: ["HeadingBlock"],
      visible: false, // Mark this category as hidden
    },
  },
  // ...
};

The "other" category

Any uncategorized components will be grouped in the other category. This will be visible by default. It respects the same API as other categories.

const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
    },
    other: {
      label: "Other components",
    },
  },
  // ...
};

TypeScript

You can pass in available category names to the Config type if using TypeScript

import type { Config } from "@measured/puck";
 
const config: Config<{}, {}, "typography" | "interactive"> = {
  categories: {
    typography: {},
    interactive: {},
  },
  // ...
};

Further reading