How to Customize UI Components in Retool

Select any component in the editor. The Inspector panel on the right shows all configurable properties organized into sections: General (content, labels, placeholders), Interaction (event handlers, disabled, loading), Layout (width, height, padding), and Advanced (CSS Class Name, visibility). For visual customization, explore the Style section — most components have Color, Border color, Background color, Border radius, and Font size fields that accept hex values, CSS color names, or `{{ }}` expressions. For Button components: Style section → Color (background), Label color, Icon color, Border radius. For Text components: Style section → Font size, Font weight, Color, Line height. For Table: Inspector → Columns → click a column → Column style for per-column customization.

Open App Settings (gear icon) → Appearance → Theme → Theme Editor. The Theme Editor shows global design tokens: - Primary color: used by buttons, links, selected states - Success/Warning/Error colors: used in alerts, badges, validation - Background colors: canvas, component surfaces - Border radius: applied to all components by default - Typography: font family, base font size Changes in the Theme Editor cascade to all components that haven't been individually overridden in the Inspector. This is the most efficient way to brand an app — set once, applies everywhere.

After setting a global theme, override individual components as needed. Select a Button component → Inspector → Style → change Color to a specific hex value for that button only (e.g., #EF4444 for a destructive delete button). This per-component override takes precedence over the theme. Key customizable properties by component type: Button: Background color, Label, Icon, Icon position, Size (small/medium/large), Shape (default/circle/round), Loading state Text: Font size, Font weight, Color, Horizontal/Vertical alignment, HTML mode Container: Background color, Border, Border radius, Shadow, Padding Table: Row height, Striped rows, Column widths, Cell alignment Input: Placeholder, Prefix/Suffix text, Max length, Disabled state

For customization not achievable through the Inspector alone, assign a CSS Class Name in the Inspector's Advanced section. This adds a wrapper class to the component's DOM element, enabling targeted CSS rules. Select a component → Inspector → Advanced → CSS Class Name → type a name (e.g., danger-button, card-header, stat-primary). Then write CSS in App Settings → Custom CSS targeting that class with ._retool-* descendant selectors:

1/* In App Settings → Custom CSS */
2
3/* danger-button class on a Button component */
4.danger-button ._retool-button-primaryButton {
5  background-color: #DC2626 !important;
6  border-color: #DC2626 !important;
7}
8
9.danger-button ._retool-button-primaryButton:hover {
10  background-color: #B91C1C !important;
11}
12
13/* card-header class on a Text component */
14.card-header ._retool-text {
15  font-size: 11px !important;
16  font-weight: 700 !important;
17  text-transform: uppercase !important;
18  letter-spacing: 0.1em !important;
19  color: #6B7280 !important;
20}

Component states (hover, active, disabled, loading) can be styled via both Inspector and CSS. The Inspector provides a Loading property (boolean) and Disabled property for most interactive components — bind these to `{{ }}` expressions for dynamic states. For CSS-based state styling:

1/* Disabled state styling */
2._retool-button-primaryButton[disabled],
3._retool-button-primaryButton.disabled {
4  opacity: 0.5 !important;
5  cursor: not-allowed !important;
6  background-color: #9CA3AF !important;
7}
8
9/* Loading state — Retool adds a loading spinner class */
10._retool-button-primaryButton.loading {
11  cursor: wait !important;
12}
13
14/* Table row hover */
15._retool-table tbody tr:hover {
16  background-color: #EEF2FF !important;
17  cursor: pointer;
18}
19
20/* Input focus state */
21._retool-textInput input:focus {
22  border-color: #7C3AED !important;
23  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
24  outline: none !important;
25}

Some Retool components have deeply nested DOM structures or use Shadow DOM patterns that make CSS targeting difficult. The Date Picker, Select/Dropdown, and certain chart components fall into this category. For these, consider: 1. Use Inspector properties first — they often expose style options for the parts that matter 2. Add very specific CSS selectors found via DevTools inspection 3. For full control, replace with a Custom Component (iframe widget) that renders your own version For components where some things style correctly but others don't, the Custom Component approach via RapidDev's Retool experts can save significant time when visual precision is critical.

1/* Date Picker calendar popup styling example */
2._retool-datePicker .ant-picker-panel {
3  border-radius: 8px !important;
4  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
5}
6
7._retool-datePicker .ant-picker-cell-selected .ant-picker-cell-inner {
8  background-color: #7C3AED !important;
9}
10
11/* Select dropdown styling */
12.ant-select-dropdown {
13  border-radius: 8px !important;
14  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
15}

Efficiently brand multiple Retool apps by building a master CSS file in Preloaded CSS that covers all common component types. Then each new app automatically inherits the brand. Organize the CSS into sections: tokens/variables, buttons, tables, inputs, containers, typography, and responsive overrides. Document each class name convention you create (e.g., .section-header, .danger-action, .mono-text) and share with your team so everyone applies classes consistently across apps.