> Markdown version of [UI Basics](https://vaadin.com/docs/next/building-apps/ui-basics). Section index: [llms.txt](https://vaadin.com/docs/next/building-apps/llms.txt)

# UI Basics

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](https://vaadin.com/docs/next/building-apps/ui-basics/compose.md), which explains how to think in components, and [Arrange with Layouts](https://vaadin.com/docs/next/building-apps/ui-basics/layouts.md). 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](https://vaadin.com/docs/next/building-apps/views.md). To build reusable components of your own, see [Components](https://vaadin.com/docs/next/building-apps/components.md).

## <a id="topics"></a>Topics

- [Compose with Components](https://vaadin.com/docs/next/building-apps/ui-basics/compose.md): Learn how to decompose user interfaces into a tree of components and how those components communicate.
- [Arrange with Layouts](https://vaadin.com/docs/next/building-apps/ui-basics/layouts.md): Learn how to arrange components horizontally, vertically, and in form grids using Vaadin's built-in layout components.
- [Write HTML](https://vaadin.com/docs/next/building-apps/ui-basics/write-html.md): Learn how to create HTML structure in Java using Vaadin's built-in HTML element classes.
- [Add Images and Icons](https://vaadin.com/docs/next/building-apps/ui-basics/add-images-icons.md): Learn how to display images and use icons in your Vaadin application.
- [Add Dialogs and Popovers](https://vaadin.com/docs/next/building-apps/ui-basics/add-dialogs-popovers.md): Learn how to use Confirm Dialog, Dialog, and Popover to present information and collect input in overlays.
- [Show a Notification](https://vaadin.com/docs/next/building-apps/ui-basics/show-notification.md): Learn how to show notifications to inform users about events, completed actions, and errors.
- [Add Styling](https://vaadin.com/docs/next/building-apps/ui-basics/add-styling.md): Learn how to style components using theme variants, inline styles, and CSS class names — starting from pure Java.
- [Add Keyboard Shortcuts](https://vaadin.com/docs/next/building-apps/ui-basics/add-keyboard-shortcuts.md): Learn how to add keyboard shortcuts to buttons and input fields in your Vaadin application.
- [Add Drag and Drop](https://vaadin.com/docs/next/building-apps/ui-basics/add-drag-and-drop.md): Learn how to make components draggable and droppable in your Vaadin application.
- [Handle Errors](https://vaadin.com/docs/next/building-apps/ui-basics/handle-errors.md): Learn how to handle unexpected exceptions, navigation errors, and exceptions thrown by application services in a Vaadin Flow application.