Components

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.

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

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