Page Structure
TopBar
Global navigation bar with responsive menu and user dropdown
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
SectionHeading
Section headings with description, badge, divider, and automatic spacing
NavCardGrid
Navigation card grid with icons and descriptions
FormFooter
Unified footer for forms with 3-zone layout and formId pattern
Divider
Visual separator with solid, dashed, and gradient variants
Prose
Styled body text paragraphs with consistent typography
List
Bullet, numbered, and definition lists with consistent styling
ErrorCard
Unified error display for 404, 403, error boundaries, and custom errors
ChildContent
Visual indicator for conditionally revealed dependent fields (left-border)
SaveStatus
Subtle dot indicator for auto-save state with tooltip feedback
Navigation & Scope
HeaderScopePicker
Top bar scope navigation with logo and searchable Command picker
ScopeJump
Command-style scope navigation between Home, Programs, and Projects
LeftNav
Sidebar navigation with groups, nesting, badges, and collapsible mode
WizardNav
Step progress sidebar for multi-step processes
CommandSearch
Global command palette with keyboard shortcuts, search, and grouped actions
TrashToggle
Toggle button for switching between active and trashed items view
User & Identity
UserAvatar
Avatar with size variants (sm/md/lg/xl) and status indicators
UserSheet
User profile components with stats, activity heatmap, and actions
UserSegments
Segment assignment component for user management with permission-aware editing
AvatarPicker
Dialog-based avatar selection with circular crop and upload
Overlays & Panels
PropertyPanel
Versatile right-side panel with shift and overlay modes for editing workflows
PreviewPanel
Stacked light/dark mode preview for theme customization
DeleteConfirmDialog
Confirmation dialog for delete operations with simple and strong variants
ResizablePanel
Drag-to-resize side panels with localStorage persistence and shared width sync
TimelinePanel
Togglable timeline sidebar for hub pages with URL bookmark support
Pickers & Selection
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
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
CardSwitch
Card-based binary switch with icon, description, and expandable content
AudiencePicker
Access level selector with audience segmentation options
DittoSingleSelect
Single selection dropdown with optional grouping, search, and icons
DittoMultiSelect
Multi-selection dropdown with optional grouping, search, and checkboxes
TagSelect
Inline tag display with grouped popover selection and remove buttons
TokenPicker
Select dynamic tokens for template strings with autocomplete support
ColumnPicker
Multi-select columns with drag-and-drop reordering for data views
FilterBuilder
Build complex filter expressions with AND/OR groups and type-aware operators
ViewFilterSheet
Combined view and filter management with saved views and filter presets
DeviceToggle
Device width selector for preview modes (mobile, tablet, desktop)
MessageConfig
Configure notification messages with template selection or custom composition
SignaturePad
Digital signature capture with drawing canvas and typed input
SliderField
Enhanced slider with value tooltip, ticks, labels, and color segments
NpsScaleInput
0-10 NPS score selector with ARIA radiogroup and keyboard navigation
Files & Media
FileUploader
Drag-and-drop file upload with progress and API integration
FileList
Display uploaded files with metadata and actions
ImageSourceEditor
Image management with upload, reordering, gallery, and carousel display
Media
Video/audio recording, playback, and transcription components
HeroBanner
Wide banner with image or color background and text overlay
PrettyCard
Visual navigation card with image or color background
PrettyDesigner
Unified visual customization for programs, projects, and resources
MediaPreviewDialog
Lightbox-style dialog for previewing images, videos, audio, and documents
AnnotationOverlay
Display clickable hotspots with tooltips over images and screenshots
Rich Content
Editor
Unified TipTap editor with configurable formatting, tokens, mentions, and images
Discussion
Full-featured comment threads with voting, reactions, and moderation
ChatBar
Chat-style input bar for feedback and agent communication
TimelineCard
Individual timeline event card with icon, density modes, and actions
ConversationalQA
Chat-style interface for AI clarifying questions
AIInsightsTab
AI-powered analytics with summary, themes, recommendations, and Q&A
ImpactScoreDisplay
Visual display of insight impact scores with severity levels and breakdown
AI Context
Translations
Feedback & Loading
Utility
Helpers
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';