Components
Take your UI to the next level with components
Last updated
Take your UI to the next level with components
Last updated
You can create much more powerful apps if you break your project into components.
Components are building blocks, like buttons, headers, cards, tables, or sections, etc. Each component can have multiple variations, or contain sub-components, so it gets powerful fast!
There are a few advantages to making components:
It allows you to get the details right. Once you make a component, it will work that way always. It won’t regenerate when you use it other places.
It shortens your main spec and separates concerns. This helps the AI be more accurate when making your app.
You can use them across all your projects. Build once, use many times.
With Create Pro, you can share components with your whole team.
You can make components:
From ‘Build Mode’, by tapping on an element you like and hitting “Convert to component”
From your spec, by highlighting a part of the spec and hitting “Convert to component”
From the builder, through the Add ons menu or by hitting / and then hitting “Create new component”
From the dashboard, by hitting “New component”
You’ll notice that the component editor looks a lot like the main project editor, except:
If you have multiple variations of a component, the builder will show you what the component looks like for each version
You cannot convert an already existing project into a component. Try copy/pasting your prompt into a new component if needed.
We recommend spending the time to name your components so you can stay organized
Prompting for a component is similar to prompting for a project — it just allows you to add much more details to a specific part and then lets you reuse that part in larger projects.
Components can have variations. If you add the details for each variation, then when you use it in a larger project, you can just describe what variation you want to use for the component.
Be sure to describe both the UI and the behavior of the component.
Examples:
✅ Do: get detailed: Text should be 12px, and add 14px of padding
✅ Do: tell it what to accept Buttons should accept text and a color. The color should be the background.
✅ Do: add variants: Allow small, medium, and large buttons. Small: 16px tall, Medium: 24px tall, Large: 32px tall
✅ Do: tell it what to do with info it creates: When this form submits, send the data to my parent
Once you’ve made a component you can press / in your spec to use it. Just describe how you want the project to use it and Create will hook it up.
If you made a component from the builder, after you define your component, when you return to the project you made it from, you’ll see that it’s already referenced. Just add more details around it.
If you make changes to a component, to see those updates in your project, hover over the component and check to see if it’s out of date. If it is, you can update it with one click.
You’ll find there are tons of ways of using components to build more powerful apps. Here are some examples:
Building complex UIs: https://www.create.xyz/share/b6da63db-1902-4a8d-848f-a23423418f3d
Making forms: https://www.create.xyz/share/296385a4-6535-4e5e-b1ef-f914976e2188
