Blueprint
Online Store
Complete online store for a physical-goods brand: home with hero, collections and featured products; shop with faceted filters, sort and pagination; product detail with zoomable gallery, color and size picker, size guide and reviews; cart page and side cart; three-step checkout with a demo payment and an order confirmation; order history with tracking; wishlist; search with suggestions; and a 404.
- Screens
- 8
- Framework
- Next.js App Router · React 19 · Tailwind CSS 4 · shadcn/ui
- Variants
- Radix UI and Base UI
- Install
- One command, every screen
What is implemented
- The App Router routes above, each composed from catalog components. Interactive UI states such as menus, dialogs, filters and tabs work as in the viewer.
- Sample data that ships with each component, so the screens render without a backend.
- Light and dark themes.
What you supply
- Your data: API routes or a backend in place of the sample data. No backend is included.
- Authentication and authorization.
- Persistence: database, file storage and any server-side state.
- Business rules and server-side validation.
Install
Radix UI project
npx shadcn@4.17.0 add @agentic-ui/blueprint-storefrontChecked: installs and builds in a clean Next.js project.
Base UI project
npx shadcn@4.17.0 add @agentic-ui/blueprint-storefrontChecked: installs and builds in a clean Next.js project.
Your project must be connected to the private registry first: installation guide.
Components it uses
- Storefront ShellStorefront Shell
- HomeStorefront Home
- ShopStorefront Shop
- FiltersSearch Faceted Sidebar
- ProductStorefront Product
- Variant PickerCommerce Variant Picker
- ReviewsCommerce Reviews Block
- CartStorefront Cart
- Cart DrawerCommerce Cart Drawer
- CheckoutStorefront Checkout
- Payment DemoCommerce Credit Card
- OrdersStorefront Orders
- Order TrackingCommerce Order Tracking
- WishlistStorefront Wishlist
- SearchStorefront Search
- Not FoundStorefront Not Found