Schema-driven forms and tables
Describe an entity once as a field list. useSchema turns it into a Zod schema, form fields and table columns, so SchemaForm and SchemaTable never drift apart.
Skip to content
Analytics dashboard Traffic, engagement and where your visitors come from.
eCommerce dashboard Sales, orders, units sold and the daily revenue target.
CRM dashboard Pipeline health, revenue against target and lead sources.
Chat app Conversation list, message thread, media and a composer.
Kanban app A drag-and-drop board with labels, priorities and due dates.
Calendar app Month, week, day and agenda views over color-coded calendars.
Build admin panels from your data, not from scratch.
Schema-driven forms and tables, a code-generating CLI and 9 languages with RTL.
- Vue 3.5
- TypeScript
- Vite 8
- Tailwind CSS 4
- Pinia
- Zod
- Dashboards
- 13
- Apps
- 5
- UI kit pages
- 23
- Form pages
- 11
- Components
- 68
- Composables
- 43
- Languages
- 9
- CLI commands
- 9
Theme engine
Six presets. Try one on this page.
The template ships these presets in its theme customizer. Pick one and these docs change color with it, links and buttons included.
The customizer also sets radius, density, fonts, layout and direction. The choice here lasts for this visit.
Showcase
Open any page in the live demo.
13 dashboards and 5 apps, all built from the same components you get. A few of them:
Analytics dashboard Traffic, engagement and where your visitors come from./dashboards/analyticseCommerce dashboard Sales, orders, units sold and the daily revenue target./dashboards/ecommerceCRM dashboard Pipeline health, revenue against target and lead sources./dashboards/crmChat app Conversation list, message thread, media and a composer./apps/chatKanban app A drag-and-drop board with labels, priorities and due dates./apps/kanbanCalendar app Month, week, day and agenda views over color-coded calendars./apps/calendarWhat's inside
The parts you would otherwise build yourself.
A CLI that reads your contract
The generate command takes a real row from your API in smart-admin.generate.json and writes the list page, its types and the translations for every locale. generate-form builds a form from the fields you declare.
9 languages, full RTL
English, Arabic, French, German, Spanish, Italian, Portuguese, Turkish and Indonesian. Arabic flips the whole layout to right-to-left, and add-locale adds another language.
A live theme engine
Each brand color becomes a full 50 to 950 ramp. Pick from 18 fonts, 3 densities, 4 radii and 4 layouts, in light or dark, and see it apply as you click.
Permissions with CASL
A route declares meta.permission and the guard checks it. The v-permission directive hides what a role cannot use, and the sidebar filters its own items.
Responsive down to the phone
Below 768px the sidebar becomes a drawer, from 768px it turns into an icon rail, and from 1024px it follows your config. Data tables switch to cards on small screens.
Install
Running in three steps.
Install the dependencies
Unzip the template, open a terminal in its folder and install. It needs Node 20.19 or 22.12 and up.
The template is built and tested with npm, whose lockfile and shipped .npmrc are what the dependency tree resolves against.
bashnpm installStart the dev server
Vite serves the app with hot reload on port 5173, or the next free port if that one is taken.
bashnpm run devOpen the app
The shipped .env.development turns the demo backend on and fills in the sign-in form, so one press on Sign in opens the dashboard. Every page has data before you connect your own API.
texthttp://localhost:5173
Start with the guide, or click through the demo first.
Every page in the demo is in the template you download.