The Cookbook contains complete, production-ready page templates built with Primus UI components. Each recipe is a full page — not a component demo — designed to be copied directly into an enterprise application.
Every recipe is available in three formats: plain HTML (using @primus/ui-core), React, and Angular. All three produce the same visual output.
How to use a recipe​
- Pick the recipe that matches your use case
- Copy the code for your framework (HTML, React, or Angular)
- Paste it into your project and replace placeholder data with your real data
- The styling is already handled —
@primus/ui-core CSS does all the work
Available recipes​
Authentication​
Dashboards​
Data Management​
| Recipe | Description |
|---|
| Data List Page | Searchable, sortable, paginated data table with filters |
| Create / Edit Form | Multi-field form with validation, loading, and error states |
| Detail Page | Record detail view with related data and action panel |
Settings​
| Recipe | Description |
|---|
| Settings Page | Tabbed settings with profile, security, and notifications |
| Billing Page | Subscription management, invoice history, payment method |
Onboarding​
Design principles​
All recipes follow these enterprise UI conventions:
- No decorative icons or emojis in the UI chrome — only in data content where appropriate
- Consistent grid — 12-column
.row/.col-* layout with standard breakpoints
- 8px spacing scale — all gaps and paddings use multiples of 8px
- State-first — every interactive element shows loading, disabled, and error states
- Accessible — semantic HTML,
aria-* attributes, keyboard navigation throughout