This is the place where you configure your enterprise level applications Administration interface. This bundle makes use of @kaviar/x-ui, so it is best if you familiarise yourself with it first.

This bundle uses Ant Design to leverage its Admin interface. Allowing you to focus on creating Menu Routes that can be role-dependent. This enables Wordpress-like functionality where external bundles that you just add to your Kernel extend the menu nicely.


// kernel
kernel.addBundles([new XUIBundle(), new XUIAdminBundle()]);


Let's explore a bit about the structure, by creating our first layout:

import { useUIComponents } from "@kaviar/x-ui";
// This is to illustrate how you can have a custom layout:
function Dashboard() {
const Components = useUIComponents();
return (
<Components.AdminLayout content={}>
<h1>Hello world!</h1>

Now we need to create a route, and because we don't rely on strings for routing, we should read them from a separate place, and register them in our bundle:

import { IRoute } from "@kaviar/x-ui";
export const DASHBOARD = {
label: "", // By default it's "Dashboard" (capitalise each word, and removes _)
path: "/dashboard",
component: Dashboard,
// optionally require certain roles
roles: [Roles.ADMIN],
menu: {
icon: "RightOutlined", // Use any from:
path: "Administration.Users",
// If there is already an "Administration" path, it will get extended
order: 0, // If you want it to hold priority. The menus will be sorted by order, otherwise, by the order they have been added into the menu

This is done only once, but ensure you load your routes in bundle init:

// In your bundle:
import * as Routes from "./routes";
export class UIAppBundle extends Bundle {
async function init() {
const router = this.container.get(XRouter);