Integrating PuckCategories

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 title, collapse and hide categories:

const config = { categories: { typography: { components: ["HeadingBlock", "ParagraphBlock"], title: "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: { title: "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