CentercodeDitto
DittoPorygonAPI

Block Components

Complex reusable compositions built from primitives and components for common UI patterns

Available Blocks

ListTableBlock
Lightweight server-rendered table with URL-based sorting/pagination
AdminListTableBlock
Full-featured CRUD table with drag-drop, grouping, search, and export
TimelineBlock
Chronological event display with search, filtering, and Load More
PrettyCardListBlock
Visual card grid for programs, projects, and resources
FormBlock
Consistent form system with validation, auto-save, and wizard support
DashboardBlock
Analytics dashboard with charts, metrics, and presentation mode
DynamicBlock
Dynamic participant-facing forms rendered from database schemas
ScheduleTimelineBlock
Interactive Gantt-style timeline for project phase schedules
BlockDesigner
Block designer components for building forms with search, drag-drop, and property editing
BlockTypes
How to create new block types using the ConfigEditor pattern for the form engine
ImportWizardBlock
Wizard-based data import with CSV/JSON auto-detection, validation, and inline editing
TaxonomyBlock
Generic Type → Item hierarchy pattern for User Segments, Traits, and more
ShellEditor
Email shell configuration with branding, colors, and custom HTML support
TemplateEditor
Message template editor with token insertion and rich text support
TriggerBuilder
When/If/Then trigger builder for integration automation rules
InsightList
Collaborative forum view for insights with voting, filtering, and pagination

Usage

Import block components from @/ui/blocks and use them to quickly scaffold complex UI patterns. Each block is fully customizable via props.

import { AdminListTableBlock, TimelineBlock } from '@/ui/blocks';