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 ​