Every side project eventually needs an admin screen. Sidebar, login, a table of things, a settings page, dark mode. On Next.js there are plenty of starting points. On Vue, Svelte, Astro or Angular I kept rebuilding the same chrome by hand — or giving up and shipping something ugly.

ZenPanel is my attempt to stop doing that.

What it is

ZenPanel is an open-source admin UI shell. One command scaffolds the same polished dashboard for several frameworks:

npm create zenpanel@latest

You'll be asked for a project name and a framework. Or skip the prompts:

npm create zenpanel@latest my-admin -- --framework nextjs npm create zenpanel@latest my-admin -- --framework vue npm create zenpanel@latest my-admin -- --framework svelte # also: react, preact, solid, html, astro, angular

Then:

cd my-admin npm run dev

Login URLs differ by framework (Next on :3000, most Vite templates on :5173, Astro :4321, Angular :4200). Demo credentials for the preview UI are admin / admin — that is not real auth.

There's a live demo at zenpanel.foisal.org.

What's included

  • Responsive shell: collapsible sidebar, header, breadcrumbs, user menu
  • Dashboard: welcome hero, stats cards, revenue chart, activity feed, quick actions
  • Resource pages with table layout and empty states ready for an API
  • Messages (two-pane inbox empty state) and Settings (account & branding)
  • Login (split-screen preview auth)
  • Light and dark themes
  • Optional AI assistant panel (depth depends on the framework)

Next.js is the visual source of truth. The React, Preact, Solid, Svelte, Vue, HTML, Astro and Angular templates are meant to match that UI. Remix is listed as coming soon.

Customize, then connect an API

Branding and nav live in one config file per template (src/config/admin.config.ts for most Vite/Next templates; Angular, HTML and Astro have their own paths — see the README). Change the name, tagline, logo letter, login copy and sidebar links there.

The sample metrics and tables are preview data. When you're ready, replace them with your own endpoints. The docs under docs/connecting-api.md walk through that. ZenPanel ships a shell, not a backend.

Requirements and stack

Node.js 20+ (Astro needs 22.12+). Templates use Tailwind CSS 4 and Lucide icons. Current release of the CLI is create-zenpanel@2.1.3. MIT licensed.

Repo: github.com/foisalislambd/zenpanel

Honest limits

  • Preview login is not production auth. You still need real authentication before you put this on the internet.
  • There is no built-in data layer like react-admin or Refine. If you need that, those projects are better fits.
  • Remix isn't ready yet.
  • It's a young project (repo started June 2026) and mostly me.

If you try a template and the UI drifts from Next, or a framework install breaks on your machine, please open an issue. The whole point is that the shell should feel the same wherever you land.

— foisal