Skip to content

Next.js

Put the component in your root layout. The React entry is already marked “use client”.

On this page
Packageopen-accessibility-widget(opens in a new tab)Requires React 18+

Install

npm install open-accessibility-widget

Usage

import { AccessibilityWidget } from "open-accessibility-widget/react";

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

Notes

  • Works in a Server Component layout, with no wrapper of your own.
  • Nothing runs on the server: the widget starts in the browser after hydration.
  • With a nonce-based CSP, pass the request's nonce as nonce.
  • This site is built with Next.js and uses the component in its own root layout.

Accessibility statement

Pass statementUrl to link your accessibility statement from the panel's footer.

Edit this page on GitHub