diff --git a/packages/dashboard/src/vaadin-dashboard-layout.d.ts b/packages/dashboard/src/vaadin-dashboard-layout.d.ts
index 090d8f743b..47ee3cc04c 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-layout.d.ts
@@ -14,6 +14,36 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
/**
* A responsive, grid-based dashboard layout component
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available:
+ *
+ * Custom Property | Description | Default
+ * ----------------------------------|----------------------------------------|---------
+ * --vaadin-dashboard-col-min-width | minimum column width of the dashboard | 25rem
+ * --vaadin-dashboard-col-max-width | maximum column width of the dashboard | 1fr
+ * --vaadin-dashboard-row-min-height | maximum column count of the dashboard | auto
+ * --vaadin-dashboard-gap | gap between the cells of the dashboard | 1rem
+ * --vaadin-dashboard-col-max-count | maximum column count of the dashboard | number of columns
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `dense-layout` | Set when the dashboard is in dense mode.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*/
declare class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
diff --git a/packages/dashboard/src/vaadin-dashboard-layout.js b/packages/dashboard/src/vaadin-dashboard-layout.js
index 730a42dcff..e5bdefc65b 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout.js
+++ b/packages/dashboard/src/vaadin-dashboard-layout.js
@@ -18,6 +18,36 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
/**
* A responsive, grid-based dashboard layout component
*
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available:
+ *
+ * Custom Property | Description | Default
+ * ----------------------------------|----------------------------------------|---------
+ * --vaadin-dashboard-col-min-width | minimum column width of the dashboard | 25rem
+ * --vaadin-dashboard-col-max-width | maximum column width of the dashboard | 1fr
+ * --vaadin-dashboard-row-min-height | maximum column count of the dashboard | auto
+ * --vaadin-dashboard-gap | gap between the cells of the dashboard | 1rem
+ * --vaadin-dashboard-col-max-count | maximum column count of the dashboard | number of columns
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `dense-layout` | Set when the dashboard is in dense mode.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
* @customElement
* @extends HTMLElement
* @mixes DashboardLayoutMixin
diff --git a/packages/dashboard/src/vaadin-dashboard-section.d.ts b/packages/dashboard/src/vaadin-dashboard-section.d.ts
index 2836c40ab9..2c98dc92d7 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-section.d.ts
@@ -13,7 +13,44 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
/**
- * A Section component for use with the Dashboard component
+ * A section component for use with the Dashboard component
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * ### Customization
+ *
+ * You can configure the item by using `slot` names.
+ *
+ * Slot name | Description
+ * ----------|-------------
+ * `title` | A slot for the section title. Overrides the `sectionTitle` property.
+ *
+ * #### Example
+ *
+ * ```html
+ *
+ * Section Title
+ *
+ *
+ *
+ * ```
+ *
+ * ### Styling
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `selected` | Set when the item is selected.
+ * `focused` | Set when the item is focused.
+ * `move-mode` | Set when the item is being moved.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*/
declare class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(HTMLElement))) {
/**
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 2e0a3607d1..d0dda9a368 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -22,6 +22,43 @@ import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
/**
* A section component for use with the Dashboard component
*
+ * ```html
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * ### Customization
+ *
+ * You can configure the item by using `slot` names.
+ *
+ * Slot name | Description
+ * ----------|-------------
+ * `title` | A slot for the section title. Overrides the `sectionTitle` property.
+ *
+ * #### Example
+ *
+ * ```html
+ *
+ * Section Title
+ *
+ *
+ *
+ * ```
+ *
+ * ### Styling
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `selected` | Set when the item is selected.
+ * `focused` | Set when the item is focused.
+ * `move-mode` | Set when the item is being moved.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
* @customElement
* @extends HTMLElement
* @mixes ElementMixin
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
index fe076f434b..1ec575412d 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
@@ -14,6 +14,52 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
/**
* A Widget component for use with the Dashboard component
+ *
+ * ```html
+ *
+ * Header
+ * Content
+ *
+ * ```
+ *
+ * ### Customization
+ *
+ * You can configure the item by using `slot` names.
+ *
+ * Slot name | Description
+ * ----------|-------------
+ * `title` | A slot for the widget title. Overrides the `widgetTitle` property.
+ * `header` | A slot for the widget header.
+ *
+ * #### Example
+ *
+ * ```html
+ *
+ * Header
+ * Title
+ * Content
+ *
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available:
+ *
+ * Custom Property | Description | Default
+ * --------------------------------|-----------------------|---------
+ * --vaadin-dashboard-item-colspan | colspan of the widget | 1
+ * --vaadin-dashboard-item-rowspan | rowspan of the widget | 1
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `selected` | Set when the element is selected.
+ * `focused` | Set when the element is focused.
+ * `move-mode` | Set when the element is being moved.
+ * `resize-mode` | Set when the element is being resized.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*/
declare class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(HTMLElement))) {
/**
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index 07e24143a4..be96a7f867 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -22,6 +22,52 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
/**
* A Widget component for use with the Dashboard component
*
+ * ```html
+ *
+ * Header
+ * Content
+ *
+ * ```
+ *
+ * ### Customization
+ *
+ * You can configure the item by using `slot` names.
+ *
+ * Slot name | Description
+ * ----------|-------------
+ * `title` | A slot for the widget title. Overrides the `widgetTitle` property.
+ * `header` | A slot for the widget header.
+ *
+ * #### Example
+ *
+ * ```html
+ *
+ * Header
+ * Title
+ * Content
+ *
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available:
+ *
+ * Custom Property | Description | Default
+ * --------------------------------|-----------------------|---------
+ * --vaadin-dashboard-item-colspan | colspan of the widget | 1
+ * --vaadin-dashboard-item-rowspan | rowspan of the widget | 1
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `selected` | Set when the element is selected.
+ * `focused` | Set when the element is focused.
+ * `move-mode` | Set when the element is being moved.
+ * `resize-mode` | Set when the element is being resized.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
* @customElement
* @extends HTMLElement
* @mixes ElementMixin
diff --git a/packages/dashboard/src/vaadin-dashboard.d.ts b/packages/dashboard/src/vaadin-dashboard.d.ts
index 4a41da6795..ed899d07f8 100644
--- a/packages/dashboard/src/vaadin-dashboard.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard.d.ts
@@ -150,6 +150,70 @@ export interface DashboardI18n {
/**
* A responsive, grid-based dashboard layout component
+ *
+ * ### Quick Start
+ *
+ * Assign an array to the [`items`](#/elements/vaadin-dashboard#property-items) property.
+ * Set a renderer function to the [`renderer`](#/elements/vaadin-dashboard#property-renderer) property.
+ *
+ * The widgets and the sections will be generated and configured based on the renderer and the items provided.
+ *
+ * ```html
+ *
+ * ```
+ *
+ * ```js
+ * const dashboard = document.querySelector('vaadin-dashboard');
+ *
+ * dashboard.items = [
+ * { title: 'Widget 1 title', header: 'Widget 1 Header', rowspan: 2 },
+ * { title: 'Widget 2 title', header: 'Widget 2 Header', colspan: 2 },
+ * {
+ * title: 'Section title',
+ * items: [{ title: 'Widget in section title', header: 'Widget in Section Header'}]
+ * },
+ * // ... more items
+ * ];
+ *
+ * dashboard.renderer = (root, _dashboard, { item }) => {
+ * if (!root.firstElementChild) {
+ * root.append(document.createElement('vaadin-dashboard-widget'));
+ * }
+ * root.firstElementChild.widgetTitle = item.title;
+ * root.firstElementChild.innerHTML = `
+ * ${item.header}
+ * Widget content
+ * `;
+ * };
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available:
+ *
+ * Custom Property | Description | Default
+ * ----------------------------------|----------------------------------------|---------
+ * --vaadin-dashboard-col-min-width | minimum column width of the dashboard | 25rem
+ * --vaadin-dashboard-col-max-width | maximum column width of the dashboard | 1fr
+ * --vaadin-dashboard-row-min-height | maximum column count of the dashboard | auto
+ * --vaadin-dashboard-gap | gap between the cells of the dashboard | 1rem
+ * --vaadin-dashboard-col-max-count | maximum column count of the dashboard | number of columns
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `editable` | Set when the dashboard is editable.
+ * `dense-layout` | Set when the dashboard is in dense mode.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @fires {CustomEvent} dashboard-item-moved - Fired when an item was moved
+ * @fires {CustomEvent} dashboard-item-resized - Fired when an item was resized
+ * @fires {CustomEvent} dashboard-item-removed - Fired when an item was removed
+ * @fires {CustomEvent} dashboard-item-selected-changed - Fired when an item selected state changed
+ * @fires {CustomEvent} dashboard-item-move-mode-changed - Fired when an item move mode changed
+ * @fires {CustomEvent} dashboard-item-resize-mode-changed - Fired when an item resize mode changed
*/
declare class Dashboard extends DashboardLayoutMixin(
ElementMixin(HTMLElement),
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
index d6a6decb35..cef6b53e26 100644
--- a/packages/dashboard/src/vaadin-dashboard.js
+++ b/packages/dashboard/src/vaadin-dashboard.js
@@ -33,6 +33,63 @@ import { WidgetResizeController } from './widget-resize-controller.js';
/**
* A responsive, grid-based dashboard layout component
*
+ * ### Quick Start
+ *
+ * Assign an array to the [`items`](#/elements/vaadin-dashboard#property-items) property.
+ * Set a renderer function to the [`renderer`](#/elements/vaadin-dashboard#property-renderer) property.
+ *
+ * The widgets and the sections will be generated and configured based on the renderer and the items provided.
+ *
+ * ```html
+ *
+ * ```
+ *
+ * ```js
+ * const dashboard = document.querySelector('vaadin-dashboard');
+ *
+ * dashboard.items = [
+ * { title: 'Widget 1 title', header: 'Widget 1 Header', rowspan: 2 },
+ * { title: 'Widget 2 title', header: 'Widget 2 Header', colspan: 2 },
+ * {
+ * title: 'Section title',
+ * items: [{ title: 'Widget in section title', header: 'Widget in Section Header'}]
+ * },
+ * // ... more items
+ * ];
+ *
+ * dashboard.renderer = (root, _dashboard, { item }) => {
+ * if (!root.firstElementChild) {
+ * root.append(document.createElement('vaadin-dashboard-widget'));
+ * }
+ * root.firstElementChild.widgetTitle = item.title;
+ * root.firstElementChild.innerHTML = `
+ * ${item.header}
+ * Widget content
+ * `;
+ * };
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available:
+ *
+ * Custom Property | Description | Default
+ * ----------------------------------|----------------------------------------|---------
+ * --vaadin-dashboard-col-min-width | minimum column width of the dashboard | 25rem
+ * --vaadin-dashboard-col-max-width | maximum column width of the dashboard | 1fr
+ * --vaadin-dashboard-row-min-height | maximum column count of the dashboard | auto
+ * --vaadin-dashboard-gap | gap between the cells of the dashboard | 1rem
+ * --vaadin-dashboard-col-max-count | maximum column count of the dashboard | number of columns
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description
+ * ---------------|-------------
+ * `editable` | Set when the dashboard is editable.
+ * `dense-layout` | Set when the dashboard is in dense mode.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
* @fires {CustomEvent} dashboard-item-moved - Fired when an item was moved
* @fires {CustomEvent} dashboard-item-resized - Fired when an item was resized
* @fires {CustomEvent} dashboard-item-removed - Fired when an item was removed