> Markdown version of [Overview](https://vaadin.com/docs/v14/flow/styling/material/overview). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Material

Material is a theme inspired by the [Material Design guidelines](https://material.io).

The core Material package defines the basic building blocks for component themes as CSS custom properties, also known as design tokens, such as colors, typography and other visual styles.

## <a id="getting-started"></a>Getting Started

The Material theme comes bundled with Vaadin, including all individual components. If you need, you can also install the core Material package separately from [npm](https://www.npmjs.com).

```terminal
npm i @vaadin/vaadin-material-styles
```

### <a id="import-and-include-style-sheets"></a>Import and Include Style Sheets

The global style sheets, which define the global custom properties (a.k.a. design tokens) and define basic color and typography rules, are automatically included in your Vaadin application when you are using Material as your theme.

You can import and include these style sheets manually if needed, for example if you are building a client-side only application.

In server-side views (Java), use the `@Theme` annotation, as described in [Using Themes](https://vaadin.com/docs/v14/flow/styling/using-themes.md).

**Java** — `UsingComponentThemes.java`

```java
@Route(value = "")
@Theme(value = Material.class)
public class MaterialApplication extends Div {
}
```

In client-side views, import and include the core style sheet.

**JavaScript** — `Material.js`

```javascript
// Import the main style sheets which set all the
// global custom properties
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/typography.js';
// Import the <custom-style> element from Polymer and include
// the style sheets in the global scope
import '@polymer/polymer/lib/elements/custom-style.js';

const style = document.createElement('custom-style');
style.innerHTML = `<style include="material-color material-typography"></style>`;
document.head.appendChild(style);
```

## <a id="customization"></a>Customization

The Material theme can be customized to fit your visual style requirements by adjusting the [CSS Custom Properties](https://vaadin.com/docs/v14/flow/styling/css-custom-properties.md) it exposes as its public API.

The custom properties are documented in the following sections:

- [Color](https://vaadin.com/docs/v14/flow/styling/material/color.md)

- [Typography](https://vaadin.com/docs/v14/flow/styling/material/typography.md)

`0C45DB7B-2B5A-48BC-AB65-A0802F0A28F9`