VeguiPerms React

@vperms/react brings VeguiPerms to React 19: providers, hooks and declarative permission gates for Client and Server Components.

React guide · API reference · GitHub

Install

npm install @vperms/react react

Render from a resolved snapshot

"use client";

import { AbilityProvider, type ResolvedSubject, useAbility } from "@vperms/react";

function CreateButton() {
  const ability = useAbility();
  return ability.can("projects.create") ? <button>Create project</button> : null;
}

export function ProjectActions({ subject }: { subject: ResolvedSubject }) {
  return (
    <AbilityProvider subject={subject}>
      <CreateButton />
    </AbilityProvider>
  );
}

Pass the server's resolved subject into the provider. The createVPerms() factory also supplies a bound Provider, Ability gate and useAbility() hook, with request-scoped caching in Server Components. See the guide for the full hydration flow.

Client checks support UI decisions; authorize sensitive operations on the server. For Next.js orchestration, see VeguiPerms Next.js.

Build and coverage badges describe the whole VeguiPerms repository. License: MIT.