Skip to content
Orbix React · Bootstrap 5 v1.0.3

Starter kit

orbix-react-starterkit/ is the same React application without the demo pages: start a new project from it and copy pages or components from the full template when you need them.

What it includes

  • The application shell: sidebar, topbar, footer, page header, theme customizer, command palette, notifications and language menus.
  • The app, auth and blank layouts and the router.
  • The nine basic authentication pages (sign in, sign up, forgot and reset password, lock screen, two-step verification, email verification, signed out, success).
  • One empty start page at /; unknown URLs return to it.
  • The Bootstrap 5 CSS engine, the five languages with RTL, the theme runtime, the hooks and the test suite.

What it leaves out: the demo pages, the components and page scripts only they use, the demo data and the chart library. Menu links to removed pages point to # until you add your own.

Starter kit

Install

Exactly as the full template (see Installation):

cd orbix-react-starterkit
npm install
npm run dev

Bring a page from the full template

  1. Copy the page component from orbix-react/src/pages/... to the same folder of the starter kit.
  2. Copy the components it imports (@/components/apps/ProductCard → src/components/apps/ProductCard.tsx).
  3. Add its line to src/app/pages.ts and its menu entry to src/app/menu.ts.
  4. Every translation file of the full template is already in the starter kit (src/locales/).
  5. If it calls usePageScript(init), copy the script from src/scripts/ (and src/data/ for demo data). For charts, also copy src/core/charts.ts and src/hooks/useChart.ts and run npm install echarts.
  6. Run npm run build and npm test.

Connect authentication

The auth pages are screens only, so you can plug in the authentication you prefer (your API, Auth0, Firebase, Supabase, Clerk...). The sign-in form validates its fields in src/scripts/auth.ts and then navigates to data-auth-next (the dashboard). To call your API instead, handle the submit in the page:

// src/pages/auth/basic/sign-in.tsx
import { useNavigate } from 'react-router';

const navigate = useNavigate();

async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  const response = await fetch('/api/login', { method: 'POST', body: data, credentials: 'include' });
  if (response.ok) navigate('/');
}

Pass onSubmit to the form in src/components/auth/AuthSignIn.tsx (and remove data-auth-form there so the demo validation does not run), keep the input name attributes your API expects (email, password, remember), and protect your pages with a layout route that checks the session (for example a loader that redirects to /auth/basic/sign-in in src/app/router.tsx).