> For the complete documentation index, see [llms.txt](https://docs.uibakery.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.uibakery.io/how-tos/styling/modify-components-with-css.md).
# Modifying components with CSS
In UI Bakery, you can adjust the style of components using *custom CSS*. By default, a component's name (for example, *usersTable*) is added as a CSS class to the component class making it possible to modify it with CSS.
## Adding new CSS styles
To add new styles, you need to specify a new `
```
Once added, you need to apply these styles to a component in the **Styling** section of the component's settings.
### Dynamic CSS classes
You can also define custom classes using code to apply them dynamically. Here, two formats are available:
* an **array of strings** representing custom classes
* an **object** where keys are custom classes and values determine whether to apply a custom class
```javascript
// css classes as a list of strings
['class-name', {{ui.form.valid}} && 'valid'];
// or as an object
{
'class-name': true,
// will apply the 'valid' class only when form is valid
'valid': {{ui.form.valid}}
}
```
Check out the use cases below showing in more details how you can modify components with custom CSS in UI Bakery:point\_down:
## Use case: Changing Table colors
You can also use custom CSS to customize component colors, say change colors in the Table. The flow is pretty much the same - navigate to the *Custom code* tab and add the necessary styles there.
Below is an example of the style you can add to change Table colors:
```html
```
### Use case: Changing page background color
Navigate to the *Custom code* tab and specify the following style to change page background:
```html
```
You can experiment with custom CSS and change the styles till you get the final look you need.
### Use case: Modifying List View items
You can also use CSS to control the styling of the component and apply different styles to its parts, for example, apply different colors to List View items. Check out the instruction below:point\_down:
1. Navigate to the *Custom code* tab and specify the following style:
```html
```
2. Now, select a **Card** inside the List View, and navigate to its *Styling* section.
3. Here, add your custom classes using the `{{index}}` variable, for example:
```javascript
{
'blue': {{index % 2 == 0}},
'green': {{index % 2 == 1}},
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.uibakery.io/how-tos/styling/modify-components-with-css.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `build a script that syncs our docs to a CMS` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
