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.

AccessKitProvider is a client component, so create a separate wrapper to keep your root layout as a Server Component.

First, create a client wrapper in components/accesskit-wrapper.tsx:

tsx

"use client"
import { AccessKitProvider } from "@accesskit/react";

export function AccessKitWrapper({ children }: { children: React.ReactNode }) {
  return <AccessKitProvider>{children}</AccessKitProvider>;
}

Then use it in app/layout.tsx:

tsx

import { AccessKitWrapper } from "@/components/accesskit-wrapper";

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

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 and Widget inside your wrapper. Since they're also client components, the wrapper is the ideal place for them:

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.