@generatedpixel/gp-blocks

Enterprise Reusable UI Blocks & Dynamic JSON Schema Engine for Angular, built natively on gp-ui, gp-ui-theme, gp-ui-icons, and gp-css.

@generatedpixel/gp-blocks delivers over 50 pre-built, production-ready enterprise UI block components and a metadata-driven Dynamic JSON Rendering Engine for Angular 18+.

Features

• 50+ Pre-built Reusable Blocks across 10 categories:
  • Application Layouts (24):
    • Multi-Column: GpLayoutThreeColumnFluid, GpLayoutTwoColumnSplit, GpLayoutThreeColumnWorkspace, GpLayoutFourColumnGrid.
    • Sidebars: GpLayoutSidebarDark, GpLayoutSidebarLight, GpLayoutSidebarMini, GpLayoutSidebarDual, GpLayoutSidebarFloating, GpLayoutSidebarGradient, GpLayoutSidebarHeaderOver, GpLayoutSidebarWorkspace, GpLayoutSidebarSearchTree, GpLayoutSidebarPinnedStatus, GpLayoutSidebarOffcanvas, GpLayoutSidebarMinimal, GpLayoutSidebarStepper, GpLayoutSidebarAccordion.
    • Stacked: GpLayoutStackedClassic, GpLayoutStackedSubnavTabs, GpLayoutStackedHeroBanner, GpLayoutStackedFloatingCard, GpLayoutStackedStickyActionBar, GpLayoutStackedBottomDock.
  • Dashboards (6): SaaS Overview, Ecommerce, Analytics, Finance, Project Management, Operations.
  • Settings & Details (9): User Profile, Security/2FA, Billing & Subscriptions, Notifications, Team Roles, API Keys, Danger Zone, Customer Overview, Order Summary.
  • Headings & Page Headers (6): Page headers with action bars, Search & filter headers, Tabbed section headers, KPI stat headers, Profile banners, Compact breadcrumb headers.
  • Data Displays (6): KPI Stat Cards, Key-Value Description Lists, Timeline Activity Streams, Meter Groups, Badge Clusters, Stats Counters.
  • Lists & Feeds (6): Data Grids with sort/filter/pagination, Stacked Feeds, Card Grids, Transaction Ledgers, User Directories, File Attachment Downloads.
  • Forms (6): Multi-Step Stepper Wizards, Split Auth (Login/Register), User Profile Forms, Checkout & Billing, Contact Feedback, Advanced Filter Builders.
  • Feedbacks & Modals (5): Alert Banners, Empty States, Confirmation Dialogs, Toast Status triggers, Rating & Review prompts.
  • Navigations & Overlays (6): Responsive Topbars, Command Palette modal, Slide-Over Drawers, Dropdown Action menus, Mega Menus, Tab Navigation.
  • Basic Pages (6): 404 Not Found, 500 Server Error, 403 Forbidden, Maintenance Mode, Coming Soon, Success / Confirmation.
• Dynamic JSON Metadata Engine:
  • GpDynamicBlockRenderer: Render complete layouts, headers, and views declaratively from JSON definitions.
  • GpDynamicForm: Render reactive forms with real-time validation, responsive column grids, and custom control mappings from simple JSON metadata.
  • GpDynamicHeader & GpDynamicStats: Dynamic headers with action callbacks and stat summary tiles.
• 100% Configurable & Localizable:
  • Built-in internationalization tokens, translatable labels, RTL/LTR support, and customizable theming.

Installation

npm install @generatedpixel/gp-blocks @generatedpixel/gp-ui @generatedpixel/gp-ui-theme @generatedpixel/gp-ui-icons @generatedpixel/gp-css

Quick Start

1. Using Pre-built Layouts & Blocks

import { Component } from '@angular/core';
import { GpLayoutSidebarDark, GpDashboardSaasOverview } from '@generatedpixel/gp-blocks';

@Component({
  selector: 'app-admin-page',
  standalone: true,
  imports: [GpLayoutSidebarDark, GpDashboardSaasOverview],
  template: `
    <gp-layout-sidebar-dark>
      <gp-dashboard-saas-overview />
    </gp-layout-sidebar-dark>
  `
})
export class AdminPageComponent {}

2. Using Dynamic JSON Form Engine

import { Component } from '@angular/core';
import { GpDynamicForm, GpFormSchema } from '@generatedpixel/gp-blocks';

@Component({
  selector: 'app-dynamic-registration',
  standalone: true,
  imports: [GpDynamicForm],
  template: `
    <div class="max-w-2xl mx-auto p-6">
      <gp-dynamic-form [schema]="registrationSchema" (formSubmit)="handleFormSubmit($event)" />
    </div>
  `
})
export class DynamicRegistrationComponent {
  registrationSchema: GpFormSchema = {
    title: 'Create Account',
    description: 'Enter your credentials to get started with Generated Pixel.',
    fields: [
      { name: 'fullName', type: 'text', label: 'Full Name', required: true, colSpan: 6 },
      { name: 'email', type: 'email', label: 'Email Address', required: true, colSpan: 6 },
      {
        name: 'plan',
        type: 'select',
        label: 'Subscription Tier',
        options: [
          { label: 'Developer (Free)', value: 'free' },
          { label: 'Pro Team ($49/mo)', value: 'pro' },
          { label: 'Enterprise', value: 'enterprise' }
        ],
        colSpan: 12
      },
      { name: 'terms', type: 'checkbox', label: 'I agree to the terms and privacy policy', required: true, colSpan: 12 }
    ],
    submitLabel: 'Register Workspace'
  };

  handleFormSubmit(data: any): void {
    console.log('Submitted registration:', data);
  }
}

3. Using Dynamic Block Renderer

import { Component } from '@angular/core';
import { GpDynamicBlockRenderer, GpBlockSchema } from '@generatedpixel/gp-blocks';

@Component({
  selector: 'app-dynamic-view',
  standalone: true,
  imports: [GpDynamicBlockRenderer],
  template: ` <gp-dynamic-block-renderer [schema]="pageBlockSchema" /> `
})
export class DynamicViewComponent {
  pageBlockSchema: GpBlockSchema = {
    type: 'dashboard',
    variant: 'saas-overview',
    title: 'Platform Analytics',
    options: {
      refreshInterval: 30000
    }
  };
}

License

MIT © Generated Pixel