Skip to main content

View Product Block

ViewProduct is a product-detail view block built on MUI with a header (organization, image, chips, title), tags, primary and optional secondary description sections, optional footer, and action buttons.

Installationโ€‹

npm install @nodeblocks/frontend-view-product-block

What You Needโ€‹

ItemWhy it matters
imageUrlSource URL for the product image
headerTitleTitle for the product view
chipsStatus or category chips under the image (label required per chip)
tagsTag chips in the content area (label can be text or breadcrumb-style string[], optional icon as a ReactElement)
sectionsPrimary description blocks (label, value, optional icon)
actions (optional)Footer buttons; wire onClick to cart, checkout, or navigation
Product data lives in your app

ViewProduct is presentational: pass product fields as props and implement actions[].onClick in the parent. Optional secondarySections, footerLogo, and footerText extend the default layout when provided.

Code Examplesโ€‹

Live Editor
function Example() {
  const [lastAction, setLastAction] = React.useState('');
  const sellerName = 'TechStore';

  const chips = [
    { label: 'Smartphone' },
    { label: '5G' },
    { label: 'Unlocked' },
    { label: 'Ships today', variant: 'filled' },
  ];

  const tags = [
    { label: 'Premium' },
    { label: ['Electronics', 'Phones', 'Smartphones', 'Apple'] },
    { label: 'In stock' },
  ];

  const sections = [
    {
      label: 'Product Description',
      value:
        'The iPhone 15 Pro features a titanium design, A17 Pro chip, and an advanced Pro camera system with a 48MP main sensor.',
    },
    {
      label: 'Shipping & Warranty',
      value: 'Free standard shipping in 5โ€“7 business days. One-year limited warranty on manufacturing defects.',
    },
  ];

  const actions = [
    { label: 'Add to Cart', onClick: () => setLastAction('Add to Cart') },
    { label: 'Buy Now', onClick: () => setLastAction('Buy Now') },
  ];

  return (
    <>
      {lastAction ? (
        <Typography variant="body2" sx={{ mb: 2, textAlign: 'center' }}>
          Last action: <strong>{lastAction}</strong>
        </Typography>
      ) : null}
      <ViewProduct
        organizationName={sellerName}
        headerLogo="https://docs.nodeblocks.dev/img/icon.png"
        imageUrl="https://docs.nodeblocks.dev/img/undraw_docusaurus_react.svg"
        imageAlt="iPhone 15 Pro"
        chips={chips}
        headerTitle="iPhone 15 Pro - Latest Model"
        tags={tags}
        sections={sections}
        footerLogo="https://docs.nodeblocks.dev/img/icon.png"
        footerText={`${sellerName} ยท 127 products from this seller`}
        actions={actions}
      />
    </>
  );
}
Result
Loading...

Important Propsโ€‹

Core Propsโ€‹

PropTypeRequiredDefaultDescription
imageUrlstringYesโ€”Product image URL; ViewProduct.Image renders only when set
headerTitlestringYesโ€”Product title in the header
chips(ChipProps & { label: string })[]Yesโ€”Header chips; each item must include label (plus any MUI Chip props such as variant, color, size)
tags{ label: string | string[]; icon?: ReactElement }[]Yesโ€”Tag row in content; label as string[] renders breadcrumb-style segments separated by /
sections{ icon?: SvgIconComponent; label: string; value: string }[]Yesโ€”Primary content sections with optional MUI icon component

Content Propsโ€‹

PropTypeRequiredDefaultDescription
organizationNamestringNoundefinedSeller or organization name in the header
headerLogostringNoundefinedImage URL for the circular logo beside the organization name
imageAltstringNoundefinedalt text for the product image
secondarySections{ icon?: SvgIconComponent; label: string; value: string }[]NoundefinedAdditional sections in a muted card style below primary sections
footerLogostringNoundefinedFooter image URL (or data URI)
footerTextstringNoundefinedFooter caption (for example seller product count)
actions{ label: ReactNode; onClick: () => void }[]NoundefinedEqual-width action buttons in the bottom action row

There is no root labels prop. Override copy via headerTitle, chip labels, section label/value, footerText, and actions[].label.

Layout and Composition Propsโ€‹

PropTypeRequiredDefaultDescription
childrenBlocksOverride | ReactNodeNoundefinedCompound JSX children or function override returning blocks and blockOrder
classNamestringNoundefinedClass name on the root stack (nbb-view-product)
sxSxPropsNoundefinedMUI system styles for the root stack

ViewProduct inherits StackProps (except children). Default block order without overrides: header, content, footer, actions (defaultBlockOrder).

Sub-component propsโ€‹

Sub-components read from context and accept the same content keys as props to override locally.

Sub-componentMain PropsInheritsBuilt on
ViewProduct.CompanyNameorganizationName, headerLogo, children, className, sxStackPropsStack + Box (img) + Typography
ViewProduct.ImageimageUrl, imageAlt, children, classNameBoxPropsBox (img, aspect ratio 1368/540)
ViewProduct.Chipschips, children, className, sxStackPropsStack + Chip (variant="outlined", color="primary")
ViewProduct.TitleheaderTitle, children, className, sxTypographyPropsTypography (component="h4")
ViewProduct.HeaderorganizationName, headerLogo, imageUrl, imageAlt, chips, headerTitle, children, className, sxStackPropsStack + Divider
ViewProduct.Tagstags, children, className, sxStackPropsStack + Chip (transparent background)
ViewProduct.Sectionssections, children, classNameStackPropsStack + Typography
ViewProduct.SecondarySectionssecondarySections, children, classNameStackPropsStack + card-styled section blocks
ViewProduct.Contenttags, sections, secondarySections, children, className, sxStackPropsStack composing Tags, Sections, SecondarySections
ViewProduct.FooterfooterLogo, footerText, children, className, sxBoxPropsBox + Stack
ViewProduct.Actionsactions, children, className, sxStackPropsStack + Button (variant="contained", size="medium")

Default UI Blocksโ€‹

BlockBuilt onNotes
ViewProduct (root)StackCentered column layout (nbb-view-product)
header (ViewProduct.Header)StackCompany name, image, chips, title, divider
content (ViewProduct.Content)StackTags, sections, optional secondary sections
footer (ViewProduct.Footer)BoxRenders only when footerLogo, footerText, or custom children is set
actions (ViewProduct.Actions)Stack + ButtonEqual-width buttons when actions is provided

Default root render order: header โ†’ content โ†’ footer โ†’ actions.

Company logo alt defaults to company logo. Footer logo alt defaults to footer logo.

TypeScriptโ€‹

import * as React from 'react';
import { ViewProduct } from '@nodeblocks/frontend-view-product-block';
import type { ChipProps } from '@mui/material';
import type { SvgIconComponent } from '@mui/icons-material';
import type { ReactElement, ReactNode } from 'react';

type ProductChip = ChipProps & { label: string };

type ProductTag = {
  label: string | string[];
  icon?: ReactElement;
};

type ProductSection = {
  icon?: SvgIconComponent;
  label: string;
  value: string;
};

type ProductAction = {
  label: ReactNode;
  onClick: () => void;
};

export function ProductDetailView() {
  const chips: ProductChip[] = [{ label: 'New' }, { label: 'In stock', variant: 'filled' }];
  const tags: ProductTag[] = [{ label: 'Premium' }];
  const sections: ProductSection[] = [
    { label: 'Description', value: 'Product details go here.' },
  ];
  const actions: ProductAction[] = [
    { label: 'Add to Cart', onClick: () => undefined },
  ];

  return (
    <ViewProduct
      organizationName="TechStore"
      imageUrl="https://example.com/product.jpg"
      imageAlt="Product"
      chips={chips}
      headerTitle="Example product"
      tags={tags}
      sections={sections}
      actions={actions}
    />
  );
}