← Back

Carbon for Vaadin

A Carbon inspired theme for Vaadin

Author

Rating

Popularity

200+

A theme for Vaadin 23 based on IBM's Carbon design system.

It's not a perfect one-to-one recreation. Some of the differences between Carbon and Vaadin cannot be amended with CSS. There are also a few things I wasn't able to figure out based on Carbon's current documentation and source code.

To install this add-on, check out the latest version and Maven/Gradle dependency snippets from the Directory.

After setting the dependency in pom.xml, update your frontend/themes/mytheme/theme.json to have parent configuration

{
  "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ],
  "parent": "carbon"
}

You can still make your own changes on top in the applications theme.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Removes line-awesome dependency

Released: 2023-01-12
Maturity: STABLE
License: Apache License 2.0

Compatibility

Framework: Vaadin 23+
Browser: N/A

Carbon for Vaadin - Vaadin Add-on Directory

A Carbon inspired theme for Vaadin

A theme for Vaadin 23 based on IBM's [Carbon design system](https://www.carbondesignsystem.com/). It's not a perfect one-to-one recreation. Some of the differences between Carbon and Vaadin cannot be amended with CSS. There are also a few things I wasn't able to figure out based on Carbon's current documentation and source code. To install this add-on, check out the latest version and Maven/Gradle dependency snippets from the [Directory](https://vaadin.com/directory). After setting the dependency in pom.xml, update your frontend/themes/mytheme/theme.json to have parent configuration ```json { "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ], "parent": "carbon" } ```` You can still make your own changes on top in the applications theme.

Directory