# Components > A list of available Vaadin components. Parent index: [Vaadin Docs](https://vaadin.com/docs/latest/llms.txt) ## Overview - [Components](https://vaadin.com/docs/latest/components.md): A list of available Vaadin components. ## Figma Libraries - [Figma Libraries](https://vaadin.com/docs/latest/components/figma.md): A list of official Vaadin Figma libraries. ## Auto CRUD - [Auto CRUD](https://vaadin.com/docs/latest/components/auto-crud.md): Used to populate automatically CRUD views and actions based on a Java backend service. ## Auto Grid - [Auto Grid](https://vaadin.com/docs/latest/components/auto-grid.md): Used for displaying tabular data based on a Java backend service. ## Auto Form - [Auto Form](https://vaadin.com/docs/latest/components/auto-form.md): Auto Form is a component that renders a form for editing, updating and deleting items from a backend service. ## Accordion - [Accordion](https://vaadin.com/docs/latest/components/accordion.md): Accordion is a vertically stacked set of expandable panels. - [Styling](https://vaadin.com/docs/latest/components/accordion/styling.md): Styling API reference for the Accordion component. ## App Layout - [App Layout](https://vaadin.com/docs/latest/components/app-layout.md): App Layout is a component for building common application layouts. - [Styling](https://vaadin.com/docs/latest/components/app-layout/styling.md): Styling API reference for the App Layout component. ## Avatar - [Avatar](https://vaadin.com/docs/latest/components/avatar.md): Avatar is a graphical representation of an object or entity, for example, a person or an organization. - [Styling](https://vaadin.com/docs/latest/components/avatar/styling.md): Styling API reference for the Avatar and Avatar Group components. ## Badge - [Badge](https://vaadin.com/docs/latest/components/badge.md): Badges are colored text elements containing small bits of information. - [Styling](https://vaadin.com/docs/latest/components/badge/styling.md): Styling API reference for the Badge component. ## Breadcrumbs - [Breadcrumbs](https://vaadin.com/docs/latest/components/breadcrumbs.md): Breadcrumbs show the user's location within a hierarchy and provide links back to higher levels. - [Styling](https://vaadin.com/docs/latest/components/breadcrumbs/styling.md): Styling API reference for the Breadcrumbs component. ## Button - [Button](https://vaadin.com/docs/latest/components/button.md): The Button component allows users to perform actions. It comes in several different style variants and supports icons, as well as text labels. - [Styling](https://vaadin.com/docs/latest/components/button/styling.md): Styling API reference for the Button components. ## CRUD - [CRUD](https://vaadin.com/docs/latest/components/crud.md): CRUD is a component for managing a dataset. It allows for easy displaying, editing, creating, and deleting of items. - [Styling](https://vaadin.com/docs/latest/components/crud/styling.md): Styling API reference for the CRUD component. ## Card - [Card](https://vaadin.com/docs/latest/components/card.md): The Card component is a versatile container for grouping related content and actions, with several customization options for layout and appearance. - [Styling](https://vaadin.com/docs/latest/components/card/styling.md): Styling API reference for the Card components. ## Charts - [Charts](https://vaadin.com/docs/latest/components/charts.md): Charts is a feature-rich interactive charting library with a vast number of different chart types from basic plotting to complex financial charting. - [Basic Use](https://vaadin.com/docs/latest/components/charts/basic-use.md): The basic use of charts in a view. - [Chart Types](https://vaadin.com/docs/latest/components/charts/charttypes.md): A list of chart types available with information on using and configuring them. - [Line & Spline](https://vaadin.com/docs/latest/components/charts/charttypes/line-and-spline.md): Charts that connect data points with straight lines or smooth curves. - [Area](https://vaadin.com/docs/latest/components/charts/charttypes/area.md): Charts that fill the area between the line and a threshold value. - [Column & Bar](https://vaadin.com/docs/latest/components/charts/charttypes/column-and-bar.md): Charts that illustrate values as vertical or horizontal bars. - [Error Bars](https://vaadin.com/docs/latest/components/charts/charttypes/error-bars.md): High and low values in statistical data, drawn as whiskers on a stem. - [Box Plot](https://vaadin.com/docs/latest/components/charts/charttypes/box-plot.md): Charts that display the distribution of statistical variables. - [Scatter](https://vaadin.com/docs/latest/components/charts/charttypes/scatter.md): Charts that display a set of unconnected data points. - [Bubble](https://vaadin.com/docs/latest/components/charts/charttypes/bubble.md): Scatter charts that show a third dimension as the size of each point. - [Bullet](https://vaadin.com/docs/latest/components/charts/charttypes/bullet.md): Charts that display a value together with a target value. - [Organization](https://vaadin.com/docs/latest/components/charts/charttypes/organization.md): Charts that visualize parent/child relationships between nodes. - [Sankey](https://vaadin.com/docs/latest/components/charts/charttypes/sankey.md): Charts that visualize how quantities flow between two sets of nodes. - [Pie](https://vaadin.com/docs/latest/components/charts/charttypes/pie.md): Charts that illustrate values as sectors proportional to their sum. - [Gantt](https://vaadin.com/docs/latest/components/charts/charttypes/gantt.md): A bar chart that visualizes a project schedule. - [Gauge](https://vaadin.com/docs/latest/components/charts/charttypes/gauge.md): One-dimensional charts with a circular Y-axis and a rotating pointer. - [Solid Gauge](https://vaadin.com/docs/latest/components/charts/charttypes/solid-gauge.md): Gauges that show the value as a solid-color arc instead of a pointer. - [Area & Column Range](https://vaadin.com/docs/latest/components/charts/charttypes/area-and-column-range.md): Charts that display an area or column between a minimum and a maximum value. - [Polar, Wind Rose & Spiderweb](https://vaadin.com/docs/latest/components/charts/charttypes/polar.md): Charts drawn in polar coordinates, with the X axis curved on a circle. - [Funnel & Pyramid](https://vaadin.com/docs/latest/components/charts/charttypes/funnel-and-pyramid.md): Charts that visualize stages of a process as layers of diminishing size. - [Waterfall](https://vaadin.com/docs/latest/components/charts/charttypes/waterfall.md): Charts that visualize level changes from an initial to a final level. - [Timeline](https://vaadin.com/docs/latest/components/charts/charttypes/timeline.md): Charts that visualize events on a time axis. - [X-Range](https://vaadin.com/docs/latest/components/charts/charttypes/xrange.md): Charts that visualize a range on the X axis. - [Heat Map](https://vaadin.com/docs/latest/components/charts/charttypes/heatmap.md): A two-dimensional grid where the color of a cell reflects a value. - [Tree Map](https://vaadin.com/docs/latest/components/charts/charttypes/treemap.md): Nested rectangles whose size represents the value of each item. - [Polygon](https://vaadin.com/docs/latest/components/charts/charttypes/polygon.md): Freeform filled or stroked shapes drawn in the Cartesian plane. - [Flags](https://vaadin.com/docs/latest/components/charts/charttypes/flags.md): Call-out labels that annotate a series or the X axis. - [OHLC & Candlestick](https://vaadin.com/docs/latest/components/charts/charttypes/ohlc-and-candlestick.md): Charts that display the change in price over a period of time. - [Data Labels](https://vaadin.com/docs/latest/components/charts/charttypes/data-labels.md): How to configure the labels shown next to data points. - [Data Point Markers](https://vaadin.com/docs/latest/components/charts/charttypes/markers.md): How to configure the markers that visualize data points. - [3D Charts](https://vaadin.com/docs/latest/components/charts/charttypes/3d.md): How to give a chart a three-dimensional projection. - [Chart Configuration](https://vaadin.com/docs/latest/components/charts/configuration.md): How to configure the various types of charts. - [Chart Styling](https://vaadin.com/docs/latest/components/charts/styling.md): How to style a chart with CSS or the Java API in your project. - [Style Properties](https://vaadin.com/docs/latest/components/charts/styling/styling.md): Styling API reference for the Vaadin Charts. - [Chart Data](https://vaadin.com/docs/latest/components/charts/data.md): Explains the storage and use of chart data. - [AI-Powered Chart](https://vaadin.com/docs/latest/components/charts/ai-powered.md): Let users build and update charts from your application database using natural language. - [Timeline](https://vaadin.com/docs/latest/components/charts/timeline.md): How to add the ability to select different time ranges for charts. - [Gantt Chart](https://vaadin.com/docs/latest/components/charts/gantt.md): Vaadin Charts support for creating Gantt charts. - [Exporting](https://vaadin.com/docs/latest/components/charts/exporting.md): How to export charts using different methods. - [Remote Export Service](https://vaadin.com/docs/latest/components/charts/exporting/remote-server.md): How to export charts to various image formats using a remote export service. - [Offline Module (Unsupported)](https://vaadin.com/docs/latest/components/charts/exporting/offline.md): How to export charts on the client side using the Highcharts offline exporting module. - [Usage with React](https://vaadin.com/docs/latest/components/charts/usage-with-react.md): Examples of using Charts with React - [Usage with Lit](https://vaadin.com/docs/latest/components/charts/usage-with-lit.md): Examples of using Charts with Lit. ## Checkbox - [Checkbox](https://vaadin.com/docs/latest/components/checkbox.md): How to use Checkbox, an input field for a binary choice and Checkbox Group to group related items. - [Styling](https://vaadin.com/docs/latest/components/checkbox/styling.md): Styling API reference for the Checkbox component. ## Combo Box - [Combo Box](https://vaadin.com/docs/latest/components/combo-box.md): Combo Box allows the user to choose a value from a filterable list of options presented in an overlay. - [Styling](https://vaadin.com/docs/latest/components/combo-box/styling.md): Styling API reference for the Combo Box component. ## Confirm Dialog - [Confirm Dialog](https://vaadin.com/docs/latest/components/confirm-dialog.md): Confirm Dialog is a modal Dialog used to confirm user actions. - [Styling](https://vaadin.com/docs/latest/components/confirm-dialog/styling.md): Styling API reference for the Confirm Dialog component. ## Context Menu - [Context Menu](https://vaadin.com/docs/latest/components/context-menu.md): Context Menu is a component that can be attached to any component to display a context menu. - [Styling](https://vaadin.com/docs/latest/components/context-menu/styling.md): Styling API reference for the Context Menu component. ## Custom Field - [Custom Field](https://vaadin.com/docs/latest/components/custom-field.md): Use Custom Field for wrapping multiple components as a single field. - [Styling](https://vaadin.com/docs/latest/components/custom-field/styling.md): Styling API reference for the Custom Field component. ## Dashboard - [Dashboard](https://vaadin.com/docs/latest/components/dashboard.md): A component for building static dashboard layouts and dynamic, user-configurable dashboards. - [Styling](https://vaadin.com/docs/latest/components/dashboard/styling.md): Styling API reference for the Dashboard component. ## Date Picker - [Date Picker](https://vaadin.com/docs/latest/components/date-picker.md): Date Picker is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay. - [Styling](https://vaadin.com/docs/latest/components/date-picker/styling.md): Styling API reference for the Date Picker component. - [Date Formats](https://vaadin.com/docs/latest/components/date-picker/date-formats.md): Configuring date formats for Date Picker. ## Date Time Picker - [Date Time Picker](https://vaadin.com/docs/latest/components/date-time-picker.md): Date Time Picker is an input field for selecting both a date and a time. - [Styling](https://vaadin.com/docs/latest/components/date-time-picker/styling.md): Styling API reference for the Date Time Picker component. ## Details - [Details](https://vaadin.com/docs/latest/components/details.md): Details is an expandable panel for showing and hiding content from the user, to make the UI less cluttered. - [Styling](https://vaadin.com/docs/latest/components/details/styling.md): Styling API reference for the Details component. ## Dialog - [Dialog](https://vaadin.com/docs/latest/components/dialog.md): Dialog is a small window that can be used to present information and user interface elements in an overlay. - [Styling](https://vaadin.com/docs/latest/components/dialog/styling.md): Styling API reference for the Dialog component. ## Email Field - [Email Field](https://vaadin.com/docs/latest/components/email-field.md): Email Field is an extension of Text Field that accepts only email addresses as input. - [Styling](https://vaadin.com/docs/latest/components/email-field/styling.md): Styling API reference for the Email Field component. ## Form Layout - [Form Layout](https://vaadin.com/docs/latest/components/form-layout.md): Using Form Layout to build responsive forms with multiple columns and better positioned input labels. - [Styling](https://vaadin.com/docs/latest/components/form-layout/styling.md): Styling API reference for the Form Layout component. - [AI Form Filler](https://vaadin.com/docs/latest/components/form-layout/ai-powered.md): Let users fill forms from natural-language input or attached files. ## Grid - [Grid](https://vaadin.com/docs/latest/components/grid.md): Vaadin Grid is a component for displaying tabular data, including various enhancements to grid renderings. - [Columns](https://vaadin.com/docs/latest/components/grid/columns.md): Learn about aligning, freezing, grouping, headers and footers, visibility, and width of the Vaadin Grid component's columns. - [Selection](https://vaadin.com/docs/latest/components/grid/selection.md) - [Renderers](https://vaadin.com/docs/latest/components/grid/renderers.md): Use renderers to render the contents of a Vaadin Grid component's specific columns using components and native HTML elements. - [Drag and Drop](https://vaadin.com/docs/latest/components/grid/drag-drop.md): Add functionality for drag and drop to the Vaadin Grid component for improved interactivity. - [Data Binding](https://vaadin.com/docs/latest/components/grid/data-binding.md): Binding and displaying data in Grid - [Inline Editing](https://vaadin.com/docs/latest/components/grid/inline-editing.md): Learn how to enable inline editing in the Vaadin Grid component for enhanced data management. - [Styling](https://vaadin.com/docs/latest/components/grid/styling.md): Styling API reference for the Grid component. ## Grid Pro - [Grid Pro](https://vaadin.com/docs/latest/components/grid-pro.md): Grid Pro, an extension of Grid, provides inline editing with full keyboard navigation. - [Styling](https://vaadin.com/docs/latest/components/grid-pro/styling.md): Styling API reference for the Grid Pro component. ## HTML Elements - [HTML Elements](https://vaadin.com/docs/latest/components/html-elements.md): Standard HTML elements that have direct counterparts in Vaadin Flow. - [Table](https://vaadin.com/docs/latest/components/html-elements/table.md): Components for building semantic HTML tables in Flow, with captions, sections, column groups, spanning cells, and signal-bound rows. ## Horizontal Layout - [Horizontal Layout](https://vaadin.com/docs/latest/components/horizontal-layout.md): Horizontal Layout places components side-by-side in a row. - [Styling](https://vaadin.com/docs/latest/components/horizontal-layout/styling.md): Styling API reference for the Horizontal Layout component. ## Icons - [Icons](https://vaadin.com/docs/latest/components/icons.md): Lumo and Vaadin icons and how to use them in your projects. - [Default Icons](https://vaadin.com/docs/latest/components/icons/default-icons.md): Access and use Vaadin's default icons to enhance your application's design. - [Styling](https://vaadin.com/docs/latest/components/icons/styling.md): Styling API reference for the Icon component. ## List Box - [List Box](https://vaadin.com/docs/latest/components/list-box.md): List Box allows the user to select one or more values from a scrollable list of items. - [Styling](https://vaadin.com/docs/latest/components/list-box/styling.md): Styling API reference for the List Box component. ## Login - [Login](https://vaadin.com/docs/latest/components/login.md): Login is a component that contains a log-in form. You can use it to authenticate the user with a username and password. - [Styling](https://vaadin.com/docs/latest/components/login/styling.md): Styling API reference for the Login component. ## Map - [Map](https://vaadin.com/docs/latest/components/map.md): Map is a component for displaying geographical maps from various sources. - [Styling](https://vaadin.com/docs/latest/components/map/styling.md): Styling API reference for the Map component. ## Markdown - [Markdown](https://vaadin.com/docs/latest/components/markdown.md): Markdown allows you to render Markdown content in your application with support for basic formatting, lists, links, and more. ## Master-Detail Layout - [Master-Detail Layout](https://vaadin.com/docs/latest/components/master-detail-layout.md): Master-Detail Layout makes it easy to create responsive horizontally or vertically split UIs. - [Styling](https://vaadin.com/docs/latest/components/master-detail-layout/styling.md): Styling API reference for the Master Detail Layout component. ## Menu Bar - [Menu Bar](https://vaadin.com/docs/latest/components/menu-bar.md): Menu Bar is a horizontal button bar with hierarchical drop-down menus. - [Styling](https://vaadin.com/docs/latest/components/menu-bar/styling.md): Styling API reference for the Menu Bar component. ## Message Input - [Message Input](https://vaadin.com/docs/latest/components/message-input.md): Message Input allows users to author and send messages. - [Styling](https://vaadin.com/docs/latest/components/message-input/styling.md): Styling API reference for the Message Input component. ## Message List - [Message List](https://vaadin.com/docs/latest/components/message-list.md): Message List allows you to show a list of messages, for example, a chat log. - [Styling](https://vaadin.com/docs/latest/components/message-list/styling.md): Styling API reference for the Message List component. ## Multi-Select Combo Box - [Multi-Select Combo Box](https://vaadin.com/docs/latest/components/multi-select-combo-box.md): Adding a combo box to a project for users to be able to make multiple selections. - [Styling](https://vaadin.com/docs/latest/components/multi-select-combo-box/styling.md): Styling API reference for the Multi-Select Combo Box component. ## Notification - [Notification](https://vaadin.com/docs/latest/components/notification.md): Notification is used to provide feedback to the user about activities, processes, and events in the application. - [Styling](https://vaadin.com/docs/latest/components/notification/styling.md): Styling API reference for the Notification component. ## Number Field - [Number Field](https://vaadin.com/docs/latest/components/number-field.md): Number Field is an input field that accepts only numeric input. - [Styling](https://vaadin.com/docs/latest/components/number-field/styling.md): Styling API reference for the Number Field component. ## Password Field - [Password Field](https://vaadin.com/docs/latest/components/password-field.md): Password Field is an input field for entering passwords. - [Styling](https://vaadin.com/docs/latest/components/password-field/styling.md): Styling API reference for the Password Field component. ## Popover - [Popover](https://vaadin.com/docs/latest/components/popover.md): Popover is a generic overlay whose position is anchored to an element in the UI. - [Styling](https://vaadin.com/docs/latest/components/popover/styling.md): Styling API reference for the Popover component. ## Progress Bar - [Progress Bar](https://vaadin.com/docs/latest/components/progress-bar.md): Progress Bar shows the amount of completion of a task or process. - [Styling](https://vaadin.com/docs/latest/components/progress-bar/styling.md): Styling API reference for the Progress Bar component. ## Radio Button - [Radio Button](https://vaadin.com/docs/latest/components/radio-button.md): Radio Button Group allows users to select one value among multiple choices. - [Styling](https://vaadin.com/docs/latest/components/radio-button/styling.md): Styling API reference for the Radio Button and Radio Button Group components. ## Rich Text Editor - [Rich Text Editor](https://vaadin.com/docs/latest/components/rich-text-editor.md): Rich Text Editor allows the user to author text that has rich formatting. - [Styling](https://vaadin.com/docs/latest/components/rich-text-editor/styling.md): Styling API reference for the Rich Text Editor component. ## Scroller - [Scroller](https://vaadin.com/docs/latest/components/scroller.md): Scroller is a component container for creating scrollable areas in the UI. - [Styling](https://vaadin.com/docs/latest/components/scroller/styling.md): Styling API reference for the Scroller component. ## Select - [Select](https://vaadin.com/docs/latest/components/select.md): Select allows users to choose a single value from a list of options presented in an overlay. - [Styling](https://vaadin.com/docs/latest/components/select/styling.md): Styling API reference for the Select component. ## Side Navigation - [Side Navigation](https://vaadin.com/docs/latest/components/side-nav.md): Side Navigation provides a vertical list of navigation links with support for collapsible, nested sections. - [Styling](https://vaadin.com/docs/latest/components/side-nav/styling.md): Styling API reference for the Side Nav component. ## Slider - [Slider](https://vaadin.com/docs/latest/components/slider.md): Slider lets users pick a numeric value within a range by dragging a thumb along a track. - [Styling](https://vaadin.com/docs/latest/components/slider/styling.md): Styling API reference for the Slider component. ## Split Layout - [Split Layout](https://vaadin.com/docs/latest/components/split-layout.md): Split Layout is a component with two content areas and a draggable split handle between them. - [Styling](https://vaadin.com/docs/latest/components/split-layout/styling.md): Styling API reference for the Split Layout component. ## Spreadsheet - [Spreadsheet](https://vaadin.com/docs/latest/components/spreadsheet.md): Spreadsheet allows displaying and interacting with the contents of an Excel file. - [Styling](https://vaadin.com/docs/latest/components/spreadsheet/styling.md): Styling API reference for the Spreadsheet component. ## Switch - [Switch](https://vaadin.com/docs/latest/components/switch.md): Switch is an input field for toggling a single setting on or off. - [Styling](https://vaadin.com/docs/latest/components/switch/styling.md): Styling API reference for the Switch component. ## Tabs - [Tabs](https://vaadin.com/docs/latest/components/tabs.md): Tabs are used to organize and group content into sections that the user can navigate. - [Styling](https://vaadin.com/docs/latest/components/tabs/styling.md): Styling API reference for the Tab Sheet and Tabs components. ## Text Area - [Text Area](https://vaadin.com/docs/latest/components/text-area.md): Text Area is an input field component that allows entry of multiple lines of text. - [Styling](https://vaadin.com/docs/latest/components/text-area/styling.md): Styling API reference for the Text Area component. ## Text Field - [Text Field](https://vaadin.com/docs/latest/components/text-field.md): Text Field allows users to enter text. - [Styling](https://vaadin.com/docs/latest/components/text-field/styling.md): Styling API reference for the Text Field component. ## Time Picker - [Time Picker](https://vaadin.com/docs/latest/components/time-picker.md): Time Picker is an input field used for entering or selecting a specific time. - [Styling](https://vaadin.com/docs/latest/components/time-picker/styling.md): Styling API reference for the Time Picker component. ## Tooltip - [Tooltip](https://vaadin.com/docs/latest/components/tooltip.md): Tooltips are small pop-ups for providing additional information about other UI elements. - [Styling](https://vaadin.com/docs/latest/components/tooltip/styling.md): Styling API reference for the Tooltip component. ## Tree Grid - [Tree Grid](https://vaadin.com/docs/latest/components/tree-grid.md): The Tree Grid component displays hierarchical tabular data grouped in expandable nodes. - [Data Binding](https://vaadin.com/docs/latest/components/tree-grid/data-binding.md): Binding and displaying hierarchical data in Tree Grid - [Styling](https://vaadin.com/docs/latest/components/tree-grid/styling.md): Styling API reference for the Tree Grid component. - [Recipes](https://vaadin.com/docs/latest/components/tree-grid/recipes.md): Examples that combine Tree Grid features to solve common use cases. ## Upload - [Upload](https://vaadin.com/docs/latest/components/upload.md): Upload allows the user to upload files, giving feedback to the user during the upload process. - [Styling](https://vaadin.com/docs/latest/components/upload/styling.md): Styling API reference for the Upload component. - [File Handling](https://vaadin.com/docs/latest/components/upload/file-handling.md): Handling file uploads. - [Modular Upload](https://vaadin.com/docs/latest/components/upload/modular-upload.md): Build modular file upload experiences with independent components and flexible layouts. ## Vertical Layout - [Vertical Layout](https://vaadin.com/docs/latest/components/vertical-layout.md): Vertical Layout places components top-to-bottom in a column. - [Styling](https://vaadin.com/docs/latest/components/vertical-layout/styling.md): Styling API reference for the Vertical Layout component. ## Virtual List - [Virtual List](https://vaadin.com/docs/latest/components/virtual-list.md): Virtual List allows you to render a long list of items inside a scrollable container without sacrificing performance. - [Styling](https://vaadin.com/docs/latest/components/virtual-list/styling.md): Styling API reference for the Virtual List component.