Vyuh CDX UI

Design System Primitives

Flutter design system for the Vyuh CDX suite. A cohesive catalog of widgets — dialogs, dropdowns, pickers, cards, badges, timelines, sliders, and state views — backed by a single CdxConfig theme extension and a unified overlay/interaction layer.

Why CDX UI?

Design System Primitives

A cohesive catalog of Flutter widgets — dialogs, dropdowns, pickers, cards, badges, sliders, timelines, and state views — composed by every Vyuh CDX package.

CdxConfig Theme Extension

A single ThemeExtension governs control radius, padding, control height, hover/selected tints, and a brightness-aware status palette (success/warning/critical/info/neutral) that Material 3 does not ship.

Unified Overlay Plumbing

CdxStateLayer + CdxInteractionOverlay + buildOverlayFollower share one hover/splash/selection contract and one viewport-aware positioning algorithm across every dropdown, menu, and picker.

CDX Stack Ready

Ships with Flutter-first primitives plus CDX integrations for formatting, timelines, routing helpers, Vyuh errors, and the broader Vyuh platform where package surfaces need it.

Getting Started

InstallationAdd the package to your project

Quick StartCompose your first CDX screen

ComponentsFull widget catalog

Core Concepts

• Theming — CdxConfig tokens, status palette, createCdxTheme
• Overlays — TapRegion groups, ModalBarrier, viewport-aware positioning
• Density & Sizing — controlHeight, compactControlSize, headerHeight, controlPadding

Component Families

Family	Components
Theme	CdxConfig, createCdxTheme, control/density/status tokens
Buttons	Button, SplitActionButton, CdxSegmentedTabs, CdxDismissAffordance, AlertsNotificationsButton
Dialogs	DialogShell, ConfirmationDialog, DialogHeader/Footer/Action/Message, DialogVariant
Dropdowns	Dropdown, MultiSelectDropdown, ActionMenu, DropdownTrigger, DropdownFormField
Pickers	DateTimePicker, CdxDateRangePicker, DateTimePopover, TimeScrollPicker, TimeStepper
Cards	SectionCard, CompactCard, HeroCard, StatTile, StatGrid
Badges & Banners	StatusBadge, CdxChip, Banner, UnderConstructionOverlay
Inputs	CdxSlider, RemarksField, RemarksText, FormattingToolbar, CdxFieldLabel
State Views	AsyncView, LoadingState, EmptyState, ErrorState, RouteErrorView
Layout & Navigation	MasterDetailScaffold, LazyIndexedStack, RouteAwareTabController, Wizard
Data Tables	TableWidget, TableColumn, TableConfig, TableDensity, TableTheme
Panels	CdxSlideInPanel, CdxPanelPage, CdxSlideInPanelNavigation
Timeline	ActivityTimeline, ActivityItem, Timeline, TimelineItem, indicators
Command Palette	CommandPalettePlugin, SearchProvider, SearchTab, PaletteItem, NavigationSearchProvider
Authorization	DisabledOverlay, LockedSurface, RedactedValue
Filter / Animation / Keys	FilterBar, ChoiceChipGroup, Beacon, SemanticKey
Progress	CircularProgress, LineProgress

Learn More

CDX UI Packagesvyuh_cdx_ui, cdx_panes, vyuh_table, vyuh_timelines, vyuh_command_palette, cdx_field_formattingComponent CatalogEvery public export, grouped by capabilityThemingCustomize CdxConfig to match your brand

At a glance

vyuh_cdx_ui is the visual foundation of the Vyuh CDX stack. Every other CDX visual package — vyuh_entity_system_ui, vyuh_dashboard_editor, vyuh_form_editor, vyuh_workflow_editor — composes the primitives in this package so an entity detail screen, a dashboard config panel, and a workflow inspector all read as parts of the same product.

You can also use vyuh_cdx_ui directly in app code. Current package assumptions are Flutter 3.32+, Dart 3.8+, MobX for state-holding widgets, go_router for route-aware navigation helpers, cdx_field_formatting for formatted field values, and vyuh_timelines for timeline layouts. The package also participates in the Vyuh ecosystem through vyuh_core / vyuh_errors.

import 'package:vyuh_cdx_ui/vyuh_cdx_ui.dart';

// Themed confirmation dialog
final confirm = await showDialog<bool>(
  context: context,
  builder: (_) => ConfirmationDialog.destructive(
    title: 'Delete area?',
    description: 'This action cannot be undone.',
    confirmLabel: 'Delete',
    onCancel: () => Navigator.of(context).pop(false),
    onConfirm: () => Navigator.of(context).pop(true),
  ),
);

// State-aware async wrapper
AsyncView<List<Area>>(
  future: api.getAll(),
  contentBuilder: (context, areas) => AreasList(areas: areas),
);

Packages in the CDX UI family

Package	Role
vyuh_cdx_ui	Design system primitives (this product)
cdx_panes	IDE-style workspace shell with docks, navigation rail, and pane tabs
vyuh_table	Theme-driven data table with resize, reorder, pinning, row states, and pagination
vyuh_timelines	Lower-level high-performance timeline primitive used by ActivityTimeline
vyuh_command_palette	Vyuh command palette plugin with pluggable search providers
cdx_field_formatting	FieldFormatter singleton + tag-based date/number/duration formatters
cdx_checklist	Checklist editor / runner / viewer that composes CDX UI, field formatting, and Vyuh form packages

See CDX UI Packages for full dependency direction.

Component Catalog

Every widget vyuh_cdx_ui exports, grouped by family. Visit the linked pages for full API and example snippets, or browse the Component Overview for the high-level catalog.

Coming next — a unified CDX demo app

A demo exercising every CDX package together is planned. Until then, follow the Quick Start to compose a screen from CDX UI primitives.