Skip to content

Introduction

HaloLight is a multi-framework enterprise-level admin dashboard solution.

What is HaloLight

HaloLight follows the philosophy of "one design specification, multiple framework implementations", providing developers with a unified Admin Dashboard experience. Whether you use React, Vue, Angular, or other modern frameworks, you'll get consistent functionality and design.

Core Features

Draggable Dashboard

Custom Dashboard system based on Grid Layout, supporting:

  • Widget drag and drop arrangement
  • Responsive layout adaptation
  • Layout state persistence

Permission Control

Complete RBAC permission management system:

  • Fine-grained permission control (page/button level)
  • Wildcard permission matching (users:*, *)
  • Dynamic menu rendering

Theme System

Rich visual customization capabilities:

  • 11 skin presets
  • Light/Dark mode switching
  • View Transitions animation effects

Component Library

Based on shadcn/ui design system:

  • 30+ beautiful UI components
  • Complete form/table solutions
  • Highly customizable

Frontend-Backend Any Combination

  • 98 Combination Options: 14 frontend frameworks × 7 backend APIs, choose freely based on team tech stack or business scenarios
  • BFF/Gateway Decoupling: Optional tRPC, GraphQL Gateway for aggregation, authentication & simplification
  • Upgrade Without Lock-in: Replace any frontend or backend while maintaining contract compatibility
  • Independent Evolution: Frontend can choose SSR/SSG/SPA, backend can choose monolith/microservices/serverless

Framework Implementations

All framework versions have been implemented and deployed (preview links available in respective repository READMEs). Current reference implementations:

FrameworkStatusPreviewRepository
Next.js 14✅ DeployedPreviewGitHub
React (Vite)✅ DeployedPreviewGitHub
Vue 3.5✅ DeployedPreviewGitHub
Angular 21✅ DeployedPreviewGitHub
Nuxt 4✅ DeployedPreviewGitHub
SvelteKit 2✅ DeployedPreviewGitHub
Astro 5✅ DeployedPreviewGitHub
Solid.js✅ DeployedPreviewGitHub
Qwik✅ DeployedPreviewGitHub
Remix✅ DeployedPreviewGitHub
Preact✅ DeployedPreviewGitHub
Lit✅ DeployedPreviewGitHub
Fresh (Deno)✅ DeployedPreviewGitHub
Deno✅ DeployedPreviewGitHub

💡 Flexible Combinations: Frontend mainline supports 14 frameworks, any frontend can combine with 7 backend APIs, forming 98+ combination options.

Backend API Implementations

Backend TechStatusPreviewRepository
NestJS 11✅ DeployedAPI DocsGitHub
Python FastAPI✅ DeployedAPI DocsGitHub
Java Spring Boot✅ DeployedAPI DocsGitHub
Go Fiber✅ DeployedAPI DocsGitHub
Node.js Express✅ Deployed-GitHub
PHP Laravel✅ Deployed-GitHub
Bun + Hono✅ Deployed-GitHub

Middleware / Full-Stack

ProjectStatusDescriptionRepository
tRPC BFF✅ DeployedType-safe gatewayGitHub
Next.js Action✅ DeployedServer Actions full-stackGitHub

Tech Stack

All framework versions share the following tech stack:

  • TypeScript - Type safety
  • Tailwind CSS - Atomic CSS
  • shadcn/ui - UI component library
  • TanStack Query - Server state management
  • ECharts - Chart visualization
  • Mock.js - Data simulation

Next Steps