Customize the admin

The admin is a package (@sellbase/admin), not code copied into your project, so updates never overwrite your changes. Customize it through its config: theme, logo, texts, named slots and extra pages.

// app/admin/[[...path]]/page.tsx (Next.js) or src/sellbase/admin-page.tsx (Vite)
<SellbaseAdmin
  config={{
    supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
    supabaseAnonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    locale: 'es', // or 'en'
    theme: { primary: '#7c3aed', radius: '0.625rem', fontFamily: 'Inter, sans-serif' },
    logo: { src: '/logo.svg', alt: 'My store' }, // defaults to the logo from Settings → General
    texts: { nav: { orders: 'Ventas' } }, // override any label
    slots: {
      'home.top': ({ sellbase }) => <MyAnnouncement />,
      'order.detail.sidebar': ({ orderId }) => <InvoiceButton orderId={orderId} />,
    },
    pages: [{ path: 'reportes', label: 'Reportes', icon: 'chart', render: () => <MyReports /> }],
  }}
/>

On sites without React, the same options go in admin/config.js (window.SellbaseAdminConfig). Only values can be set there: no slots or pages.

Slots

Slot	Where
`home.top`, `home.bottom`	Home, above and below the setup guide and metrics
`orders.list.top`	Orders list
`order.detail.sidebar`	Order page, right column (receives `orderId`)
`products.list.top`	Products list
`product.form.bottom`	Product editor (receives `productId` when editing)
`settings.bottom`	Settings → General
`sidebar.bottom`	Side menu, above Settings

Every slot receives sellbase (the typed API client with the signed-in staff session) and navigate(path).

Extra pages

Each entry in pages adds an item to the side menu and a route under the admin.

icon: one of the admin icon names (chart, store, mail, users, tag, file, …) or a short text.
render: receives the same context as slots.

Theme

theme.primary colors the primary buttons.
The rest of the admin uses Sellbase's neutral design tokens, so any brand color looks right.
The admin's styles are scoped to .sb-admin and never touch your site's CSS.

Going further

Sellbase is open source (MIT). If you need something the config cannot do, open an issue or a pull request, since other stores probably need it too. Forking @sellbase/admin works, but you lose automatic updates.

Raw Markdown for agents: guides/customize-admin.md · Edit on GitHub