Blocks
Pre-built, reusable sections for building pages quickly and consistently.
Blocks are larger, composed UI sections built from registry components. Use them as starting points for common page layouts.
Blocks are not versioned in the same way as components. They are provided as-is and serve as a starting point for your application. They contain placeholder data and dummy content that you should replace with your own. Copy the block, adjust it to your needs, and build on top of it.
Installation
Blocks are installed the same way as components, using the CLI:
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/<block-name>.jsonThis will copy the block files into your project. From there, you own the code – modify it freely to fit your application.
Available blocks
| Category | Blocks | Description |
|---|---|---|
| Navigation | navigation-01, navigation-02 | Header navigation, breadcrumb page navigation |
| Footer | footer-01, footer-minimal | Site footer with links and branding, or a minimal copyright-only variant |
| Wizards | wizard-01 | Multi-step form wizards with stepper |