A store for designed objects: drawn products that recolour, a category rail, a carousel of what is new, and a bag that fills as you shop.
A shop in the manner of the best hardware stores: a product on a stage under a serif headline, the range as a rail of tiles, the latest as a carousel of tall cards with prices, and bestsellers you can add without leaving the page. Around the home page sit the shop with a filter by collection and a sort, a page per collection and per product (each product page has a colour picker, specs and pairings), the bag as a sheet, checkout and its order confirmation, an account with order history, the studio and its materials, a journal, support with shipping, returns, the warranty, questions and a contact form, privacy, terms and a 404. The sample store is Selm, which sells six objects: a speaker, headphones, earbuds, a lamp, a clock and a charger. Every word and price lives in its content files.
There are no photos: each product is a geometric drawing painted from its colourway, so it recolours in place and reads the same at 44px in a bag row as it does across the hero. Every section is built from Eased components you can also use on their own, and each one installs by itself from the Pro registry. Light and dark themes, reduced motion and keyboard use are handled the same way they are in the library.
Into the bag
On the home page and the product page the object turns through its colours once, a beat after it comes into view, then waits for you. Choose a colour and the drawing repaints; Add to bag lifts it off the stage and flies it in an arc into the bag in the header, the count rolls as it lands, and the cart sheet opens with the line, its quantity stepper and the bar toward free shipping. It is the moment a store has to get right, shown as one gesture.
Home/
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Hero
A serif headline beside its line and two ways in, then the product large on a tinted stage, recoloured from the swatches at its foot.
Category rail
The range as a rail of drawn tiles with category and price, six across or scrolling sideways.
The latest
Tall cards of what is new in a carousel, each tinted by its new colour, with the price and the object at the foot.
Shelf
Product Cards with quick add and swatches that recolour each drawing: bestsellers on the home page, pairings on the product page.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Shop
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Shop
Every product as Product Cards with quick add, filtered by collection chips that are pages of their own and sorted from a select; the grid reflows as the filter changes.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Product/product/[slug]
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Product
The product on its stage beside the Variant Picker, Add to bag and the specs; adding flies the drawing into the bag and opens the cart sheet.
Shelf
Product Cards with quick add and swatches that recolour each drawing: bestsellers on the home page, pairings on the product page.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Checkout/checkout
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Checkout
Contact, address, delivery and payment in one validated form beside a sticky order summary whose totals roll.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Order confirmation/checkout/confirmation
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Order confirmation
The thanks after paying under the order number, the order's four steps with the first done, where it ships and two ways on, beside the order as paid.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Account/account
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Account
Order history with no sign-in behind it: each order's status, its lines drawn small, its total, Buy again and help, beside the shopper's details.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
About/about
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
About
The studio's story beside four numbers, the materials on tiles with the objects that use them, the five colours and why, the people and a way back to the range.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Journal
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Journal
The journal index, its newest post large over a grid of cards, and the post page: title and byline over a drawn cover, the text in one column, the object it is about and more posts.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Support/support
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Legal
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Legal page
Privacy and terms as a ruled list of parts, under a note that the text is a sample to replace.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Not found/404
Header
A pinned bar: the wordmark, a few links, the account and the bag, whose count rolls as things land in it.
Not found
The Desk Clock on its stage beside the code and three ways back.
Footer
Three promises on a rule, the wordmark, three link columns and the legal line.
Cart sheet
The bag as a sheet on Cart Drawer: drawn lines, quantity steppers, undo and a bar toward free shipping.
Download the starter
A Next.js app with every section, the content file and the Eased tokens. Unzip it, run pnpm install and pnpm dev, then make it yours in one file.
Install one section
Each section is its own Pro registry item, with the components it uses. Add it to an app that already has Eased set up.
npx shadcn add @eased-pro/ecommerce-product