Overview
Thunder UI is the framework's built-in React dashboard - generated from your backend's SDK so you never start a frontend from scratch.
Thunder UI is the framework's built-in user interface. Instead of setting up a clean React project and wiring forms, tables and navigation from scratch, you generate a dashboard that already understands your backend:
deno task generate:appIt is a React 19 + Vite application that reads your backend's schemas through a generated thunder-sdk and builds navigation, list pages and forms for every module automatically - and beyond that, it is a normal React app you can build anything in.
What You Get
CRUD out of the box
A list page, a form and a detail route per backend module, derived from SDK metadata.
Driven from your backend
Your router and zod .meta() decide the module name, its group, and every form's layout.
Forms from your schemas
Zod/JSON Schema becomes real controls: nested groups, enums, uploads, reference pickers.
Override anything
Replace a generated list, form or detail page with your own component through a registry.
Four layouts, themed
Navbar, sidebar, mobile or the adaptive native shell - plus dark mode and OKLCH tokens that are yours to edit.
Bilingual with RTL
English and Arabic ship translated, with full right-to-left support.
Android & iOS
Capacitor 8 is pre-configured, with the native projects committed.
Prerequisites
Thunder UI depends on the thunder-core plugin. Permissions, tenants, users, the wallet and ImageKit upload authentication all come from thunder-core - the generated app calls into them through ThunderSDK.plugins.essentials, so a backend without the plugin cannot drive the UI.
deno task add:plugin -n Huruf-Tech/thunder-core --setupInstall and set up thunder-core before you run deno task generate:app. Route visibility relies on ThunderSDK.isPermitted(), which is registered from the plugin's access-control data.
How It Fits Together
| Layer | Responsibility |
|---|---|
| Thunder backend | Routers, createCRUD, Zod schemas, .group("Label") tags |
thunder-sdk | Generated client: module names, groups, schemas, permissions |
| Thunder UI | Reads that SDK and renders navigation, lists, forms and detail routes |
| Your code | Pages, components, overrides, theme - everything outside src/core/ |
The chain is one-directional: the better your route shapes and schemas are defined on the backend, the richer the generated UI becomes. Thunder UI never guesses at layout - you declare it on the backend and it travels in the SDK.
Because the UI reads the generated SDK and not your backend directly, a backend change is invisible until you regenerate. That trips up nearly everyone once - see Two Kinds of Update.
The One Hard Rule
src/core/ is managed by Thunder UI and is overwritten on every sync. Build on top of it - never inside it. See Project Structure.
Next Steps
Full-stack example
Backend, plugin and dashboard built together, end to end.
Building Your Own Features
It is a normal React app - add any page you like.
Installation & Updating
Generate the app, then keep its core current with --forceSync.
Project Structure
What is yours, what is managed, and what survives an update.
Controlling It From the Backend
The .meta() keys that shape every generated screen.