@khester/dynamics-ui-components

A broad Fluent UI v8 React component library (~53 controls) for building Dynamics 365 and Power Pages UIs.

What it does

Wraps the full breadth of Fluent UI v8 controls behind a consistent Dynamics* props surface tuned for Dynamics 365 and Power Pages. It exports ~53 components spanning core inputs (Button, TextField, Dropdown, DatePicker, ComboBox), data display (DetailsList, Card, Persona, GroupedList), navigation and layout (Nav, CommandBar, Breadcrumb, Stack, Pivot), overlays (Modal, Dialog, Panel, Callout, TeachingBubble), charts (via @fluentui/react-charting), and a ThemeProvider. Each component re-exports a typed props interface (e.g. DynamicsButtonProps, DynamicsTextFieldProps) for full type safety.

When to use it

Reach for this package when you need a wide, general-purpose Fluent v8 component base for a Dynamics 365 custom page, model-driven embed, or Power Pages site. For the curated custom-page control gallery, prefer @khester/reusable-components (a parallel, co-installable curated set — not a dependency of this package); reach into this broader base for controls the curated gallery doesn't cover. Use @dataverse-kit/grid-kit for registry-driven grids/detail lists, and @dataverse-kit/surface-kit for form shells and container surfaces. This is a component library, not a standalone PCF control.

Install

npm install @khester/dynamics-ui-components

Requires React 17+ as a peer dependency (react / react-dom >=17.0.0). It bundles @fluentui/react v8 and @fluentui/react-charting as direct dependencies, so no separate Fluent install is needed.

Minimal example

import { ThemeProvider, Button, TextField } from '@khester/dynamics-ui-components';
import { createTheme } from '@fluentui/react';

const theme = createTheme();

export function ContactForm() {
  return (
    <ThemeProvider theme={theme}>
      <TextField label="Account name" required />
      <Button variant="primary" onClick={() => console.log('saved')}>
        Save
      </Button>
    </ThemeProvider>
  );
}

Key exports

| Export | Purpose | |--------|---------| | Button | Variant-aware button (variant="primary" \| "default") wrapping Fluent's PrimaryButton/DefaultButton | | TextField | Text input with Dynamics-tuned props (DynamicsTextFieldProps) | | Dropdown / ComboBox | Single/multi-select pickers for option-set style fields | | DetailsList / GroupedList | Tabular and grouped data display for list views | | Nav / CommandBar / Breadcrumb | Navigation, action bars, and breadcrumb trails | | Dialog / Modal / Panel / Callout | Overlay surfaces for forms and confirmations | | Charts | Data visualization built on @fluentui/react-charting | | ThemeProvider | Fluent theme wrapper with built-in palette/theme validation | | Dynamics*Props (type exports) | Typed props interfaces for every wrapped component |