Installation

AccessKit is distributed as a single React package. Install it with your preferred package manager, then add the provider and any required tools to your app.

Install the package

From your project root, run one of the following:

bash

# npm
npm install @accesskit/react

# pnpm
pnpm add @accesskit/react

# Yarn
yarn add @accesskit/react

# Bun
bun add @accesskit/react

Next.js

Wrap your app with AccessKitProvider in the root layout so every page has access to the same context.

In app/layout.tsx (App Router), import the provider and wrap {children}:

tsx

// app/layout.tsx
import { AccessKitProvider } from "@accesskit/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AccessKitProvider>
          {children}
        </AccessKitProvider>
      </body>
    </html>
  );
}

If you use the Pages Router, do the same in pages/_app.tsx: wrap your Component (and optional pageProps) with AccessKitProvider.

Remix

In your root route (e.g. app/root.tsx), wrap the outlet with AccessKitProvider:

tsx

// app/root.tsx
import { Outlet } from "@remix-run/react";
import { AccessKitProvider } from "@accesskit/react";

export default function App() {
  return (
    <html lang="en">
      <body>
        <AccessKitProvider>
          <Outlet />
        </AccessKitProvider>
      </body>
    </html>
  );
}

Vite (or other React setups)

In your main entry file (e.g. main.tsx), wrap the root component with AccessKitProvider:

tsx

// main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { AccessKitProvider } from "@accesskit/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AccessKitProvider>
      <App />
    </AccessKitProvider>
  </React.StrictMode>
);

The same pattern applies to Create React App, Parcel, or any React app: ensure AccessKitProvider is an ancestor of every tree that uses AccessKit hooks or components.

Add the Dev Tool and Widget (optional)

After the provider is in place, you can add the Dev Tool for development and the Widget for end users. Import them from the same package:

Dev Tool — Renders a floating panel that audits the page for accessibility issues. Add it to your layout or a dev-only wrapper so it runs only in development.
Widget — Renders the user-facing accessibility controls (e.g. contrast, spacing). Place it anywhere inside AccessKitProvider, typically in a layout or shell component.

See Dev Tool and Widget in the sidebar for setup and configuration details.

Once the provider (and optionally the Dev Tool and Widget) is configured, you’re ready to use AccessKit across your app.