Page Construction
NavCardGrid
Navigation card grid with icons and descriptions
PrettyCard
Visual navigation card with image or color background
TimelineCard
Individual timeline event card with icon, density modes, and actions
PageHeader
Page title with subtitle, back button, badges, and actions
PageCard
Content wrapper with optional header and consistent padding
EmptyCard
Empty state display with icon, message, and recovery action
HeroBanner
Wide banner with image or color background and text overlay
DittoSheet
Opinionated Sheet wrapper with standard header/footer patterns
PropertyPanel
Persistent right-side editing panel for design tools
FormFooter
Unified footer for forms with 3-zone layout and formId pattern
SectionHeading
Section headings with description, badge, divider, and automatic spacing
Prose
Styled body text paragraphs with consistent typography
List
Bullet, numbered, and definition lists with consistent styling
Divider
Visual separator with solid, dashed, and gradient variants
Form Elements
RichTextEditor
TipTap-based rich text editor with markdown shortcuts and image support
DateRangePicker
Date range selection with optional time and constraints
CardPicker
Single-choice selection widget with icon cards, search, and categories
CardToggle
Visual toggle for selecting between 2-4 mutually exclusive options with icons
GroupedMultiSelect
Two-tier grouped multi-select with collapsible groups, icons, and checkmarks
ListToolbar
Responsive toolbar with search, filters, and actions for list views
ColorPicker
Color selection with spectrum picker, presets, and recent colors
IconPicker
Font Awesome icon selection with search and categories
ImagePicker
Image selection from upload, library, or stock photos
FileUploader
Drag-and-drop file upload with progress and API integration
FileList
Display uploaded files with metadata and actions
AudiencePicker
Access level selector with audience segmentation options
PrettyDesigner
Unified visual customization for programs, projects, and resources
PrettyDesignerLauncher
Button that opens PrettyDesigner in a dialog for space-constrained contexts
AIContextEditor
Markdown editor with preview and version history for AI context
AIContextTreePicker
Hierarchical picker for selecting AI context sources with token estimates
LoadingButton
Button with spinner state for async operations
SplitButton
Two-part button with action and settings dropdown
FieldHelpers
Utility functions for declarative form field definitions with reduced boilerplate
FieldPrimitives
Standalone field components for visual consistency outside FormBlock
Primitives
Low-level shadcn/ui building blocks: Button, Input, Dialog, Card. Use components above when possible.
Usage
Import custom components from @/ui/components and use them to build consistent, polished interfaces. All components follow the Centercode design system.
import { PageHeader, PageCard, SectionHeading, Prose, List, Divider } from '@/ui/components';