# How the Kaneo Frontend Is Built: Complete Tech Stack and Build Pipeline Explained

> Explore the Kaneo frontend tech stack React Vite TanStack Router Tailwind CSS Radix UI and Base UI Discover the complete build pipeline for this modern web application.

- Repository: [kaneo.app/kaneo](https://github.com/usekaneo/kaneo)
- Tags: internals
- Published: 2026-08-29

---

**The Kaneo frontend is a modern React application built with Vite, bundled through [`apps/web/vite.config.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/vite.config.ts), and powered by TanStack Router, Tailwind CSS, and a curated set of UI primitives from Radix UI and Base UI.**

This article breaks down the complete architecture of the Kaneo frontend, a project management tool built as part of the `usekaneo/kaneo` monorepo. Whether you're exploring the codebase for contributions or researching modern React stack decisions, you'll find detailed coverage of the build pipeline, routing system, state management, and every major library in use.

## Project Structure and Build Tooling

The Kaneo frontend lives in the **`apps/web`** workspace and uses **Vite** as its build tool and development server. This choice delivers fast cold starts, instant hot-module replacement, and optimized production bundles.

### Vite Configuration

The build pipeline is defined in [`apps/web/vite.config.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/vite.config.ts). This file configures plugins for routing, Tailwind CSS, React with the new React Compiler preset, Babel transformations, and optional Sentry error tracking.

```typescript
// vite.config.ts - key plugins excerpt
plugins: [
  tanstackRouter({ target: 'react', autoCodeSplitting: true }),
  tailwindcss(),
  react({ babel: { plugins: [['babel-plugin-react-compiler', {}]] } }),
  sentryVitePlugin({ /* conditional on env vars */ }),
]

```

TypeScript compilation is controlled by [`tsconfig.app.json`](https://github.com/usekaneo/kaneo/blob/main/tsconfig.app.json), targeting `ES2022` with `"moduleResolution": "bundler"` for optimal Vite compatibility.

### Development and Production Scripts

| Command | Script | Purpose |
|---------|--------|---------|
| `pnpm dev` | `vite` | Starts dev server on port 5173 with HMR |
| `pnpm build` | `vite build` | Creates production bundle with hidden source maps in `dist/` |

Hidden source maps allow Sentry to symbolicate stack traces without exposing mappings to end users.

## Routing with TanStack Router

Kaneo uses **TanStack Router** for type-safe, file-based routing. The `@tanstack/router-plugin/vite` plugin in [`vite.config.ts`](https://github.com/usekaneo/kaneo/blob/main/vite.config.ts) enables automatic code splitting and route generation.

Routes are parsed from the filesystem and generated into [`routeTree.gen.ts`](https://github.com/usekaneo/kaneo/blob/main/routeTree.gen.ts) at build time. The entry point in [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx) creates the router instance:

```tsx
import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
  context: { user: null, queryClient },
});

```

The router is rendered through `<RouterProvider>` nested within the application's provider tree.

## State Management and Data Fetching

Kaneo employs a layered approach to state management:

- **`@tanstack/react-query`** – Primary data fetching and server state caching, wrapped in `QueryClientProvider`
- **`zustand`** – Lightweight client state for global UI state
- **`nanostores`** – Micro-stores for atomic, cross-component state

The provider hierarchy in [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx) establishes this architecture:

```tsx
root.render(
  <StrictMode>
    <ErrorBoundary fallback={RootCrashFallback}>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <AuthProvider>
            <AppI18nProvider>
              <KeyboardShortcutsProvider>
                <App />
                <KeyboardShortcutsHelp />
              </KeyboardShortcutsProvider>
            </AppI18nProvider>
          </AuthProvider>
        </ThemeProvider>
      </QueryClientProvider>
    </ErrorBoundary>
  </StrictMode>,
);

```

## Styling System: Tailwind CSS

All UI components use **Tailwind CSS** via the `@tailwindcss/vite` plugin. The styling pipeline includes:

- **Tailwind utility classes** – Base styling approach throughout components
- **`tailwind-merge`** – Deduplication of conflicting class names
- **`clsx`** – Conditional class composition
- **`class-variance-authority`** – Type-safe variant-based component styling

Global styles are imported in [`apps/web/src/index.css`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/index.css), which includes Tailwind directives and custom design tokens.

## Component Library Architecture

Kaneo builds its interface on a foundation of unstyled, accessible primitives:

### Core Primitives

- **Radix UI** (`@radix-ui/react-*`) – Low-level, accessible components for dialogs, dropdowns, tooltips, and more
- **Base UI** (`@base-ui/react`) – Additional headless UI primitives

### Visual Enhancements

- **`lucide-react`** – Consistent iconography
- **`framer-motion`** – Declarative animations and transitions
- **[`tippy.js`](https://github.com/usekaneo/kaneo/blob/main/tippy.js)** – Lightweight, customizable tooltips

Example usage of a Radix UI tooltip:

```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from '@radix-ui/react-tooltip';

<Tooltip>
  <TooltipTrigger asChild>
    <button>Hover me</button>
  </TooltipTrigger>
  <TooltipContent>Tooltip text</TooltipContent>
</Tooltip>

```

## Rich Text Editing with TipTap

The Kaneo editor integrates **TipTap** (`@tiptap/*`) for extensible rich text editing. Supporting libraries include:

- **`lowlight`** – Syntax highlighting for code blocks
- **`shiki`** – Modern, themeable code rendering

This combination provides a polished writing experience with code support for project documentation and task descriptions.

## Internationalization

Multi-language support is implemented through **`i18next`** and **`react-i18next`**, with translation resources loaded via `i18next-resources-to-backend`. The `AppI18nProvider` wraps the application to ensure locale contexts are available throughout the component tree.

## Form Handling and Validation

Forms use **`react-hook-form`** for state management and **`zod`** (via `@hookform/resolvers/zod`) for schema validation. This pairing provides type-safe forms with robust error handling and minimal boilerplate.

## Error Monitoring

Production error tracking is handled by **Sentry**, conditionally enabled when `SENTRY_DSN` and related environment variables are present. The `<ErrorBoundary>` component in [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx) captures React errors and forwards them to Sentry for aggregation and alerting.

## Additional Utility Libraries

| Library | Purpose |
|---------|---------|
| `date-fns` | Date manipulation and formatting |
| `zustand` | Lightweight global state |
| `nanostores` | Atomic, framework-agnostic stores |

## Key Configuration Files

| File | Purpose |
|------|---------|
| [`apps/web/package.json`](https://github.com/usekaneo/kaneo/blob/main/apps/web/package.json) | Dependencies and npm scripts |
| [`apps/web/vite.config.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/vite.config.ts) | Vite plugins and build settings |
| [`apps/web/tsconfig.app.json`](https://github.com/usekaneo/kaneo/blob/main/apps/web/tsconfig.app.json) | TypeScript compiler options |
| [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx) | Application bootstrap and provider tree |
| [`apps/web/src/index.css`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/index.css) | Tailwind imports and global styles |
| [`apps/web/src/routeTree.gen.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routeTree.gen.ts) | Auto-generated TanStack Router tree |

## Summary

- The Kaneo frontend uses **Vite** in [`apps/web/vite.config.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/vite.config.ts) for development and production builds, with the React Compiler preset enabled
- **TanStack Router** provides file-based, type-safe routing with automatic code splitting
- Data fetching relies on **TanStack Query**, client state on **Zustand** and **nanostores**
- **Tailwind CSS** with `tailwind-merge` and `class-variance-authority` powers all styling
- **Radix UI** and **Base UI** form the accessible component foundation, enhanced by **Framer Motion** and **Lucide**
- **TipTap**, **i18next**, **react-hook-form**, and **Sentry** round out the feature stack

## Frequently Asked Questions

### What build tool does Kaneo use for its frontend?

Kaneo uses **Vite** as its build tool and development server. The configuration lives in [`apps/web/vite.config.ts`](https://github.com/usekaneo/kaneo/blob/main/apps/web/vite.config.ts) and includes plugins for React, Tailwind CSS, TanStack Router, and optional Sentry integration.

### How does Kaneo handle routing in its React application?

Kaneo uses **TanStack Router** with file-based routing. The `@tanstack/router-plugin/vite` plugin auto-generates routes into [`routeTree.gen.ts`](https://github.com/usekaneo/kaneo/blob/main/routeTree.gen.ts), which is consumed by `createRouter()` in [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx).

### What UI component libraries does Kaneo use?

Kaneo builds on **Radix UI** and **Base UI** for accessible, unstyled primitives. Visual elements come from **Lucide React** for icons, **Framer Motion** for animations, and **Tippy.js** for tooltips. All components are styled with **Tailwind CSS**.

### How is state managed in the Kaneo frontend?

Server state uses **TanStack Query** (`@tanstack/react-query`). Client state splits between **Zustand** for global stores and **nanostores** for atomic state. Forms use **react-hook-form** with **Zod** validation.