# Styling and configuring components

When you select a component on the app canvas, a panel opens on the right side of the screen. This is the **properties panel**, and it's where you do all your configuration — from changing colours and fonts to connecting a chart to live data. Understanding how it's organised will help you work faster and get to the settings you need without hunting around.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F0izLjsrgTriLsRSlOn0n%2Fimage.png?alt=media&#x26;token=e3e254e6-8a62-4418-a349-8fb5ef0d441b" alt=""><figcaption></figcaption></figure>

### How the properties panel is organised

At the top of the panel you'll usually find a **Quick Setup** section. This contains the settings you're most likely to need first — the essential options for getting a component working without having to dig into every detail. Start here when you add a new component to your canvas.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FduAussLExbKbbjBubKVe%2Fimage.png?alt=media&#x26;token=531ff29d-b04a-45a7-b1be-1308896105b6" alt="" width="254"><figcaption></figcaption></figure>

If you need to go beyond the basic setup the **All Properties** tab contains everything you can configure, divided into collapsible **sections**. Each section groups related settings together. For most components you'll see sections covering appearance, position and size, data, and behaviour. Click a section heading to expand or collapse it.

{% hint style="info" %}
Different components have different sections in their properties panel. A chart has sections for series, axes, and legends. A text box has sections for font, colour, and alignment. The sections always reflect what's relevant to that specific component.
{% endhint %}

### Styling your components

Styling properties control how a component looks. Depending on the component, you'll find options for:

* **Colours** — background fill, border colour, font colour, and in charts, series colours
* **Fonts** — typeface, size, weight, and alignment for any text the component displays
* **Size and position** — exact pixel dimensions and coordinates, or drag handles on the canvas
* **Borders and padding** — control spacing and edges

You can type values directly into number fields, use the up and down arrows to nudge values, or interact with the component directly on the canvas by dragging its edges and corners. Both approaches update the same underlying properties, so mix and match however feels natural.

For colour fields, clicking the colour swatch opens a colour picker where you can choose a colour visually, enter a hex code, or set opacity.

### Connecting components to your data

Some properties control what a component does and what data it shows. This is achieved using data binding, which connects a component to values in your spreadsheet.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FHvLoPAzRxZCAtGLRdjbZ%2Fimage.png?alt=media&#x26;token=44db3c1b-a7eb-4d9c-88ad-55e038888ed1" alt="" width="250"><figcaption></figcaption></figure>

When a property is bound to the spreadsheet it is indicated by the blue spreadsheet icon and the spreadsheet cell reference in the input field. Data binding is one of the core concepts in Squirrel365. Read the [**Data Binding**](https://learn.squirrel365.io/getting-started/core-concepts/data-binding) article to learn more about it.

To bind a component to data:

1. Select the component on the canvas.
2. In the properties panel, find the property that you want to connect to the spreadsheet.
3. Hover or place your cursor inside the property and look for a small spreadsheet icon above it. Clicking it switches the field from a manual value to a binding.
4. The spreadsheet bind mode will appear
5. Select the spreadsheet cell reference or range you want to pull from and click confirm

Once a binding is set, the component updates automatically whenever the spreadsheet data changes. This is how Squirrel365 keeps your app in sync with your data without any extra steps.

Some components — such as charts — have more complex data structures with separate fields for categories, series values, and labels. These are all set within the relevant section of the properties panel, following the same binding approach.

### Changing properties for multiple components at once

You can select more than one component on the canvas and edit their properties at the same time. What appears in the properties panel depends on what you've selected.

If your selection contains components of the **same type** — two line charts, or three text labels — the panel shows all the properties those components share. Any change you make applies to all of them at once, which is useful for matching colours, fonts, or data settings across similar components quickly.

If your selection contains components of **different types**, the panel shows only the properties that every component has in common regardless of type — such as layout and positioning, and dynamic visibility. You won't see type-specific settings until you narrow your selection.