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

## <a id="localization-accessibility"></a>Localization & Accessibility

These guides don’t cover translating the user interface, or checking that the application is accessible.

To translate the user interface, see the [Localization](https://vaadin.com/docs/latest/flow/i18n.md) reference. It covers translation files, language selection, the strings of Vaadin components, and number and date formats. To translate the titles of views and the items of the navigation menu, see [Translating Titles and Menu Items](https://vaadin.com/docs/latest/building-apps/views/add-navi-menu.md#translating-titles-and-menu-items).

Vaadin components are designed for compliance with [WCAG 2.1 level AA](https://vaadin.com/accessibility). Whether your application complies depends also on how you use them, for example on labels, headings, and color contrast. Some guides point out what to watch for, such as [Add Images and Icons](https://vaadin.com/docs/latest/building-apps/ui-basics/add-images-icons.md) for buttons with only an icon. To check the whole application, see [Evaluating Web Accessibility](https://www.w3.org/WAI/test-evaluate/) from the W3C. Automated checkers, such as [axe-core](https://github.com/dequelabs/axe-core), find some of the problems, but not all of them.

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

- [Compose with Components](https://vaadin.com/docs/latest/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/latest/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/latest/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/latest/building-apps/ui-basics/add-images-icons.md): Learn how to display images and use icons in your application.
- [Add Dialogs and Popovers](https://vaadin.com/docs/latest/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/latest/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/latest/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.
- [Customize the App Icon](https://vaadin.com/docs/latest/building-apps/ui-basics/customize-app-icon.md): Learn how to replace the browser tab icon, and where to go next for home screen icons and splash screens.
- [Add Keyboard Shortcuts](https://vaadin.com/docs/latest/building-apps/ui-basics/add-keyboard-shortcuts.md): Learn how to add keyboard shortcuts to buttons and input fields in your application.
- [Add Drag and Drop](https://vaadin.com/docs/latest/building-apps/ui-basics/add-drag-and-drop.md): Learn how to make components draggable and droppable in your application.
- [Handle Errors](https://vaadin.com/docs/latest/building-apps/ui-basics/handle-errors.md): Learn how to handle unexpected exceptions, navigation errors, and exceptions thrown by application services in an application with Flow views.