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
45 production blocks across 4 first-party packs, plus any custom packs
you or the community publish via pwpack publish.
- phiwebs-ui (24 blocks) — Text, layout, panel, media, control primitives — the structural and content backbone.
- phiwebs-data (7 blocks) — Tables, charts, lists, stats, timelines, progress — data-bound rendering.
- phiwebs-nav (5 blocks) — Headers, menus, breadcrumbs, footers, pagination — navigation primitives.
- phiwebs-forms (9 blocks) — Inputs, selects, validation, multi-step, submission — user input collection.
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.