Installation

Requirements

Flutter 3.32 or later
Dart 3.8 or later

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 ask@vyuh.tech to request one. For full details (CI, Docker, rotation, troubleshooting), see the Pub Token Setup guide.

Add Dependencies

Add vyuh_cdx_ui to your pubspec.yaml as a hosted dependency:

Then resolve dependencies:

Setup

vyuh_cdx_ui is the core CDX design-system package. It pulls in its runtime dependencies automatically, including MobX (mobx / flutter_mobx) for state-holding widgets, go_router for route-aware navigation helpers, cdx_field_formatting for display formatting, and vyuh_timelines for activity timelines.

Dependencies

vyuh_cdx_ui has a deliberately small footprint. These are pulled in automatically — you do not add them yourself:

Dependency	Purpose
`mobx` / `flutter_mobx`	Reactive state for dropdowns, tables, and overlays
`go_router`	Route-aware tab + indexed-stack helpers
`fluentui_system_icons`	Icon set used in built-in widgets
`reactive_forms`	Reactive form adapters and form-field integrations
`textf`	Rich-text formatting for `RemarksField` / `RemarksText`
`cdx_field_formatting`	Shared field formatting registry
`vyuh_timelines`	Timeline layout engine under `ActivityTimeline`
`vyuh_core` / `vyuh_errors`	Vyuh platform and diagnostics integration used by CDX surfaces

Verify the Setup

Import the barrel, install createCdxTheme, and render a ConfirmationDialog.info to confirm the package resolves and the theme extension is wired up:

dart

import 'package:flutter/material.dart';
import 'package:vyuh_cdx_ui/vyuh_cdx_ui.dart';

void main() => runApp(MaterialApp(
      theme: createCdxTheme(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        textTheme: ThemeData.light().textTheme,
      ),
      home: const VerifyCdxUi(),
    ));

class VerifyCdxUi extends StatelessWidget {
  const VerifyCdxUi({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Button.filled(
          label: 'Test CDX UI',
          onPressed: () async {
            await showDialog<void>(
              context: context,
              builder: (_) => ConfirmationDialog.info(
                title: 'CDX UI works',
                description: 'If you can see this, the package is installed.',
                onDismiss: () => Navigator.of(context).pop(),
              ),
            );
          },
        ),
      ),
    );
  }
}

Installation ​

Next steps ​

Next steps