🎨 Advanced UI overrides
Now that we saw the basic configuration of the widget, let's move on to the UI.
For the UI customization you have two options:
High level commands​
An array of high level commands is already available to customize your UI.
Advanced overrides​
If you want to take the time to truly make the widget your own, every single UI component can inherit CSS specs to reach fine-grained customization.
High level commands​
Let's start with the high level commands.
The code from the last step of Basic settings will be carried over in this example.
Let's begin here. 👇
As you can see at the top, you can customize your UI with just a few commands.
Find even more commands in our storybook.
Advanced overrides: Build a PET-themed widget​
If you want to go more fine grained you can use the overrides. Here, we have built a pet-themed widget. 👇
To learn more about all the possible customization entries, head to our overrides chapter in the storybook.
Token Information, Routing and Price Comparison​
You can enable the Token Info Card, Routing Card and Price Comparison Card by setting showTokenInfoCard: true, showSwapRouteCard: true and showPriceComparisonCard: true. By default they are all disabled.