Blocks Overview

BuildGrid UI provides 13 powerful blocks - complex, composed components that solve specific use cases out of the box. These blocks combine multiple components to provide advanced functionality for common application patterns.

Quick Stats

13

Blocks

Production

Ready

Advanced

Features

What are Blocks?

Blocks are complex, composed components that combine multiple basic components to solve specific use cases. Unlike basic components, blocks provide:

• Advanced Functionality - Rich features like sorting, filtering, drag-and-drop
• Complete Solutions - Ready-to-use components for common patterns
• Customizable - Flexible APIs for different use cases
• Production Ready - Battle-tested in real applications

Available Blocks

Data Management

Powerful components for handling and displaying data.

Data Table

Advanced table with sorting, filtering, pagination, and export

datatableadvanced

Paginated Items

Pagination wrapper for any content type with controls

paginationdata

Pagination Controls

Customizable pagination interface with multiple styles

paginationnavigation

Navigable List

Keyboard-navigable list with selection and actions

navigationlistkeyboard

Content & Media

Rich components for content creation and media handling.

HTML Text Editor

Rich text editor with formatting toolbar and HTML output

editorrich-texthtml

File Upload Dropzone

Drag-and-drop file upload with progress and validation

uploadfilesdrag-drop

Lazy Image Gallery

Performance-optimized image gallery with lazy loading

mediagalleryperformance

Empty Message

Elegant empty state component with actions and illustrations

feedbackstateempty

Layout & Navigation

Advanced layout components for complex application structures.

Bento Grid

Flexible masonry-style grid layout system

layoutgridmasonry

Sidebar

Flexible sidebar with multiple directions and responsive behavior

layoutnavigationresponsive

Month Navigator

Calendar navigation for month-based data and events

calendarnavigationdate

Help Carousel

Interactive tutorial and help carousel with steps

helptutorialonboarding

Block vs Component

Understanding when to use blocks vs components:

Components	Blocks
Basic UI elements	Complex composed solutions
Single responsibility	Multiple features combined
Highly reusable	Specific use cases
Building blocks	Complete solutions
Examples: Button, Input	Examples: Data Table, File Upload

Getting Started with Blocks

Blocks are imported the same way as components:

npm install buildgrid-ui

import { DataTable, FileUploadDropzone, HTMLTextEditor } from 'buildgrid-ui'

function MyApp() {
  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
  ]

  const columns = [
    { key: 'name', title: 'Name', sortable: true },
    { key: 'email', title: 'Email', sortable: true }
  ]

  return (
    <div>
      {/* Advanced data table with sorting and filtering */}
      <DataTable 
        data={data} 
        columns={columns} 
        searchFields={['name', 'email']}
      />
      
      {/* File upload with drag and drop */}
      <FileUploadDropzone 
        onFilesSelected={(files) => console.log(files)}
        accept="image/*"
        maxFiles={5}
      />
      
      {/* Rich text editor */}
      <HTMLTextEditor 
        onChange={(html) => console.log(html)}
        placeholder="Start writing..."
      />
    </div>
  )
}

Advanced Features

Blocks come with advanced features out of the box:

Data Table

• Sorting - Click column headers to sort
• Filtering - Built-in filter dropdowns
• Search - Global search across specified fields
• Pagination - Automatic pagination for large datasets
• Selection - Row selection with bulk actions
• Export - CSV export functionality
• Custom Renderers - Custom cell rendering

File Upload Dropzone

• Drag & Drop - Intuitive file dropping
• Progress Tracking - Upload progress indicators
• File Validation - Type and size validation
• Preview - Image preview before upload
• Multiple Files - Support for multiple file selection
• Error Handling - Comprehensive error states

HTML Text Editor

• Rich Formatting - Bold, italic, lists, links
• Toolbar - Customizable formatting toolbar
• HTML Output - Clean HTML generation
• Sanitization - Built-in XSS protection
• Keyboard Shortcuts - Standard editor shortcuts
• Responsive - Works on all screen sizes

Customization

All blocks are highly customizable:

// Customize Data Table
<DataTable
  data={data}
  columns={columns}
  pageSize={20}
  tools={{
    search: { placeholder: 'Search users...' },
    export: { label: 'Export CSV' }
  }}
  className="custom-table"
/>

// Customize File Upload
<FileUploadDropzone
  maxFiles={10}
  maxSize={5 * 1024 * 1024} // 5MB
  accept="image/*,application/pdf"
  onFilesSelected={handleFiles}
  className="custom-dropzone"
/>

Performance

Blocks are optimized for performance:

• Lazy Loading - Components load only when needed
• Virtual Scrolling - Efficient rendering of large lists
• Memoization - Optimized re-rendering
• Bundle Splitting - Import only what you use
• Accessibility - Full keyboard and screen reader support

Need Help?

• 📖 Browse individual block documentation in the sidebar
• 🎨 View live examples in our Storybook
• 💬 Join discussions on GitHub
• 🐛 Report issues on GitHub Issues