Component Overview

vyuh_cdx_ui exports a focused catalog of widget families, and the CDX UI docs also cover sibling UI packages such as cdx_panes, vyuh_table, cdx_kanban_view, cdx_tree_view, cdx_calendar_view, vyuh_timelines, vyuh_command_palette, and cdx_field_formatting. This page is the authoritative index — one row per component or package surface, grouped by family, with a one-line description and a link to the deep-dive page.

For background on the underlying contracts (theme tokens, overlay positioning, interaction model), see the Concepts section.

Theme

Type	Purpose	Page
CdxConfig	ThemeExtension — control radius, padding, height, hover/selected tint, status palette	Theming
createCdxTheme	Factory producing a ThemeData with all CDX component themes wired in	Theming
CdxConfig.of(context)	Scale-aware resolver for control sizing, gaps, icon size, and status palette	Density & Sizing

Buttons

Widget	Purpose	Page
Button.filled / .outlined / .text	Label + optional icon, async loading state, destructive variant	Buttons
Button.icon	Icon-only button — size: CdxControlSize.compact for dense rows, isActive for toggle bars	Buttons
Button.toggle	CDX on/off toggle control	Buttons
CdxMenuTrigger.split	Primary action joined to a caret menu — filled / outlined / text	Menus
CdxSegmentedTabs	Pill-style segmented selector with sliding indicator	Buttons
CdxDismissAffordance	Compact close glyph for chips, inputs, filter rows	Buttons
AlertsNotificationsButton	Bell icon with unread-count Badge	Buttons

Dialogs

Widget	Purpose	Page
DialogShell	Sized container — header + content + optional footer	Dialogs
ConfirmationDialog.info / .error / .confirm / .destructive	Standard four confirmation flavors	Dialogs
DialogHeader / DialogFooter / DialogAction / DialogMessage	Composable primitives for custom dialogs	Dialogs
DialogVariant	standard / primary / destructive / error chrome	Dialogs
MessageSeverity	error / warning / success / info for footer messages	Dialogs

Dropdowns & Menus

Widget	Purpose	Page
CdxMenu<T>	The one menu: commands, single-select and multi-select behind a field, button, icon, split, input, region or custom trigger.	Menus
CdxMenuFormField<T> / CdxMenuMultiFormField<T>	FormField bindings of a single-select and a multi-select menu	Menus
CdxMenuItem<T>	Sealed rows: option / action / submenu / header / divider / custom	Menus
CdxMenuTrigger.field / .fieldEnd / .button / .icon / .split / .input / .region / .custom	What opens the menu	Menus
CdxMenuSource	Items that load: once, per search, live, or built while open	Menus
CdxMenuController<T>	Open, close, toggle, refresh and select from code	Menus

Pickers

Widget	Purpose	Page
DateTimePicker	Editable text field + popover, DateTimePickerMode.date / .time / .dateTime, Today quick-jump	Pickers
CdxDateRangePicker	Range field with two-tap calendar popover	Pickers
DateTimePopover	Inline calendar + scroll-time popover (used by DateTimePicker)	Pickers
CdxDateRangePopover / CdxSingleDatePopover	Calendar grids with shadcn-style range visuals	Pickers
TimeScrollPicker	iOS-style hour + minute scroll columns with minuteStep	Pickers
TimeStepper	◀ 22 ▶ compact stepper with scroll-wheel + direct-edit	Pickers
DateTimeInputFormatter	TextInputFormatter enforcing DD/MM/YYYY HH:mm-style patterns	Pickers

Cards

Widget	Purpose	Page
SectionCard	Header (icon + title + trailing) + body, plus SectionCard.stateful (loading/error/empty)	Cards
CompactCard	Low-profile card for list items — leading / trailing / footer slots	Cards
HeroCard	Selectable visual tile with hero icon + title + selection check	Cards
StatTile / StatGrid	Compact metric tile and responsive metric grid	Cards

Badges, Chips & Banners

Widget	Purpose	Page
StatusBadge (+ .primary / .secondary / .tertiary / .error / .neutral / .tinted / .compact / .count)	Status pills with rectangle / pill / rounded shapes	Badges
StatusBadgeColorScheme	Sealed strategy — explicit / primary / secondary / tertiary / error / neutral / tinted	Badges
CdxChip	Filter / token chip — selected, onDeleted, labelBuilder, compact	Badges
Banner.warning / .critical / .success / .info / .neutral	Status banner card — BannerType palette	Badges
UnderConstructionOverlay + UnderConstructionController	App-wide "under construction" banner registry	Badges

Inputs

Widget	Purpose	Page
CdxSlider	Labeled slider with icon, top / trailing / none label position, size for density	Inputs
CdxRangeSlider	Two-thumb CdxSlider with a minimum gap between the thumbs	Inputs
RemarksField	Live-formatting rich text input via textf (bold, italic, highlight, code)	Inputs
RemarksText	Read-only renderer for the same markup	Inputs
FormattingToolbar	Bold / italic / highlight / underline / strike / code / superscript / subscript	Inputs
CdxFieldLabel	Standard form-field label with required asterisk + focus / error coloring	Inputs

State Views

Widget	Purpose	Page
AsyncView<T>	Future<T> / Stream<T> / direct data with loading / error / empty / content branches	State Views
ContentStateView<T>	A ContentState<T> (idle, loading, refreshing, ready, empty, partial, stale, offline, unauthorized, failed) with progress strip and banners	State Views
LoadingState	Centered CircularProgress + optional message	State Views
EmptyState	Icon + title + subtitle + optional action	State Views
ErrorState	Tappable error icon → diagnostics dialog (timestamp, type, message, stack)	State Views
RouteErrorView	Full-page error surface for GoRouter.errorBuilder	State Views

Layout & Navigation

Widget	Purpose	Page
MasterDetailScaffold + PanelPresentation.docked / .overlay / .auto	Responsive master-detail with resizable docked panel and barrier-overlay fallback	Layout
LazyIndexedStack / LazyIndexedStackBuilder	IndexedStack that builds children on first selection	Layout
RouteAwareTabController / RouteAwareTabBar / RouteAwareTabBarView	TabController synced to a go_router location	Layout
RouteAwareLazyIndexedStack	Lazy variant of the above, indexed by tab route	Layout
CdxStepper + CdxStep + CdxStepStatus	The steps of a flow as a segmented row, a rail or a compact bar; one tab stop when steps can be selected (not in compact), arrow keys, Home and End; a long segmented row fades its edge and pages with chevrons	Layout
Wizard + WizardController + WizardStep	Sidebar wizard on a CdxStepper rail (glyphs and titles, no status words), sequential mode, busy spinner and gating	Layout

Panels

Widget	Purpose	Page
CdxSlideInPanel.show	Slide-in panel from right / left / bottom with a built-in inner navigator	Panels
CdxPanelPage.push	Push a sub-page inside the panel (master/detail without nesting modals)	Panels
PanelDimension.size / .fraction / .clamped	Width / height sizing strategies	Panels
CdxSlideInPanelNavigation (extension on BuildContext)	dismissAndGo / dismissAndPush — close all panels, then route	Panels

Data Tables

Widget	Purpose	Page
TableWidget<T>	Generic table with pagination, resize, reorder, pinned columns, row selection, loading/error/empty states	Data Tables
TableColumn<T>	Text, badge, number, and custom column factories with header actions and menu item hooks	Data Tables
TableConfig / TableDensity / TableTheme	Grouped configuration, density presets, and theme overrides	Data Tables
HoverColumnResizer / TableResizeStore	Public resize primitives for custom table headers	Data Tables

Kanban Boards

Widget	Purpose	Page
KanbanQuery	Base filter, sort, search, columns, and segments for a board	Kanban Boards
KanbanColumnSpec / KanbanSegment	Server-side column filters and optional per-column toggle filters	Kanban Boards
KanbanDataSource<T>	Transport-agnostic fetch contract for all columns or one column page	Kanban Boards
KanbanController<T>	Raw MobX state, per-column pagination, refresh, and realtime reconciliation	Kanban Boards
KanbanBoard<T> / KanbanItemView	Board renderer and default item card	Kanban Boards

Tree Views

Widget	Purpose	Page
CdxTreeDataSource<T>	Loads roots and children from any backend	Tree Views
CdxTreeController<T>	Expansion, selection, loading, errors, and lazy/eager loading	Tree Views
CdxTreeItem<T>	Typed node model with title, value, id, and hasChildren metadata	Tree Views
CdxTreeView<T>	Hierarchy renderer with default or custom rows	Tree Views
CdxTreeSplitView<T>	Left tree plus arbitrary right-hand detail surface	Tree Views

Calendar Views

Widget	Purpose	Page
CalendarQuery	Date-field query shape with base filters, search, sort, and selected ranges	Calendar Views
CalendarDataSource<T>	Transport-agnostic date-bucket and row fetch contract	Calendar Views
CalendarController<T>	Selected range, buckets, rows, and calendar state	Calendar Views
CalendarShell<T>	Resizable calendar rail plus caller-provided detail builder	Calendar Views

Overlays

Helper	Purpose	Page
buildOverlayFollower	Viewport-aware CompositedTransformFollower for dropdown / picker overlays	Overlays
CdxMenuSurface	The one fill, hairline border and shadow every floating panel is drawn on	Overlays
CdxPopoverWidth / CdxMenuTriggerWidth	How wide a menu panel and its trigger are (trigger, content, fixed)	Menus
CdxStateLayer	Canonical interactive surface — hover / splash / selection / focus	Overlays
CdxInteractionOverlay	Token resolvers for hover / splash / highlight / mouse cursor / outlined border	Overlays

Timeline

Widget	Purpose	Page
ActivityTimeline	Activity feed on vyuh_timelines in three variants (Rail, Sections, Rows) with date grouping	Timeline
ActivityItem (sealed)	TaskActivityItem / MilestoneActivityItem / CustomActivityItem	Timeline
ActivityEntryContent	Title + actor + timestamp content layout (inline / card / compact)	Timeline
Timeline / TimelineEntry	Lower-level timeline package surface for custom activity feeds	Timeline
DotIndicator / IconIndicator / PendingIndicator / CustomIndicator	Marker primitives from vyuh_timelines	Timeline

Command Palette

Type	Purpose	Page
CommandPalettePlugin	Vyuh plugin that registers the global shortcut, owns providers, and opens the palette dialog	Command Palette
CommandPaletteConfig / PlatformLaunchShortcut	Launch shortcut, tab-cycle shortcut, and auth/session canOpen gate	Command Palette
SearchProvider / SearchTab / PaletteItem	Provider contract and result model	Command Palette
NavigationSearchProvider	Default provider for route/navigation entries with optional permission gates	Command Palette

Authorization

Widget	Purpose	Page
DisabledOverlay	Wrap any widget to render dimmed + non-interactive with optional tooltip	Authorization
LockedSurface	Full-bleed "Access Restricted" placeholder for denied routes / sections	Authorization
RedactedValue	Inline •••• mask used in field-level redaction	Authorization

Electronic Signatures

Widget	Purpose	Page
SignatureCeremony	Slot shell that lays out the parts of one signing, inline or in a dialog	Electronic Signatures
SignatureSubject / SignerChain / SignatureMeaning	What is signed, who signs in which order, and what the signature means	Electronic Signatures
SignatureCredentials / SignatureReason	Re-authentication fields and the audit remark, as dumb fields	Electronic Signatures
SignatureReceipt	The record of a completed signature, with a copy button	Electronic Signatures
SignatureStyle	One style object per part, resolved from the theme	Electronic Signatures

Filter / Animation / Keys / Progress

Widget	Purpose	Page
FilterBar (alias ChoiceChipGroup)	Single-select chip strip with optional leading icon + SemanticKey	Filter & Animation
Beacon	Pulsing ring or glowing dot for attention / pending states	Filter & Animation
SemanticKey	Dot-separated ValueKey factory for automation / testing / analytics	Filter & Animation
CircularProgress / LineProgress	Themed determinate / indeterminate progress	Filter & Animation

Quick import reference

Everything is exported from a single barrel:

import 'package:vyuh_cdx_ui/vyuh_cdx_ui.dart';

A lighter cards sub-export covers SectionCard / CompactCard / HeroCard without pulling the rest of the catalog:

import 'package:vyuh_cdx_ui/cards.dart';

When you already import the main barrel and only need SectionCard, use a show combinator to avoid duplicate card names in examples:

import 'package:vyuh_cdx_ui/cards.dart' show SectionCard;

Sibling packages have their own barrels:

import 'package:cdx_panes/cdx_panes.dart';
import 'package:vyuh_table/vyuh_table.dart';
import 'package:cdx_kanban_view/cdx_kanban_view.dart';
import 'package:cdx_tree_view/cdx_tree_view.dart';
import 'package:cdx_calendar_view/cdx_calendar_view.dart';
import 'package:vyuh_timelines/vyuh_timelines.dart';
import 'package:vyuh_command_palette/vyuh_command_palette.dart';
import 'package:cdx_field_formatting/cdx_field_formatting.dart';

Next steps

• Quick Start — compose primitives into a screen
• Theming — tune CdxConfig for your brand
• Overlays — how dropdowns, menus, and pickers share one positioning + interaction layer