Docs

Docs

Styling Views & Layouts with CSS

How to add CSS styles to views and React components in Hilla applications.

CSS Theme Folder

You can style components that extend View and Layout by placing CSS files in the frontend/themes/<app-name>/ folder and importing them in styles.css using import(). Styles defined in the theme directory are available across the application. You can also import styles from node_modules, like line-awesome in the following example:

@import "line-awesome/dist/line-awesome/css/line-awesome.min.css";

@import "./main-layout.css";
@import "./views/example-view.css";

Using CSS Variables

Hilla uses the Vaadin Lumo theme as a base for component and application styling. Lumo is based on a set of CSS custom properties (variables) that you can use to achieve a consistent look and feel across applications. You can find the properties in the Vaadin styling documentation:

You can use the variables in place of hard-coded units using var().

.card {
  border: 1px solid var(--lumo-contrast-30pct);
  border-radius: var(--lumo-border-radius-s);
  box-shadow: var(--lumo-box-shadow-s);
}