Using blocks
Blocks are the building units of your surfaces. Learn how to use them effectively.
What are blocks?
Blocks are pre-designed, customizable components that you arrange to build your surfaces. Each block type serves a specific purpose and can be configured to match your needs.
Block packs
One first-party UI pack of 47 production blocks, plus a separate
Capabilities pack — alongside any custom packs you or the community publish
via the pwfabric CLI. The old four-domain split (ui / data / nav / forms)
has been consolidated and is obsolete.
@pwpack/phiwebs/ui(47 blocks) — The full block library across seven categories: text, media, layout, panel, control, data, and form. This is the structural and content backbone for every surface.@pwpack/phiwebs/capabilities— First-party capability atoms, packaged separately from the UI blocks.
Adding blocks
You describe what you want and PhiCo proposes a Receipt — a signed,
line-numbered recipe of every block, prop, capability, and theme token.
Accept the diff and the blocks are applied. You can also edit blocks
directly in the canvas after acceptance: click to select, edit props in
the side panel, or use the slash command (/) to insert a new block from
the live catalog.
Customizing blocks
Click any block to open its settings panel. Every prop is validated
against the block’s Zod schema — invalid values are rejected before
publish. Theme tokens (var(--pw-color-*)) are preferred over hard-coded
hex.