Components
Learn about Components within Budibase
Components are the UI elements of your Budibase apps. They are used to construct your user interface, which could be components that your user will interact with, or components for layout and displaying data. At Budibase we use the Spectrum design system created by Adobe. This gives you a great out-of-the-box experience with themes by default.
Adding components
When the components panel is open, you can press the Add component
button.
This will present a searchable and grouped list of components to choose from in the right hand panel.

Add component

Component list

Searching for a component
When you search for a component, add it immediately by pressing the Enter key.
You can also see the available Blocks from the blocks category.
Deleting a component
The easiest way to delete a component is to select it and press the delete or backspace key.
You will be prompted to confirm the deletion.
Component tree
The component tree displays the layout and hierarchy of your components.
Components can either be below one another, or nested inside a parent component.
Parent components include those related to a Datasource or some variety of container:
- Data Provider
- Repeater
- Table (elements can be added to each row)
- Forms, Form steps and Field groups
- Container
- Sections
Components can be re-arranged within the component tree with drag-and-drop.
To assist with rearrangement, a green line will highlight the destination whilst a green box indicates that a component will be dropped inside that component.
Editing
Within the component tree you can also delete, copy and move components by clicking on the ...
beside the component name.
Keyboard shortcuts
As you can see from the screenshot, there are a number of available keyboard shortcuts to make your life easier.
On windows, the
CTRL
key will be used instead ofCmd
.
Using components
When you have added a component you will be able to see the options that you can tweak on the right side under the Settings bar. Some components also have a toolbar that will appear above it in the preview window.
Video tutorial
Updated 2 months ago