Features

Administration

Staff and company owners open an embedded admin from the account menu. The shell hosts it in an iframe. You inject extra apps into the sidebar from config.

Admin in the shell

The admin UI is a React app, not a separate product login. Point backend.adminUrl at it — local Vite or admin.shellui.com — and the shell registers /admin for users with isStaff or isCompanyOwner.

It talks to the same identity-service as sign-in. Source lives in the admin repo. Without adminPathname, the account menu does not show Administration.

1. Point at the admin app

Set adminPathname and adminUrl on a Shellui identity backend.

2. Sign in as staff or owner

The shell guards the route. Members without those flags never load the iframe.

3. Open Administration

The account menu exposes it. Hash routes inside admin stay in sync with the shell path, such as /admin/users.

shellui.config.ts

import type { ShellUIConfig } from "@shellui/core";

const config: ShellUIConfig = {
  backend: {
    type: "shellui",
    url: "http://localhost:8000",
    companyId: 1,
    adminPathname: "/admin",
    adminUrl: "http://localhost:5174",
    login: {
      methods: ["oauth"],
      oauthProviders: ["github"],
    },
  },
};

export default config;

Built-in tools

Identity screens ship with the admin app. Storage screens appear when storage.url is set. Staff can open Django admin in a new tab — it is not framed.

Users and organization

Directory, enable or disable membership for this company, and the Organization panel for public, domain, or invitation-only join rules.

Groups, logs, and tokens

Company groups, login events, personal access tokens, and per-company OAuth clients. The same APIs the authentication feature describes.

Storage

Files explorer and statistics when storage is configured. Swagger and ReDoc for the storage-service sit next to them.

Your apps in the sidebar

The top-level administration block injects a titled section below Dashboard and above Identity. Each item is a NavigationItem: the admin chrome loads url in an iframe, or opens it in a new tab when the target cannot be framed.

shellui.config.ts

const config: ShellUIConfig = {
  administration: {
    title: { en: "Applications", fr: "Applications" },
    navigation: [
      {
        label: { en: "Billing", fr: "Facturation" },
        path: "billing",
        url: "https://billing.example.com/",
        icon: "/icons/billing.svg",
      },
    ],
  },
};

administration.ts

{
  label: { en: "Billing", fr: "Facturation" },
  path: "billing",
  url: "https://billing.example.com/",
  icon: "/icons/billing.svg",
}

administration.ts

{
  label: "Django admin",
  path: "django",
  url: "/admin/",
  requiresStaff: true,
  openIn: "external",
}

administration.ts

{
  label: "Support desk",
  path: "support",
  url: "https://support.example.com/",
  openIn: "external",
}

Next, see how Storage attaches object storage, quotas, and the file SDK.