Introduction
Smart Admin is a Vue 3 admin template built around one idea: describe an entity once, and the form, the table and the validation all come from that description.
What it is
A complete admin application you own the source of. Vue 3.5 with <script setup>, Vite, TypeScript in strict mode, Tailwind 4 and shadcn-vue components on top of Reka UI, Pinia for state, vue-router with file-based routes, and vue-i18n for nine languages.
It is not a component library you install. You unzip it, run it, and build your product inside it.
What is inside
| What | How many |
|---|---|
| Dashboards | 13 |
| Apps | 5 (chat, kanban, invoice, email, calendar) |
| UI kit pages | 23 |
| Form pages | 11 |
| Documented components | 68 |
| Composables | 43 |
| Languages | 9, with right-to-left |
| CLI commands | 9 |
Forty-two ready CRUD modules cover CRM, HR, finance, eCommerce, point of sale, logistics, support, projects, marketing, crypto and administration, each with its own API layer, store, list page, detail page and edit page. Each one is a folder you can copy, rename or delete. Showcase lists every one with its route.
The parts that do the work
Schema. A FieldDefinition[] describes an entity: fourteen field types, validation rules, grid spans, groups. useSchema turns it into a Zod schema, the form fields and the table columns, so SchemaForm and SchemaTable cannot drift apart. See Schema.
The CLI. smart-admin generate reads one real row from your API, declared in smart-admin.generate.json, and writes the list page, the TypeScript types and the translation keys for every language. It guesses nothing. See Add a module.
The theme engine. One brand hex becomes a full 50 to 950 ramp at runtime. Fonts, density, radius, layout and dark mode are config values, and the settings drawer writes them live. See Theming.
Permissions. Routes declare meta.permission, a CASL guard enforces it, the sidebar filters itself, and v-permission hides what a role cannot use. See Permissions.
Who it is for
Developers building an admin panel, a dashboard or an internal tool who want the shell, the design system and the plumbing already done. You should be comfortable with Vue 3 and TypeScript. You do not need to know Tailwind, CASL or Zod before you start, but you will meet them.
If you are evaluating, open the live demo and switch the language to Arabic, change the brand color in the settings drawer, and resize the window. That is the template running with no changes.
Where to go next
- Getting started — install it and sign in.
- Project structure — what lives where.
- Architecture — how the pieces connect at boot.
- Components — the catalog, with live previews.
- Composables — the API reference.
- CLI — every command and flag.