Permission Guard
A premium, robust RBAC and wildcard permission gating suite supporting stealth unmounts, visual cloning disable modes, and glowing frosted-glass overlays.
Interactive Demo
Toggle between role classifications and permission keys to witness immediate, beautiful layout transformations.
MICTO RBAC Permission Simulator
Toggle roles and action keys below to see the gated layout adapt instantly.
documents.viewdocuments.editDocument Actions (Hide / Disable Modes)
The delete button uses mode="hide". The edit button uses mode="disable".
Create Municipal Log Entry
Gated behind documents.create. Notice the blur effect over the entire field card.
Restricted Access
Requires permission: documents.create
System Administrative Logs
Gated behind the general admin user role class.
Restricted Access
Installation
pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/permission-guard.jsonStandard React / Next.js Setup
Manually provide permissions, roles, and session items down to the provider to authorize children nested in lower sheets or tables.
import { PermissionProvider, Can, RoleGuard } from "@/components/micto/permission-guard"
export default function App() {
const user = { name: "Nehry" }
const permissions = ["documents.view", "documents.edit"]
const roles = ["officer"]
return (
<PermissionProvider user={user} permissions={permissions} roles={roles}>
{/* 1. Standard Hide Guard */}
<Can permission="documents.delete" mode="hide">
<button>Delete File</button>
</Can>
{/* 2. Visual Disable Guard */}
<Can permission="documents.edit" mode="disable">
<button className="bg-primary px-4 py-2 rounded">Edit Record</button>
</Can>
{/* 3. Role-based Frosted Glass Guard */}
<RoleGuard roles="admin" mode="blur">
<div className="p-4 border bg-card">
<h4>Admin Portal Settings</h4>
</div>
</RoleGuard>
</PermissionProvider>
)
}Zero-Boilerplate Inertia.js Auto-Inference
If active inside a Laravel + Inertia application, wrapping layouts with a blank provider automatically hooks into usePage().props.auth.user shared state!
// For Laravel / InertiaJS SPAs - zero boilerplate!
// Wrap your layout once, it auto-extracts values from usePage().props.auth.user!
import { PermissionProvider } from "@/components/micto/permission-guard"
export default function Layout({ children }) {
return (
<PermissionProvider>
<main>{children}</main>
</PermissionProvider>
)
}Can Component API
Properties available on the <Can /> granular gating element.
| Prop | Type | Default | Description |
|---|---|---|---|
| permission | string | undefined | The specific permission key to assert (e.g. 'documents.edit'). Supports trailing wildcards (e.g. 'documents.*'). |
| mode | 'hide' | 'disable' | 'blur' | 'hide' | Visual gating behavior on authentication failure. |
| fallback | ReactNode | null | Custom element rendered inside the unmounted target when mode='hide' or as a CTA inside the overlay card when mode='blur'. |
| className | string | undefined | CSS classes applied to the outer wrapper container when using mode='disable' or mode='blur'. |
RoleGuard Component API
Properties available on the <RoleGuard /> role-based gating element.
| Prop | Type | Default | Description |
|---|---|---|---|
| roles | string | string[] | undefined | The classification roles required to authorize children (e.g., 'admin' or ['admin', 'manager']). |
| match | 'any' | 'all' | 'any' | When an array is supplied, requires either 'any' match (OR gate) or matching 'all' roles (AND gate). |
| mode | 'hide' | 'disable' | 'blur' | 'hide' | Visual gating behavior on authentication failure. |
| fallback | ReactNode | null | Custom element rendered in place of children. |