Documentation

Quick Start

Wrap your authenticated app shell in PermissionProvider and render one visible permission check.

Render Gated UI

Use Can for declarative UI gating. This is frontend rendering only; the backend must still authorize the action.

Render Gated UI

import { PermissionProvider, Can, Cannot } from "accessly";

export function App() {
  return (
    <PermissionProvider access={{ permissions: ["reports.view"] }}>
      <Can permission="reports.view" fallback={<span>Hidden</span>}>
        <ReportsPage />
      </Can>

      <Cannot permission="billing.manage">
        <p>Billing settings are restricted.</p>
      </Cannot>
    </PermissionProvider>
  );
}