> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Components
> The UI primitives you drag onto a screen. There are 15 component kinds, all of which render natively on device.
Components are the building blocks of a screen. They are the lowest-level pieces in a flow: a piece of text, an image, a button, a stack that holds other components. There are 15 component kinds in total, and every one renders end to end (editor canvas, the SDK on device, and the dashboard preview) so what you build is what ships.
This page explains what each component is and when to reach for it. For the full per-property tables (every prop, type, and default), see the [Component reference](/reference/component-reference).
Raw components are an **Advanced mode** surface. In [Simple mode](/editor/editing-modes) you do not place primitives directly; you build from certified [blocks](/editor/element-library) (where even a heading or image is a block). The 15 kinds below are still what every block is composed of, on both platforms.
## How to add a component
The Components palette is disabled until you select something to add to. Select a screen in the **Layers** panel, or select a persistent [zone](/editor/zones). With nothing selected you see "Select a screen or chrome section to add components".
In the left sidebar click **Insert**, then stay on the **Components** inner tab. The list is grouped into **Layout**, **Display**, **Interactive**, and **Form**.
Each row works two ways. **Drag** a row onto the canvas to drop it exactly where you want, or **click** the row to add it. A click adds the component as a sibling right after the currently selected component, or into the screen's **Root Stack** if nothing inside the screen is selected.
Drag and click are mutually exclusive on a single gesture: a quick click never starts a drag, and a drag never fires a click. Use whichever feels natural.
Use the search box at the top of the palette to filter by name or description.
## The 15 component kinds
This is the complete, authoritative list. Nothing else is a component kind.
| Component | What it is | Typical use |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| [`screenRoot`](/reference/component-reference#screenroot) | The implicit root of every screen, shown as **Root Stack** in the Layers panel. | You do not add this. It is created with the screen and holds the screen's components. |
| [`stack`](/reference/component-reference#stack) | A flexible layout container (vertical or horizontal). The only layout primitive. | Group and arrange components. Also used for spacers (`flex: 1`) and separators (a thin styled stack). |
| [`text`](/reference/component-reference#text) | A run of text. | Headlines, body copy, labels. Double-click on the canvas to edit the wording inline. |
| [`image`](/reference/component-reference#image) | A static image loaded from a URL. | Hero images, illustrations, avatars. |
| [`button`](/reference/component-reference#button) | A tappable button with a label and `onPress` interactions. | Calls to action, "Continue", custom navigation. |
| [`input`](/reference/component-reference#input) | A text entry field, labeled **Text Input** in the palette. | Collect typed input. Bind it to a [variable](/editor/variables) to capture what the user types. |
| [`toggle`](/reference/component-reference#toggle) | An on/off switch bound to a boolean. | Opt-ins, settings, yes/no answers. |
| [`progress`](/reference/component-reference#progress) | A linear progress bar. In `auto` mode it tracks the user's progress through the flow. | A progress indicator in a [zone](/editor/zones). Added through the **Progress Bar** block, not from this palette (see below). |
| [`ringProgress`](/reference/component-reference#ringprogress) | A circular progress ring with a center slot. | Loading and "calculating" moments, score dials. |
| [`icon`](/reference/component-reference#icon) | A named icon (for example `Star`). | Decorative or semantic icons. Use this instead of an `image` for icons. |
| [`slider`](/reference/component-reference#slider) | A numeric range control, with optional modern styling (gradient fill, pill thumb, large readout). | Let the user pick a number in a range (weight, budget, intensity). Pre-styled **Sliders** blocks add the gradient look. |
| [`lottie`](/reference/component-reference#lottie) | A vector animation played from a Lottie JSON URL. | Rich animated illustrations and celebrations. |
| [`comparisonChart`](/reference/component-reference#comparisonchart) | A two-series line chart ("with us" vs "without us"). | Before/after and value-over-time comparisons. |
| [`picker`](/reference/component-reference#picker) | A scroll-snapping value wheel with one or more columns (date mode for day/month/year). | Age, height/weight, date of birth. Usually added through a **Pickers** block. |
| [`custom`](/reference/component-reference#custom) | A reference to a native component implemented in your app. | Native UI the flow engine does not provide. See [Custom components](/editor/custom-components). |
### What is and is not in the Components palette
The **Insert > Components** palette shows 12 of these kinds, grouped as:
* **Layout**: Stack
* **Display**: Text, Image, Icon, Ring Progress, Lottie, Comparison Chart
* **Interactive**: Button
* **Form**: Text Input, Slider, Picker, Toggle
The other three kinds are added elsewhere:
* **`screenRoot`** is the implicit **Root Stack**. It is created with each screen, so you never add it by hand.
* **`progress`** (the linear bar) is not a palette primitive. Add it with the **Progress Bar** [block](/editor/blocks) (Insert > Blocks > Chrome), which inserts a `progress` component in `auto` mode.
* **`custom`** is your own native component. It lives in the **Custom** tab and appears at the bottom of the Components palette once you define it. See [Custom components](/editor/custom-components).
## Components that no longer exist
To save you hunting for them, these were removed and are not component kinds:
* No **spacer** or **divider**. Use a `stack` with `flex: 1` for flexible space, or a thin styled `stack` for a separator line.
* No **card** or **chip** primitive. These are now one-click [blocks](/editor/blocks) (Card and Chip) that expand into a styled `stack`.
* No **carousel**, **video**, or **chart** primitive. `comparisonChart` replaced the old `chart`.
## Example: a simple content screen
A typical screen is a Root Stack holding a few primitives:
```text theme={null}
Screen 1
└─ Root Stack (vertical)
├─ Icon: "Sparkles"
├─ Text: "You are all set" (fontSize 28, bold)
├─ Text: "Here is what comes next" (fontSize 16, muted)
└─ Button: "Continue" -> onPress: goNext
```
Every piece here is a single component you dragged from **Insert > Components**. To arrange them, nest them in stacks and set spacing and alignment on the stack. See [Layout and sizing](/editor/layout-and-sizing).
## Common mistakes
* **Looking for a spacer.** There isn't one. Add a `stack` and set `flex: 1` to push content apart, or give a stack a fixed height for a gap.
* **Looking for Progress in the Components tab.** The linear progress bar is the **Progress Bar** block under Insert > Blocks > Chrome, not a Components primitive.
* **Confusing `progress` and `ringProgress`.** `progress` is the linear bar (good for a header progress indicator). `ringProgress` is the circular ring (good for a loading dial).
* **Using an `image` for an icon.** Use the `icon` component with a named icon. It scales and recolors cleanly. Reserve `image` for photos and illustrations.
* **Expecting Card or Chip in Components.** They are [blocks](/editor/blocks), not primitives. They drop in as a styled stack you can edit freely.
## Related pages
* [Blocks](/editor/blocks)
* [Custom components](/editor/custom-components)
* [Component reference](/reference/component-reference)
* [Layout and sizing](/editor/layout-and-sizing)
* [Build your first screen](/editor/first-screen)