Skip to main content

Merits Block

The Merits Component is a fully customizable and accessible merits/benefits display block built with React and TypeScript. It provides a complete interface for showcasing company merits, benefits, or features with modern design patterns, flexible customization options, and responsive layout.

πŸš€ Installation​

npm install @nodeblocks/frontend-merits-block@0.2.0

πŸ“– Usage​

import {Merits} from '@nodeblocks/frontend-merits-block';
Live Editor
function SimpleMerits() {
  const meritsData = [
    {
      imageUrl: '/img/undraw_docusaurus_mountain.svg',
      text: 'Fast Delivery',
      subtext: 'Get your orders delivered quickly and efficiently',
    },
    {
      imageUrl: '/img/undraw_docusaurus_react.svg',
      text: 'Quality Guarantee',
      subtext: 'We ensure the highest quality for all our products',
    },
    {
      imageUrl: '/img/undraw_docusaurus_tree.svg',
      text: '24/7 Support',
      subtext: 'Round-the-clock customer support for all your needs',
    },
  ];

  return (
    <Merits
      subtitle="Why Choose Us"
      meritsTitle="Our Key Benefits"
      buttonText="Learn More"
      buttonHref="#about"
      items={meritsData}
      sx={{backgroundColor: 'white', padding: 2}}
    >
      <Merits.Header />
      <Merits.Content />
      <Merits.ActionBar />
    </Merits>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
subtitleReactNodeRequiredSubtitle text displayed above the main title
meritsTitleReactNodeRequiredMain title for the merits section
buttonTextstringRequiredText content for the action button
buttonHrefstringRequiredURL or path for the action button link
itemsMeritProps[]RequiredArray of merit items to display
spacingnumber | ResponsiveValue6Spacing between child elements
directionStackDirection'column'Layout direction of child elements
classNamestringundefinedAdditional CSS class name for styling the container
sxSxProps<Theme>undefinedMUI System prop for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: The main component inherits all MUI Stack props.

Sub-Components​

The Merits component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

Merits.Header​

Renders the header section with subtitle and main title.

PropTypeDefaultDescription
childrenReactNodeDefault header contentCustom content to override default header rendering
spacingnumber | ResponsiveValue1Spacing between subtitle and title
alignItemsstring'stretch'Alignment of child elements
sxSxProps<Theme>{ textAlign: 'center' }MUI System prop for custom styling

Note: This component inherits all MUI Stack props. When children is not provided, it renders MeritSubtitle and MeritTitle internally.

Merits.Content​

Renders the merit items in a row layout.

PropTypeDefaultDescription
childrenReactNodeDefault merit itemsCustom content to override default merit items rendering
itemsMeritProps[]From contextArray of merit items to display (overrides context items)
directionStackDirection'row'Layout direction of merit items
spacingnumber | ResponsiveValue5Spacing between merit items
sxSxProps<Theme>undefinedMUI System prop for custom styling

Note: This component inherits all MUI Stack props. Each merit item is rendered as a MeritItem containing MeritImage, MeritText, and MeritSubtext.

Merits.Content.MeritImage​

Renders the image for a merit item.

PropTypeDefaultDescription
srcstringundefinedURL for the image
altstring'merit image'Alt text for the image
componentstring'img'The component used for the root node (fixed)
sxSxProps<Theme>{ maxWidth: '100%', height: 225 }MUI System prop for custom styling

Note: This component inherits all MUI Box<'img'> props.

Merits.Content.MeritText​

Renders the main text for a merit item.

PropTypeDefaultDescription
childrenReactNodeFrom item dataText content for the merit
variantstring'h4'Typography variant
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  fontWeight: 600,
  textAlign: 'center',
  fontSize: 25,
  lineHeight: 1.5
}

Note: This component inherits all MUI Typography props.

MeritSubtext (Internal)​

Renders the secondary text/description for a merit item.

PropTypeDefaultDescription
childrenReactNodeFrom item dataSubtext content for the merit
variantstring'body1'Typography variant
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  lineHeight: 1.72,
  alignSelf: 'center',
  fontWeight: 300
}

Note: This component inherits all MUI Typography props. This is an internal component used when rendering merit items.

MeritItem (Internal)​

Container component for each individual merit.

PropTypeDefaultDescription
childrenReactNodeRequiredContent for the merit item
spacingnumber | ResponsiveValue2Spacing between image, text, and subtext
alignItemsstring'stretch'Alignment of child elements
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  minWidth: 0,
  flex: 1,
  paddingBottom: 4
}

Note: This component inherits all MUI Stack props. This is an internal component used when rendering merit items.

Merits.ActionBar​

Renders the action bar with the call-to-action button.

PropTypeDefaultDescription
childrenReactNodeDefault buttonCustom content to override default action bar rendering
buttonHrefstringFrom contextURL for the button (overrides context buttonHref)
buttonTextstringFrom contextText for the button (overrides context buttonText)
spacingnumber | ResponsiveValue1Spacing between child elements
alignItemsstring'stretch'Alignment of child elements
sxSxProps<Theme>{ textAlign: 'center' }MUI System prop for custom styling

Note: This component inherits all MUI Stack props. Renders a Merits.ActionBar.Button component by default.

Merits.ActionBar.Button​

Renders the call-to-action button.

PropTypeDefaultDescription
childrenReactNodeFrom contextText to display inside the button
hrefstringFrom contextURL for the button link
variantstring'contained'Button variant
sizestring'large'Button size
colorstring'primary'Button color
disabledbooleanfalseWhether the button is disabled
onClickfunctionundefinedClick handler function
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  fontSize: 22,
  alignSelf: 'center',
  fontWeight: 600,
  lineHeight: 1.5
}

Note: This component inherits all MUI Button props.

🎨 Configuration examples​

Custom Header Styling​

<Merits.Header sx={{mb: 4, textAlign: 'center'}} />

Custom Content Layout​

<Merits.Content direction={{xs: 'column', md: 'row'}} spacing={4} />

Custom Action Button​

<Merits.ActionBar sx={{mt: 4}}>
  <Merits.ActionBar.Button href="#get-started" sx={{px: 6, py: 2}}>
    πŸš€ Get Started Today
  </Merits.ActionBar.Button>
</Merits.ActionBar>

Custom Styling Example​

<Merits
  subtitle="Why Choose Our Platform"
  meritsTitle="Built for Modern Businesses"
  buttonText="Start Free Trial"
  buttonHref="#signup"
  items={meritsData}
  spacing={8}
  sx={{backgroundColor: '#f8f9fa', padding: 4}}
>
  <Merits.Header sx={{mb: 4}} />
  <Merits.Content direction={{xs: 'column', md: 'row'}} spacing={4} />
  <Merits.ActionBar sx={{mt: 4}}>
    <Merits.ActionBar.Button href="#get-started" sx={{px: 6, py: 2}}>
      πŸš€ Get Started Today
    </Merits.ActionBar.Button>
  </Merits.ActionBar>
</Merits>

Block Override Pattern​

<Merits {...props}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      header: {
        ...defaultBlocks.header,
        props: {
          ...defaultBlocks.header.props,
          spacing: 2,
          sx: {
            textAlign: 'center',
            mb: 4,
          },
        },
      },
    },
    blockOrder: defaultBlockOrder,
  })}
</Merits>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Merits} from '@nodeblocks/frontend-merits-block';
import {ReactNode} from 'react';

interface MeritProps {
  imageUrl: string;
  text: ReactNode;
  subtext: ReactNode;
}

function TypedMerits() {
  const meritsData: MeritProps[] = [
    {
      imageUrl: '/icons/analytics.svg',
      text: 'Powerful Analytics',
      subtext: 'Get detailed insights into your business performance',
    },
    {
      imageUrl: '/icons/automation.svg',
      text: 'Smart Automation',
      subtext: 'Automate repetitive tasks and focus on what matters',
    },
    {
      imageUrl: '/icons/integration.svg',
      text: 'Seamless Integration',
      subtext: 'Connect with 200+ popular tools and services',
    },
  ];

  return (
    <Merits
      subtitle="Platform Benefits"
      meritsTitle="Everything You Need to Succeed"
      buttonText="Explore Features"
      buttonHref="#features"
      items={meritsData}
      spacing={6}
      direction="column"
      sx={{
        backgroundColor: 'background.paper',
        borderRadius: 3,
        boxShadow: 2,
        p: 4,
        maxWidth: 1200,
        mx: 'auto',
      }}
    >
      <Merits.Header sx={{textAlign: 'center'}} />
      <Merits.Content />
      <Merits.ActionBar>
        <Merits.ActionBar.Button
          variant="contained"
          href="#pricing"
          sx={{
            fontSize: 22,
            alignSelf: 'center',
            fontWeight: 600,
            lineHeight: 1.5,
          }}
        >
          View Pricing Plans
        </Merits.ActionBar.Button>
      </Merits.ActionBar>
    </Merits>
  );
}

πŸ“ Notes​

  • The main component uses MUI Stack with direction="column" and spacing={6} by default.
  • All sub-components inherit MUI component props and support the sx prop for styling.
  • The Header component internally renders MeritSubtitle (Typography h4) and MeritTitle (Typography h1) unless children is provided.
  • The Content component renders items in a horizontal row by default. Use direction={{ xs: 'column', md: 'row' }} for responsive layouts.
  • Each merit item is wrapped in a MeritItem Stack container with spacing={2} and flex: 1.
  • The ActionBar.Button uses MUI Button with variant="contained" and size="large" by default.
  • Context values (subtitle, meritsTitle, buttonText, buttonHref, items) are shared via React Context and can be overridden at the sub-component level.

Built with ❀️ using React, TypeScript, and MUI.