AdminShell

v1.0.0

Top-level Meteorack admin shell with sidebar, admin bar, and content frame.

Import

import { AdminShell } from '@meteorack/sdk-react';

How To Use It

Use it only for full wp-admin takeover surfaces where a module replaces the native admin chrome with the Meteorack shell.
Do not use AdminShell for normal embedded module pages that already live inside the standard WordPress admin frame.

Works Well With

Sidebar AdminBar PageHeader

Props

sidebar: ReactNode

Navigation region, typically a configured Sidebar component.

adminBar: ReactNode

Top banner region, typically an AdminBar component.

children: ReactNode

Main routed content area rendered inside the shell body.

notifications?: ReactNode

Optional overlay notifications region, such as a Toast container.

commandPalette?: ReactNode

Optional spotlight or command palette mounted above the shell.

Example

AdminShell.tsx

import { useState } from 'react';
import {
  AdminShell,
  AdminBar,
  Sidebar,
  PageHeader,
  Card,
  Button,
} from '@meteorack/sdk-react';

const sections = [
  {
    label: 'Workspace',
    items: [
      { slug: 'dashboard', label: 'Dashboard' },
      { slug: 'settings', label: 'Settings' },
    ],
  },
];

export function TakeoverShell() {
  const [activeSlug, setActiveSlug] = useState('dashboard');
  const [collapsed, setCollapsed] = useState(false);

  return (
    <AdminShell
      adminBar={
        <AdminBar
          siteName="Meteorack"
          center={<span>Admin takeover</span>}
          actions={
            <Button variant="ghost" size="sm">
              Sign out
            </Button>
          }
        />
      }
      sidebar={
        <Sidebar
          sections={sections}
          activeSlug={activeSlug}
          collapsed={collapsed}
          onNavigate={setActiveSlug}
          onToggleCollapse={() => setCollapsed((value) => !value)}
        />
      }
    >
      <PageHeader
        title="Admin takeover shell"
        description="Full wp-admin replacement for Meteorack surfaces."
      />
      <Card>Current route: {activeSlug}</Card>
    </AdminShell>
  );
}

PreviousLoadingOverlay NextSidebar