# Creating UI

> How to use components, create your own, or integrate 3rd party web components.

Parent index: [Vaadin Docs](https://vaadin.com/docs/v23/llms.txt)

## Overview

- [Creating UI](https://vaadin.com/docs/v23/create-ui.md): How to use components, create your own, or integrate 3rd party web components.

## Basic Features

- [Basic Features](https://vaadin.com/docs/v23/create-ui/basic-features.md): Common features available in all components.

## Enabled State

- [Enabled State](https://vaadin.com/docs/v23/create-ui/enabled-state.md): Components that allow user interaction can have three different enabled states.

## Keyboard Shortcuts

- [Keyboard Shortcuts](https://vaadin.com/docs/v23/create-ui/shortcut.md): Shortcuts allow you to assign keyboard shortcuts to your components to improve end-user experience.

## HTML Elements

- [HTML Elements](https://vaadin.com/docs/v23/create-ui/standard-html.md): Flow comes with a set of components for standard HTML elements.

## Creating Components

- [Creating Components](https://vaadin.com/docs/v23/create-ui/creating-components.md): Creating components by combining or extending existing ones, or by constructing a new one using the Element API.
- [Single Element](https://vaadin.com/docs/v23/create-ui/creating-components/basic.md): Creating a component using a single HTML element.
- [Multiple Elements](https://vaadin.com/docs/v23/create-ui/creating-components/many-elements.md): Creating a component using multiple HTML elements.
- [Using API Helpers to Define Component Properties](https://vaadin.com/docs/v23/create-ui/creating-components/property-descriptor.md)
- [Using Existing Components](https://vaadin.com/docs/v23/create-ui/creating-components/composite.md): Creating a component by combining existing components together.
- [Extending Components](https://vaadin.com/docs/v23/create-ui/creating-components/extending-component.md): Create a new component by extending any existing component.
- [Using Events](https://vaadin.com/docs/v23/create-ui/creating-components/events.md): How to handle events in your components.
- [Component Containers](https://vaadin.com/docs/v23/create-ui/creating-components/container.md): Creating a component that can contain other components.
- [Lifecycle Callbacks](https://vaadin.com/docs/v23/create-ui/creating-components/lifecycle-callbacks.md): Reacting when your component is attached to or detached from the application.
- [Using Vaadin Mixin Interfaces](https://vaadin.com/docs/v23/create-ui/creating-components/mixins.md)

## Integrating Web Components

- [Integrating Web Components](https://vaadin.com/docs/v23/create-ui/web-components.md)
- [Creating a Java API](https://vaadin.com/docs/v23/create-ui/web-components/java-api-for-a-web-component.md)
- [Debugging](https://vaadin.com/docs/v23/create-ui/web-components/debugging-a-web-component-integration.md)
- [In-Project Component](https://vaadin.com/docs/v23/create-ui/web-components/an-in-project-web-component.md)
- [Web Components Intro](https://vaadin.com/docs/v23/create-ui/web-components/introduction-to-webcomponents.md)

## Element API

- [Element API](https://vaadin.com/docs/v23/create-ui/element-api.md): You can control the HTML DOM in the browser from the server-side using the Element API.
- [Properties and Attributes](https://vaadin.com/docs/v23/create-ui/element-api/properties-attributes.md): Get and set DOM properties and attributes.
- [Listening to User Events](https://vaadin.com/docs/v23/create-ui/element-api/event-listener.md): Listen to any browser events.
- [Remote Procedure Calls](https://vaadin.com/docs/v23/create-ui/element-api/client-server-rpc.md): Remote procedure calls (RPCs) are a way to run procedures or subroutines in a different address space, typically on another machine.
- [Retrieving User Input](https://vaadin.com/docs/v23/create-ui/element-api/user-input.md): Use the Element API to retrieve user input from the client-side.
- [Dynamic Styling](https://vaadin.com/docs/v23/create-ui/element-api/dynamic-styling.md): You can use the Element API to style elements using dynamic class names or inline styles.
- [Shadow Roots](https://vaadin.com/docs/v23/create-ui/element-api/shadow-root.md): Using shadow roots in server-side elements and components.

## Drag and Drop

- [Drag and Drop](https://vaadin.com/docs/v23/create-ui/dnd.md): Drag and drop between components as well as between the UI and the operating system.
- [Drag Source](https://vaadin.com/docs/v23/create-ui/dnd/drag-source.md): Make any component draggable by the user and configure the drag operation.
- [Drop Target](https://vaadin.com/docs/v23/create-ui/dnd/drop-target.md): Make any component a drop target that the user can drop things on to.

## Templates

- [Templates](https://vaadin.com/docs/v23/create-ui/templates.md): In addition to imperative Java code, you can build views declaratively using templates. The components in such a template can be bound directly to data items.
- [Template-based Components](https://vaadin.com/docs/v23/create-ui/templates/basic.md)
- [Binding to Components](https://vaadin.com/docs/v23/create-ui/templates/components.md)
- [Combining with Binder](https://vaadin.com/docs/v23/create-ui/templates/and-binder.md)
- [Sub-Templates](https://vaadin.com/docs/v23/create-ui/templates/subtemplate.md)
- [Adding Server-side Components](https://vaadin.com/docs/v23/create-ui/templates/components-in-slot.md)
- [Styling](https://vaadin.com/docs/v23/create-ui/templates/styling-templates.md)
- [Detecting Component Mappings](https://vaadin.com/docs/v23/create-ui/templates/component-integration.md)
- [Limitations](https://vaadin.com/docs/v23/create-ui/templates/limitations.md)
- [Polymer Templates (deprecated)](https://vaadin.com/docs/v23/create-ui/templates/polymer.md)
  - [Creating a Simple Component Using the Template API](https://vaadin.com/docs/v23/create-ui/templates/polymer/polymer-template-basic.md)
  - [Combining Templates and Binders](https://vaadin.com/docs/v23/create-ui/templates/polymer/polymer-template-and-binder.md)
  - [Dynamically Adding Server-side Components to Templates](https://vaadin.com/docs/v23/create-ui/templates/polymer/polymer-template-components-in-slot.md)
  - [Handling User Events](https://vaadin.com/docs/v23/create-ui/templates/polymer/event-handlers.md)
  - [Binding Model Data](https://vaadin.com/docs/v23/create-ui/templates/polymer/bindings.md)
  - [Using Model Beans](https://vaadin.com/docs/v23/create-ui/templates/polymer/model-bean.md)
  - [Using Model Encoders](https://vaadin.com/docs/v23/create-ui/templates/polymer/model-encoders.md)
  - [Creating Contents Dynamically Based on Items List](https://vaadin.com/docs/v23/create-ui/templates/polymer/list-bindings.md)
  - [Using Parent Layout](https://vaadin.com/docs/v23/create-ui/templates/polymer/parent-layout.md)