@x12i/xentra-react

React hooks and UI component scaffolds for building Xentra-powered admin and product surfaces.

Install

npm install @x12i/xentra-react react

Peer dependency: React 19+.

Usage

import {
  useXentraUser,
  useAccounts,
  useActiveAccount,
  usePermission,
  PermissionGate,
  AccountSwitcher,
  ApprovalInbox,
} from "@x12i/xentra-react";
import type { PermissionCheckRequest } from "@x12i/xentra-types";

function AgentsPanel() {
  const { user, activeAccountId } = useXentraUser();
  const { allowed, loading } = usePermission({
    actor: { type: "user", id: user?.id ?? "" },
    action: "agents.manage",
    resource: { resourceType: "account" },
    context: { accountId: activeAccountId ?? "" },
  });

  return (
    <PermissionGate allowed={allowed && !loading}>
      <AgentList />
    </PermissionGate>
  );
}

Hooks

| Hook | Purpose | |------|---------| | useXentraUser | Current user and account list | | useAccounts | Account switcher data | | useActiveAccount | Active tenant selection | | usePermission | Permission check for gating UI | | useAgents | Agent list for an account | | useApprovals | Pending approval requests |

Components

Scaffold components (stubs returning null until wired to your design system):

AccountSwitcher, UserMenu, TeamMembersTable, InviteUserDialog, RoleSelector, AgentList, AgentDetail, ToolPermissionEditor, DelegationManager, ApprovalInbox, AuditLogTable, PermissionGate.

Related packages

• @x12i/xentra-sdk — typical data layer behind these hooks
• @x12i/xentra-admin — admin app built on this package

Development

npm run build -w @x12i/xentra-react
npm test -w @x12i/xentra-react

License

MIT