NeoComerz Storefront UI

Premium React storefront sections for NeoComerz-powered ecommerce landing pages. The package ships ready-made hero, gallery, product detail, size chart, order form, testimonial, FAQ, and support components designed for conversion-focused Next.js storefronts.

Package

npm install neocomerz-storefront-ui

pnpm add neocomerz-storefront-ui

yarn add neocomerz-storefront-ui

Requirements

• React 18 or later
• React DOM 18 or later
• Next.js 13 or later
• Tailwind CSS in the consuming app

The package uses next/image, next/link, Tailwind utility classes, lucide-react, and react-icons. React, React DOM, and Next are peer dependencies so they should come from your application.

Quick Start

import { Hero, GalleryGridUI, OrderFormUI } from "neocomerz-storefront-ui";

export default function StorefrontPage() {
  return (
    <main>
      <Hero
        title="Premium Summer Collection"
        subtitle="Comfortable, stylish, and ready to order"
        discountTag="Up to 50% off"
        cta={{ text: "Shop now", href: "#order" }}
        secondaryCta={{ text: "View catalog", href: "#gallery" }}
        theme={{
          primaryColor: "#F36621",
          textColor: "#222F28",
        }}
      />

      <GalleryGridUI
        title="Product Gallery"
        description="A clean visual showcase for featured products."
      />

      <OrderFormUI
        title="Place Your Order"
        productName="Premium Panjabi Set"
        productPrice="৳999"
        submitButtonText="Confirm Order"
        primaryColor="#F36621"
      />
    </main>
  );
}

Styling Setup

Because the components are styled with Tailwind utility classes, include this package in your Tailwind content paths so classes inside the installed package are generated by your app.

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/neocomerz-storefront-ui/dist/**/*.{js,mjs}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

If you pass external image URLs into components that use Next Image, allow those image domains in your app's Next.js configuration.

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

export default nextConfig;

Exports

Hero Sections

• Hero - classic full-width ecommerce hero with logo, title, subtitle, discount tag, overlay, and dual call-to-action support.
• LayeredHeroUI - layered product hero with main image, overlay image, watermark, price display, and CTA.
• InlineHeroUI - compact editorial-style hero for landing pages and product campaigns.

Product Presentation

• GalleryGridUI - responsive product image grid.
• GalleryGrid6UI - six-item gallery layout for curated product sets.
• GalleryColUI - column-based gallery section.
• FeaturesUI - feature list with supporting imagery and WhatsApp CTA.
• DesignAndFitUI - product detail section for fit, material, design, and styling notes.
• SizeChartUI - size table, optional chart image, return policy, and WhatsApp contact CTA.
• QualityUI - trust-building quality and product benefit section.

Commerce

• OrderFormUI - product order form with billing fields, shipping options, cart summary, and configurable product data.

Content And Utility

• TestimonialsUI - customer review/testimonial section.
• FAQUI - accordion FAQ section.
• Helpline - floating WhatsApp support button.
• SectionHeader - reusable section heading block.
• CheckListItem - reusable checklist row.
• PrimaryButton - styled primary or secondary CTA button.

Helpers

• getLocalizedString
• getSizesArray
• getVariantDisplayValues

These helpers are used by order-form related components and are exported for projects that need to normalize product variant data before rendering.

Order Form Notes

OrderFormUI accepts an optional apiBaseUrl and productId. Use these when connecting the form to your ecommerce backend. The component also supports configurable product copy, price, shipping options, placeholder text, and color values.

<OrderFormUI
  apiBaseUrl="https://api.example.com"
  productId="panjabi-001"
  productName="Premium Panjabi Set"
  productPrice="৳999"
  shippingOptions={[
    { id: "inside-dhaka", label: "Inside Dhaka", price: 60 },
    { id: "outside-dhaka", label: "Outside Dhaka", price: 120 },
  ]}
/>

Local Development

Install dependencies:

pnpm install

Run the preview app:

pnpm dev

Build the library:

pnpm run build

Run linting:

pnpm run lint

The preview application lives in preview/ and imports directly from src/ so components can be reviewed during development.

Publishing

Before publishing, build the package and inspect the npm tarball:

pnpm run build
npm pack --dry-run

Publish to npm:

npm publish

For versioned releases:

npm version patch
pnpm run build
npm publish
git push
git push --tags

License

MIT © NeoComerz