Skip to main content

How To Use Block

The HowToUse Component is a fully customizable and accessible step-by-step guide component built with React and TypeScript. It provides a complete interface for displaying process flows, usage instructions, and call-to-action sections with modern design patterns and flexible customization options. Built on top of MUI components for consistent styling.

πŸš€ Installation​

npm install @nodeblocks/frontend-how-to-use-block@0.3.0

πŸ“– Usage​

import {HowToUse} from '@nodeblocks/frontend-how-to-use-block';
Live Editor
function SimpleHowToUse() {
  return (
    <HowToUse
      subtitle="How it works"
      headerContent="STEPS"
      message="Get started in just 1 minute!"
      linkHref="#sign-up"
      linkContent="Sign Up Free"
    >
      <HowToUse.Header subtitle="How it works">
        <span>Getting Started Guide</span>
      </HowToUse.Header>
      <HowToUse.CardList>
        <HowToUse.Card icon={undefined} headerContent="Create Profile">
          Sign up and create your professional profile with your skills and experience.
        </HowToUse.Card>
        <HowToUse.Card icon={undefined} headerContent="Browse Projects">
          Search through available projects and find the ones that match your interests.
        </HowToUse.Card>
        <HowToUse.Card icon={undefined} headerContent="Get Connected">
          Apply to projects and connect with potential employers.
        </HowToUse.Card>
      </HowToUse.CardList>
      <HowToUse.Footer message="Get started in just 1 minute!" linkHref="#sign-up" linkContent="Sign Up Free" />
    </HowToUse>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
subtitleReactNodeRequiredSubtitle text displayed in the header (larger text)
headerContentReactNodeRequiredMain header text content (smaller text above subtitle)
messageReactNodeRequiredMessage text displayed above the footer button
linkHrefstringRequiredURL for the call-to-action button
linkContentReactNodeRequiredText content for the call-to-action button
spacingResponsiveValue{ xs: 5, lg: 6 }Spacing between child elements
classNamestringundefinedAdditional CSS class name for styling the container
sxSxProps<Theme>{ backgroundColor: 'background.default', py: { xs: 5, lg: 10 }, px: { xs: 2, lg: 'unset' } }MUI system props for custom styling
childrenBlocksOverrideundefinedCustom blocks override for advanced customization

Note: This component inherits all MUI Stack component props. All context values (subtitle, headerContent, message, linkHref, linkContent) are passed down to sub-components.

Sub-Components​

The HowToUse 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.

HowToUse.Header​

Renders the header section using MUI Stack with two Typography elements.

PropTypeDefaultDescription
subtitleReactNodeContext valueSubtitle text (larger, displayed below header)
childrenReactNodeContext headerContentMain header text (smaller, displayed above subtitle)
spacingResponsiveValue{ xs: 0.5, lg: 1 }Spacing between header and subtitle
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ textAlign: 'center' }MUI system props for custom styling

Note: This component inherits all MUI Stack component props. The header text uses h4 variant with primary.main color, and subtitle uses h1 variant.

HowToUse.CardList​

Renders a responsive list of cards with arrow indicators between them.

PropTypeDefaultDescription
childrenReactNodeRequiredArray of Card components to display
directionResponsiveValue{ xs: 'column', lg: 'row' }Stack direction
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ alignItems: { xs: 'center', lg: 'stretch' }, justifyContent: 'center' }MUI system props for custom styling

Note: This component inherits all MUI Stack component props. Automatically adds ArrowRight icons between cards on desktop and ArrowDropDown icons on mobile.

HowToUse.Card​

Renders an individual step card using MUI Card.

PropTypeDefaultDescription
iconSvgIconComponentRequiredIcon component that accepts props (MUI icons from @mui/icons-material or custom SVG components)
headerContentReactNodeContext valueTitle text for the card
childrenReactNodeRequiredDescription content of the card
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ width: '100%', maxWidth: 360 }MUI system props for custom styling

Note: This component inherits all MUI Card component props. Rendered with component="article" and elevation={0}. The icon should be a component (not an element) - either from @mui/icons-material or a custom SVG component that accepts props.

HowToUse.Footer​

Renders the footer section with message and call-to-action button.

PropTypeDefaultDescription
messageReactNodeContext valueMessage text displayed above the button
linkHrefstringContext valueURL for the button
linkContentReactNodeContext valueButton text content
childrenReactNodeundefinedAdditional content
spacingnumber1.5Spacing between message and button
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ alignItems: 'center' }MUI system props for custom styling

Note: This component inherits all MUI Stack component props. Uses MUI Button with variant="contained" and size="large".

🎨 Configuration examples​

Custom Header Styling​

<HowToUse.Header
  subtitle="Getting Started"
  sx={{
    textAlign: 'left',
    '& .MuiTypography-h4': {
      color: 'secondary.main',
      fontSize: 16,
    },
    '& .MuiTypography-h1': {
      fontSize: 32,
      fontWeight: 700,
    },
  }}
>
  <span>HOW IT WORKS</span>
</HowToUse.Header>

Custom Card Styling​

<HowToUse.Card
  icon={undefined}
  headerContent="Register"
  sx={{
    maxWidth: 400,
    bgcolor: 'grey.50',
    borderRadius: 3,
    border: '1px solid',
    borderColor: 'grey.200',
  }}
>
  Create your account
</HowToUse.Card>
<HowToUse.Footer
  message="Ready to begin?"
  linkHref="#signup"
  linkContent="Get Started"
  sx={{
    '& .MuiButton-root': {
      bgcolor: 'success.main',
      borderRadius: 8,
      px: 6,
      py: 2,
      '&:hover': {
        bgcolor: 'success.dark',
      },
    },
  }}
/>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {HowToUse} from '@nodeblocks/frontend-how-to-use-block';
import {StackProps, CardProps} from '@mui/material';
import {SvgIconComponent} from '@mui/icons-material';
import {ReactNode} from 'react';

// Main component props extend MUI StackProps
interface HowToUseProps extends Omit<StackProps, 'children'> {
  subtitle: ReactNode;
  headerContent: ReactNode;
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
  children?: BlocksOverride;
}

// Context type (values passed to all sub-components)
interface HowToUseContextValue {
  subtitle: ReactNode;
  headerContent: ReactNode;
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
}

// Card props - note icon is SvgIconComponent
interface CardProps extends MuiCardProps {
  icon: SvgIconComponent;
  headerContent: ReactNode;
  children: ReactNode;
}

// Example with typed props
function CustomStyledHowToUse() {
  return (
    <HowToUse
      subtitle="Getting Started"
      headerContent="HOW IT WORKS"
      message="Ready to begin?"
      linkHref="#signup"
      linkContent="Get Started"
      sx={{py: 8}}
    >
      <HowToUse.Header
        subtitle="Getting Started"
        sx={{
          textAlign: 'left',
          '& .MuiTypography-h4': {
            color: 'secondary.main',
            fontSize: 16,
          },
          '& .MuiTypography-h1': {
            fontSize: 32,
            fontWeight: 700,
          },
        }}
      >
        <span>HOW IT WORKS</span>
      </HowToUse.Header>
      <HowToUse.CardList>
        <HowToUse.Card
          icon={undefined}
          headerContent="Register"
          sx={{
            maxWidth: 400,
            bgcolor: 'grey.50',
            borderRadius: 3,
            border: '1px solid',
            borderColor: 'grey.200',
          }}
        >
          Create your account
        </HowToUse.Card>
        <HowToUse.Card
          icon={undefined}
          headerContent="Explore"
          sx={{
            maxWidth: 400,
            bgcolor: 'grey.50',
            borderRadius: 3,
            border: '1px solid',
            borderColor: 'grey.200',
          }}
        >
          Find opportunities
        </HowToUse.Card>
        <HowToUse.Card
          icon={undefined}
          headerContent="Connect"
          sx={{
            maxWidth: 400,
            bgcolor: 'grey.50',
            borderRadius: 3,
            border: '1px solid',
            borderColor: 'grey.200',
          }}
        >
          Build relationships
        </HowToUse.Card>
      </HowToUse.CardList>
      <HowToUse.Footer
        message="Ready to begin?"
        linkHref="#signup"
        linkContent="Get Started"
        sx={{
          '& .MuiButton-root': {
            bgcolor: 'success.main',
            borderRadius: 8,
            px: 6,
            py: 2,
            '&:hover': {
              bgcolor: 'success.dark',
            },
          },
        }}
      />
    </HowToUse>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack as the root container with responsive padding
  • Default background color is theme.palette.background.default
  • HowToUse.Header displays two Typography elements: header text (h4) and subtitle (h1)
  • HowToUse.CardList automatically adds arrow icons between cards (ArrowRight on desktop, ArrowDropDown on mobile)
  • HowToUse.Card uses MUI Card with elevation={0} and component="article"
  • HowToUse.Card icon must be an MUI SvgIconComponent, not a ReactNode element
  • HowToUse.Footer uses MUI Button with variant="contained" and size="large"
  • All sub-components support the sx prop for MUI system styling
  • Block override pattern allows inserting custom blocks and reordering

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