Docs

Components

Hilla is a framework for building reactive web applications on Java backends. You can use React UI components for building the frontend.

Hilla seamlessly integrates a React TypeScript frontend with a Spring Boot backend using type-safe server communication, integrated tooling, and accessible UI components. Scroll down this page to explore Hilla’s React component library.

An illustration of a chart, a data grid, and a date calendar UI component

Hilla’s React Component Library

In addition to the built-in components, you can use any other React components.

Accordion
Accordion is a vertically stacked set of expandable panels.
App Layout
App Layout is a component for building common application layouts.
Avatar
Avatar is a graphical representation of an object or entity, such as a person or an organization.
Board
Board is a powerful and easy-to-use layout element for building responsive views.
Button
The Button component allows the user to perform actions.
CRUD
CRUD is a component for managing a dataset. It allows for easy Displaying, Editing, Creating, and Deleting of items.
Charts
Charts is a feature-rich, interactive charting library with a vast number of chart types, from basic plotting to complex financial charting.
Checkbox
Checkbox is an input field representing a binary choice for the user. Checkbox Group is a group of related binary choices.
Combo Box
Combo Box allows the user to choose a value from a filterable list of options presented in an overlay.
Confirm Dialog
Confirm Dialog is a modal Dialog used to confirm user actions.
Context Menu
Context Menu is a component that you can attach to any component to display a context menu.
Cookie Consent
Cookie Consent can help you to comply with privacy laws, such as General Data Protection Regulation (GDPR) and California Consumer Privacy Act (CCPA).
Custom Field
Custom Field is a component for wrapping multiple components as a single field.
Date Picker
Date Picker is an input field that allows the user to enter a date, or select one from a calendar overlay.
Date Time Picker
Date Time Picker is an input field for selecting a date and time.
Details
Details is an expandable panel for showing and hiding content from the user.
Dialog
Dialog is a small window that can be used to present information and user interface elements in an overlay.
Email Field
An extension of Text Field, this field only accepts email addresses as input.
Form Layout
Form Layout allows you to build responsive forms with multiple columns.
Grid
Grid is a component for showing tabular data.
Grid Pro
Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation.
Horizontal Layout
Horizontal Layout places components side-by-side in a row.
Input Fields
All input field components share a common set of features.
Integer Field
Integer Field is used to allow only integers to be entered.
List Box
List Box allows the user to select one or more values from a scrollable list of items.
Login
Login is a component that contains a log-in form. You can use it to authenticate the user with a username and password.
Menu Bar
Menu Bar is a horizontal button bar with hierarchical drop-down menus.
Message Input
Message Input allows users to author and send messages.
Message List
Message List allows you to show a list of messages, for example a chat log.
Multi-Select Combo Box
Multi-Select Combo Box allows the user to choose one or more values from a filterable list of options presented in an overlay.
Notification
Notification is used to provide feedback to the user.
Number Field
Number Field sports many of the same features as Text Field, but only accepts numeric input. You can specify a unit as a prefix or suffix for the field.
Password Field
Password Field is an input field for entering passwords. The input is masked by default. On mobile devices, the last typed letter is shown for a brief moment. The masking can be toggled using an optional reveal button.
Progress Bar
Progress Bar shows the completion status of a task or process.
Radio Button
Radio Button Group allows the user to select exactly one value from a list of related, but mutually exclusive, options.
Rich Text Editor
Rich Text Editor is an input field for entering rich text.
Scroller
Scroller is a component container for creating scrollable areas in the UI.
Select
Select allows users to choose a single value from a list of options presented in an overlay.
Split Layout
Split Layout is a component with two content areas and a draggable split handle between them.
Tabs
Tabs are used to organize and group content into sections that the user can navigate between.
Text Area
Text Area is an input field component for multi-line text input.
Text Field
Text Field allows the user to input and edit text. Prefix and suffix components, such as icons, are also supported.
Time Picker
Time Picker is an input field for entering or selecting a specific time.
Tooltip
Tooltips are small pop-ups that can provide additional information about a UI element on hover and keyboard focus.
Tree Grid
Tree Grid is a component for displaying hierarchical tabular data grouped into expandable and collapsible nodes.
Upload
Upload is a component for uploading one or more files.
Vertical Layout
Vertical Layout places components top-to-bottom in a column. By default, it has 100% width and undefined height, meaning its width is constrained by its parent component and its height is determined by the components it contains.
Virtual List
Virtual List allows you to render a long list of items inside a scrollable container without sacrificing performance. Each item is rendered on the fly as the user scrolls the list.