WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Tables & Lists

Permissions Matrix

Tables & ListsPermissions Matrix
Members tableTable
Live props
Content
mode
defaultSearch
searchPlaceholder
Appearance
density
tone
color
showDescriptions
showCounts
State
readOnly
Behavior
searchable
enforceDependencies
collapsibleGroups
Layout
stickyHeader
maxHeightAuto
mobileLayout
layout
Code
import { PermissionsMatrix } from "@/components/ui/permissions-matrix"

<PermissionsMatrix />
Pro

v1.0.0·Added in 1.0.0

Who can do what: roles as columns, permissions by module as rows, with dependencies, unsaved-change dots and a per-role list on phones.

Tick a cell to grant a permission to a role; the group row's box grants or clears the whole module and shows a dash while only some are on. Granting a permission that needs others (Issue invoices needs View invoices) ticks them too and the cells that changed on their own flash once; revoking a requirement clears what depends on it, and both are announced. Cells that differ from the saved state get a dot, a faint tint and a count in the toolbar. The Owner column is locked (hover, focus or long-press a cell for why), and a role name cut by a narrow column shows whole on hover or a long press. Type in the search field to keep only the matching rows, with the letters marked and the number of matches at the end of the field; a matching module name keeps the whole module. Click a module name (or press Enter or Space on it) to fold it, during a search too (the next query opens it again); Expand all / Collapse all does every module. The grid is one Tab stop: arrows move between cells, module rows and labels included, Home / End jump to the first / last role, Ctrl or Cmd + Home / End to the corners, PageUp / PageDown move eight rows, Space toggles the focused box or opens the level select. The head sticks while you scroll and the label column stays pinned while wide grids scroll sideways, each gaining a hairline shadow only while something slides under it. Below 768px the grid becomes one accordion card per role with a switch per permission and a switch per module (or role chips over one list with mobileLayout="role-picker"); level selects open as bottom sheets.

Add to a project

npx wingo-ui@latest add permissions-matrix

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactaccordionbadgebuttoncheckboxempty-statesearch-inputselectswitchtooltipuse-controllable-stateuse-media-queryuse-scroll-edgestext-matchmotiontonesui-config

Files

  • components/ui/permissions-matrix.tsx

See also

Members tableSettings LayoutCheckboxAccordionTableTree View
PreviousMembers tableNext Table
4 changes
Permissions by role
Permission
View clientsThe client list, profiles and history
Create clientsAlso needs View clientsAdd new clients with a verified tax ID
Edit clientsAlso needs View clientsContact details, addresses, account owner
Delete clientsSensitive permissionAlso needs View clientsPermanently, with all their history
Export clientsAlso needs View clientsDownload the list as CSV or Excel, changed
View invoicesIssued invoices, payments and due dates
Issue invoicesAlso needs View invoicesSeries INV, with tax calculated automatically
Void invoicesSensitive permissionAlso needs Issue invoicesReverse an issued invoice
Sync to QuickBooksAlso needs Issue invoicesPush invoices to the accounting app
View quotesSent quotes and their status
Create quotesAlso needs View quotesFrom the product and service catalog
Approve discounts over 10%Also needs View quotesOtherwise the quote waits for approval, changed
View reportsSales, payments, pipeline, changed, changed
Export reportsAlso needs View reportsPDF and Excel
Invite membersSend invitations by email
Change rolesSensitive permissionIncluding their own role
Company settingsTax ID, address, bank account, invoice series
Billing and subscriptionThe Acme CRM plan and payment method

Clients5/5
Invoices4/4
Quotes3/3
Reports2/2
Team and settings3/4

4 changes
Changes apply to members the next time they sign in.

Click a role name to edit it · enforceDependencies=true · stickyHeader=true