Creating Components
Overview
Custom components are created from the Components view (for global components) or the Apps view (for app components). The creation flow differs slightly between the two: global components use a wizard dialog, while app components use inline naming directly in the tree.
Component Types
When creating a component, you select one of three types:
| Type | Description |
|---|---|
| Component | A blank component with no preconfigured UI or declarations. The starting point for most custom components. |
| Modal Component | A component pre-configured for use as a modal dialog. |
| Wizard Modal | Creates a linked set of components for building a wizard-style flow. |
Component and Modal Component share the same creation flow (wizard for global components, inline naming for app components). For details on how Modal Components and Wizard Modals work, see Modal Components.
Creating a Global Component
Global components are managed in the Components view under My Components. To open the Create Component wizard, use any of the following:
- Click the + button in the Components view toolbar, then select Component, Modal Component, or Wizard Modal from the dropdown.
- Right-click My Components and select New > Component, New > Modal Component, or New > Wizard Modal.
- Right-click the Components folder under an existing component in My Components and select New > Component, New > Modal Component, or New > Wizard Modal.
Step 1: Component Details
The first page of the wizard contains the following fields:
| Field | Required | Description |
|---|---|---|
| Name | Yes | The component name. Must be unique within global components and may only contain alphanumeric characters, hyphens (-), and underscores (_). |
| Enable Source Control | No | Links the component to a remote Git repository. Enabling this adds a source control configuration step and activates the Next button. |
If Enable Source Control is not checked and a valid name is entered, the Create button becomes active and you can create the component straight away. If source control is enabled, click Next to proceed.
Step 2 (Optional): Source Control
If Enable Source Control is checked, clicking Next takes you through two source control pages.
Connect a Git Provider
Select your Git provider by clicking one of:
- Continue with GitHub
- Continue with GitLab
- Continue with Bitbucket
You will be prompted to log in with the selected provider and authorize Bellini to access your repositories.
Configure the Repository
After connecting, configure the repository that will be created for this component:
| Field | Required | Description |
|---|---|---|
| Account | — | The connected Git account (read-only, shown for reference) |
| Repository | Yes | Name of the remote repository to create |
| Description | No | Optional description for the repository |
| Private | — | Check to make the repository private |
| Branch | No | Main branch name; uses the Git provider's default if left empty |
When the component is created, Bellini creates the remote repository and links it to the component automatically.
Finishing Creation
Click Create. Bellini creates the component and immediately opens it in the Component Editor. A blank Component opens with an empty canvas — no UI or declarations are preconfigured.
Creating an App Component
App components are scoped to a single application and are managed within that application in the Apps view.
- In the Apps view, expand the application and right-click Components.
- Select New > Component, New > Modal Component, or New > Wizard Modal.
For Component and Modal Component, a text input appears inline under Components. Type the component name and press Enter to confirm.
For Wizard Modal, the same wizard dialog used for global components opens. See Modal Components for details.
The same name rules apply: the name must be unique within the application's components and may only contain
alphanumeric characters, hyphens (-), and underscores (_).
The component is created immediately and opens in the Component Editor.
App components do not have a dedicated source control option — source control is configured at the application level and covers all of the app's components. See Application Source Control.
Helpful Resources
- Custom Components — Overview of custom component scope, structure, and the Component Editor.
- Component Editor — Reference for the editor layout, canvas, and declarations panel.
- Source Control — How source control works across components and applications.