> ## Documentation Index > Fetch the complete documentation index at: https://developer.box.com/llms.txt > Use this file to discover all available pages before exploring further. # Theming & styling for Box UI Elements export const MultiRelatedLinks = ({sections = []}) => { if (!sections || sections.length === 0) { return null; } return

{sections.map((section, index) => )}

; }; export const RelatedLinks = ({title, items = []}) => { const getBadgeClass = badge => { if (!badge) return "badge-default"; const badgeType = badge.toLowerCase().replace(/\s+/g, "-"); return `badge-${badge === "ガイド" ? "guide" : badgeType}`; }; if (!items || items.length === 0) { return null; } return

{}

{title}

{}

{items.map((item, index) => {} {item.badge} {} {item.label} )}

; }; export const Link = ({href, children, className, ...props}) => { const localizedHref = localizeLink(href); return {children} ; }; With theming & styling for Box UI Elements you can customize the look of the embedded Box component to your enterprise's requirements. As of now, [theming & styling][blog] is available for Content Explorer and Content Uploader. ## 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. Design tokens are named entities that store specific visual attributes, such as colors, spacing, typography, scale, and many more. They are used instead of hard-coded values to simplify sharing design properties across platforms, tools, and components. 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 input, drop down, and checkboxes with individual color ### Icons Style interactive icons such as buttons or drop downs. To replace non-interactive icons such as file or folder icons with your custom ones, use inline SVGs in CSS. To change non-interactive icons color, height, and width, use CSS. See the implemented examples of custom icons in CodePen: