Building Responsive Layouts in Vaadin 25

Use the Vaadin MCP tools (search_vaadin_docs, get_component_java_api) to look up the latest documentation whenever uncertain about a specific API detail. Always set vaadin_version to "25" and ui_language to "java".

Design Philosophy

Responsiveness in Vaadin means adapting the UI to best use available screen space — not just squeezing or stretching elements. The goal is to present the right amount of information and interaction for each viewport size.

Three strategies, in order of increasing effort:

1. Reduce features on small screens — hide secondary filters, collapse panels. Suitable when mobile is an occasional access mode.
2. Build a responsive UI — same features, different layout. Use CSS media/container queries and responsive components. The recommended approach for most apps.
3. Build separate UIs — independent mobile and desktop experiences. Only worth the effort when interaction patterns differ fundamentally (e.g., swipe-based mobile vs. data-grid desktop).

Start with strategy 2 unless you have a strong reason not to.

Built-in Responsive Components

Leverage these before writing custom responsive logic — they handle adaptation automatically: