Default components

This page is for contributors adding to the shared library that every site can install. To build blocks for one site, see Custom components.

Rules for library componentsCopy Anchor Link

1. A typed props interface and a registerComponent("Name", { fields, defaultProps, render }) call. See Hero.tsx.
2. A co-located .css file that uses --olgax-* custom properties (see tokens.css) and no hard-coded colors or spacing, so it stays themeable.
3. Imported from src/index.ts for its registration side effect.
4. No client-only hooks (useState and similar) in render. Components must work in the Puck editor (client) and in <Render> (which can run on the server).

Walkthrough: a Spacer blockCopy Anchor Link

import { registerComponent } from "@olgax.com/sdk";

export type SpacerProps = {
  height: number;
};

const Spacer = ({ height }: SpacerProps) => <div style={{ height }} />;

registerComponent<SpacerProps>("Spacer", {
  fields: {
    height: { type: "number" },
  },
  defaultProps: {
    height: 32,
  },
  render: (props) => <Spacer {...props} />,
});

import "./blocks/Spacer";

pnpm --filter demo dev

pnpm --filter demo build

Add a changeset for your change. See Releasing.

Need a review or a second opinion?Copy Anchor Link

Share your branch in the Olgax Discord and ask for feedback.