Svelte Admin Dashboard

Almost every admin screen is the same shape: some numbers at the top, a table in the middle that people actually work in, and a detail view or drawer off to the side. SvGrid gives you the middle, and the UI kit that ships with it gives you the rest, from stat tiles and sparklines to menus, drawers and forms.

If you would rather not assemble it, the admin-dashboard starter scaffolds a SvelteKit project with the layout, the grid and Tailwind already wired together.

Install

npm create @svgrid@latest my-admin -- --template admin-dashboard

Free and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.

The code

<script lang="ts">
  import { SvGrid, renderSnippet, type ColumnDef } from '@svgrid/grid'
</script>

<SvGrid
  data={filteredUsers}
  columns={[
    { field: 'name', header: 'User', width: 250,
      cell: (ctx) => renderSnippet(UserCell, { row: ctx.row.original }) },
    { field: 'role', header: 'Role', width: 110,
      editorType: 'list', editorOptions: ROLE_OPTIONS },
    { field: 'mfa', header: 'MFA', width: 80, editorType: 'checkbox' },
  ] satisfies ColumnDef<typeof features, User>[]}
  {features}
  enableInlineEditing={true}
/>

What you get

One command to a project - The admin-dashboard template scaffolds a SvelteKit app with the shell, the grid and Tailwind already connected.
Stat tiles and sparklines - SvStat, SvSparkline and SvGauge cover the numbers row without pulling in a chart library.
A working table - The grid at the centre sorts, filters, edits inline and exports, which is what an admin screen is mostly for.
Drawers and forms - SvDrawer plus SvForm give you the edit panel, with schema-driven fields and validation rather than hand-written markup.
App shell blocks - Ready-made navigation, header and dashboard blocks you can paste in and restyle instead of starting from an empty page.
Free and MIT - The grid, the UI kit and the starter are all MIT. Only export, pivot and the board and scheduler views are commercial.

Live examples

Admin dashboard - CRUD-heavy users board: inline role / status / MFA edit, bulk activate / deactivate / delete, invite dialog, permissions matrix, live audit log.
Admin template - Self-contained admin app: sidebar + three pages (Dashboard, Orders w/ Enterprise export bar, Customers w/ inline edit). Read end-to-end in one file.
Analytics dashboard block - A full overview page: a range SvSegmented + actions header, a KPI grid (SvStat + SvSparkline), a revenue bar panel, a recent-activity SvTimeline and a top-products list with SvProgress bars. No grid dependency.
Operations KPI dashboard - A KPI console: SvStat + SvSparkline tiles, an SvGauge SLA dial, SvHoverCard drill-down previews per service, an SvMenubar toolbar (View / Range / Actions) and a promise toast on Refresh. Pure UI-kit composition, no grid dependency.
App shell block - A complete application layout: a SvNavPane sidebar with sections + badges, a top bar with SvBreadcrumb, search and an account SvMenu, and a routed content area. Nav swaps the page; the toggle collapses the rail to an icon rail.
Seller panel - e-commerce - Marketplace dashboard: catalog with SVG thumbnails, inventory bars vs reorder threshold, live orders pipeline, pricing rules - four tabs over one product list.

Documentation

Starters & scaffolding - The fastest way to a working SvGrid app. One command scaffolds a project with the grid already wired up - no copy-paste, no config archaeology.
Dashboards - SvSchemaDashboard renders a schema-driven dashboard - KPI tiles + charts - over an entity. It's a declarative data *view*, not a drag-drop page builder: you…

Building an Admin Dashboard in Svelte 5 - A practical walkthrough for wiring SvGrid into an admin layout - correct sizing, reactive bulk actions, inline edits with optimistic saves, and a clean handoff to server-side data.
Building an Admin User-Management Screen in Svelte - A blueprint for a user-management grid with roles, status badges, inline edits, bulk actions, and server-side data - the patterns that keep this screen secure and usable.
Building an Order Management Dashboard in Svelte - How to wire up an order management grid with master-detail line items, status workflows, server-side data, and bulk fulfillment actions using SvGrid.

Frequently asked questions

How do I build an admin dashboard in Svelte?

Start from the admin-dashboard template with npm create @svgrid@latest my-admin -- --template admin-dashboard, or compose it yourself from the grid plus the stat, chart and drawer components in the UI kit.

Does it include authentication?

The starter does not. SvGrid Studio, the commercial app builder, generates SvelteKit projects with auth and role-based access wired in if you want that part generated too.

Can I use my own design system?

Yes. The grid is themed through CSS custom properties, so matching an existing palette is a token change rather than a fork, and the theme builder exports the tokens for you.

Is the admin dashboard free?

Yes. The starter template, the grid and the UI components are MIT-licensed. Excel export and pivot are the parts that need a commercial license.

Build something else

Get started · Browse the gallery · Pricing