UI styling overview for Docker extensions
Our Design System is a constantly evolving set of specifications that aim to ensure visual consistency across Docker products, and meet level AA accessibility standardsopen_in_new. We've opened parts of it to extension authors, documenting basic styles (color, typography) and components. See: Docker Extensions Styleguideopen_in_new.
We require extensions to match the wider Docker Desktop UI to a certain degree, and reserve the right to make this stricter in the future.
To get started on your UI, follow the steps below.
Docker Desktop's UI is written in React and
MUIopen_in_new (using Material UI to specific). This is the only officially supported framework for building extensions, and the one that our
init command automatically configures for you. Using it brings significant benefits to authors:
- You can use our Material UI themeopen_in_new to automatically replicate Docker Desktop's look & feel.
- In future, we'll release utilities and components specifically targeting this combination (e.g. custom MUI components, or React hooks for interacting with Docker).
Read our MUI best practices guide to learn future-proof ways to use MUI with Docker Desktop.
You may prefer to use another framework, perhaps because you or your team are more familiar with it or because you have existing assets you want to reuse. This is possible, but highly discouraged. It means that:
- You'll need to manually replicate the look and feel of Docker Desktop. This takes a lot of effort, and if you don't match our theme closely enough, users will find your extension jarring and we may ask you to make changes during a review process.
- You'll have a higher maintenance burden. Whenever Docker Desktop's theme changes (which could happen in any release), you'll need to manually change your extension to match it.
- If your extension is open-source, deliberately avoiding common conventions will make it harder for the community to contribute to it.
See our MUI best practices article.
With minor exceptions, displaying your logo for example, you should only use colors from our palette. These can be found in our style guide documentopen_in_new, and will also soon be available in our MUI theme and via CSS variables.
Our colors have been chosen so that the counterpart colors in each variant of the palette should have the same essential characteristics. Anywhere you use
red-300 in light mode, you should use
red-300 in dark mode too.