Ezderm UI Kit

Reusable React component library used across the Ezderm web portfolio.

Requirements

v6.x is reserved for React 19. Requiring React 19 is a breaking change, so projects not yet migrated to React 19 must stay on v5.x (React 18). Pick the major that matches your app's React version:

| ui-kit version | React | | -------------- | --------------- | | 6.x | 19.x | | 5.x | 18.x | | 4.x | 16.x / 17.x |

v6.x (React 19):

"peerDependencies": {
  "prop-types": "15.x",
  "react": "19.x",
  "react-dom": "19.x"
}

v5.x (React 18):

"peerDependencies": {
  "prop-types": "15.x",
  "react": "18.x",
  "react-dom": "18.x"
}

v4.x (React 16 / 17):

"peerDependencies": {
  "prop-types": "15.x",
  "react": "16.x || 17.x",
  "react-dom": "16.x || 17.x"
}

v4.x predates the 5.0.0 dependency rewrite (Enzyme, react-sortable-hoc, react-treebeard, react-day-picker v7, react-select v3, …), so its runtime dependencies differ from the table below, which documents the current v5/v6 lineage.

Installation

npm install @ezderm/ui-kit

Dependencies

Packages shipped with this library, so you don't have to dig through package.json.

Peer dependencies

You must provide these in your app (they are not bundled):

| Package | v6.x | v5.x | v4.x | | ------------ | ------ | ------ | --------------- | | react | 19.x | 18.x | 16.x / 17.x | | react-dom | 19.x | 18.x | 16.x / 17.x | | prop-types | 15.x | 15.x | 15.x |

Runtime dependencies

Installed automatically with the kit:

| Package | Version | Used for | | -------------------------------------------------- | --------------- | ----------------------------------------------------- | | @dnd-kit/core | ^6.3.1 | Drag-and-drop engine | | @dnd-kit/sortable | ^10.0.0 | Sortable lists (TableBase column reorder) | | @dnd-kit/utilities | ^3.2.2 | dnd-kit CSS transform helpers | | array-move | ^4.0.0 | Array reordering (MultiSelect, column customizer) | | classnames | ^2.5.1 | Conditional className composition | | cropperjs | 2.1.1 | Image cropping (AvatarUploader) | | date-fns | 4.4.0 | Date formatting/parsing (via v1-token compat layer) | | file-saver | 2.0.5 | Client-side file download | | immer | ^11.1.11 | Immutable state updates | | inputmask | 5.0.9 | Input masking (MaskedTextInput) | | jstz | 2.1.1 | Timezone detection | | moveto | 1.8.2 | Smooth scrolling | | rc-tooltip | 6.4.0 | Tooltip primitive | | react-contexify | 6.0.0 | Context menu (Popover) | | react-day-picker | 10.0.1 | Calendar (DatePicker, DateRangePicker) | | react-draggable | 4.7.0 | Draggable elements | | react-dropzone | ^17.0.0 | File drag-and-drop (uploaders) | | react-modal | ^3.16.3 | Modal dialogs | | react-onclickoutside² | ^6.13.2 | Outside-click detection (ClickOutsideWrapper) | | react-select | 5.10.2 | Select / AsyncSelect | | react-spinkit | ^3.0.0 | Loading spinners | | react-text-mask | 5.5.0 | Masked text inputs | | react-transition-group | ^4.4.5 | Mount/unmount transitions | | react-virtualized | vendored¹ | Virtualized tables/lists | | spacetime | 7.13.0 | Timezone-aware date handling | | text-mask-addons | 3.8.0 | Mask add-ons (e.g. number/currency masks) | | @babel/plugin-proposal-nullish-coalescing-operator | ^7.18.6 | Babel runtime helper |

¹ react-virtualized is vendored locally at ./custom-packages/react-virtualized rather than pulled from npm.

² v5.x only. Removed in v6 — ClickOutsideWrapper now uses a built-in ref-based outside-click implementation (React 19 removed ReactDOM.findDOMNode, which react-onclickoutside depends on).

Publish

npm publish --access public

Running Storybook

npm run storybook

Running Tests

npm test

Changelog

See CHANGELOG.md for the full, versioned history of breaking changes, component fixes, dependency upgrades, and tooling changes.