Three lines of code to add an admin framework to your ASP.NET Core project.
Install with NuGet · Keep business code in your application · Vue / React frontends
Quick start · Screenshots · Live demo · Documentation · Changelog
TenonAdmin is an admin framework for ASP.NET Core. It provides common features such as users, roles, menus, organizations, and data permissions, with Vue and React admin interfaces. Use it to build internal business systems and operations dashboards, or add administration features to an existing .NET project.
Install TenonAdmin through NuGet, then add the core integration in Program.cs:
builder.Services.AddTenonAdmin(builder.Configuration);
var app = builder.Build();
app.MapTenonAdmin();The framework registers authentication, role permissions, data permissions, and administration APIs. It uses SQLite by default and creates the database, tables, and initial account on first startup, so there is no database server to set up first. See Quick start for the complete startup code and frontend commands.
Keep business entities, endpoints, and pages for customers, orders, and other modules in your own project. Extension interfaces let you customize login, file storage, and permission rules. Backend framework updates arrive through NuGet, while your business code stays separate from the framework source.
When building a customer management module, reuse the existing accounts, roles, menus, and file management. Write customer entities, business endpoints, and admin pages in your application project. There is no need to put business code inside the framework source, and you can keep the application's existing business logic.
When a built-in implementation does not fit, such as when files need to go to object storage or login responses need extra business information, replace the relevant service or inherit the built-in service and override the step you need. Interfaces and overridable methods let you make that change without copying the entire implementation.
Backend fixes and new features are delivered as NuGet versions. Check the changelog when upgrading and adjust extensions and frontend API calls where needed. See Service replacement and extension for examples.
Role permissions determine which menus, buttons, and endpoints a user can access. Data permissions determine which business records they can query. The same customer list can show a department manager their department's data, give a higher-level manager access to subordinate departments, or allow selected organizations to work together.
Once a business entity follows the framework's data-scope conventions, supported queries apply filters based on the current user's roles. The customer query stays in the business service; the framework handles its data scope. Raw SQL and custom data-access paths need their own permission checks.
The independent example application uses a customer list to show how different accounts receive different records. See the multi-organization data permissions example.
The Vue version uses Vue 3 and Naive UI. The React version uses React 19 and Ant Design 6. Both connect to the same backend APIs, so you only need one frontend for your business application.
New pages can reuse tables, forms, dictionary selectors, organization and user selectors, file uploads, and permission components. For example, filtering, pagination, an edit dialog, and button permissions on a customer list can follow existing pages and components rather than being rebuilt for each module.
API types can be generated from the backend's OpenAPI document and refreshed when endpoints change. Each frontend maintains its own dependencies and components. See the Vue component documentation and React component documentation.
Approval workflows are provided through an optional package. Use the process designer to set approvers, conditional branches, parallel branches, and carbon copies, and control which form fields can be viewed or edited at each step. Once a process is published, users can submit requests, handle pending approvals, and view progress and approval records.
The approval interface supports return, withdrawal, transfer, delegation, and adding or removing approvers. Process administrators can inspect runtime status, timeouts, and retry records. Vue and React both provide workflow interfaces against the same backend APIs.
Install and register TenonAdmin.Workflow at the same version as TenonAdmin. AI evaluation records results for reference; it does not automatically approve, reject, or advance a workflow. See the workflow documentation for integration and configuration.
The repository includes development Skills for modules, entities, endpoints, frontend pages, service extensions, and import/export. They contain implementation steps, reference code, and validation requirements. Ask your AI coding assistant to read the relevant instructions before writing code so it can follow the project's entity, service, permission, and component conventions.
For example:
Follow
skills/new-module.mdto add a product management module with a name, code, category, and enabled status. Include category filtering, import/export, and menu and button permissions.
These Skills are development instructions and reference templates, not a standalone code generator. Review business rules, permissions, and test results after generation. Start with Development Skills.
The backend requires the .NET 10 SDK. Node.js 22.12 or later is recommended for the frontend. Run the repository sample for a first look, then follow the independent-project steps below when adding your own business features.
Use a frontend template that matches the backend version, and keep extension packages at the same version as
TenonAdmin. Read the changelog before upgrading.
Clone the dev branch and start the backend:
git clone --branch dev --single-branch https://github.com/Tenon-Net/TenonAdmin.git
cd TenonAdmin
dotnet run --project backend/samples/MinimalHostThe backend runs at http://localhost:5100. The sample uses SQLite by default and creates its tables and the superAdmin account during initial setup.
The console prints the initial random password only when the account is first created. Save it for sign-in.
Open another terminal and start one frontend from the repository root.
Vue:
cd web
npm install
npm run devOpen http://localhost:5173 and sign in as superAdmin with the password from the console.
React:
cd web-react
npm install
npm run devOpen http://localhost:5174 and sign in with the same account. Choose either frontend; the backend only needs to run once. Change the initial password after signing in.
Install the backend package from your project directory:
dotnet add package TenonAdminA minimal Program.cs for a new host looks like this:
using TenonAdmin.AspNetCore;
var builder = WebApplication.CreateBuilder(args);
// TenonAdmin 的核心接入
builder.Services.AddTenonAdmin(builder.Configuration);
var app = builder.Build();
app.MapTenonAdmin();
app.Run();AddTenonAdmin registers framework services, and MapTenonAdmin adds the administration APIs. In an existing project, merge these two calls into your startup flow and keep your configuration, services, and business routes.
Use the matching Vue or React template for the admin interface. SQLite is the default database. To use MySQL, SQL Server, or PostgreSQL, set the database type and connection string in configuration.
See the getting started guide for database settings, the project template, and integration with existing applications. Install Excel, external login, Redis, workflow, and TenonAdmin.Integration extensions as needed, then register and configure them according to their documentation. The Integration package is separate from the TenonAdmin meta-package; follow System Integration to enable its application credentials, open APIs, outbound calls, and reliable delivery.
| Category | Main features |
|---|---|
| Users and organizations | Users, roles, organization tree, positions, online sessions, and forced sign-out |
| Permissions | Menu, button, and endpoint permissions; all data, current organization, current organization and descendants, current user, and selected organizations as data scopes |
| Login and security | Account and password, captcha, login lockout, and rate limiting; configurable multi-factor authentication, with SMS and external login integrations as needed |
| Administration | Multi-application portal, dictionaries, configuration, announcements, push messages, operation logs, and recycle bin |
| File management | Upload and download, signed access, chunked and resumable uploads, and instant upload for existing files |
| Excel import/export (optional package) | Import templates, data inspection, cell validation, duplicate detection, error reports, and export column selection |
| Scheduled jobs | Scheduled, fixed-interval, and one-time execution; code, HTTP, and SQL jobs, with logs, timeouts, retries, and failure alerts; SQL execution must be enabled in configuration |
| Approval workflows (optional package) | Process design, dynamic forms, field permissions per step, approval handling, timeout handling, and runtime records |
| System integration (optional package) | Application credentials and API keys, open endpoint and data-scope grants, outbound call records, and reliable delivery with retries and manual resolution |
| Frontend support | Vue and React templates, Chinese and English, light and dark themes, layout settings, business components, and OpenAPI type generation |
| Data and deployment | SQLite, MySQL, SQL Server, PostgreSQL, multiple database connections, a standalone Worker, Docker, health checks, and a Redis cache extension |
See the deployment guide for production configuration and multiple replicas. Sending workflow messages to external systems requires a real transport implementation; details are in the workflow documentation.
Click an image to view it at full size.
Vue user management |
React user management |
Role permissions |
Organization management |
Dictionary management |
File management |
Scheduled jobs |
Pending approvals |
Process designer |
Approval details |
Application integrations |
Reliable delivery |
These screenshots show the current TenonAdmin.Integration module: integration application management and its credential and permission entry points on the left, and reliable-delivery tasks and attempt records on the right. Follow System Integration to install the optional package and run the complete flow.
tenon-example is an independent business application. Its backend uses TenonAdmin through NuGet, its frontend is based on an admin template, and its business code includes a CRM module. Start here to see how to organize application code outside the framework.
The live demo is a separate deployment of that application and follows its version. Run the repository sample locally to try the current dev branch.
| Task | Documentation |
|---|---|
| Add the framework and configure a database | Getting started |
| Add a business module | Module development · All development Skills |
| Build frontend pages | Vue components · React components |
| Customize built-in services | Service replacement and extension |
| Add import/export and approvals | Excel import/export · Approval workflows |
| Understand the backend structure | Architecture |
| Deploy and upgrade | Deployment guide · Changelog |
Repository layout
TenonAdmin/
├── backend/
│ ├── src/ Backend NuGet package source
│ ├── samples/ Sample hosts and standalone Worker
│ └── tests/ Backend tests
├── web/ Vue admin interface
├── web-react/ React admin interface
├── templates/ Backend project template
├── skills/ Development instructions and reference code
├── site/ Documentation site
└── docs/ Architecture, deployment, and development references
Development takes place on dev. Report problems through Issues, including the version, steps to reproduce, and relevant logs. Submit code changes as pull requests to dev.
Copyright © Tenon-Net
This project is licensed under the Apache License 2.0, which permits commercial use, modification, and distribution.
When distributing this project or a derivative work, include a copy of the license, mark changed files, and retain applicable copyright, patent, trademark, and attribution notices in distributed source code. Follow Section 4 of the license for attribution notices from a NOTICE file.
Third-party components and assets remain subject to their respective licenses.