Documentation

Getting Started

Accessly is frontend access control for React UI. Start by modeling the current authenticated user's access, then render UI from that model.

What Accessly Does

Accessly helps React apps hide, show, disable, and explain frontend UI from one normalized AccessModel. It does not replace backend authorization for private routes, data fetching, mutations, billing actions, or admin operations.

Current User Only

AccessModel describes the current authenticated user/session only. Do not pass every user in your system to PermissionProvider.

First Shape

The provider stores access data in React Context. Hooks such as usePermission and useAccessDecision read from PermissionProvider.

First Shape

import { PermissionProvider, Can } from "accessly";

const access = {
  user: { id: "user_1", roles: ["admin"] },
  permissions: ["users.create"],
  flags: ["features.audit-log"],
};

export function App() {
  return (
    <PermissionProvider access={access}>
      <Can permission="users.create">
        <button>Create user</button>
      </Can>
    </PermissionProvider>
  );
}