Sales & Inventory
The Sales & Inventory demo uses products, customers and orders as example records. Its lists, forms and detail views can be adapted around the records your application needs.
Included screens
| Screen | What it shows |
|---|---|
| Dashboard | Sales metrics, charts and date comparisons |
| Products | Product catalog, record details and create/edit forms |
| Orders | Order lists, details and create/edit forms |
| Customers | Customer directory, details and create/edit forms |
| Invoice | Invoice fields, item selection, totals and preview |
| Store settings | Store details and configuration forms |
Add a screen to your starter
Choose the screen closest to what you want to build, then add it from the Sales & Inventory template. For example, to add the product list:
Open /products after the command finishes. Its main source is in src/app/(protected-pages)/products/.
List and create screens are separate demo pages. If you want the Add Product action to open its supplied form, also add the create screen:
The same plural-list and singular-create split is used by Orders and Customers. Run npx nateui@latest list --template sales-inventory to see all available page IDs. See Add demo pages for adding, replacing or removing a page.
Turn it into your page
Products, orders and customers are example records. You can change their names, fields and actions, or reuse the supplied list, form and detail layouts for different information.
A practical way to adapt a screen is:
- Search for a visible heading, field label or button text to find the component that renders it.
- Change the fields, actions and layout shown to the user.
- Remove demo sections and controls your application does not need.
- When adding or renaming a field, update its form, list and detail display together so users enter and see the same information.
Begin in the folder of the page you added. Shared create and edit forms are under src/components/sales/; changing a shared form affects both routes. If the supplied screens do not fit what you are building, 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.