Styling

Importing Styles

You must import the widget styles in your root layout:

root layout (TypeScript)
import '@ordanetwork/sdk/react/styles.css';

CSS Variables

The widget uses CSS variables for theming, scoped to .orda-widget:

Theme variables (CSS)
.orda-widget {
  /* Border radius */
  --orda-radius: 0.625rem;

  /* Colors (OKLCH format) */
  --orda-background: oklch(1 0 0);           /* White */
  --orda-foreground: oklch(0.145 0 0);       /* Near-black */
  --orda-primary: oklch(0.205 0 0);          /* Dark */
  --orda-destructive: oklch(0.577 0.245 27.325); /* Red */

  /* Custom backgrounds */
  --orda-main-bg: #fbfbfb;
}

Dark Mode

Apply the .dark class to enable dark mode:

Customizing Theme

Override CSS variables in your global CSS:

Tailwind CSS Integration

If your app uses Tailwind CSS, the widget styles will work alongside your Tailwind configuration. The widget's Tailwind classes are scoped to avoid conflicts.

circle-info

Do not include node_modules in your Tailwind content paths — the widget ships pre-compiled styles and shouldn't be scanned.

Example integration: