CRM
The CRM demo organizes related records and follow-up work into separate screens. You can change its record names, fields and page structure to match your application, or reuse individual parts within your own pages.
Included screens
| Screen | What it shows |
|---|---|
| Dashboard | Metrics, charts and upcoming activities |
| Contacts | A searchable directory with forms and record details |
| Companies | Company records with related information |
| Deals | Cards organized into pipeline stages |
| Tasks | Grouped tasks and editing dialogs |
| Notes | Notes linked to records |
| Emails | Inbox, message details and compose screens |
| Workflows | A workflow list and visual flow editor |
| Settings | Account and appearance settings |
Add a screen to your starter
Choose the screen closest to what you want to build, then add it from the CRM template. For example, to add Contacts:
contacts is the page ID in this example. Run npx nateui@latest list --template crm to see the other available IDs.
After the command finishes, open /contacts. The main source for the screen is in src/app/(protected-pages)/contacts/. The CLI also adds the supplied navigation entry and supporting files. See Add demo pages for adding, replacing or removing a page.
Turn it into your page
The names, fields and actions in the demo are examples; they do not define what your application must be. Start with the screen you added and change only what helps your users complete the task you are building.
A practical way to work through the screen is:
- Search for a visible heading, field label or button text to find the component that renders it.
- Change the wording, fields, actions and layout that users see.
- Remove demo sections and controls you do not need.
- When adding or renaming a data field, update every place where users enter or read it, such as its form, list and detail view.
Most changes begin inside the added page folder. Some reusable CRM components live under src/components/crm/; check where a shared component is used before changing it. If none of the supplied screens is a useful starting point, follow Create your own page and reuse only the components you need.
Connect your application
The added screen uses sample data and demonstration interactions. Replace its data reads with calls to the database or API used by your application. Keep the data shape expected by the screen, or update its components and types at the same time.
Then connect the actions you keep—such as creating, editing or deleting a record—to real write operations. A visible change or success message in the demo does not by itself mean the change is stored.
Test the complete round trip: load a record, change it, reload the page and confirm the saved result is returned. Follow Connect your data for the read and write pattern.