Admin panels for Laravel, written in PHP. Rendered in React.

1. A ready-made admin

   Our first products shipped in weeks on a ready-made Laravel admin. It was the right tool for a first release.

2. The ceiling

   The products grew and every screen got more specific. Soon most of the work went into bending the admin, not into features.

3. A React admin from scratch

   Live previews, custom fields, real UI state. And a second codebase, drifting away from the Laravel app that already owned the models, auth and validation.

4. AvailableBeta

   Tabletop

   The synthesis: PHP-first authoring, a React runtime, Laravel as the owner of both.

5. In progressBeta

   Today: the builder, with a CMS in closed beta

   tbtop/admin is public and MIT on GitHub. Every tbtop/cms screen, from pages and blocks to revisions, scheduling and SEO, is ordinary builder DSL.

   See the CMS

   yourapp.test/admin/pages/1/edit

   

6. In progress

   Next: tbtop/admin 1.0 and the CMS public beta

   Planned together for the end of 2026: a frozen contract with semver for the builder, and the CMS open to everyone.

7. Planned

   Then: CRM

   Contacts, deals and pipelines on the same builder, in 2027.

Roadmap, not a promise: order and scope change with real projects.as of October 2026

• 01 / 04

  A field of your own

  Write one React component for a field type the DSL doesn't ship. Use it from PHP by name, with its own options, next to the 26 built-in field kinds.

  Show the code

  app/Admin/Fields/RatingField.php

  S::register('rating', RatingField::class); final class RatingField extends Field{    public function max(int $stars): static    {        return $this->set('max', $stars);    }} $s->rating('score')->max(5);

  resources/js/admin.tsx

  registerBlock<'rating', { max?: number }>({    kind: 'rating',    behavior: 'field',    render: ({ options, ctx }) =>        ctx.surface === 'cell' ? (            <span>{ctx.binding?.value ?? '–'}</span>        ) : (            <Stars                max={options.max ?? 5}                value={ctx.binding?.value}                onChange={ctx.binding?.onChange}            />        ),});

  Both sides ship in the same commit.

• 02 / 04

  Your component in any layout

  Drop a custom component into a table, a section or any other layout, right next to the built-in fields around it.

  Show the code

  app/Admin/Pages/OrdersPage.php

  $s->section(['title' => 'Orders'], [    $s->table('orders')        ->query(fn () => Order::query()),    new Node('app:revenue-chart', ['days' => 30]),]);

  resources/js/admin.tsx

  registerBlock({    kind: 'app:revenue-chart',    behavior: 'leaf',    render: ({ options }) => (        <RevenueChart days={options.days} />    ),});

  The PHP side stays the single source of truth for the page.

• 03 / 04

  Live UI over unsaved values

  Read the form as the manager types — a running total, a counter, a preview — without a request per keystroke.

  Show the code

  app/Admin/Pages/BookingPage.php

  $s->form('booking', [    $s->repeater('options')->fields([...]),    new Node('app:subtotal', ['rate' => $tariff->daily_rate]),]);

  resources/js/admin.tsx

  function Subtotal({ options }: { options: { rate: number } }) {    const ctrl = useNearestFormController();    const rows = Array.isArray(ctrl?.data.options)        ? ctrl.data.options        : [];     return <output>{rows.length + options.rate}</output>;} registerBlock<'app:subtotal', { rate: number }>({    kind: 'app:subtotal',    behavior: 'leaf',    render: Subtotal,});

  The server still computes the number that gets saved.

• 04 / 04

  A whole page of your own

  Some screens are not a form or a table. Declare a page, hand it a custom component, and it slots into the admin like any other page.

  Show the code

  app/Admin/Pages/ReportsPage.php

  class ReportsPage extends Page{    public static function path(): string    {        return 'reports';    }     public function view(S $s): Node    {        return new Node('app:reports');    }}

  resources/js/admin.tsx

  registerBlock({    kind: 'app:reports',    behavior: 'leaf',    render: Reports,});

  Same navigation, same permissions, same admin shell.