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, 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 — compact for dense rows, isActive for toggle bars	Buttons
Button.toggle	FilterChip-based on/off toggle	Buttons
SplitActionButton	Primary action joined to a caret menu — filled / outlined / text	Buttons
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
Dropdown<T>	Single-select with sync / async / query-driven options, optional search	Dropdowns
MultiSelectDropdown<T>	Multi-select panel with checkbox tiles, async search, "select shown" / "clear all"	Dropdowns
DropdownFormField<T>	FormField adapter for Dropdown	Dropdowns
ActionMenu	Sealed ActionMenuItem (action / divider / header) — three-dot menus, user menus	Dropdowns
ActionMenuItem.custom	Free-form embedded menu content such as sliders or inline controls	Dropdowns
DropdownTrigger.field / .button / .icon	Pre-built trigger variants	Dropdowns
DropdownController<T> / DropdownState<T>	Imperative API + observable snapshot	Dropdowns

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, compact density	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
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
Wizard + WizardController + WizardStep	Sidebar wizard with step indicators, sequential mode, busy 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

Overlays

Helper	Purpose	Page
buildOverlayFollower	Viewport-aware CompositedTransformFollower for dropdown / picker overlays	Overlays
buildOverlayMaterial	Standard Material shell for overlay content	Overlays
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	Wrapper around vyuh_timelines with date grouping, alternating mode, milestone band	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 / CustomIndicator	Indicator 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

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: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