React后台SaaS

beacon — React 后台模板

作者 thomasGravy

Beacon 是一个基于 React、Tailwind CSS 和 Recharts 的免费 SaaS 与 CRM 仪表盘模板，包含概览、客户、设置等页面，支持明暗主题与响应式布局。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-15查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

包含 Overview、Customers、Settings 三个页面，覆盖 KPI、图表、可筛选表格与表单

使用 React、Tailwind CSS 和 Recharts 构建，图标来自 Lucide，字体为 Inter

支持明暗模式并按访客记忆，移动端侧边栏可折叠

颜色以 CSS 变量定义在 src/index.css，可集中修改主色等设计令牌

页面按需加载，图表库仅随 Overview 加载

README 称其键盘友好、控件有标签、焦点可见

模板详细介绍

Beacon 是面向 SaaS 和 CRM 产品的免费仪表盘模板，使用 React、Tailwind CSS 与 Recharts 构建，README 提到配套 Figma 文件尚未发布。模板包含三个主要页面：Overview 提供 KPI 卡片与迷你趋势图、收入图表（今年与去年对比）、按套餐划分的收入、销售管道和近期交易；Customers 提供可搜索、筛选、排序的表格，支持行选择、批量操作、行菜单、空状态和分页；Settings 包含个人资料表单、通知开关和账单。模板支持明暗模式并按访客记忆，移动端侧边栏可折叠，README 称其键盘友好、控件有标签、焦点可见。所有颜色以 CSS 变量形式定义在 src/index.css 中，便于重新配色；页面按需加载，图表库只随 Overview 一起加载。项目结构划分了 ui、layout、charts 组件，pages 页面，data 演示数据，lib 格式化辅助与主题 hook。README 说明 Pro 版本正在开发中，包含交易管道、发票、报表、团队、认证页面和移动端布局等 20 多个界面，尚未发布。

React后台SaaS

适合你的项目吗？

适用场景

为 SaaS 或 CRM 产品搭建后台仪表盘界面原型
在 React 项目中复用其表格、图表、表单和布局组件
基于 CSS 变量快速调整品牌配色与明暗主题
作为学习 Tailwind CSS 与 Recharts 组合使用的参考项目

适合人群

需要免费 SaaS/CRM 仪表盘起步模板的开发者
使用 React 与 Tailwind CSS 技术栈的前端项目
希望以 CSS 变量集中控制主题颜色的团队
需要明暗模式与响应式后台界面的产品原型

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
运行 npm install 安装依赖，再执行 npm run dev，然后访问 http://localhost:5173
2
生产构建使用 npm run build，产物输出到 dist/ 目录
3
部署到子路径（如 GitHub Pages）时，构建前设置 BASE_PATH，例如 BASE_PATH=/my-repo/ npm run build
4
src/data 中为虚构演示数据，README 建议替换为自己的 API 调用
5
README 提到配套 Figma 文件即将发布，Pro 版本仍在开发中，均尚未提供

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

项目资料提及可选付费版本或功能；本次仅收录公开免费代码，不包含付费升级。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
README 说明 Pro 版本正在开发中，包含交易管道、发票、报表、团队、认证页面和移动端布局等 20 多个界面，属于付费升级内容，免费版本不包含这些界面。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

A Pro version with 20+ screens is in the works: deals pipeline, invoices, reports, team, auth pages and mobile layouts. Follow the repository to hear when it's out.
README 原文

https://github.com/thomasGravy/beacon/blob/main/LICENSE https://github.com/thomasGravy/beacon/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-15。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 85 / 100
技术栈: React
网站类型: 后台 · SaaS

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-09-27
截图检查日期: 2026-10-15

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: 8ac6b4b0fa8435f75195b108ac632d82397586ba6587afb50a5791c24342b571

2026-10-15T13:23:04.042Z

来源文件 / 仓库

# Beacon — free SaaS & CRM dashboard

A clean, free dashboard template for SaaS and CRM products, built with **React**, **Tailwind CSS** and **Recharts**, with a matching **Figma** file (coming soon).

**[Live demo](https://thomasgravy.github.io/beacon/)**

## What's inside

- **Overview**: KPI cards with sparklines, revenue chart (this year vs last year), revenue by plan, sales pipeline and recent transactions
- **Customers**: searchable, filterable and sortable table with row selection, bulk actions, row menus, empty state and pagination
- **Settings**: profile form, notification switches and billing
- **Light and dark mode**, remembered per visitor
- **Responsive**: collapsible sidebar on mobile
- **Accessible**: keyboard friendly, labelled controls, visible focus
- **Easy to re-theme**: every color is a CSS variable in `src/index.css`
- **Pages load on demand**, so the charts library only ships with the overview

## Getting started

```bash
npm install
npm run dev
```

Then open http://localhost:5173.

To build for production:

```bash
npm run build
```

The site is written to `dist/`. To serve it from a sub-path (for example GitHub Pages), set `BASE_PATH`:

```bash
BASE_PATH=/my-repo/ npm run build
```

## Project structure

```
src/
  components/
    ui/        Button, Badge, Card, Input, Select, Checkbox, Switch, Avatar, Menu, Tabs…
    layout/    Sidebar, Topbar, AppLayout
    charts/    RevenueChart, PlanDonut, Sparkline
  pages/       Overview, Customers, Settings, Pro, NotFound
  data/        Fictional demo data: replace with your API calls
  lib/         Formatting helpers and the theme hook
  index.css    Design tokens (colors, radius) for light and dark mode
```

## Changing the colors

Open `src/index.css` and edit the variables in `:root` (light mode) and `.dark` (dark mode). For example, to switch the accent from indigo to emerald:

```css
:root {
  --primary: #10b981;
  --primary-hover: #059669;
  --primary-soft: #ecfdf5;
  --primary-soft-foreground: #047857;
}
```

## Beacon Pro

A Pro version with 20+ screens is in the works: deals pipeline, invoices, reports, team, auth pages and mobile layouts. Follow the repository to hear when it's out.

## Credits

- [React](https://react.dev), [React Router](https://reactrouter.com), [Tailwind CSS](https://tailwindcss.com), [Recharts](https://recharts.org), [Lucide icons](https://lucide.dev), [Inter](https://rsms.me/inter/) font
- Made by [thomasGravy](https://github.com/thomasGravy)

## License

MIT, see [LICENSE](LICENSE). Free for personal and commercial projects.

反馈内容错误