Admiral

Admiral is an open-source React framework from dev.family for building admin panels and back-office applications, with CRUD generation, authentication, theming, routing, and 30+ UI components out of the box.

What is Admiral?

Admiral is a frontend framework and component library for creating back-office interfaces, published as @devfamily/admiral on npm under the MIT license. It runs on React 19, React Router 7, Vite 6, and TypeScript 5.7, and it takes a data provider plus resource page configs to produce working admin screens: index, create, and update views with tables, forms, filters, and pagination. A live demo is available at admiral.dev.family running on mock data.

Key Features

Admiral's feature set centers on one-file resource definitions, a 30+ component library, and built-in admin infrastructure for auth, theming, and localization.

• CRUD generation — define a resource config with the createCRUD helper and get index, create, and update pages, including table columns, form fields, validation, and pagination.
• 30+ UI components — imports are granular: components such as Table, Select, Drawer, DatePicker, Tabs, and Upload live in @devfamily/admiral/ui, and form inputs such as TextInput, SelectInput, and DatePickerInput live in @devfamily/admiral/form.
• Conditional and dependent fields — any input accepts visibleWhen, disabledWhen, and requiredWhen rules as a function or JSON rule; Form.When reveals field groups, and AjaxSelectInput cascades with resetOnChangeOf (for example country to city).
• Validation-aware form tabs — Form.Tabs displays a badge with the number of invalid fields on each tab and switches to the first invalid tab on a failed submit, skipping fields hidden by rules.
• File-based routing — files in the pages/ directory map to routes automatically, mirroring Next.js conventions: pages/users/index.tsx becomes /users, pages/users/create.tsx becomes /users/create, and pages/users/[id].tsx becomes /users/:id.
• Authentication and OAuth — an optional authProvider adds a login page, guards all routes, checks sessions, and supports OAuth redirects for Google, GitHub, and Jira.
• Theming and localization — light and dark modes ship with a header switcher, and CSS presets use @consta/uikit theming; built-in locales include English and Russian, and you can pass partial locale packs.

Who should use Admiral?

Admiral is for anyone shipping a React-based back-office interface, from individual developers to product teams.

React developers who need to ship an admin panel or back-office UI quickly without assembling routing, forms, tables, and auth from scratch. Teams with an existing API can point Admiral at their endpoints through a data provider and generate CRUD pages for resources like users, orders, or products. Agencies and product teams can scaffold a new project with npx create-admiral-app@latest and choose an Express.js backend template or a frontend-only setup.

What can you do with Admiral?

Admiral covers the common admin-panel jobs: generating CRUD screens, adding authenticated dashboards, and building custom forms within the same design system.

• Back-office CRUD applications: define a resource once and get working list, create, and update pages with validation, filters, quick filters, and shareable URL state.
• Internal dashboards with authentication: wire up an auth provider and get login, logout, route guarding, identity lookup, and OAuth buttons in the header.
• Custom admin screens beyond CRUD: compose standalone forms with the Form component and the useForm() hook to build bespoke pages, while still using the same inputs, theming, and layout.

How does Admiral work?

Admiral is installed into a Vite-based project with Node.js 20 or later. After adding @devfamily/admiral and peer dependencies, you wrap your app in an Admin component, provide a data provider and menu, and define pages either as file-based modules or through createCRUD resources. The framework then handles data fetching, routing, authentication, theming, and notifications automatically. A scaffold path via create-admiral-app offers a fully configured Express.js backend or a frontend-only template.

Pros and cons

Pros: Open-source MIT license; granular module imports reduce bundle size; TypeScript coverage across components and hooks; v6 includes machine-readable AI_GUIDE.md and MIGRATION_AI.md for AI coding assistants. Cons: v6 is a breaking release that is ESM-only and requires React 19, so existing CommonJS or older React projects need to migrate; the package focuses on admin UIs, not general-purpose frontend.

Pricing

Admiral is free and open source under the MIT license. No paid tiers or cloud service are mentioned in the documentation.

Alternatives

React Admin — a similar resource-based admin framework for React that also generates pages from data-provider definitions. Refine — an open-source React meta-framework with a similar data-provider model.

FAQ

Is Admiral free?

Yes, Admiral is released under the MIT license and available on npm as @devfamily/admiral. There are no paid tiers or usage restrictions described in the documentation.

What React version does Admiral require?

Admiral v6 requires React 19, along with react-router-dom 7, axios 1, and a bundler such as Vite 6. Node.js 20 or higher is needed to use the package.

Does Admiral support OAuth?

Yes. The optional authProvider accepts an oauthLogin method and a list of providers such as Google, GitHub, and Jira. When configured, Admiral renders OAuth login buttons and handles the callback route.

Is Admiral ESM-only?

Admiral v6 is published as an ESM-only package. Projects using CommonJS or older module resolution will need to update their build setup or migrate the import syntax.

How do I generate CRUD pages?

Use the createCRUD helper with a resource name, path, table columns, and form fields for create and edit. It exports IndexPage, CreatePage, and UpdatePage components, and a data provider implements getList, getOne, create, update, deleteOne, and related methods.