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.
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.