Customize Widget

TradeWidget supports the following appearance props:

theme
vars
className
style

Built-in themes

<TradeWidget theme="dark" config={{}} />
<TradeWidget theme="light" config={{}} />

Theme defaults:

TradeWidget: "dark"

Override theme variables

Use vars to override the widget’s CSS variables.

<TradeWidget
  theme="dark"
  config={{}}
  vars={{
    fontFamily: "'Roboto Mono', monospace",
    radius: "0px",
    actionButtonRadius: "999px",
    accent: "#22c55e",
    border: "#1f2937",
    surface: "#050816",
    surfaceAlt: "#0b1220",
    fontSize: "14px",
  }}
/>

The vars object supports these fields:

Field	Description
`bg`	Root background color
`fg`	Primary text color
`accent`	Main interactive accent
`border`	Border color
`muted`	Muted text and icon color
`surface`	Main surface color
`surfaceAlt`	Secondary surface color
`surfaceHover`	Hover surface color
`textSubtle`	Subtle text and placeholder color
`accentHover`	Hover state for accent styling
`success`	Success color
`danger`	Error or danger color
`overlay`	Overlay tint used in layered UI
`modalBackdrop`	Full-screen modal scrim color
`shadow`	Box shadow token for elevated surfaces
`radius`	Shared border radius token
`actionButtonRadius`	Main CTA button radius token
`fontFamily`	Root font family
`fontSize`	Root font size
`lineHeight`	Root line height
`letterSpacing`	Root letter spacing

For TradeWidget, the main widget surfaces stay square by default. Set radius only when you want rounded panels. Use actionButtonRadius when you want to round the main bottom CTA independently. The bundled themes use Roboto Mono and the stylesheet imports that font from Google Fonts. If you want to keep typography fully local to your app, override fontFamily. If you use a non-system font, load that font in the host app before passing it to the widget.

Powered by Delora label

TradeWidget shows a theme-aware Powered by Delora label below the widget by default. The white artwork is used with the dark theme and the black artwork is used with the light theme. Selecting the label opens https://delora.build/ in a new tab. Use poweredByDeloraPosition to align the label:

<TradeWidget
  theme="dark"
  config={{
    showPoweredByDelora: true,
    poweredByDeloraPosition: "right",
  }}
/>

Supported positions are:

"left"
"center" (default)
"right"

To remove the label entirely, set:

<TradeWidget config={{ showPoweredByDelora: false }} />

Use host styling props

className and style are applied to the widget root.

<TradeWidget
  className="mx-auto max-w-[640px]"
  style={{ marginTop: "2rem" }}
  theme="dark"
  config={{}}
/>

style is merged after the generated CSS variables, so it is the last inline layer applied to the root element.

Style isolation

The widget does not use Shadow DOM. Instead, it relies on scoped CSS:

all widget styles live under [data-delora-widget-root]
the package does not ship Tailwind preflight
the widget sets its own typography and box model under the scoped root

This greatly reduces leakage between the host app and the widget, but extreme global host rules can still affect embedded content.

Delora Widget

Basic Setup

Advanced Setup

Customize Widget

Built-in themes

Override theme variables

Powered by Delora label

Use host styling props

Style isolation

​Built-in themes

​Override theme variables

​Powered by Delora label

​Use host styling props

​Style isolation

Built-in themes

Override theme variables

Powered by Delora label

Use host styling props

Style isolation