@olgax.com/components

The default, themeable component library for Olgax DXP. Each component is a plain React component registered with Puck through @olgax.com/sdk, and styled only with --olgax-* CSS variables.

pnpm add @olgax.com/components

UsageCopy Anchor Link

import { components } from "@olgax.com/components";
import type { Config } from "@puckeditor/core";

export const config: Config = { components };

Import the tokens once to get the default theme:

import "@olgax.com/components/dist/tokens.css";

Scaffolded sites already do this. Override any --olgax-* property to retheme, or add the optional dark theme:

import "@olgax.com/components/src/themes/dark.css";

See Theming.

Common propsCopy Anchor Link

Every component also has:

• Color overrides: optional backgroundColor, primaryColor and textColor hex values that affect only that instance.
• Show to: everyone, new-visitors or returning-visitors.

ComponentsCopy Anchor Link

Each block shows the props Puck stores for it, which is useful when hand-authoring seed data.

{
  "type": "Hero",
  "props": {
    "heading": "Build pages, not pipelines",
    "subheading": "A self-hostable page-building layer for Payload + Next.js.",
    "ctaLabel": "Get started",
    "ctaHref": "/get-started"
  }
}

RelatedPagesCopy Anchor Link

RelatedPages needs a resolver from @olgax.com/datasource, so it does not register itself on import. Register it from your app:

import { registerRelatedPages } from "@olgax.com/components";
import { createCollectionResolverFetch } from "@olgax.com/datasource";

registerRelatedPages(createCollectionResolverFetch("/api/related-pages"));

Editors set collection, filterField, filterValue and limit. items is resolved automatically and read-only. See Data sources.

Contribute a componentCopy Anchor Link

Want to add one to the library? See Default components.