Adding a component

This page is for contributing to the default component library in this repository. To add components to your own site, see Custom components.

Default components live in packages/components/src/blocks/. Each is a plain React component registered with Puck via @olgax.com/sdk's registerComponent().

Steps

1. Create src/blocks/YourComponent.tsx with a typed props interface and aregisterComponent("YourComponent", { fields, defaultProps, render }) call.
2. Add a co-located YourComponent.css using --olgax-* custom properties (see tokens.css) instead of hardcoded colors/spacing.
3. Import the new file (for its registration side effect) from packages/components/src/index.ts.
4. Avoid client-only hooks (useState, etc.) in render - Puck components need to work in both the editor (client) and <Render> (can run in a React Server Component).

See CONTRIBUTING.md in the repository root for the full contribution workflow.