Customization

You can customize the Widget’s look so it fits your brand and design system. Pass a style object to AccessibilityWidget with CSS color values for the tab, panel, text, and accents. Omit any key to keep the default; the Widget still works with no style prop and uses a built-in dark theme.

The style prop

style is an optional object of color overrides. Each value is a CSS color string (e.g. hex, rgb(), or var(--your-token)). Only include the keys you want to change; the rest fall back to the default theme.

• primary — Accent color for sliders, switches, links, and the header icon. Used as the tab background when tabBackground is not set.
• tabBackground — Background of the floating tab button. Defaults to primary if omitted.
• tabIcon — Color of the icon on the tab (e.g. white on a colored tab).
• panelBackground — Background of the open panel.
• panelText — Main text color in the panel (headings, labels).
• border — Border color for panel edges and dividers.
• mutedText — Secondary text (descriptions, hints).
• hoverText — Text color on hover (e.g. close button).

Matching your design system

Use your existing design tokens so the Widget stays consistent with your app and with light/dark mode. Pass CSS variables (e.g. var(--primary), var(--card), var(--foreground)) instead of hard-coded colors. When you switch themes, the Widget updates with the same variables.

import { AccessibilityWidget } from "@accesskit/react";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <AccessibilityWidget
        style={{
          primary: "var(--primary)",
          tabBackground: "var(--primary)",
          tabIcon: "#fff",
          panelBackground: "var(--card)",
          panelText: "var(--foreground)",
          border: "var(--border)",
          mutedText: "var(--muted-foreground)",
          hoverText: "var(--foreground)",
        }}
      />
    </>
  );
}

You don’t need to set every key. For example, set primary and tabBackground to your brand color and tabIcon to white, and leave the rest default. Or set only panelBackground and panelText to match a light card style.

Other options

Position, initial open state, and stacking order are configured via initialPosition, defaultOpen, and zIndex. See Configuration for the full list of Widget props. For TypeScript, the style object is typed as AccessibilityWidgetStyle; see the TypeScript page.