Runlume Runlume Admin Design

Runlume · admin design baseline

Admin Design

The standard admin template extracted from the Runlume platform frontend: semantic tokens, app shells, shared components and standard pages. Plug in your own menu, identity and APIs.

Live demo Read the docs View source
  • MIT licensed
  • v0.1.0
  • React 19 · Vite · Tailwind
  • No chart library

Why this template

One copyable baseline instead of every admin inventing its own buttons and tables.

Semantic token theming

Color only through semantic tokens: six presets plus base × theme color. Switching themes never touches product code.

Components by category

Nine galleries: basic controls, forms, data display, feedback, navigation, charts, icons, theming and settings.

Three layout modes

Sidebar, top + sidebar, and top-only navigation; sidebar width, radius, transitions and header action order are adjustable.

Charts with no dependency

Line, column, donut, mini bars, bar list, heatmap, radar, funnel and gantt are hand-drawn SVG that follow semantic colors and dark mode.

Menus and permissions

Menus can come from the backend: nesting, external links with an open mode, permission filtering; route guards fall back to 403 and buttons hide or disable through Can.

Bilingual and accessible

One language entry point with type-enforced parity; keyboard reachable, managed focus, high contrast, color-weak and reduced motion.

Standard pages

Dashboard, list, detail, settings, notification centre, sign-in/register/forgot-password — page parts are shared.

Command palette

⌘K searches menus and the content already rendered on the current page, with pinyin, path and full keyboard support.

Docs site and AI friendly

A VitePress docs site (with dead-link checks) plus one-command pnpm check; AGENTS.md and decisions live with the code.

Component gallery

Grouped under “Design system” in the sidebar; every control is interactive in the app.

Basic controls button / input / tag / progress Forms & pickers combobox / cascader / multi-select / upload Data display table / tree / tree table / pager Feedback & overlays dialog / sheet / toast / states Navigation breadcrumb / tabs / steps Metrics & charts line / radar / funnel / gantt Icons full lucide set, click to copy Theme & settings palette / notifications / a11y

Quick start

Node.js 24 and pnpm 11.21.0.

Terminal 
pnpm install
pnpm dev        # app on http://localhost:3200
pnpm docs:dev   # docs on http://localhost:3210
pnpm check      # format + types + lint + tests + build
  1. Copy the directory into your product repo and rename package.json.
  2. Swap the menu in src/app/navigation.ts, or wire the backend menu API.
  3. Swap identity: the session and permission codes in src/app/session.ts.
  4. Wire APIs: replace pages/sample-data.ts; keep Loading / Empty / Error.
  5. Swap copy and brand: src/lib/i18n.ts and public/brand/.