
Cosmoe UI
docs
Customization and design
Customizing resources
Learn how to customize a resource from the UI kit.
Can I customize the resources?
You can definitely customize any resource from the UI kit, and that's the best part. It's also really easy (no coding required).
Customizing a component
In most cases, you will notice you can customize the components from the properties panel as variables are added for components for quick editing.
If variables are not visible on the properties panel, or incase you want to go beyond them and customize more, you can double click on the component or click on Edit component. You will see a prompt asking you if you want to unlink the component from the primary instance. Click on Unlink from primary and you will be taken into the component editing canvas.
You will see variants of the components. Don't worry, you don't have to feel overwhelmed. The first variant is the primary variant which means anything you add or change in it, it will affect all the other variants. You can also go to an individual variant and make changes too.
Whatever you want to change, just click on the variant, then the specific layer, and make the changes. To know how to make changes to particular components, go to the components' docs.
Customizing a UI Block
You can customize a UI block easily from the page itself through the properties panel. Choose the layer you want to edit and use the panel to change different settings, for instance, corner radius.
If a UI block has a component inside it, you can follow the steps outlined for customizing components.
You can change anything from background fill to border fill of the UI blocks.