Ecommerce
A catalogue, a product record and the form that creates one. The screens a store's operator uses, rather than the storefront a shopper sees.
⚠️ Pro edition
These screens are in the Pro download. The free edition ships the design system and the demo, not the application screens.
The screens
3 screens, at these routes in your download. Open them beside this page.
| Route | Screen | What it is for |
|---|---|---|
| /products-list | Products | The catalogue as a data table: search, filter, sort, paginate, and open a row. |
| /product-detail | Product detail | One product's identity, media, pricing and stock, with its related records beside it. |
| /add-product | Add product | The create form, sectioned into general, media, pricing and inventory. |
What you get
- Every table control: search, per-column filters, sorting, pagination, selection and the show/hide menu.
- A create form with validation states, required marks and a footer that knows whether it can submit.
- Empty, loading and error states for each screen, so a slow or failing API does not render a blank card.
What you connect
These are interfaces, not an application.They render, they hold their own state, and they talk to nothing. Everything below is your application's, and none of it is supplied.
- Your catalogue. The rows are demo data held in the page. Point
RecordViewat your API withdataandonDataChange. - Image upload. The media section holds a file input and shows previews; nothing is uploaded anywhere.
- Pricing rules, tax and currency. The fields are numbers. No calculation, rounding or tax logic is supplied.
- Stock. Quantities display and edit. Reservation, backorder and fulfilment are your application's.
Built from
Nothing here is a one-off. Each screen composes the same families documented in the reference, so changing a token moves them with the rest of the product.
data-table, record-view, form, badge, card.
Next
A customer screen, end to end builds one of these from an empty route, and Theming is how you make them look like yours.