@clay-design-system/react
React 19 section + atom components for monday.com marketing pages, plus the asset registries and the
server-render / progressive-enhancement layer used by the static export. Styling is CSS Modules in
@layer clay.components, consuming @clay-design-system/tokens only.
Entry points
| Import | What |
|---|---|
@clay-design-system/react | Every section + atom (exact props: skills/web-design-brain/reference/COMPONENT_PROPS.md), FOOTER_DEFAULTS, asset constants (G2_BADGES, …). A thin barrel over per-module output: a bundler keeps only what you import |
@clay-design-system/react/sections/<Name> · …/components/<Name> | One section / component on its own (both map to dist/web/<Name>), e.g. …/sections/FeaturesSection, …/components/Button |
@clay-design-system/react/styles.css | Component CSS + clay-reveal / clay-stagger scroll utilities (one stylesheet for every component) |
@clay-design-system/react/assets | The asset resolver: iconUrl, logoUrl, agentUrl, badgeUrl, imageUrl, configureAssets (CDN URLs; see CDN assets) |
@clay-design-system/react/logos | logoUrl, logoKeys, customerSvgMap, integrationSvgMap, productSvgByProduct (+ @clay-design-system/react/logos/manifest.json, key → CDN URL) |
@clay-design-system/react/icons | iconSvgMap, iconMetadata, ICON_NAMES (all ~600 icons) |
@clay-design-system/react/icon-svg · …/icons/data/<name> | IconSvg (renders SVG markup you pass in) and one icon's markup as a string: the lean alternative to <Icon name>, which loads every icon |
@clay-design-system/react/badges | badgeUrl, badgeKeys |
@clay-design-system/react/render | Server render of a page spec (used by apps/pages/scripts/build-static.js) |
@clay-design-system/react/page-spec | PageSpec types + section schemas |
@clay-design-system/react/brief-conformance | evaluateBriefConformance — checks a page plan against its brief |
@clay-design-system/react/enhance | Framework-free enhance.js (tabs, sliders, accordions) shipped with static pages |
@clay-design-system/react/bundles/* | Section bundles (dist/bundles/): one canonical section's static HTML, CSS chunk, tokens, fonts and init(root) script with a manifest (sha256 of every file), to insert into an existing HTML page without React. Index: @clay-design-system/react/bundles/index.json; pilot: FaqSection |
@clay-design-system/react/catalog.json | Section/variant catalog (variants from the zod schemas) |
@clay-design-system/react/page-spec.schema.json · …/page-spec.example.json | The PageSpec as JSON Schema (draft 2020-12, generated from the same zod schemas renderPageSpec parses) and a spec that passes it: validate a spec with any JSON Schema validator, no MCP needed. Unknown props, the layout-to-content coupling and Hard Rules C6/A11 are not in the schema; clay_validate_page checks them |
Every subpath ships ESM (.js) and CJS (.cjs) with matching .d.ts / .d.cts. Images are never in the package: icons, logos and
agent art and the trust/compliance badges come from the Clay CDN through src/assets (the brand folder is one setting). Subpaths under a
section folder that are not the section itself (…/sections/<Name>/assets) are not exported.
Node: ^20.19.0 || >=22.12.0. require() of the package needs require(esm) (swiper is ESM-only), which Node runs unflagged from 20.19
and 22.12; see MIGRATION.md §1.
Source layout (src/)
assets/ (the CDN asset resolver) · web/ one folder per component (<Name>.tsx, .module.css, .stories.tsx, .test.tsx,
index.ts) · logos/ · icons/ · visuals/agents/ (<AgentVisual>) · badges/ · ssr/ +
enhance/ (static export) · page-spec/ · brief-conformance/ · handbook/ + wiki/ (generated
agent corpora) · src/figma/connections.json (Figma frame registry) · docs/ (Storybook docs stories) ·
index.ts (barrel).
Scripts
pnpm --filter @clay-design-system/react build # per-module library (ESM+CJS+types) + enhance bundle + catalog.json
pnpm --filter @clay-design-system/react test # Vitest + Testing Library + axe
pnpm --filter @clay-design-system/react assets:index # regenerate src/assets/generated from cdn-manifest.json
pnpm --filter @clay-design-system/react lint # stylelint — clay-ds/no-foundation-tokens only
pnpm --filter @clay-design-system/react typecheck
Adding a component: pnpm generate <Name> and the checklist in the root CLAUDE.md
("Adding a new component"). Usage docs: skills/web-design-brain/reference/SECTIONS.md.