> ## Documentation Index
> Fetch the complete documentation index at: https://docs.initia.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# injectStyles

## Overview

* Injects CSS into InterwovenKit's Shadow DOM by appending a `<style>` element.
* Required for correct visual rendering. Must be called before rendering
  InterwovenKit components.
* Call once at app startup in your top-level Providers component.
* Browser-only (requires `document`).

## Prerequisites

* Must be called in a browser environment (`document` must exist).
* Client-only (no SSR): Put this in a `use client` provider tree, or use a
  dynamic import in Next.js.
* Should be called before `InterwovenKitProvider` renders (typically in the same
  component).

## Quickstart

```tsx theme={null}
"use client"

import { PropsWithChildren, useEffect } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { WagmiProvider } from "wagmi"
import {
  injectStyles,
  InterwovenKitProvider,
  MAINNET,
} from "@initia/interwovenkit-react"
import interwovenKitStyles from "@initia/interwovenkit-react/styles.js"

const queryClient = new QueryClient()
const wagmiConfig = /* your wagmi config */

export default function Providers({ children }: PropsWithChildren) {
  useEffect(() => {
    injectStyles(interwovenKitStyles)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <InterwovenKitProvider {...MAINNET}>
          {children}
        </InterwovenKitProvider>
      </WagmiProvider>
    </QueryClientProvider>
  )
}
```

<Note>
  This example shows the typical usage pattern. For complete setup
  configurations, see [Provider Setup](../setup/providers).
</Note>

## API

```ts theme={null}
function injectStyles(css: string): void
```

Injects the provided CSS string into InterwovenKit's Shadow DOM. The `css`
parameter should be a string containing CSS rules. Returns `void`.

## Notes

* Each call appends a new `<style>` element to the Shadow DOM.
* For complete setup configurations, see [Provider Setup](../setup/providers).