> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.
# EquaRolesPermissions
> Design system reference for EquaRolesPermissions, including Storybook, Figma, screenshots, and usage guidance
# EquaRolesPermissions
> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaRolesPermissions.stories.tsx`, Line: 25
## Purpose
Roles and permissions role cards, permission matrices, and edit states.
## Storybook
| Story | Reference |
| ------------------------------- | ------------------------------------------------------------------------------------------------------- |
| Role Card Panel 33 | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--role-card-panel-33) |
| Required Role Cards | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--required-role-cards) |
| Role Catalog | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--role-catalog) |
| Role Landing | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--role-landing) |
| Permissions Matrix | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--permissions-matrix) |
| Permissions Edit | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--permissions-edit) |
| Final Designs Mirror | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--final-designs-mirror) |
| Design Library Audit | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--design-library-audit) |
| Plugins Dashboard Mirror | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--plugins-dashboard-mirror) |
| Plugins Top Bar Mirror | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--plugins-top-bar-mirror) |
| Runtime Provider Plugins Mirror | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--runtime-provider-plugins-mirror) |
| Install From Git Mirror | [Storybook](http://localhost:6006/?path=/story/equa-roles-permissions--install-from-git-mirror) |
## API And Props
| Prop or Control | Source | Notes |
| --------------- | --------------------------------- | ------------------------------------- |
| UNVERIFIED | Not exposed in Storybook argTypes | Review component TypeScript interface |
Sources:
* `equa-patternlib-nextjs/src/components/roles-permissions/roles-permissions.tsx`, Line: 31
* `equa-patternlib-nextjs/src/components/roles-permissions/index.ts`
* `equa-patternlib-nextjs/src/components/rolespermissions/rolespermissions.tsx`
* `equa-patternlib-nextjs/src/components/rolespermissions/index.ts`
* `equa-patternlib-nextjs/stories/EquaRolesPermissions.stories.tsx`, Line: 25
## Figma
[Open Figma reference](https://www.figma.com/design/qY7F4qxhZe1e5N2SVkat1O/Roles---Permissions?node-id=902-129324)
## Screenshots
| State | Asset |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | 
|
| Light theme | 
|
## Usage Notes
* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).
## Accessibility Notes
* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.