🧩 Nodeblocks Frontend Blocks

The Complete Component Library for Modern Business Applications ⚡

Welcome to the Nodeblocks Frontend Blocks - a comprehensive collection of 32 production-ready React components designed to accelerate your application development. These modular, customizable blocks are the visual building blocks that bring your applications to life.

🎯 What Are Frontend Blocks?

Frontend Blocks are pre-built, customizable React components that serve as the visual foundation of your applications. Each block is:

🎨 Fully Customizable: Adapt to your brand and design requirements
🔧 Production Ready: Built with TypeScript, tested, and optimized
🧩 Modular: Use individually or combine for complete features
⚡ Performance Optimized: Built with modern React best practices

🏗️ Component Categories

🌟 Common Components

Essential building blocks for any application

Component	Description
navbar	Main navigation bar with responsive design
side-navigation	Collapsible sidebar navigation
breadcrumb	Navigation breadcrumbs for page hierarchy
footer	Professional footer component
hero	Eye-catching hero sections
error-block	Beautiful error message displays
faq	Frequently asked questions section
chat-conversation	Real-time chat interface
chat-conversation-list	Chat conversation management
settings	Application settings interface
filter-search-panel	Advanced search and filtering
filter-list	Filterable list components
search-by-chips	Tag-based search functionality
merits	Achievement and merit displays
how-to-use	User guide and instruction components

👥 User Management

Complete user authentication and management suite

Component	Description
sign-in	User authentication and login
sign-up	New user registration
reset-password	Password recovery functionality
list-users	User management and listing
basic-information	User profile and information forms

🏢 Organization Management

Enterprise-grade organization features

Component	Description
create-organization	Organization creation workflow
view-organization	Organization details and information
list-organizations	Organization listing and management
list-invites	Organization invitation management

📦 Product Management

Comprehensive product lifecycle management

Component	Description
create-product	Product creation interface
view-product	Detailed product information display
list-products-table	Tabular product listing
list-products-grid	Grid-based product display
attribute-selection	Product attribute management

🛒 Order Management

Complete order processing workflow

Component	Description
view-order	Order details and information
list-order	Order listing and management
list-order-table	Tabular order management

✨ Key Features

🎨 Design System Integration

Consistent styling across all components
Customizable theme system
Responsive design patterns
Modern UI/UX best practices

🔧 Developer Experience

TypeScript support throughout
Comprehensive documentation
Clear prop interfaces
Intuitive component APIs

🚀 Performance

Optimized for production use
Lazy loading support
Minimal bundle impact
Efficient rendering patterns

📱 Accessibility

Keyboard navigation support
Screen reader compatibility
Focus management

🚀 Getting Started

Installation

First, install the theme package (required for all components):

npm install @nodeblocks/frontend-theme

Then install individual components as needed:

npm install @nodeblocks/frontend-navbar-block@0.2.0
npm install @nodeblocks/frontend-signin-block@0.3.0

⚠️ Important: Always wrap your application with ThemeProvider from @nodeblocks/frontend-theme. Components may not render correctly without it. See our Theming Guide for details.

Basic Usage

import { ThemeProvider } from '@nodeblocks/frontend-theme';
import { Navbar } from '@nodeblocks/frontend-navbar-block';
import { SignIn } from '@nodeblocks/frontend-signin-block';

function App() {
  return (
    <ThemeProvider>
      <Navbar
        leftContent={<Navbar.Logo src="/logo.png" alt="Logo" />}
        centerContent={
          <div style={{ display: 'flex', gap: 16 }}>
            <Navbar.Link href="#home">Home</Navbar.Link>
            <Navbar.Link href="#products">Products</Navbar.Link>
          </div>
        }
        rightContent={<Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>}
        sx={{ backgroundColor: 'white', boxShadow: 1 }}>
        <Navbar.Left />
        <Navbar.Center />
        <Navbar.Right />
      </Navbar>
      
      <SignIn
        onSubmit={(formData) => console.log('Login:', formData)}
        onChange={(setError, getValues, clearErrors) => {
          const values = getValues();
          if (!values.email) {
            setError('email', { message: 'Email is required', type: 'required' });
          } else {
            clearErrors('email');
          }
        }}
        signupUrl="#signup"
        resetPasswordUrl="#reset-password">
        <SignIn.SignInTitle>Welcome Back</SignIn.SignInTitle>
        <SignIn.EmailField label="Email" placeholder="Enter your email" />
        <SignIn.PasswordField label="Password" placeholder="Enter your password" />
        <SignIn.SignInButton>Sign In</SignIn.SignInButton>
      </SignIn>
    </ThemeProvider>
  );
}

💡 Usage Examples

# Theme package (required)
npm install @nodeblocks/frontend-theme

# Components for E-commerce example
npm install @nodeblocks/frontend-navbar-block@0.2.0
npm install @nodeblocks/frontend-footer-block@0.2.0
npm install @nodeblocks/frontend-list-products-grid-block@0.2.0

🏪 E-commerce Application

import { ThemeProvider } from '@nodeblocks/frontend-theme';
import { Footer } from '@nodeblocks/frontend-footer-block';
import { ListProductsGrid } from '@nodeblocks/frontend-list-products-grid-block';
import { Navbar } from '@nodeblocks/frontend-navbar-block';

export default function EcommerceApp() {
  const products = [
    {
      title: 'Premium Headphones',
      subtitle: 'High-quality audio',
      imageUrl: '/headphones.jpg',
      chips: [{ label: 'New' }],
      tags: [{ icon: 'shopping_bag' as const, label: 'Electronics' }],
      linkProps: {
        href: '/products/1',
        onNavigate: () => console.log('View product'),
      },
    },
  ];

  return (
    <ThemeProvider>
      <Navbar
        leftContent={<Navbar.Logo src="/logo.png" alt="Store" style={{ height: 32 }} />}
        centerContent={
          <div style={{ display: 'flex', gap: 16 }}>
            <Navbar.Link href="#home">Home</Navbar.Link>
            <Navbar.Link href="#products">Products</Navbar.Link>
          </div>
        }
        rightContent={<Navbar.ButtonLink href="#cart">Cart (0)</Navbar.ButtonLink>}
        sx={{ backgroundColor: 'white', boxShadow: 1 }}>
        <Navbar.Left />
        <Navbar.Center />
        <Navbar.Right />
      </Navbar>

      <main style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', backgroundColor: 'white' }}>
        <ListProductsGrid listProductsGridTitle="Featured Products" subtitle="Latest Collection">
          <ListProductsGrid.Title />
          <ListProductsGrid.Items>
            {products.map(product => (
              <ListProductsGrid.Items.GridCard key={product.title} {...product} />
            ))}
          </ListProductsGrid.Items>
        </ListProductsGrid>

        <Footer
          logoSrc="/logo.png"
          copyright="© 2025 Nodeblocks. All rights reserved."
          content={<div>Contact us at info@example.com</div>}
          sx={{ marginTop: 'auto' }}>
          <Footer.Logo />
          <Footer.Content />
          <Footer.Copyright />
        </Footer>
      </main>
    </ThemeProvider>
  );
}

🏢 Enterprise Dashboard

npm install @nodeblocks/frontend-side-navigation-block@0.3.0
npm install @nodeblocks/frontend-list-users-block@0.2.0
npm install @nodeblocks/frontend-filter-search-panel-block@0.3.0

import { useState } from 'react';
import { ThemeProvider } from '@nodeblocks/frontend-theme';
import { FilterSearchPanel } from '@nodeblocks/frontend-filter-search-panel-block';
import { ListUsers } from '@nodeblocks/frontend-list-users-block';
import { SideNavigation } from '@nodeblocks/frontend-side-navigation-block';

export default function DashboardApp() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <ThemeProvider>
      <div style={{ display: 'flex', backgroundColor: 'white', height: '100vh', alignItems: 'start' }}>
        <SideNavigation
          isFloating={true}
          isMenuOpen={isMenuOpen}
          setIsMenuOpen={setIsMenuOpen}
          links={[
            { text: 'Dashboard', href: '/dashboard' },
            { text: 'Users', href: '/users' },
            { text: 'Settings', href: '/settings' },
          ]}
          sx={{ height: '100vh', width: '200px' }}
        />

        <main style={{ flex: 1, paddingLeft: '20px', paddingRight: '20px' }}>
          <FilterSearchPanel
            onSearch={({ search }) => console.log('Search:', search)}
            filters={[
              { label: 'Active', key: 'status-active', groupName: 'Status' },
              { label: 'Admin', key: 'role-admin', groupName: 'Role' },
            ]}
            onClickRemoveFilter={(filter) => console.log('Remove filter:', filter)}
            searchPlaceholder="Search users..."
          />

          <ListUsers
            listUsersTitle="Team Members"
            labels={{
              emptyStateMessage: 'No users found',
              headerRow: {
                name: 'Name',
                status: 'Status',
                createdAt: 'Created At',
              },
              cellData: {
                statusInUse: 'Active',
                statusNotInUse: 'Inactive',
              },
            }}
            data={[
              { id: '1', name: 'John Doe', status: 'active', createdAt: '2025-01-15T10:30:00Z' },
              { id: '2', name: 'Jane Smith', status: 'inactive', createdAt: '2025-01-20T09:15:00Z' },
            ]}
            rowHref={(row) => `#users/${row.id}`}
            onNavigate={(path) => console.log('Navigate to:', path)}>
            <ListUsers.Header>
              <ListUsers.Title />
            </ListUsers.Header>
            <ListUsers.Content />
          </ListUsers>
        </main>
      </div>
    </ThemeProvider>
  );
}

🔗 Integration with Domain Apps

Frontend Blocks can work seamlessly with Nodeblocks Domain Apps to provide complete application solutions:

Blocks provide: Visual components and user interfaces
Domain Apps provide: Business logic and state management
Together they create: Complete, production-ready applications

📈 Benefits

⚡ Speed

Reduce development time by 70%
Skip the tedious UI development
Focus on business logic

🎨 Quality

Production-tested components
Consistent design language
Professional appearance

🔧 Flexibility

Mix and match components
Customize to your needs
Extend with your own blocks

💰 Cost Effective

Lower development costs
Faster time to market
Reduced maintenance overhead

Built with ❤️ by the Nodeblocks team at Basal

📋 Table of Contents​

🎯 What Are Frontend Blocks?​

🏗️ Component Categories​

🌟 Common Components​

👥 User Management​

🏢 Organization Management​

📦 Product Management​

🛒 Order Management​

✨ Key Features​

🎨 Design System Integration​

🔧 Developer Experience​

🚀 Performance​

📱 Accessibility​

🚀 Getting Started​

Installation​

Basic Usage​

💡 Usage Examples​

🏪 E-commerce Application​

🏢 Enterprise Dashboard​

🔗 Integration with Domain Apps​

📈 Benefits​

⚡ Speed​

🎨 Quality​

🔧 Flexibility​

💰 Cost Effective​