Skip to content

Components

Overview

Components are the visual building blocks of every Bellini page. There are two categories: built-in components, which are ready-to-use UI elements and layout containers provided by the Bellini, and custom components, which are reusable UI elements you create and maintain. Both types are placed on the canvas by drag-and-drop and configured through the Properties view in the right sidebar.

What You Will Learn

  • What built-in components are available and how they are organized
  • What custom components are and how to create them
  • How to place and configure components on a page
  • How to style components using themes and CSS
  • How to connect component properties to data using data binding

When To Use This

Use this when you need an orientation to Bellini's component system — to understand what types of components are available, how they are organized, and how each area (styling, data binding, and custom creation) connects to page development.

Built-in Components

Built-in components are the pre-built UI elements and layout containers provided by Bellini. They are available in every application with no setup required — drag them onto the canvas and configure their properties.

Built-in components are divided into two groups:

  • UI Components — 27 components for displaying data, capturing user input, enabling navigation, and visualizing information. Organized into Display & Feedback, Form Inputs, Navigation, and Data Visualization categories.
  • Layout Components — 9 structural containers that control how other components are arranged on the page, including horizontal and vertical boxes, grids, accordions, and split panes.

For the full reference, see Built-in Components.

Custom Components

Custom components are reusable UI elements that you build yourself using the Component Editor, which shares the same Canvas, Elements Tree, and Declarations layout as the Page Editor.

A component can be scoped to a single application (app component) or made available across all applications in the organization (global component). Component properties and functions can be exported, making them configurable from wherever the component is placed.

For step-by-step instructions, see Custom Components.

Using Components

Components are added to a page or component canvas by dragging them from the Components view in the left sidebar, or by using the component picker in the Elements Tree. Once placed, their behavior and appearance are configured through the Properties view and Styles view in the right sidebar.

For details on placing, selecting, and configuring components, see Using Components.

Component Styling

All built-in components respect the application's active theme, which controls colors, typography, and spacing globally. Individual components can be further styled by applying CSS classes or using the Styles view.

For styling details, see Component Styling.

Data Binding for Components

Data binding connects component properties to declarations, expressions, and API services. Rather than writing imperative code to push data into the UI, you configure a binding on a component property and Bellini keeps it synchronized automatically.

Bindings can be:

  • One-way — data flows into the component (e.g., populating a table from an API call).
  • Two-way — the component can also update the bound declaration (e.g., a text input updating a form field value).

For more, see Data Binding.

Helpful Resources