diff --git a/dev/dashboard.html b/dev/dashboard.html
new file mode 100644
index 0000000000..b09663600a
--- /dev/null
+++ b/dev/dashboard.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+
+
+
+
diff --git a/packages/dashboard/LICENSE b/packages/dashboard/LICENSE
new file mode 100644
index 0000000000..bb61b7d20c
--- /dev/null
+++ b/packages/dashboard/LICENSE
@@ -0,0 +1,3 @@
+This program is available under Vaadin Commercial License and Service Terms.
+See https://vaadin.com/commercial-license-and-service-terms for the full
+license.
diff --git a/packages/dashboard/README.md b/packages/dashboard/README.md
new file mode 100644
index 0000000000..80162f2fa9
--- /dev/null
+++ b/packages/dashboard/README.md
@@ -0,0 +1,34 @@
+# @vaadin/dashboard
+
+A responsive, grid-based dashboard layout component
+
+> ℹ️ A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Dashboard in your project.
+
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dashboard)
+
+[![npm version](https://badgen.net/npm/v/@vaadin/dashboard)](https://www.npmjs.com/package/@vaadin/dashboard)
+
+## Installation
+
+Install the component:
+
+```sh
+npm i @vaadin/dashboard
+```
+
+Once installed, import the component in your application:
+
+```js
+import '@vaadin/dashboard';
+```
+
+## 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.
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
new file mode 100644
index 0000000000..b68e5b7df5
--- /dev/null
+++ b/packages/dashboard/package.json
@@ -0,0 +1,55 @@
+{
+ "name": "@vaadin/dashboard",
+ "version": "24.6.0-alpha0",
+ "publishConfig": {
+ "access": "public"
+ },
+ "description": "vaadin-dashboard",
+ "license": "SEE LICENSE IN LICENSE",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/vaadin/web-components.git",
+ "directory": "packages/dashboard"
+ },
+ "author": "Vaadin Ltd",
+ "homepage": "https://vaadin.com/components",
+ "bugs": {
+ "url": "https://github.com/vaadin/web-components/issues"
+ },
+ "main": "vaadin-dashboard.js",
+ "module": "vaadin-dashboard.js",
+ "type": "module",
+ "files": [
+ "src",
+ "theme",
+ "vaadin-*.d.ts",
+ "vaadin-*.js",
+ "web-types.json",
+ "web-types.lit.json"
+ ],
+ "keywords": [
+ "Vaadin",
+ "dashboard",
+ "responsive",
+ "layout",
+ "web-components",
+ "web-component"
+ ],
+ "dependencies": {
+ "@open-wc/dedupe-mixin": "^1.3.0",
+ "@vaadin/component-base": "24.5.0-alpha8",
+ "@vaadin/vaadin-lumo-styles": "24.5.0-alpha8",
+ "@vaadin/vaadin-material-styles": "24.5.0-alpha8",
+ "@vaadin/vaadin-themable-mixin": "24.5.0-alpha8",
+ "lit": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vaadin/chai-plugins": "24.5.0-alpha8",
+ "@vaadin/testing-helpers": "^1.0.0"
+ },
+ "cvdlName": "vaadin-dashboard",
+ "web-types": [
+ "web-types.json",
+ "web-types.lit.json"
+ ]
+}
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
new file mode 100644
index 0000000000..b133a1d26b
--- /dev/null
+++ b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+
+/**
+ * A Widget component for use with the Dashboard component
+ */
+declare class DashboardWidget extends ElementMixin(HTMLElement) {}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'vaadin-dashboard-widget': DashboardWidget;
+ }
+}
+
+export { DashboardWidget };
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
new file mode 100644
index 0000000000..e145f1a24b
--- /dev/null
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+
+/**
+ * A Widget component for use with the Dashboard component
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ */
+class DashboardWidget extends ElementMixin(PolylitMixin(LitElement)) {
+ static get is() {
+ return 'vaadin-dashboard-widget';
+ }
+
+ /** @protected */
+ render() {
+ return html``;
+ }
+}
+
+defineCustomElement(DashboardWidget);
+
+export { DashboardWidget };
diff --git a/packages/dashboard/src/vaadin-dashboard.d.ts b/packages/dashboard/src/vaadin-dashboard.d.ts
new file mode 100644
index 0000000000..9ddad5ac0a
--- /dev/null
+++ b/packages/dashboard/src/vaadin-dashboard.d.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+
+/**
+ * A responsive, grid-based dashboard layout component
+ */
+declare class Dashboard extends ElementMixin(HTMLElement) {}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'vaadin-dashboard': Dashboard;
+ }
+}
+
+export { Dashboard };
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
new file mode 100644
index 0000000000..09e890c7b6
--- /dev/null
+++ b/packages/dashboard/src/vaadin-dashboard.js
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-dashboard-widget.js';
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+
+/**
+ * A responsive, grid-based dashboard layout component
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ */
+class Dashboard extends ElementMixin(PolylitMixin(LitElement)) {
+ static get is() {
+ return 'vaadin-dashboard';
+ }
+
+ static get cvdlName() {
+ return 'vaadin-dashboard';
+ }
+
+ /** @protected */
+ render() {
+ return html``;
+ }
+}
+
+defineCustomElement(Dashboard);
+
+export { Dashboard };
diff --git a/packages/dashboard/test/dashboard.test.ts b/packages/dashboard/test/dashboard.test.ts
new file mode 100644
index 0000000000..6b77f55281
--- /dev/null
+++ b/packages/dashboard/test/dashboard.test.ts
@@ -0,0 +1,29 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import '../vaadin-dashboard.js';
+import type { CustomElementType } from '@vaadin/component-base/src/define.js';
+import type { Dashboard } from '../vaadin-dashboard.js';
+
+describe('dashboard', () => {
+ let dashboard: Dashboard;
+
+ beforeEach(() => {
+ dashboard = fixtureSync('');
+ });
+
+ describe('custom element definition', () => {
+ let tagName: string;
+
+ beforeEach(() => {
+ tagName = dashboard.tagName.toLowerCase();
+ });
+
+ it('should be defined in custom element registry', () => {
+ expect(customElements.get(tagName)).to.be.ok;
+ });
+
+ it('should have a valid static "is" getter', () => {
+ expect((customElements.get(tagName) as CustomElementType).is).to.equal(tagName);
+ });
+ });
+});
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
new file mode 100644
index 0000000000..f052be6454
--- /dev/null
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
@@ -0,0 +1,2 @@
+import './vaadin-dashboard-widget-styles.js';
+import '../../src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard.js b/packages/dashboard/theme/lumo/vaadin-dashboard.js
new file mode 100644
index 0000000000..e9c934e420
--- /dev/null
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard.js
@@ -0,0 +1,3 @@
+import './vaadin-dashboard-widget.js';
+import './vaadin-dashboard-styles.js';
+import '../../src/vaadin-dashboard.js';
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-styles.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-widget-styles.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-widget.js b/packages/dashboard/theme/material/vaadin-dashboard-widget.js
new file mode 100644
index 0000000000..f052be6454
--- /dev/null
+++ b/packages/dashboard/theme/material/vaadin-dashboard-widget.js
@@ -0,0 +1,2 @@
+import './vaadin-dashboard-widget-styles.js';
+import '../../src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/theme/material/vaadin-dashboard.js b/packages/dashboard/theme/material/vaadin-dashboard.js
new file mode 100644
index 0000000000..e9c934e420
--- /dev/null
+++ b/packages/dashboard/theme/material/vaadin-dashboard.js
@@ -0,0 +1,3 @@
+import './vaadin-dashboard-widget.js';
+import './vaadin-dashboard-styles.js';
+import '../../src/vaadin-dashboard.js';
diff --git a/packages/dashboard/vaadin-dashboard-widget.d.ts b/packages/dashboard/vaadin-dashboard-widget.d.ts
new file mode 100644
index 0000000000..85a2327cd8
--- /dev/null
+++ b/packages/dashboard/vaadin-dashboard-widget.d.ts
@@ -0,0 +1 @@
+export * from './src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/vaadin-dashboard-widget.js b/packages/dashboard/vaadin-dashboard-widget.js
new file mode 100644
index 0000000000..d73b60101c
--- /dev/null
+++ b/packages/dashboard/vaadin-dashboard-widget.js
@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-dashboard-widget.js';
+
+export * from './src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/vaadin-dashboard.d.ts b/packages/dashboard/vaadin-dashboard.d.ts
new file mode 100644
index 0000000000..0b18ab5973
--- /dev/null
+++ b/packages/dashboard/vaadin-dashboard.d.ts
@@ -0,0 +1 @@
+export * from './src/vaadin-dashboard.js';
diff --git a/packages/dashboard/vaadin-dashboard.js b/packages/dashboard/vaadin-dashboard.js
new file mode 100644
index 0000000000..9613f7dcc4
--- /dev/null
+++ b/packages/dashboard/vaadin-dashboard.js
@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-dashboard.js';
+
+export * from './src/vaadin-dashboard.js';