A complete, production-ready storefront for Shopper, built with Inertia, React 19, shadcn/ui and Tailwind CSS v4.
- Home page with featured products, collections and category browsing
- Product catalog with search, category filtering and sorting
- Product detail with variant selection (color, size), image gallery and related products
- Collection & category pages with pagination
- Full-text search across name, description and SKU
- Shopping cart with quantity management and real-time totals
- Multi-step checkout (Shipping address, Delivery options, Payment)
- Saved addresses selection and new address form
- Carrier rate calculation with real shipping providers
- Stripe payment integration with Payment Element
- Order confirmation page
- Dashboard with quick links to orders, addresses and profile
- Order history with status tracking (payment, shipping)
- Order detail with item breakdown and shipping info
- Address management (add, edit, delete, set defaults)
- Profile settings (name, email, gender)
- Security settings (password, two-factor authentication)
- Zone selector for country-based pricing and currency
- Automatic currency switching based on selected zone
- Tax-inclusive/exclusive labels per zone
- Dark mode support on all pages
- Responsive design (mobile-first with Tailwind breakpoints)
- shadcn/ui components (buttons, inputs, dialogs, dropdowns, select)
- ARIA labels and screen reader support
- Keyboard navigation on all interactive elements
- TypeScript end-to-end with strict mode
- Wayfinder for typed route helpers in React components
- TypeScript Transformer generating types from PHP DTOs
- @shopperlabs/shopper-types for shared domain types (Address, Cart, Order, Product, enums)
- PHP ^8.4
- Laravel ^12.0 or ^13.0
- Shopper ^2.9
php artisan shopper:kit:install shopperlabs/react-starter-kitWe recommend creating a new git branch before installing:
git checkout -b storefront
php artisan shopper:kit:install shopperlabs/react-starter-kitThe installer will:
- Copy storefront files (Inertia pages, components, routes, models, actions)
- Install required Composer dependencies (Inertia, Fortify, Wayfinder, TypeScript Transformer, Stripe)
- Run database migrations
- Create the storage symlink
- Install npm dependencies and build assets
app/
├── Actions/ # Business logic (cart, checkout, products)
├── Concerns/ # Shared validation traits, InteractsWithStorefrontMedia
├── DTO/ # Data transfer objects (price, address, zone)
├── Http/
│ ├── Controllers/ # Shop, Account, Settings, Stripe webhook
│ └── Middleware/ # HandleInertiaRequests
├── Models/ # Extended Shopper models (Product, Category, Channel)
├── Providers/ # Fortify, TypeScript Transformer service providers
└── Traits/ # Product pricing trait
resources/
├── css/ # Tailwind entrypoint
└── js/
├── components/ # shadcn/ui + storefront components
├── hooks/ # useCart, useShop, useStripeElements, useAppearance
├── layouts/ # Storefront, account, settings, auth layouts
├── lib/ # format, stripe, utils
├── pages/ # Inertia pages (shop, account, settings, auth, dashboard)
└── types/ # Shop, auth, navigation, generated PHP types
routes/
├── web.php # Storefront, checkout and account routes
└── settings.php # Profile and security routes
tests/
├── Feature/Auth/ # Authentication tests
├── Feature/Settings/ # Profile and security tests
└── Feature/ # Dashboard test
This is a starter kit, not a theme. Once installed, the code belongs to you. You can modify, delete or reorganize anything.
Product, Category, Channel and ProductVariant models extend Shopper's base models. Add your own methods, scopes or relationships directly. The InteractsWithStorefrontMedia trait appends thumbnail and images to every JSON response.
All pages use shadcn/ui and Tailwind CSS. Edit any .tsx file under resources/js/pages/ to change layouts or content. UI primitives live in resources/js/components/ui/.
The checkout is split into Actions (app/Actions/Checkout/) for easy modification:
FetchDeliveryRates— Shipping rate calculationFetchPaymentMethods— Payment method loadingBuildShippingPackages— Package dimensions from cartResolveZoneForCountry— Zone resolution with caching
Order creation is wrapped in app/Actions/CreateOrder.php with Cache::lock idempotency and cart owner verification.
| Package | Version | Purpose |
|---|---|---|
| inertiajs/inertia-laravel | ^3.0 | Inertia adapter |
| laravel/fortify | ^1.37 | Authentication backend |
| laravel/wayfinder | ^0.1.14 | Typed route helpers |
| spatie/laravel-typescript-transformer | ^3.2 | PHP to TypeScript types |
| shopper/stripe | ^2.9 | Stripe payment driver |
MIT