Vista previa en vivo

Páginas

Cada página es una vista previa real e interactiva: el carrito se comparte entre todas.

Qué incluye

• Carrito persistente con panel lateral y contador en vivo
• Filtros instantáneos: categoría, precio, color, valoración y stock
• Checkout con envío, impuestos y códigos promocionales
• Sin dependencias en runtime, WCAG AA y mobile-first
• Ilustraciones de producto incluidas: no necesitas imágenes
• Modo claro y oscuro con selector
• Avisos en vivo: toasts del carrito, cuenta atrás, stock bajo y compras recientes

Instalar y usar

1. Instala el paquete

   bashCopy

   npm install react-component-kit-ui

2. Crea una ruta por cada página de la plantilla

   app/page.tsx

   tsxCopy

   import { StoreHomePage } from 'react-component-kit-ui/templates/ecommerce';
   
   export default function Page() {
     return <StoreHomePage />;
   }

   app/shop/page.tsx

   tsxCopy

   import { StoreCategoryPage } from 'react-component-kit-ui/templates/ecommerce';
   
   export default function Page() {
     return (
       <>
         {/* Category links use /shop/?category=audio */}
         <StoreCategoryPage />
       </>
     );
   }

   app/product/[slug]/page.tsx

   tsxCopy

   import { StoreProductPage, demoStore } from 'react-component-kit-ui/templates/ecommerce';
   
   export const generateStaticParams = () => demoStore.products.map((p) => ({ slug: p.slug }));
   
   export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
     const { slug } = await params;
     return <StoreProductPage slug={slug} />;
   }

   app/checkout/page.tsx

   tsxCopy

   import { StoreCheckoutPage } from 'react-component-kit-ui/templates/ecommerce';
   
   export default function Page() {
     return <StoreCheckoutPage />;
   }

3. Usa tu propio catálogo, moneda y rutas

   Parte de la tienda demo y reemplaza lo que necesites. Los productos aceptan una imagen real o una de las 16 ilustraciones incluidas.

   tsxCopy

   import { StoreHomePage, demoStore, type StoreConfig } from 'react-component-kit-ui/templates/ecommerce';
   
   const store: StoreConfig = {
     ...demoStore,
     name: 'My Shop',
     currency: 'EUR',
     locale: 'es-ES',
     cartKey: 'my-shop-cart',
     products: [
       {
         slug: 'linen-shirt',
         name: 'Linen Shirt',
         price: 59,
         category: 'apparel',
         image: '/products/linen-shirt.webp', // or icon: 'shirt'
         sizes: ['S', 'M', 'L'],
         rating: 4.7,
         reviews: 40,
       },
     ],
   };
   
   export default function Page() {
     return <StoreHomePage store={store} routes={{ home: '/', shop: '/shop/', product: '/product/', checkout: '/checkout/' }} />;
   }

Componentes e-commerce nuevos 22

Creados para esta plantilla y disponibles por separado en la librería.

Componentes de la librería reutilizados

Componentes existentes con los que se monta la plantilla.

• Badge
• Numeric Stepper
• Animated Input
• Modern Select
• Custom Radio Group
• Success Checkmark
• Step Breadcrumb Bar
• Footer Mega Section
• Logo Cloud Section
• CTA Newsletter Section