UI Basics
Learn how to compose, arrange, and style UI components in your Vaadin application.
These guides cover the building blocks of a Vaadin user interface. You build a user interface as a tree of components. It consists of ready-made components, such as buttons and text fields, layouts that arrange them, and HTML elements for the structure around them.
If you’re new to Vaadin, start with Compose with Components, which explains how to think in components, and Arrange with Layouts. The other guides each cover a single task, such as showing a notification or handling errors, and you can read them in any order.
To turn your user interface into views that users can navigate between, see Views & Navigation. To build reusable components of your own, see Components.
Topics
- Compose with Components
- Learn how to decompose user interfaces into a tree of components and how those components communicate.
- Arrange with Layouts
- Learn how to arrange components horizontally, vertically, and in form grids using Vaadin's built-in layout components.
- Write HTML
- Learn how to create HTML structure in Java using Vaadin's built-in HTML element classes.
- Add Images and Icons
- Learn how to display images and use icons in your Vaadin application.
- Add Dialogs and Popovers
- Learn how to use Confirm Dialog, Dialog, and Popover to present information and collect input in overlays.
- Show a Notification
- Learn how to show notifications to inform users about events, completed actions, and errors.
- Add Styling
- Learn how to style components using theme variants, inline styles, and CSS class names — starting from pure Java.
- Add Keyboard Shortcuts
- Learn how to add keyboard shortcuts to buttons and input fields in your Vaadin application.
- Add Drag and Drop
- Learn how to make components draggable and droppable in your Vaadin application.
- Handle Errors
- Learn how to handle unexpected exceptions, navigation errors, and exceptions thrown by application services in a Vaadin Flow application.