Skip to content
UT Studio
Search products
Templates

Admin Dashboard Template

A dense operational shell with tables, filters and audit surfaces that hold up past a thousand rows.

Open the Ledger demo€199 — see licence tiersVersion history
Latest version
1.1.0
Updated
Difficulty
Intermediate
Licence
Team

Overview

Admin interfaces fail on density and on scale. This one is built for both: cursor pagination throughout, tables that become cards below the sidebar breakpoint, and destructive actions that state their blast radius before confirming.

Live demo

Ledger is the interactive demo built on this template: customers with a detail drawer, URL-driven filters, bulk selection and an append-only activity trail. Sample data only.

Open the Ledger demo

Screenshots

Data table with bulk selection and a count-bearing action

Data table with bulk selection and a count-bearing action

Features

  • Cursor pagination

    Every list. Offset paging breaks on tables that grow while you read them.

  • Typed confirmation

    Destructive actions show their blast radius and require typed intent.

  • URL-driven filters

    A filtered view is a link. Shareable, bookmarkable, correct on back.

Architecture

Dense by default, honest at scale

Every list is cursor-paginated rather than offset-paginated, because offset paging skips and duplicates rows on an append-heavy table and forces the database to scan and discard. Filters live in the URL so a view is shareable and back-button-correct.

Tech stack

Built with

What the product is implemented in.

Requires

What you must already have. These block installation.

Folder structure

Folder structure
app/
  (admin)/
    layout.tsx        sidebar + sticky page header
    [section]/        one folder per operational area
components/
  table/              sortable, selectable, cursor-paginated
  filters/            URL-synced facets

Requirements

Node.js
≥ 22.12LTS or current
Package manager
pnpm ≥ 10npm and yarn also work
Operating system
macOS, Linux, Windows (WSL2)

Installation

  1. Unpack the download

    The archive contains the full source. There is no installer and no post-install script.

    bash
    unzip admin-dashboard-template.zip
cd admin-dashboard-template

  2. Install dependencies

    bash
    pnpm install

  3. Configure the environment

    Copy the example file and fill in the variables listed under Environment variables.

    bash
    cp .env.example .env

Quick start

  1. Start the development server

    bash
    pnpm dev

  2. Verify the install

    Runs formatting, lint, type-check, tests and a production build.

    bash
    pnpm check

Environment variables

Environment variables
VariableRequiredDescription
DATABASE_URLRequiredPostgreSQL connection string. Use a pooled endpoint in serverless environments.postgresql://user:pass@localhost:5432/app
NEXT_PUBLIC_APP_URLRequiredAbsolute origin of the deployment. Used for canonical URLs and metadata.https://app.example.com

Configuration

  • Navigation

    The sidebar renders from a typed array, so a new section is a data change.

    content/navigation.ts

Deployment

  • Vercel

    Zero-config. Set the environment variables listed above and connect the repository.

  • Docker

    A multi-stage Dockerfile is included, producing a standalone image with no build toolchain.

  • Any Node host

    Builds to a standard Node server. Nothing depends on a platform-specific runtime.

Compatibility

Framework and runtime versions this product supports
TechnologyVersionsStatus
Next.js≥ 15Supported
React≥ 19Supported

What changed in 1.1.0

Card layout for tables below the sidebar breakpoint.

  • addedTables become cards below lg rather than scrolling horizontally.
  • fixedSticky page header could overlap an open dropdown.

Version history

  1. 1.1.0

    Card layout for tables below the sidebar breakpoint.

    • addedTables become cards below lg rather than scrolling horizontally.
    • fixedSticky page header could overlap an open dropdown.

Dependencies

  • requiresUT UI Library

    The template consumes the token layer directly.

Roadmap

  1. PlannedQ1 2027

    Saved views

    Named filter combinations, shareable per organisation.

Documentation

Support

Frequently asked questions

Related products

Curated by us, not inferred — these are the ones that genuinely pair with it.

More from this category

Other products solving a similar problem.

Built with the same stack

Products that share a framework with this one.