Vyuh CDX

Appearance

CDX UI Packages ​

The CDX UI family is a set of focused packages. Apps install only the surfaces they need: core design primitives, workspace panes, tables, kanban boards, tree views, calendar views, timelines, command palette, field formatting, and optional checklist composition.

Authenticate with pub.vyuh.tech first

`vyuh_cdx_ui` is hosted on the private pub.vyuh.tech registry. Before running pub get, register a Bearer token issued by Vyuh Technologies based on your plan.

Run the one-time setup:

dart pub token add https://pub.vyuh.tech

Don't have a token yet? Email [email protected] to request one. For full details (CI, Docker, rotation, troubleshooting), see the Pub Token Setup guide.

Packages

Package Version Role
vyuh_cdx_ui1.51.4Design system primitives — buttons, dialogs, dropdowns, pickers, badges, sliders, panels, timelines, state views — and the `CdxConfig` theme extension.
cdx_panes1.5.2IDE-style `Workspace` shell with header bar, navigation rail, three resizable docks (left/right/bottom), pane tabs, status bar, and JSON-serializable layout state.
vyuh_table2.1.1Theme-driven data table with sorting/filtering affordances, resize, reorder, pinned columns, row selection, expansion rows, pagination, and density presets.
cdx_kanban_view0.2.2+1Column-aware kanban board with server-side `cdx_query` filters, per-column pagination, counts, segments, refresh APIs, and realtime reconciliation.
cdx_tree_view0.1.1+1Server-backed hierarchy selector with lazy/eager children, selection, custom rows, and `CdxTreeSplitView` for pairing the tree with any detail surface.
cdx_calendar_view0.1.2+1Query-driven calendar shell with year/month/week modes, date-range filtering, a resizable calendar rail, and a generic detail builder.
vyuh_timelines0.1.2+1Lower-level vertical timeline primitive with continuous spines, date grouping, milestone rows, alternating layouts, and custom indicators.
vyuh_command_palette1.4.2Vyuh command palette plugin — global shortcut, dialog, tabs, pluggable `SearchProvider`s, and a default navigation provider.
cdx_field_formatting1.4.5`FieldFormatter` singleton — tag-driven formatters for date/time/number/currency/duration/bytes/phone/bool/enum/JSON, with field-name aliases and regex patterns.
cdx_checklist0.3.1+1Adjacent checklist editor / runner package. It composes CDX UI and form packages rather than being a leaf design-system primitive.
  • vyuh_cdx_ui1.51.4

    Design system primitives — buttons, dialogs, dropdowns, pickers, badges, sliders, panels, timelines, state views — and the `CdxConfig` theme extension.

  • cdx_panes1.5.2

    IDE-style `Workspace` shell with header bar, navigation rail, three resizable docks (left/right/bottom), pane tabs, status bar, and JSON-serializable layout state.

  • vyuh_table2.1.1

    Theme-driven data table with sorting/filtering affordances, resize, reorder, pinned columns, row selection, expansion rows, pagination, and density presets.

  • cdx_kanban_view0.2.2+1

    Column-aware kanban board with server-side `cdx_query` filters, per-column pagination, counts, segments, refresh APIs, and realtime reconciliation.

  • cdx_tree_view0.1.1+1

    Server-backed hierarchy selector with lazy/eager children, selection, custom rows, and `CdxTreeSplitView` for pairing the tree with any detail surface.

  • cdx_calendar_view0.1.2+1

    Query-driven calendar shell with year/month/week modes, date-range filtering, a resizable calendar rail, and a generic detail builder.

  • vyuh_timelines0.1.2+1

    Lower-level vertical timeline primitive with continuous spines, date grouping, milestone rows, alternating layouts, and custom indicators.

  • vyuh_command_palette1.4.2

    Vyuh command palette plugin — global shortcut, dialog, tabs, pluggable `SearchProvider`s, and a default navigation provider.

  • cdx_field_formatting1.4.5

    `FieldFormatter` singleton — tag-driven formatters for date/time/number/currency/duration/bytes/phone/bool/enum/JSON, with field-name aliases and regex patterns.

  • cdx_checklist0.3.1+1

    Adjacent checklist editor / runner package. It composes CDX UI and form packages rather than being a leaf design-system primitive.

Transitive Dependencies

Dependency Purpose
mobx / flutter_mobxReactive state for dropdowns, async views, workspace controller, formatter settings
go_routerRoute-aware tab + indexed-stack helpers and panel-to-router navigation
fluentui_system_iconsIcon set used in built-in widgets (16 px convention)
reactive_formsReactive form adapters and CDX form-field integrations
textfLive inline rich-text formatting for `RemarksField` / `RemarksText`
vyuh_timelinesTimeline layout engine under `ActivityTimeline`
two_dimensional_scrollablesPinned-column table support in `vyuh_table` and hierarchy rendering in `cdx_tree_view`
intl / timezoneLocale-aware date/number/currency formatting in `cdx_field_formatting`
vyuh_core / vyuh_errorsVyuh platform plugin hooks and diagnostics integration where package surfaces need them
  • mobx / flutter_mobx

    Reactive state for dropdowns, async views, workspace controller, formatter settings

  • go_router

    Route-aware tab + indexed-stack helpers and panel-to-router navigation

  • fluentui_system_icons

    Icon set used in built-in widgets (16 px convention)

  • reactive_forms

    Reactive form adapters and CDX form-field integrations

  • textf

    Live inline rich-text formatting for `RemarksField` / `RemarksText`

  • vyuh_timelines

    Timeline layout engine under `ActivityTimeline`

  • two_dimensional_scrollables

    Pinned-column table support in `vyuh_table` and hierarchy rendering in `cdx_tree_view`

  • intl / timezone

    Locale-aware date/number/currency formatting in `cdx_field_formatting`

  • vyuh_core / vyuh_errors

    Vyuh platform plugin hooks and diagnostics integration where package surfaces need them

Dependency direction ​

CDX UI package dependency directionRepresentative CDX packages compose toward vyuh_cdx_ui and Flutter Material, while the command palette depends separately on vyuh_core and Flutter.vyuh_cdx_uiFlutter /Materialvyuh_timelinescdx_field_formattingcdx_panesvyuh_tablecdx_checklistuses CDX, formatting, formsvyuh_command_palettevyuh_core + Flutter
  • vyuh_cdx_ui is the main visual foundation and depends on cdx_field_formatting plus vyuh_timelines.
  • cdx_panes, vyuh_table, cdx_kanban_view, cdx_tree_view, and cdx_calendar_view compose vyuh_cdx_ui rather than being re-exported by it.
  • vyuh_timelines and cdx_field_formatting are lower-level packages that can be imported directly when an app needs only those capabilities.
  • vyuh_command_palette is a Vyuh plugin package with its own barrel and provider model.

Install ​

Pick the packages you actually need.

yaml
dependencies:
  vyuh_cdx_ui:
    hosted: https://pub.vyuh.tech
    version: ^1.51.4

  # Optional — IDE-style workspace shell
  cdx_panes:
    hosted: https://pub.vyuh.tech
    version: ^1.5.2

  # Optional — theme-driven data table
  vyuh_table:
    hosted: https://pub.vyuh.tech
    version: ^2.1.1

  # Optional — server-filtered kanban board
  cdx_kanban_view:
    hosted: https://pub.vyuh.tech
    version: ^0.2.2+1

  # Optional — server-backed hierarchy selector
  cdx_tree_view:
    hosted: https://pub.vyuh.tech
    version: ^0.1.1+1

  # Optional — date-driven calendar shell
  cdx_calendar_view:
    hosted: https://pub.vyuh.tech
    version: ^0.1.2+1

  # Optional — standalone timeline primitive
  vyuh_timelines:
    hosted: https://pub.vyuh.tech
    version: ^0.1.2+1

  # Optional — command palette plugin
  vyuh_command_palette:
    hosted: https://pub.vyuh.tech
    version: ^1.4.2

  # Optional — field formatting registry
  cdx_field_formatting:
    hosted: https://pub.vyuh.tech
    version: ^1.4.5

  # Optional — checklist editor / runner / viewer
  cdx_checklist:
    hosted: https://pub.vyuh.tech
    version: ^0.3.1+1

Imports ​

Each package ships a single barrel.

dart
import 'package:vyuh_cdx_ui/vyuh_cdx_ui.dart';
import 'package:vyuh_cdx_ui/cards.dart' show SectionCard;
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';
import 'package:cdx_checklist/cdx_checklist.dart';

See also ​