Skip to main content
Studio apps are built from a library of components grouped into categories. You can add any component three ways:
  1. By name in the AI Composer — “add a donut chart of devices by OS”
  2. From the Add component template menu — the + icon in the Composer footer
  3. By importing a pre-built app — inherit the composition wholesale
The picker lists components by category, with a search box at the top. Pick one to insert it, then describe in the Composer how it should look and behave.
The component picker is searchable. Start typing the component name and the list narrows in real time. Useful when you know what you want but don’t remember which category it lives in.

Component categories

The picker organises components into categories. Verified from the live picker:

General

Form Components

Other categories

The picker also surfaces categories for Popups & Overlays, Navigation, Layout, Charts & Graphs, and Tables & Data. Use the search field at the top of the picker to find a specific component by name.

How to add a component

The AI Composer is the fastest way — describe what you want and the AI picks the right component, wires it to your data, and styles it to match. Examples:
For more direct control, open the Add component template menu (the + icon in the Composer footer), pick a component by name, and the AI inserts it where you indicate.

Composition patterns

Real Studio apps combine multiple components per page. Common compositions:

Dashboard

Master-Detail

Form Wizard

Settings

See Recipes for paste-able prompts that scaffold these layouts.

Working with charts

Tell Composer what you want to show and it picks the right component: You can override Composer’s pick at any time:

Tables — choosing the right kind

For tables, ask Composer for the behaviour you need (filter, sort, edit) and it’ll pick the right base:

Customising any component

Once a component is in the app, refine through Composer:

CLI access (power users)

The Component Templates dialog includes a side-panel card reading “Heads up! You can add components to your app using the CLI”. The CLI ships with X-Ray’s exported package and lets you scaffold components offline. Workflow:
  1. ⋯ → Advanced → Export (or X-Ray → Download Package)
  2. Unzip locally and follow the README
  3. Add components via the CLI

See also

AI Composer

The Composer toolbar that hosts the Add component template menu

Prompt Engineering

How to phrase prompts so Composer picks the right component

Recipes

Paste-able compositions for common UI patterns

Themes

Branding the components — colours, fonts, dark mode