Docs

Docs

Styling views and layouts with CSS

How to add CSS styles to views and 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 Design System as a base for component and application themes. The design system defines CSS variables that can be used to achieve a consistent look and feel across the application. The variables are documented in the Design System 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);
}