id: instructure-ui

Instructure UI

Instructure UI is an open source UI framework and design system for React. Its components are used by millions of learners every day when they use Instructure products like Canvas LMS.

See our website for usage, examples and documentation.

Contributing

Before contributing please read our code of conduct and read the contribution guidelines.

React Support

Instructure UI currently supports 16.14.0 and higher.

Browser Support

The last two versions of all modern browsers (Firefox, Safari, Chrome, Edge).

License

MIT

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

10.26.4 (2025-11-20)

Bug Fixes

• ui-color-picker: complete color mixer button alignment fix (c3fd3b1)

10.26.3 (2025-11-19)

Bug Fixes

• ui-color-picker: fix popover scrolling and button alignment issues (b7fbf0b)

10.26.2 (2025-10-13)

Note: Version bump only for package @instructure/ui-color-picker

10.26.1 (2025-10-06)

Note: Version bump only for package @instructure/ui-color-picker

10.26.0 (2025-10-01)

Bug Fixes

• ui-color-picker: prevent selection outside of ColorMixer when dragging the indicator (2e2bd90)

10.25.0 (2025-09-09)

Note: Version bump only for package @instructure/ui-color-picker

10.24.2 (2025-08-11)

Note: Version bump only for package @instructure/ui-color-picker

10.24.1 (2025-07-30)

Note: Version bump only for package @instructure/ui-color-picker

10.24.0 (2025-07-18)

Features

• ui-color-picker: add type=button to color preset's buttons for better form handling (b94ee9f)

10.23.0 (2025-07-09)

Note: Version bump only for package @instructure/ui-color-picker

10.22.0 (2025-07-04)

Note: Version bump only for package @instructure/ui-color-picker

10.21.0 (2025-06-27)

Features

• ui-color-picker: add colorScreenReaderLabel prop to provide more color information (6650445)

10.20.1 (2025-06-17)

Note: Version bump only for package @instructure/ui-color-picker

10.20.0 (2025-06-13)

Bug Fixes

• many: update dependencies, browsersdb and moment timezone database (3813636)

Features

• many: add missing inputRef prop to input components (e1158fb)

10.19.1 (2025-06-05)

Note: Version bump only for package @instructure/ui-color-picker

10.19.0 (2025-06-03)

Note: Version bump only for package @instructure/ui-color-picker

10.18.1 (2025-05-29)

Note: Version bump only for package @instructure/ui-color-picker

10.18.0 (2025-05-26)

Note: Version bump only for package @instructure/ui-color-picker

10.17.0 (2025-05-20)

Note: Version bump only for package @instructure/ui-color-picker

10.16.4 (2025-05-09)

Note: Version bump only for package @instructure/ui-color-picker

10.16.3 (2025-04-30)

Note: Version bump only for package @instructure/ui-color-picker

10.16.2 (2025-04-22)

Note: Version bump only for package @instructure/ui-color-picker

10.16.1 (2025-04-22)

Note: Version bump only for package @instructure/ui-color-picker

10.16.0 (2025-04-11)

Bug Fixes

• ui-buttons: fix button border color (5322f9c)

10.15.2 (2025-04-07)

Note: Version bump only for package @instructure/ui-color-picker

10.15.1 (2025-04-03)

Note: Version bump only for package @instructure/ui-color-picker

10.15.0 (2025-03-31)

Note: Version bump only for package @instructure/ui-color-picker

10.14.0 (2025-03-17)

Note: Version bump only for package @instructure/ui-color-picker

10.13.0 (2025-03-06)

Note: Version bump only for package @instructure/ui-color-picker

10.12.0 (2025-02-24)

Bug Fixes

• ui-color-picker: add hex to aria-label (98adf34)

Features

• many: introduce new spacing tokens; add margin prop for more components (048c902)

10.11.0 (2025-02-03)

Note: Version bump only for package @instructure/ui-color-picker

10.10.0 (2024-12-18)

Note: Version bump only for package @instructure/ui-color-picker

10.9.0 (2024-12-12)

Note: Version bump only for package @instructure/ui-color-picker

10.8.0 (2024-12-09)

Note: Version bump only for package @instructure/ui-color-picker

10.7.0 (2024-12-03)

Bug Fixes

• ui-color-picker: make ColorPicker tooltip VoiceOver focusable (610c0d8)

10.6.1 (2024-11-26)

Note: Version bump only for package @instructure/ui-color-picker

10.6.0 (2024-11-18)

Bug Fixes

• many: fix regression where form elements without label got misaligned (139f7f1)

Features

• ui-color-picker,ui-color-utils: add callback for contrast validation information and export validation methods (e756c7d)

10.5.0 (2024-11-07)

Note: Version bump only for package @instructure/ui-color-picker

10.4.1 (2024-10-28)

Bug Fixes

• update license (1c039d9)

10.4.0 (2024-10-16)

Note: Version bump only for package @instructure/ui-color-picker

10.3.0 (2024-10-03)

Note: Version bump only for package @instructure/ui-color-picker

10.2.2 (2024-09-13)

Note: Version bump only for package @instructure/ui-color-picker

10.2.1 (2024-08-30)

Note: Version bump only for package @instructure/ui-color-picker

10.2.0 (2024-08-23)

Note: Version bump only for package @instructure/ui-color-picker

10.1.0 (2024-08-23)

Note: Version bump only for package @instructure/ui-color-picker

10.0.0 (2024-07-31)

Features

• many: rewrite color system (1e5809e)

BREAKING CHANGES

• many: Breaks color overrides in certain cases

9.5.1 (2024-07-30)

Bug Fixes

• ui-color-picker,ui-color-utils: fix corrupted CJS build (e1016be)

9.5.0 (2024-07-26)

Note: Version bump only for package @instructure/ui-color-picker

9.4.0 (2024-07-26)

Note: Version bump only for package @instructure/ui-color-picker

9.3.0 (2024-07-17)

Note: Version bump only for package @instructure/ui-color-picker

9.2.0 (2024-07-09)

Note: Version bump only for package @instructure/ui-color-picker

9.1.0 (2024-06-14)

Bug Fixes

• ui-color-picker: add styling for disabled state (7d6d3ad)

9.0.1 (2024-05-09)

Note: Version bump only for package @instructure/ui-color-picker

9.0.0 (2024-05-09)

Note: Version bump only for package @instructure/ui-color-picker

8.56.0 (2024-05-06)

Note: Version bump only for package @instructure/ui-color-picker

8.55.1 (2024-04-30)

Note: Version bump only for package @instructure/ui-color-picker

8.55.0 (2024-04-09)

Note: Version bump only for package @instructure/ui-color-picker

8.54.0 (2024-03-21)

Note: Version bump only for package @instructure/ui-color-picker

8.53.2 (2024-02-15)

Note: Version bump only for package @instructure/ui-color-picker

8.53.1 (2024-02-09)

Note: Version bump only for package @instructure/ui-color-picker

8.53.0 (2024-02-08)

Note: Version bump only for package @instructure/ui-color-picker

8.52.0 (2024-02-02)

Note: Version bump only for package @instructure/ui-color-picker

8.51.0 (2023-12-14)

Note: Version bump only for package @instructure/ui-color-picker

8.50.0 (2023-12-05)

Note: Version bump only for package @instructure/ui-color-picker

8.49.0 (2023-11-24)

Note: Version bump only for package @instructure/ui-color-picker

8.48.3 (2023-11-23)

Note: Version bump only for package @instructure/ui-color-picker

8.48.2 (2023-11-21)

Note: Version bump only for package @instructure/ui-color-picker

8.48.1 (2023-11-17)

Note: Version bump only for package @instructure/ui-color-picker

8.48.0 (2023-11-10)

Note: Version bump only for package @instructure/ui-color-picker

8.47.1 (2023-11-06)

Note: Version bump only for package @instructure/ui-color-picker

8.47.0 (2023-10-27)

Note: Version bump only for package @instructure/ui-color-picker

8.46.1 (2023-10-13)

Note: Version bump only for package @instructure/ui-color-picker

8.46.0 (2023-10-11)

Note: Version bump only for package @instructure/ui-color-picker

8.45.0 (2023-10-03)

Bug Fixes

• ui-color-picker: add a padding to colorpicker button (de420dd)

8.44.0 (2023-09-21)

Note: Version bump only for package @instructure/ui-color-picker

8.43.1 (2023-09-11)

Note: Version bump only for package @instructure/ui-color-picker

8.43.0 (2023-09-07)

Note: Version bump only for package @instructure/ui-color-picker

8.42.0 (2023-09-07)

Note: Version bump only for package @instructure/ui-color-picker

8.41.1 (2023-08-24)

Note: Version bump only for package @instructure/ui-color-picker

8.41.0 (2023-08-21)

Note: Version bump only for package @instructure/ui-color-picker

8.40.1 (2023-08-18)

Bug Fixes

• ui-color-picker: add id as allowed prop for color-picker (2ced2b2)

8.40.0 (2023-08-17)

Bug Fixes

• ui-color-picker: fix broken commonjs import for color-picker (32dbd2b)

8.39.0 (2023-07-21)

Bug Fixes

• ui-a11y-utils: fix modal closing when losing focus (5deda70)

8.38.1 (2023-06-13)

Note: Version bump only for package @instructure/ui-color-picker

8.38.0 (2023-05-15)

Note: Version bump only for package @instructure/ui-color-picker

8.37.0 (2023-04-25)

Note: Version bump only for package @instructure/ui-color-picker

8.36.0 (2023-03-23)

Note: Version bump only for package @instructure/ui-color-picker

8.35.1 (2023-03-10)

Note: Version bump only for package @instructure/ui-color-picker

8.35.0 (2023-02-17)

Note: Version bump only for package @instructure/ui-color-picker

8.34.0 (2023-02-10)

Bug Fixes

• ui-color-picker: axe-check tests failing (d32f395)

8.33.2 (2023-01-25)

Note: Version bump only for package @instructure/ui-color-picker

8.33.1 (2023-01-06)

Note: Version bump only for package @instructure/ui-color-picker

8.33.0 (2023-01-04)

Bug Fixes

• shared-types,ui-color-picker: colorPicker css problem (82ce9e3)

8.32.1 (2022-12-01)

Note: Version bump only for package @instructure/ui-color-picker

8.32.0 (2022-11-23)

Note: Version bump only for package @instructure/ui-color-picker

8.31.0 (2022-11-21)

Note: Version bump only for package @instructure/ui-color-picker

8.30.0 (2022-10-26)

Note: Version bump only for package @instructure/ui-color-picker

8.29.0 (2022-09-29)

Note: Version bump only for package @instructure/ui-color-picker

8.28.2 (2022-09-16)

Note: Version bump only for package @instructure/ui-color-picker

8.28.1 (2022-09-12)

Note: Version bump only for package @instructure/ui-color-picker

8.28.0 (2022-09-02)

Note: Version bump only for package @instructure/ui-color-picker

8.27.0 (2022-07-25)

Features

• support React 18 (0a2bf0c)

8.26.3 (2022-07-14)

Bug Fixes

• ui-color-picker,ui-date-input,ui-date-time-input,ui-select,ui-simple-select,ui-text-input,ui-time-select: before/after elements should inherit input color (7daf257)

8.26.2 (2022-07-11)

Bug Fixes

• ui-color-picker: fix required props for ColorPicker and sub-components (4d38fb6)

  WARNING! Since this commit fixes props that should be required props, some code changes might be needed.

8.26.1 (2022-07-06)

Note: Version bump only for package @instructure/ui-color-picker

8.26.0 (2022-06-30)

Features

• ui-color-picker: Add ColorPicker component (1cbd877)

ColorPicker component

The ColorPicker is a versatile component that can be used to select colors and check their contrast ratios.

This commit also adds the ColorPicker's subcomponents as standalone components: ColorIndicator, ColorMixer, ColorPreset, ColorContrast.

See the instructure-ui mono-repo change log for past changes.