🧩 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

Component Installation

Each component is installed individually for maximum flexibility:

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

Basic Usage

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

function App() {
  return (
    <div>
      <Navbar
        leftContent={<img src="/logo.png" alt="Logo" />}
        centerContent={
          <nav>
            <a href="/home">Home</a>
            <a href="/products">Products</a>
          </nav>
        }
        rightContent={
          <button>Login</button>
        }
      />
      
      <SignIn
        onSubmit={(formData) => console.log('Login:', formData)}
        onChange={(setError, getValues, clearErrors) => {
          const values = getValues();
          if (!values.email) {
            setError('email', {message: 'Email is required'});
          }
        }}
      />
    </div>
  );
}

💡 Usage Examples

npm install @nodeblocks/frontend-navbar-block
npm install @nodeblocks/frontend-signin-block
npm install @nodeblocks/frontend-list-products-grid-block

🏪 E-commerce Application

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 (
    <div>
      <Navbar
        leftContent={<img src="/logo.png" alt="Store" />}
        centerContent={
          <nav>
            <a href="/home">Home</a>
            <a href="/products">Products</a>
          </nav>
        }
        rightContent={<button>Cart (0)</button>}
      />
      <main style={{display: 'flex', flexDirection: 'column', minHeight: '100vh', backgroundColor: 'white'}}>
        <ListProductsGrid listProductsGridTitle="Featured Products" subtitle="Latest Collection">
          <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>Footer content</div>}
          style={{marginTop: 'auto'}}
        />
      </main>
    </div>
  );
}

🏢 Enterprise Dashboard

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

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';
import {useState} from 'react';

export default function EcommerceApp() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  return (
    <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'},
        ]}
        style={{
          height: '100vh',
          width: '200px',
        }}
      />
      <main style={{flex: 1, paddingLeft: '20px', paddingRight: '20px'}}>
        <FilterSearchPanel
          onSearch={query => console.log('Search:', query)}
          filters={[
            {
              groupName: 'Status',
              key: 'status',
              label: 'Status',
            },
            {
              groupName: 'Role',
              key: 'role',
              label: 'Role',
            },
          ]}
        />

        <ListUsers
          listUsersTitle="Users"
          labels={{
            emptyStateMessage: 'No users found',
            headerRow: {
              createdAt: 'Created At',
              name: 'Name',
              status: 'Status',
            },
            cellData: {
              statusInUse: 'In Use',
              statusNotInUse: 'Not In Use',
            },
          }}
          data={[
            {
              createdAt: '2021-01-01',
              name: 'John Doe',
              status: 'In Use',
              id: '1',
            },
            {
              createdAt: '2021-01-01',
              name: 'Jane Doe',
              status: 'Not In Use',
              id: '2',
            },
          ]}
          onSelect={user => console.log('Selected user:', user)}
        />
      </main>
    </div>
  );
}

🔗 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​

Component Installation​

Basic Usage​

💡 Usage Examples​

🏪 E-commerce Application​

🏢 Enterprise Dashboard​

🔗 Integration with Domain Apps​

📈 Benefits​

⚡ Speed​

🎨 Quality​

🔧 Flexibility​

💰 Cost Effective​