> For the complete documentation index, see [llms.txt](https://docs.orda.network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.orda.network/developers/widget/styling.md).

# Styling

## Importing Styles

You must import the widget styles in your root layout:

{% code title="root layout (TypeScript)" %}

```typescript
import '@ordanetwork/sdk/react/styles.css';
```

{% endcode %}

## CSS Variables

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

{% code title="Theme variables (CSS)" %}

```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;
}
```

{% endcode %}

## Dark Mode

Apply the `.dark` class to enable dark mode:

{% code title="Dark mode (CSS)" %}

```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;
}
```

{% endcode %}

## Customizing Theme

Override CSS variables in your global CSS:

{% code title="globals.css" %}

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

{% endcode %}

## 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.

{% hint style="info" %}
Do not include node\_modules in your Tailwind `content` paths — the widget ships pre-compiled styles and shouldn't be scanned.
{% endhint %}

**Example integration**:

{% code title="tailwind.config.ts" %}

```typescript
// 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;
```

{% endcode %}