🧩 Nodeblocks Frontend Blocks

The Complete Component Library for Modern Business Applications ⚡

Welcome to the Nodeblocks Frontend Blocks - a comprehensive collection of 42 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

Blocks are grouped by UI job (what you build on screen), not by backend domain. Use the sidebar categories to browse.

Component	Description
navbar	Main navigation bar with responsive design
side-navigation	Collapsible sidebar navigation
breadcrumb	Navigation breadcrumbs for page hierarchy
footer	Professional footer component

🔐 Authentication

Component	Description
sign-in	User authentication and login
sign-up	New user registration
reset-password	Password recovery functionality
accept-invitation	Accept organization invitation flow
change-email	Change user email flow
change-password	Change user password flow

📋 Lists & tables

Component	Description
list-users	User management and listing
list-organizations	Organization listing and management
list-invites	Organization invitation management
list-products-table	Tabular product listing
list-products-grid	Grid-based product display
list-order	Order listing and management
list-order-table	Tabular order management

🔍 Detail views

Component	Description
view-user	User profile details
view-organization	Organization details and information
view-product	Detailed product information display
view-order	Order details and information
view-basic-information	Read-only basic information display
view-attribute-selection	Read-only attribute selection display

📝 Forms & wizards

Component	Description
create-organization	Organization creation workflow
create-product	Product creation interface
edit-product	Product edit workflow
basic-information	User profile and information forms
edit-basic-information	Edit basic information workflow
attribute-selection	Product attribute selection
edit-attribute-selection	Edit product attributes workflow

🔎 Search & filters

Component	Description
filter-search-panel	Advanced search and filtering
filter-list	Filterable list components
search-by-chips	Tag-based search functionality

✨ Marketing & content

Component	Description
hero	Eye-catching hero sections
faq	Frequently asked questions section
merits	Achievement and merit displays
how-to-use	User guide and instruction components

💬 Communication

Component	Description
chat-conversation	Real-time chat interface
chat-conversation-list	Chat conversation management

⚙️ System & feedback

Component	Description
settings	Application settings interface
error-block	Beautiful error message displays
notifications	In-app notifications

✨ 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

To use these components in your local development environment, import them as follows:

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

Try the interactive live demonstration below to see them in action:

Live Editor

function Example() {
  const [data, setData] = React.useState({ email: '', password: '' });
  const [errors, setErrors] = React.useState({});

  const handleDataChange = (nextData, meta) => {
    const {[meta.name]: _removed, ...restErrors} = errors;
    let nextErrors = restErrors;

    if (meta.cause === 'blur') {
      nextErrors = {...restErrors};
      if (meta.name === 'email' && !nextData.email) nextErrors.email = 'Email is required.';
      if (meta.name === 'password' && !nextData.password) nextErrors.password = 'Password is required.';
    }

    setErrors(nextErrors);
    setData(nextData);
  };

  return (
    <div style={{ background: '#f5f5f5', borderRadius: 8, overflow: 'hidden' }}>
      <Navbar
        leftContent={<span style={{ fontWeight: 'bold', fontSize: '18px' }}>My App</span>}
        centerContent={
          <div style={{ display: 'flex', gap: '16px' }}>
            <a href="#home" style={{ textDecoration: 'none', color: '#333' }}>Home</a>
            <a href="#products" style={{ textDecoration: 'none', color: '#333' }}>Products</a>
          </div>
        }
        rightContent={
          <button style={{ padding: '6px 12px', borderRadius: 4, border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}>
            Login
          </button>
        }
      />
      
      <div style={{ padding: '20px', maxWidth: 450, margin: '0 auto' }}>
        <SignIn
          data={data}
          errors={errors}
          onDataChange={handleDataChange}
        />
      </div>
    </div>
  );
}

Result

💡 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

To use these components locally, install and import them into your React application:

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

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

Interactive live demonstration:

Live Editor

function Example() {
  const products = [
    {
      title: 'Premium Headphones',
      subtitle: 'High-quality audio',
      imageUrl: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=640&q=80',
      chips: [{ label: 'New', color: 'warning' }],
      tags: [{ icon: <ShoppingCartOutlined fontSize="small" />, label: 'Electronics' }],
    },
    {
      title: 'Retro Bluetooth Speaker',
      subtitle: 'Classic design, modern sound',
      imageUrl: 'https://images.unsplash.com/photo-1545454675-3531b543be5d?auto=format&fit=crop&w=640&q=80',
      chips: [{ label: 'Hot', color: 'error' }],
      tags: [{ icon: <ShoppingCartOutlined fontSize="small" />, label: 'Audio' }],
    }
  ];

  return (
    <div style={{ background: '#f5f5f5', borderRadius: 8, overflow: 'hidden' }}>
      <Navbar
        leftContent={<span style={{ fontWeight: 'bold', fontSize: '18px' }}>E-Shop</span>}
        centerContent={
          <div style={{ display: 'flex', gap: '16px' }}>
            <a href="#home" style={{ textDecoration: 'none', color: '#333' }}>Home</a>
            <a href="#products" style={{ textDecoration: 'none', color: '#333' }}>Products</a>
          </div>
        }
        rightContent={<button style={{ padding: '6px 12px', borderRadius: 4, border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}>Cart (2)</button>}
      />
      <main style={{ display: 'flex', flexDirection: 'column', minHeight: '300px', backgroundColor: 'white', padding: '20px' }}>
        <ListProductsGrid layout="grid">
          <ListProductsGrid.Title listProductsGridTitle="Featured Products" subtitle="Latest Collection" />
          <ListProductsGrid.Items layout="grid">
            {products.map((product, idx) => (
              <ListProductsGrid.Items.GridCard key={idx} {...product} />
            ))}
          </ListProductsGrid.Items>
        </ListProductsGrid>
      </main>
      <Footer
        logoSrc="https://docs.nodeblocks.dev/img/icon-small.png"
        copyright="© 2025 Nodeblocks. All rights reserved."
        content={
          <div style={{ display: 'flex', gap: '16px' }}>
            <a href="#about" style={{ color: 'inherit', textDecoration: 'none' }}>About</a>
            <a href="#privacy" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          </div>
        }
      />
    </div>
  );
}

Result

🏢 Enterprise Dashboard

To use these components locally, install and import them into your React application:

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';

Interactive live demonstration:

Live Editor

function Example() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(true);
  const [filters, setFilters] = React.useState([
    { label: 'Active', key: 'status-active', groupName: 'Status' },
    { label: 'Admin', key: 'role-admin', groupName: 'Role' }
  ]);
  const [page, setPage] = React.useState(1);

  const handleRemoveFilter = (filter) => {
    setFilters(prev => prev.filter(f => f.key !== filter.key));
  };

  const handleSearch = ({ search }) => {
    if (search.trim()) {
      setFilters(prev => [...prev, { label: search, key: `search-${search}`, groupName: 'Search' }]);
    }
  };

  const users = [
    {
      id: '1',
      name: 'John Smith',
      createdAt: '2026-01-15T10:30:00Z',
      status: 'active'
    },
    {
      id: '2',
      name: 'Sarah Johnson',
      createdAt: '2026-01-14T09:15:00Z',
      status: 'inactive'
    }
  ];

  const labels = {
    emptyStateMessage: 'No users found',
    searchFieldPlaceholder: 'Search users...',
    headerRow: {
      name: 'Name',
      createdAt: 'Created At',
      status: 'Status',
    },
    cellData: {
      statusActive: 'Active',
      statusInactive: 'Inactive',
    },
  };

  return (
    <div style={{ display: 'flex', background: '#fafafa', borderRadius: 8, overflow: 'hidden', minHeight: '400px' }}>
      <SideNavigation
        isFloating={false}
        isMenuOpen={isMenuOpen}
        setIsMenuOpen={setIsMenuOpen}
        sx={{ minHeight: '570px' }}
        header={{ icon: HomeOutlined, text: 'Admin Portal', href: '#home' }}
        links={[
          { icon: DashboardOutlined, text: 'Dashboard', href: '#dashboard' },
          { icon: PersonOutlined, text: 'Users', href: '#users', isActive: true },
          { icon: SettingsOutlined, text: 'Settings', href: '#settings' },
        ]}
      />
      <main style={{ flex: 1, padding: '24px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <FilterSearchPanel
          filters={filters}
          onClickRemoveFilter={handleRemoveFilter}
          onClickFilterButton={() => alert('Filter settings opened')}
          onSearch={handleSearch}
          searchPlaceholder="Search users..."
          noFilterText="No active filters"
          filterLabel="Filters"
        >
          <FilterSearchPanel.SearchInput />
          <FilterSearchPanel.ActionGroup />
        </FilterSearchPanel>

        <ListUsers
          listUsersTitle="User Directory"
          labels={labels}
          data={users}
          pagination={{
            currentPage: page,
            totalPages: 1,
            onPageChange: setPage,
          }}
        />
      </main>
    </div>
  );
}

Result

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

🧭 Layout & navigation​

🔐 Authentication​

📋 Lists & tables​

🔍 Detail views​

📝 Forms & wizards​

🔎 Search & filters​

✨ Marketing & content​

💬 Communication​

⚙️ System & feedback​

✨ Key Features​

🎨 Design System Integration​

🔧 Developer Experience​

🚀 Performance​

📱 Accessibility​

🚀 Getting Started​

Component Installation​

Basic Usage​

💡 Usage Examples​

🏪 E-commerce Application​

🏢 Enterprise Dashboard​

📈 Benefits​

⚡ Speed​

🎨 Quality​

🔧 Flexibility​

💰 Cost Effective​

📋 Table of Contents

🎯 What Are Frontend Blocks?

🏗️ Component Categories

🧭 Layout & navigation

🔐 Authentication

📋 Lists & tables

🔍 Detail views

📝 Forms & wizards

🔎 Search & filters

✨ Marketing & content

💬 Communication

⚙️ System & feedback

✨ Key Features

🎨 Design System Integration

🔧 Developer Experience

🚀 Performance

📱 Accessibility

🚀 Getting Started

Component Installation

Basic Usage

💡 Usage Examples

🏪 E-commerce Application

🏢 Enterprise Dashboard

📈 Benefits

⚡ Speed

🎨 Quality

🔧 Flexibility

💰 Cost Effective