Medusa UI Colors
In this guide, you'll learn about the color classes available in Medusa UI and how to use them.
Overview#
Medusa UI provides Tailwind CSS classes for colors from the Medusa design system. These classes can be used to style components and elements consistently across your Medusa and standalone applications.
To view the colors in the list below in dark mode, switch the documentation's theme from the menu in the top right.
To copy a color's Tailwind CSS class from the list below, click on it.
How to Use the Medusa UI Colors#
You can use the color classes in your Medusa Admin customizations or standalone projects that have the @medusajs/ui package installed.
You can apply the color classes as CSS classes to any element.
For example, to set the background color of the document's body:
Alpha#
These colors can be used for foreground (using text- prefix), background (using bg- prefix), and border (using border- prefix) elements.
Contrast#
These colors can be used for foreground (using text- prefix), background (using bg- prefix), and border (using border- prefix) elements.