Skip to Content
CMSOverview

@gg-software/cms

Opinionated, higher-level building blocks composed from ui + utils + auth — what gets a customer admin panel up fast.

pnpm add @gg-software/cms @gg-software/ui @gg-software/utils @gg-software/auth react react-dom
import { AdminLayout, ResourceTable, ResourceForm } from '@gg-software/cms';
import '@gg-software/ui/styles.css';
import '@gg-software/cms/styles.css'; // on top of the ui stylesheet

Both stylesheets are needed — the cms styles use the ui design tokens.

GroupComponents
LayoutAdminLayout, DashboardLayout, PageHeader, NavSidebar, UserMenu, NotificationCenter
Auth flowsLoginForm, LoginPage, ForgotPasswordForm, ResetPasswordForm, PermissionGate
CRUDResourceTable, ResourceForm, FormBuilder, DetailView, FilterBar, BulkActions, DataTableToolbar, ConfirmDeleteDialog, DataExport + the FieldDef schema
ContentRichTextEditor, MarkdownEditor, MediaLibrary, ImageUploader, SEOFields, ContentScheduler
DashboardStatCard, KpiGrid, ActivityFeed, AuditLog
SettingsSettingsLayout, SettingsForm, ProfileForm

A minimal admin page

import { AdminLayout, PageHeader, ResourceTable, UserMenu } from '@gg-software/cms';
 
export function OrdersPage() {
    return (
        <AdminLayout
            brand={<Logo />}
            sections={[{ title: 'Shop', items: [{ key: 'orders', label: 'Orders' }] }]}
            activeKey="orders"
            headerActions={<UserMenu user={{ name: 'Ada' }} onLogout={logout} />}
            breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Orders' }]}
        >
            <PageHeader title="Orders" actions={<Button variant="primary">New order</Button>} />
            <ResourceTable columns={columns} data={orders} rowKey={(o) => o.id} exportFilename="orders" />
        </AdminLayout>
    );
}
AuthLayout