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:

Dark mode (CSS)

.orda-widget.dark {
  --orda-background: oklch(0.145 0 0);       /* Near-black */
  --orda-foreground: oklch(0.985 0 0);       /* Near-white */
  --orda-primary: oklch(0.985 0 0);          /* White */
  --orda-main-bg: #1a1a1a;
}

Customizing Theme

Override CSS variables in your global CSS:

globals.css

/* globals.css */
.orda-widget {
  --orda-primary: oklch(0.5 0.2 250);  /* Custom blue */
  --orda-radius: 0.5rem;               /* Smaller border radius */
}

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.

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

Example integration:

tailwind.config.ts

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // Don't include node_modules - widget has pre-compiled styles
  ],
  theme: {
    extend: {
      // Your custom theme
    },
  },
  plugins: [],
};

export default config;