# @vaadin/board

> Web component to create flexible responsive layouts and build nice looking dashboard.

Latest version **25.3.5** (published 2026-10-29) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @vaadin/board
pnpm add @vaadin/board
yarn add @vaadin/board
bun add @vaadin/board
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 25.3.5 |
| Published | 2026-10-29 |
| First published | 2021-10-08 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 32.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 583 |
| Author | Vaadin Ltd |
| Maintainers | web-padawan, platosha, jouni, manolo, yuriyyev, vaadin-owner, tomivirkki, artur-, sunzhewyq, sissbruecker |
| Keywords | Vaadin, Board, dashboard, responsive, layout, web-components, web-component |

## Links

- npm: https://www.npmjs.com/package/@vaadin/board
- Repository: https://github.com/vaadin/web-components
- Homepage: https://vaadin.com/components
- Issues: https://github.com/vaadin/web-components/issues
- npm.io page: https://npm.io/package/@vaadin/board

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^3.0.0
- [@vaadin/a11y-base](https://npm.io/package/@vaadin/a11y-base.md) ~25.3.5
- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.0
- [@vaadin/component-base](https://npm.io/package/@vaadin/component-base.md) ~25.3.5

## Recent versions

- 25.3.5 (latest) — 2026-10-29
- 25.4.0-alpha5 (next) — 2026-10-30
- 25.4.0-dev.c9532cd333 (dev-table-theme) — 2026-09-30
- 25.3.0-dev.1fa5a51482 (dev-disable-dates) — 2026-07-25
- 24.4.0-dev.4b20a0c55.3 (canary) — 2024-03-22
- 24.10.10 — 2026-11-02
- 24.9.22 — 2026-11-02
- 25.2.17 — 2026-10-29
- 23.6.8 — 2026-10-29
- 24.9.21 — 2026-10-29
- 24.10.9 — 2026-10-29
- 24.4.21 — 2026-10-23
- 25.3.4 — 2026-10-22
- 25.4.0-alpha4 — 2026-10-21
- 25.2.16 — 2026-10-21
- … 669 more at https://npm.io/package/@vaadin/board/versions

## README

# @vaadin/board

A powerful and easy to use layout web component for building responsive views.

> ℹ️  A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Board in your project.

> [!WARNING]
> `<vaadin-board>` is deprecated and will be removed in Vaadin 26. Consider using `<vaadin-dashboard>` or `<vaadin-dashboard-layout>` as an alternative.

[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/board)

[![npm version](https://badgen.net/npm/v/@vaadin/board)](https://www.npmjs.com/package/@vaadin/board)

```html
<vaadin-board>
  <vaadin-board-row>
    <div class="top a" board-cols="2">top A</div>
    <div class="top b">top B</div>
    <div class="top c">top C</div>
  </vaadin-board-row>
  <vaadin-board-row>
    <div class="mid">mid</div>
  </vaadin-board-row>
  <vaadin-board-row>
    <div class="low a">low A</div>
    <vaadin-board-row>
      <div class="top a">low B / A</div>
      <div class="top b">low B / B</div>
      <div class="top c">low B / C</div>
      <div class="top d">low B / D</div>
    </vaadin-board-row>
  </vaadin-board-row>
</vaadin-board>
```

[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/board/screenshot.png" alt="Screenshot of vaadin-board">](https://vaadin.com/docs/latest/components/board)

## Installation

Install the component:

```sh
npm i @vaadin/board
```

Once installed, import the component in your application:

```js
import '@vaadin/board';
```

## Contributing

Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

## License

This program is available under Vaadin Commercial License and Service Terms. For license terms, see LICENSE.

Vaadin collects usage statistics at development time to improve this product.
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

---
_Source: https://npm.io/package/@vaadin/board · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._