Skip to content
Nitro Kitv2.0.0.alpha.4

Search gallery…

IntroductionGalleryAgent guideGalleryHuman guideGalleryColorsFoundations · ThemeTypographyFoundations · ThemeSpacing & sizingFoundations · ThemeEffectsFoundations · ThemeButtonComponents · ActionsButton groupComponents · ActionsButton toComponents · ActionsAppearance pickerComponents · FormsCheckboxComponents · FormsCheckbox groupComponents · FormsComboboxComponents · FormsControl groupComponents · FormsDropzoneComponents · FormsFieldComponents · FormsField groupComponents · FormsFieldsetComponents · FormsInputComponents · FormsLabelComponents · FormsRadio buttonComponents · FormsRadio button groupComponents · FormsRich text areaComponents · FormsSelectComponents · FormsSwitchComponents · FormsTextareaComponents · FormsCommand paletteComponents · OverlaysDialogComponents · OverlaysDropdownComponents · OverlaysSheetComponents · OverlaysTooltipComponents · OverlaysAlertComponents · FeedbackEmpty stateComponents · FeedbackToastComponents · FeedbackAccordionComponents · Data displayAvatarComponents · Data displayAvatar stackComponents · Data displayBadgeComponents · Data displayDetails tableComponents · Data displayIconComponents · Data displayProgressive imageComponents · Data displayStat gridComponents · Data displayTableComponents · Data displayTypesetComponents · Data displayPaginationComponents · NavigationPagination barComponents · NavigationTabsComponents · NavigationToolbarComponents · NavigationCardComponents · LayoutContainerComponents · LayoutFlexComponents · LayoutGridComponents · LayoutApplication navigationComponents · ApplicationApplication shellComponents · ApplicationAuthentication shellComponents · ApplicationDanger zoneComponents · ApplicationData sectionComponents · ApplicationForm sectionComponents · ApplicationPage headerComponents · ApplicationSettings layoutComponents · ApplicationSign inCompositions · Access & onboardingPassword resetCompositions · Access & onboardingEmail verificationCompositions · Access & onboardingInvitation acceptanceCompositions · Access & onboardingAccount creationCompositions · Access & onboardingAccount securityCompositions · Access & onboardingWorkspace onboardingCompositions · Access & onboardingBranched onboardingCompositions · Access & onboardingWorkspace dashboardCompositions · Workspace & organizationWorkspace settingsCompositions · Workspace & organizationWorkspace usersCompositions · Workspace & organizationTeam managementCompositions · Workspace & organizationAPI credentialsCompositions · Workspace & organizationOrganization overviewCompositions · Workspace & organizationOrganization settingsCompositions · Workspace & organizationTeam activityCompositions · Workspace & organizationTeam memberCompositions · Workspace & organizationSubscription billingCompositions · Billing & commerceCheckout and paymentCompositions · Billing & commerceCheckout resultsCompositions · Billing & commerceData resource overviewCompositions · Data & operationsData resource activityCompositions · Data & operationsData resource settingsCompositions · Data & operationsProduct resource lifecycleCompositions · Data & operationsAPI webhooksCompositions · Data & operationsIntegration managementCompositions · Data & operationsFile uploadsCompositions · Data & operationsActivity and audit logCompositions · Data & operationsChangelogCompositions · Product & supportHelp centerCompositions · Product & supportSystem status and errorsCompositions · Product & supportProduct landingCompositions · MarketingPublic pricingCompositions · MarketingProduct featuresCompositions · MarketingPublic contactCompositions · MarketingSidebar operations applicationCompositions · Complete applicationsTopbar media applicationCompositions · Complete applicationsHybrid account applicationCompositions · Complete applications

No destinations found.

  • Introduction
  • Agent guide
  • Human guide
  • Foundations
    • Colors
    • Typography
    • Spacing & sizing
    • Effects
  • Actions
    • Button
    • Button group
    • Button to
  • Forms
    • Appearance picker
    • Checkbox
    • Checkbox group
    • Combobox
    • Control group
    • Dropzone
    • Field
    • Field group
    • Fieldset
    • Input
    • Label
    • Radio button
    • Radio button group
    • Rich text area
    • Select
    • Switch
    • Textarea
  • Overlays
    • Command palette
    • Dialog
    • Dropdown
    • Sheet
    • Tooltip
  • Feedback
    • Alert
    • Empty state
    • Toast
  • Data display
    • Accordion
    • Avatar
    • Avatar stack
    • Badge
    • Details table
    • Icon
    • Progressive image
    • Stat grid
    • Table
    • Typeset
  • Navigation
    • Pagination
    • Pagination bar
    • Tabs
    • Toolbar
  • Layout
    • Card
    • Container
    • Flex
    • Grid
  • Application
    • Application navigation
    • Application shell
    • Authentication shell
    • Danger zone
    • Data section
    • Form section
    • Page header
    • Settings layout
  • Access & onboarding
    • Sign in
    • Password reset
    • Email verification
    • Invitation acceptance
    • Account creation
    • Account security
    • Workspace onboarding
    • Branched onboarding
  • Workspace & organization
    • Workspace dashboard
    • Workspace settings
    • Workspace users
    • Team management
    • API credentials
    • Organization overview
    • Organization settings
    • Team activity
    • Team member
  • Billing & commerce
    • Subscription billing
    • Checkout and payment
    • Checkout results
  • Data & operations
    • Data resource overview
    • Data resource activity
    • Data resource settings
    • Product resource lifecycle
    • API webhooks
    • Integration management
    • File uploads
    • Activity and audit log
  • Product & support
    • Changelog
    • Help center
    • System status and errors
  • Marketing
    • Product landing
    • Public pricing
    • Product features
    • Public contact
  • Complete applications
    • Sidebar operations application
    • Topbar media application
    • Hybrid account application

Team management

Component-composed team context, current memberships, pending invitations, server-enforced ownership, access changes, and pressure states.

MembersMultiple teamsSearchEmptyInviteInvite validationLoadingRole changeLast owner validationRemove confirmationRemovedErrorDenseMobile

Team members and invitations

Inventory, search, invitation, access changes, removal, recovery, density, and mobile pressure.

Dense

Eight deterministic memberships pressure row actions and long account data.

Large team inventory

8 current memberships with roles, join dates, and account actions.

8 workspace members
MemberRoleStatusJoinedActions
ALAda Lovelace[email protected]OwnerActive2024-02-12
Change roleRemove
GHGrace Hopper[email protected]AdminActive2024-09-03
Change roleRemove
DVDorothy Vaughan[email protected]AdminActive2025-01-14
Change roleRemove
MJMary Jackson[email protected]MemberActive2025-03-21
Change roleRemove
AEAnnie Easley[email protected]ViewerActive2025-05-09
Change roleRemove
MHMargaret Hamilton[email protected]MemberActive2025-08-17
Change roleRemove
HLHedy Lamarr[email protected]ViewerSuspended2025-11-02
Change roleRemove
RPRadia Perlman[email protected]MemberActive2026-01-19
Change roleRemove

Pending invitations

Invitations remain separate from memberships until the intended recipient accepts.

Invite teammate
2 pending invitations
EmailRoleInvited bySentExpiresActions
[email protected]MemberAda Lovelace12 Jul 16:18July 26, 2026
ResendRevoke
[email protected]AdministratorGrace Hopper13 Jul 09:04July 27, 2026
ResendRevoke
ViewportFull width
Rubytest/dummy/app/components/gallery/compositions/team_management_page.rb
div(
  data: {
    gallery: "composition-surface",
    gallery_composition: "team-management",
    gallery_composition_state: state,
    gallery_mobile: state == "mobile" ? "true" : nil
  }.compact
) do
  render NitroKit::Container.new(size: :xl, id: "gallery-team-container") do
    render NitroKit::Flex.new(dir: :col, gap: 6, align: :stretch, id: "gallery-team-stack") do
      turbo_frame_tag("gallery-team-management-frame") { render_screen }
    end
  end
end