Kanject UI Quickstart

Kanject UI is the frontend companion to Kanject BaaS: ready-to-integrate React widgets and admin dashboard templates that talk to the BaaS modules you already deployed. From npx kanject-ui add to a themed, working login in a few minutes.

1. Add a widget

Kanject UI is built on shadcn/ui + Tailwind, so add copies the component's source into your repo rather than installing a black-box package. Restyle it, fork it, or delete it later — there's no runtime dependency to fight.

# Add a single widget — shadcn-style: the source is copied# straight into your repo, not pulled in as a runtime dependency.npx kanject-ui add login

2. Wire it to your BaaS

Wrap your app in <KanjectProvider> once. It carries the connection details for your deployed modules so every widget below it is pre-wired — no per-component fetch glue.

import { KanjectProvider } from '@kanject/ui/react';​// Wrap your app once. These values come from the Kanject BaaS// module you already deployed — swap in your region and pool IDs.export function App() {  return (    <KanjectProvider      region="eu-west-1"      identityPoolId="eu-west-1_AbC123"      apiUrl="https://api.your-app.com"    >      <Routes />    </KanjectProvider>  );}

3. Drop the component in

Now the widget just works. <KanjectLogin /> resolves auth through the provider — Kanject.Identity handles OAuth, email, SSO and MFA on the backend; you handle where to send the user next.

import { KanjectLogin } from '@kanject/ui/react';​// Pre-wired to Kanject.Identity — OAuth, email, SSO and MFA// are handled by the provider you configured above.<KanjectLogin  providers={['google', 'microsoft', 'email']}  onSuccess={(user) => nav('/dashboard')}/>

4. Make it yours

Every component reads from Tailwind design tokens. Override three CSS variables and the whole set — buttons, rings, radii, type — picks up your brand. Dark mode, RTL and i18n are already baked in.

:root {  --kj-primary: oklch(0.62 0.20 300);  --kj-radius: 0.625rem;  --kj-font: "Plus Jakarta Sans";}

The flagship widgets

Each widget maps to the BaaS library that backs it. Add them the same way — npx kanject-ui add <name>.

Want the whole back-office?

Skip wiring pages together one at a time. The admin template ships six opinionated pages — overview, users, events, messaging, notifications, billing — already wired to the matching BaaS modules.

# Or start from a full back-office instead of a single widget.npx create-kanject-app@latest --template admin-dashboard

React, Next.js and Astro are stable today; Blazor WebAssembly and Server are on the roadmap for Q3 2026.