# Kanject UI Quickstart

Kanject UI is the frontend companion to [Kanject BaaS](https://www.kanject.com/docs/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.

**You'll learn**

- Add a pre-wired widget to a React app with `npx kanject-ui add`
- Point it at your deployed Kanject BaaS module with `<KanjectProvider>`
- Re-theme every component from three CSS tokens
- Scaffold a whole admin back-office with `create-kanject-app`

> **Prerequisite:** You need at least one **deployed Kanject BaaS module** — the widgets render *your* data, so they need an endpoint to talk to. If you haven't deployed one yet, start with the [BaaS docs](https://www.kanject.com/docs/baas/). A React 18+ app (Vite, Next.js, or Astro) is the other half.

## 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.

```bash
# 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.

```tsx
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.

```tsx
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.

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

> **You own the code:** Components live in *your* repo, on Radix primitives (accessibility by default) and TypeScript-first APIs. Kanject UI is a starting point, not a runtime you're locked into.

## The flagship widgets

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

- **<KanjectLogin />** — Auth — OAuth, email, SSO, MFA. Wired to **Kanject.Identity**.
- **<KanjectAnalytics />** — Dashboard tiles, cohorts and time-series. Wired to **Kanject.Insights**.
- **<KanjectForm />** — Dynamic schema forms with validation and storage. Wired to **Kanject.Forms**.
- **<KanjectWallet />** — Balance, transactions and top-up. Wired to **Kanject.Wallet**.
- **<KanjectNotifications />** — Inbox + real-time toast. Wired to **Kanject.NotificationHub**.
- **<KanjectChat />** — Threads with presence and attachments. Wired to **Kanject.InstantMessaging**.

## 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.

```bash
# 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](https://www.kanject.com/roadmap/) for Q3 2026.

**Recap**

- `npx kanject-ui add <widget>` copies the component source into your repo — you own it, with no runtime dependency.
- `<KanjectProvider>` carries your region and pool IDs so every widget beneath it talks to your deployed BaaS endpoints.
- Widgets map 1:1 to BaaS libraries — login→Identity, wallet→Wallet, chat→InstantMessaging, and so on.
- Three CSS tokens (`--kj-primary`, `--kj-radius`, `--kj-font`) restyle the whole set; `create-kanject-app` scaffolds a full admin dashboard.

**Keep going**

- [Kanject UI — product overview](/ui/) — The widget gallery, admin template, and theming, with live previews.
- [Kanject BaaS docs](/docs/baas/) — Deploy the backend modules these widgets render.

---
_Source: https://www.kanject.com/docs/ui/ · Kanject Docs_