Theming & styling for Box UI Elements

With theming & styling for Box UI Elements you can customize the look of the embedded Box component to your enterprise's requirements.

How to start

Add the selected Box component to your application. The default Box theme is applied.

Customization

Box uses design tokens for the customization purposes.

You can change the following elements in your embedded Box component.

Colors

Customize:

• global color palette - select the primary, secondary, and accent colors
• state colors - select color for states such as hover, focus, active, disabled
• component-specific colors - for example, you can select different colors for your buttons depending on their type

• gradients - choose and adjust a gradient as your background or other components
• opacity - adjust the opacity of the overlay effects for Box Modals and side panels

Typography

Customize:

• text decoration - underline, strikethrough, letter spacing
• line heights and paragraph spacing

Border, radius

Choose:

• border styling - width, styles, and colors
• border radius

Spacing

Choose:

• global spacing
• component-specific spacing
• component-specific alignment and distribution, for example justify-content

Shadows and elevation

Define:

• shadow presets
• custom shadows

Interactive states

Customize:

• hover, active, focus, disabled, and error states - visual effect such as changed background color
• transitions and animations

Component-level overrides

Customize text inputs, drop-downs, and checkboxes with individual color

Miscellaneous

Style:

• help text and labels
• tool tips

Demo