Admin Dashboard Website Template

£29 View live demo or the whole Vault, £79.20

An eight-page SaaS admin dashboard on a quiet grey field, where saturated hatched colour lives only in the data: a stepped payments funnel with a lit stage, filterable payments with a timeline drawer, customers with lifetime value, an invoice composer, reports with a draggable scrubber and settings. Worked example: a payments platform for a three-shop bakery.

ScrollTriggerFlip advanced

13 more details

keyboard-navigationclick-togglehover-effectcount-updata-vizflip-layoutfiltertheme-switchcommand-palettetabsscroll-revealstaggerprogressive-enhancement

Released 25 October 2026

About this template

A working admin dashboard for any product that reports on money, orders or activity: a SaaS admin, a store back office, a fintech app, an analytics panel or a subscription billing console. It is built on a light grey ground with very rounded white cards and ink type. The interface itself never takes a colour; electric blue, green, hot pink and orange appear only in the data, as hatched bars, a stepped line, a dot matrix and one grain-gradient card.

Read the full template overview

The Overview opens on a giant title and a period compare control, then the signature: a payments funnel whose five stages rise as hatched blue columns joined by angled faces. The selected stage lights solid blue with a wash up its column and a floating stat pill. Hover, click or the arrow keys move the light, and switching the period tweens every bar, marker and figure on the page. An ask bar answers a handful of written questions by driving the dashboard.

Behind it sit six more pages in the same skin. Payments filters forty dense rows by status, channel, amount, date and search, reordering them with Flip while the totals strip and a hatched daily chart recount to what is shown; any row opens a drawer with that payment's timeline and a refund flow. Customers switches segments with the totals, a segment share bar and a top-five chart following along, and each customer opens a detail page with lifetime value, hatched monthly spend you can select by month, and that month's orders. Invoices turns its totals cards into filters and has a composer with live line items, VAT and a total that sends a new row into the list. Reports reads a stepped retention line with a draggable scrubber, and Settings covers business details with an unsaved-changes bar, team invites, a payout account card and notifications.

Every building block is also laid out live on a components page with its name, hooks and states. The worked example is Tillwick, a payments platform, signed in as a bakery with three shops, online orders and wholesale customers.

Admin Dashboard - website template preview

What's included

12 items

Seven working pages plus a components page: Overview, Payments, Customers, a customer detail page, Invoices, Reports and Settings, on one stylesheet and one script
Hatched payments funnel with angled faces, previous-period markers, a lit selected stage and a floating stat pill; hover, click and arrow keys
Period switch on the Overview and Reports that tweens every bar, marker and figure to the new period instead of redrawing
Payments: status, channel, amount, date range and search filters with a Flip reorder, a totals strip and daily chart that recount to the rows shown, bulk selection and a row drawer with the payment timeline and refund confirmation
Customers: segment tabs and search, segment share bar, top-five chart, and an add-customer form with validation
Customer detail rendered from one list: lifetime value, hatched monthly spend selectable by month or arrow keys, and that month's orders
Invoices: totals cards that filter the list, an ageing bar, and a composer with live line items, VAT and an empty state that adds a sent or draft invoice
Reports: stepped retention line with a draggable, keyboard-operable scrubber, dot matrix, channel bars, payment method mix and a monthly summary
Settings: tabs linked to the address bar, unsaved-changes bar with a live receipt preview, team invites that add a pending row, payout schedule and bank card, notification switches
Ask bar and command menu (Cmd K or Ctrl K) that drive the pages; front end only
Light and dark themes on the same token names with measured contrast pairs; phone tab bar with a More sheet; plain page loads with a cross-document view transition
Complete pages with reduced motion or without JavaScript; self-hosted Inter Tight

Perfect for

5 use cases

SaaS admin panels and internal dashboards
E-commerce and store back offices
Fintech, banking and payments apps
Analytics and reporting dashboards
Subscription billing and CRM consoles

How it works

6 sections

Colour lives in the data

All colour comes from a small set of tokens, restated for the dark theme under the same names. Chrome and text stay neutral, and each data series has a bright fill colour and a darker partner for small text, because the bright hues do not reach readable contrast as type on white.

The funnel

Each stage is a native button holding its label, figure and drawn column, so the chart is readable and operable without a pointer. Bar heights are custom properties that clip a hatched fill rather than resizing it, so the hatch never stretches and switching periods animates heights without layout work.

Tables that filter in place

Payments, customers and invoices are ordinary table rows carrying their values as data attributes. Filters hide and show rows, Flip moves the survivors to their new places, and the totals strips, charts and counts are recalculated from whatever rows remain, so they always agree with the list.

Data in one place

The periods behind the Overview and Reports and the customer records behind the detail page are short lists at the top of the script. Choosing a period or a customer writes those values into every card on the page together, counting figures from their previous values.

Overlays and keyboard

Menus, dialogs, drawers, sheets, the invoice composer and the command menu open through one stack, so Escape closes the top layer, Tab stays inside modal layers and focus returns to the control that opened them. Tabs, the segmented controls, the funnel, monthly bars, date picker and report scrubber all move with the arrow keys.

Fallbacks

Charts draw in as they enter the viewport only when JavaScript and the animation library are present; otherwise every chart and card shows at rest. Reduced motion keeps every interaction and changes values instantly. Controls that need JavaScript hide on a plain document, and the footer links reach every page.

Plugins ScrollTrigger, Flip

Difficulty Advanced

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (8 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Does this only suit a payments product?

No. The pages are cards, charts and dense tables on a neutral ground, so they suit a SaaS admin panel, a store back office, an analytics dashboard, a CRM or a subscription billing console. Rename the funnel stages and table columns, change the figures in the period list and the rows, and swap the Tillwick wordmark and square mark for your own.

Is the ask bar connected to an AI model?

No. It matches a few keywords in the question against answers written in the script, then acts on the page: selecting a funnel stage, switching the period or highlighting rows. Nothing is sent anywhere. To make it real, post the question and the selected stage to your own endpoint and pass the returned text and actions to the same functions the written answers use.

How do I connect it to my real data?

Overview and Reports read their figures from one list of periods at the top of the script, and the customer page reads one list of customers. Payments, customers and invoices are plain table rows with their values in data attributes. Render those rows from your server or API in the same markup and the filters, totals and charts work on them unchanged.

Do refunds, invites and new invoices save anything?

No. They are complete front ends: the refund dialog marks the row refunded, an invite adds a pending team row, the composer adds an open or draft invoice and the add-customer form adds a row, each with a confirmation toast. Nothing is stored and a reload restores the demo. Wire each form or button to your own backend or a payment provider's API.

Can I change the colours and keep the hatched look?

Yes. Each series takes its hue from one colour token and its RGB triple, and the hatch is drawn over whatever that hue is. Change the electric blue, green, pink and orange values in the token block for light and dark, and the funnel, bars, stepped line, dot matrix and status pills all follow. Check the darker text partners still read on white.

What is the components page for?

It is a live style guide in this template's own skin: every button, input, pill, table, overlay and chart with its class names and each of its states. Use it to build new screens from parts that already work, or as the reference when handing the dashboard to another developer. It can be deleted from a finished site without affecting the other pages.

Paid template

Purchase to unlock the code.

Buying Admin Dashboard opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

Static files, no build step. Serve the folder with any static server and open index.html:

Code snippet omitted: it ships with the download.

Each page loads, in this order:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

Colour is a token block at the top of assets/style.css, restated under :root[data-theme="dark"] with the same names. Change --accent, --pos, --pink and --orange (and their -rgb triples) to recolour every chart. Each bright hue has a darker --*-text partner for small type; keep those at 4.5:1 on white.
Interface colour stays neutral. Chrome, text and backgrounds use ground, surface and ink only; the one primary button and the selected funnel stage are the only accent in the interface.
Brand: replace the i-mark symbol in the SVG sprite at the top of each page and the tillwick wordmark in the top bar.
Charts read --grow (0 to 1). It is 1 by default and only starts at 0 under .has-js so charts can draw in; remove data-draw from a chart to show it at rest.
Controls that need JavaScript carry data-js-only and hide on a plain document.

Pages and Configuration

Shared shell

Top bar (wordmark, page links with aria-current="page" on the current one, search button, theme toggle, account menu), a footer that links every page, and on phones a bottom tab bar with a More sheet. Copy these blocks between pages and move aria-current.

Re-pointing the data

Everything the pages show comes from three places, so a real backend replaces each in one step:

Periods (RANGES in assets/script.js): Overview and Reports figures for each period.
Customers (CUSTOMERS in assets/script.js): the customer page renders from this list by slug. Twelve months of spend and orders run November to October.
Table rows in the HTML: payments, customers, invoices and team rows carry their values as data attributes (data-amount, data-status, data-channel, data-date, data-segment, data-ltv). Render the same markup from your server or API; filters, totals strips and charts are recalculated from whatever rows exist.

Front end only

Nothing is sent or saved. These parts are complete interfaces waiting for your backend: the ask bar (written answers), refunds, receipts and exports (toasts), Add customer, the invoice composer (sends a row into the list), team invites and revokes, business details, payout schedule and notification switches. A reload restores the demo.

Overview periods

The figures behind the period switch are the RANGES list near the top of assets/script.js:

Field	Meaning
`label`, `compare`	Text for the compare control
`funnel`, `prev`	Payments at each of the five stages, this period and the previous one
`gross`	Online, subscription and in-shop totals in pounds
`returning`	Twelve weekly percentages for the stepped line
`dots`	Fourteen slices for the dot matrix, 1 to 6 dots each
`peak`, `insight`, `refund`	Peak label, insight card figure, refund rate

The markup holds the default period's figures so the page reads without JavaScript; the script writes the list's values over them on load.

Funnel

[data-funnel] with five button.funnel__col children. Each column sets --h (height, 0 to 1), --n (next column's height, for the angled face) and --p (previous-period marker). Outside the Overview, give the funnel data-values and data-prev and the script sizes it for you. Stage names and pill wording come from STAGES in the script.

Ask bar

[data-ask]. Answers are written in initAsk in the script and matched by keyword. Each answer can call dash.funnel.select(i), dash.setRange(key) or dash.flag([rowIds]), which highlights tr[data-row] rows in the recent payments table. Nothing is sent anywhere.

Command menu

Opens on Cmd K or Ctrl K, or any [data-cmd-open] button. Add entries by pushing { group, label, icon, href } or { group, label, icon, run } onto window.tillwick.commands.

Page hooks

Page	Root hook	Notes
Payments	`[data-payments]`	Chips: `data-f-status`, `data-f-channel`, `data-f-amount`; `[data-pay-search]`; rows `tr[data-id]`; drawer `#pay-drawer`
Customers	`[data-customers]`	Tabs `[data-seg]`; rows `tr[data-segment][data-ltv][data-orders]`; `[data-cust-top]` rebuilds from the rows
Customer	`[data-customer]`	Slots `[data-cu="..."]` are filled from `CUSTOMERS`
Invoices	`[data-invoices]`	Filters `[data-inv-filter]`; rows `tr[data-status][data-amount][data-late]`; composer `#inv-composer` with `#line-tpl`
Reports	`[data-reports]`	Period control `[data-report-range]`; scrubber `[data-scrub-handle]` (role slider)
Settings	`[data-settings]`	Tabs with `data-hash`; `[data-business-form]`, `[data-invite]`, `[data-payout-schedule]`

Each initialiser returns early when its root is missing, so any card or page can be removed.

Components

Hook	Behaviour
`[data-menu="id"]`	Opens the `role="menu"` popover with that id
`[data-open="id"]`	Opens a `.dialog`, `.drawer` or `.sheet` as a modal layer
`[data-layer-close]`	Closes the layer it sits in
`[data-toast="text"]`	Shows a toast; add `data-toast-type="info
`[data-tip="text"]`	Tooltip on hover and keyboard focus
`[data-tabs]`, `[data-segmented]`	Tabs and segmented control with arrow keys
`[data-chip-toggle]`, `[data-chip-remove]`	Filter chips
`table[data-sortable]` with `th[data-sort="key"]`	Sorts rows by their `data-key` values
`[data-pager]`	Pagination with `data-total` and `data-per`
`[data-datepicker]`	Date range picker
`[data-theme-toggle]`	Light and dark theme

Palette

Token	Light	Dark	Use
`--ground`	`#EFEFED`	`#0D0D0F`	Page
`--surface`	`#FFFFFF`	`#17171A`	Cards
`--ink` / `--ink-2`	`#0E0E10` / `#5C5C63`	`#F2F2F0` / `#A3A3AB`	Text and labels
`--accent`	`#2F4BFF`	`#3A55FF`	Funnel, selection, primary button
`--pos`	`#12A150`	`#22C065`	Money in, online channel, dot matrix
`--pink`	`#E8327A`	`#F0478A`	Returning customers, in-shop channel
`--orange`	`#FF7A1A`	`#FF7A1A`	Brand mark, ask-bar token, grain card

Measured contrast pairs are recorded in the first comment of assets/style.css.

Accessibility

Every chart has a text equivalent: funnel stages are buttons holding their label and figures, the stepped line has a hidden table and announces each step, the balance area chart has a label.
The funnel, stepped line, report scrubber, monthly spend bars, menus, tabs, segmented controls and date picker all work with the arrow keys; focus rings appear only for keyboard use.
Payment rows open from a real button on the customer name; whole-row clicks are a pointer convenience.
Modal layers trap focus, close on Escape and return focus to their trigger.
Reduced motion keeps every interaction and changes values instantly. Without JavaScript, every chart and card shows at rest and the footer reaches every page.

Dependencies

GSAP with ScrollTrigger, plus Flip on the Payments, Customers and Invoices pages. Demo built against 3.15.0; works with 3.12+.
Inter Tight, self-hosted in assets/fonts/ (variable, latin, weights 400 to 600). SIL Open Font License; see assets/fonts/OFL.txt.
No Lenis: app screens scroll natively.

Teardown

All tweens and ScrollTriggers belong to the script's GSAP contexts. window.tillwick.destroy() reverts them and removes the script's document listeners; it also runs on pagehide.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.