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: {},
},
// ...
};