The design of Cosmos components can be customized to allow projects and brands to create unique experiences for their users on top of trusted and ready-to-use standards. Read more about the concept behind Code.

CSS Custom Properties are a reliable and easy way to customize the look of a component at a high level. Custom Properties are limited by design, they only allow selected styles of a component to be changed.

We recommend targeting your custom element with specific selectors, such as a class.

Note:

While Custom Properties offer an easy and fast way to customize a component's style, they are limited by design. For more flexibility and advanced styling, components offer a low-level way to customize them via CSS Shadow Parts.