Skip to content

Component Styling

Overview

Bellini provides three complementary ways to style a component: the application theme controls the default visual appearance of all built-in components; the Styles view lets you apply inline styles to an individual element; and CSS classes let you apply reusable styles from your own stylesheets. This page covers per-element styling using the Styles view and CSS classes. For theme configuration and global CSS, see Styling.

What You Will Learn

  • How the application theme affects component appearance
  • How to use the Styles view to apply inline styles to a component
  • How to add and remove CSS classes on a component

When To Use This

Use this when you need to adjust the visual appearance of an individual component — by applying inline styles, adding a CSS class, or understanding how the application theme affects components by default.

How the Application Theme Affects Components

All built-in components respect the application's active theme. The theme controls default colors, typography, spacing, and borders across every built-in component in the application — you do not need to style each component individually to achieve a consistent look.

Themes are configured per application in Application Configuration → Themes. You can define separate themes for desktop and mobile, create reusable custom CSS variables, and preview changes in real time. For details, see Themes Configuration.

Custom components are not automatically themed — you are responsible for their styling.

Styling a Component with the Styles View

The Styles view in the right sidebar becomes active when an element is selected on the canvas or in the Elements Tree. It contains two tabs: General and Advanced.

General Tab

The General tab is the primary styling interface. It is structured as a table of styling properties, organized into categories. The categories and available properties vary by component type — for example, a Dropdown component has sections for dropdown list colors, typography, spacing, and border. The most commonly used properties appear at the top.

For each property:

  • Color values use a color picker input, but you can also type any valid CSS color value directly — hex (#ff0000), RGB (rgb(255, 0, 0)), named colors, or any other CSS-supported format.
  • Other values show a dropdown with valid options as you start typing or click the input, similar to code intellisense. You can also type a value directly.

Changes are applied immediately and visible on the canvas.

Styles set in the General tab are applied as inline styles on the element and take precedence over the application theme and any CSS class-based styles.

Advanced Tab

The Advanced tab resembles the Styles panel in browser developer tools. It shows the effective CSS applied to the selected element and lets you write inline styles directly. Use this tab for advanced use cases not covered by the General tab — for example, applying a CSS property that does not appear in the General tab's list.

Styles written here are also inline styles and follow the same precedence rules as the General tab.

Applying CSS Classes to a Component

CSS classes let you apply styles from your application's stylesheets or external CSS to individual elements. You can add and remove class names in two ways:

  • Properties view — Select the element, then click the Classes property in the Properties view. A chip-style dialog opens where you can add or remove class name chips.
  • Elements Tree context menu — Right-click the element in the Elements Tree and choose Edit Classes. The same chip-style dialog opens.

Both methods are equivalent. Use whichever is more convenient for your workflow.

To define the CSS that your classes apply, add a stylesheet to the application or reference an external CSS file. For details, see CSS Files and External CSS.

Helpful Resources

  • Using Components — Select and configure component properties
  • Styling — Configure themes and global CSS for your application
  • Community Q&A: Bellini Community
    Have a question? Post or search it here.