image

介绍

Komari-Next 是 Komari 服务器监控项目的一个现代前端主题,由开发者 Tony Liu 基于 Next.js、TypeScript、Tailwind CSS 和 Shadcn UI 构建,打包成静态站点后可以作为 Komari 的官方主题直接使用。【看腻了 Komari 默认主题的可以试试这个,自定义项多到能折腾一晚上,想给监控页换个现代感样式的别错过】

先说背景。Komari 是一款轻量级的自托管服务器监控工具,类似哪吒监控、Beszel 那一挂,通过轻量级 Agent 收集数据,Web 界面看状态,在探针圈子里热度不低。它的主题系统支持打包前端替换默认界面,Komari-Next 就是干这个的——不碰后端,只做皮肤。

特征

🎨 6 套颜色主题:默认、海洋、日落、森林、午夜、玫瑰,一键切换
🃏 4 种卡片布局:经典、现代、极简、详细,每种布局的元素排布和视觉都不一样
📈 4 种图表样式:圆形、进度条、柱状图、极简,全部跟随所选颜色主题
🎛 状态卡片可定制:仪表盘上每个指标都能单独显示或隐藏
🖼 自定义背景:直接给个图片 URL 就能当背景,支持毛玻璃模糊效果,透明度、模糊强度可调
📊 首页直接显示 Ping 信息,不用点进详情
🌙 响应式布局 + 暗色模式,手机上看也正常
🌍 国际化支持(react-i18next),设置本地保存,切换主题不丢失
⚙️ 构建产物是纯静态文件,当 Komari 主题装或用任意静态服务器托管都行

部署方面,README 里有个小坑值得提醒:Komari 默认只接受 POST 请求,用 Nginx 反代静态页面时建议加一条 rewrite 把请求转成 GET(OpenResty 用 rewrite_by_lua_block 改请求方法,或者用 proxy_method GET),否则可能出现请求被拒的情况。配置项多意味着动手空间大,社区里已经有人基于它做了各种自定义 body 玩法,可玩性挺高。

开源地址