# What Frontend Framework Does Kaneo Use? React 19 Architecture Explained

> Discover the frontend framework powering the Kaneo web app. Learn how Kaneo leverages React 19 architecture with modern APIs for a robust and efficient user experience.

- Repository: [kaneo.app/kaneo](https://github.com/usekaneo/kaneo)
- Tags: deep-dive
- Published: 2026-08-09

---

**The Kaneo web application is built with React 19 as its core frontend framework, utilizing modern APIs including `StrictMode` and `createRoot` within a TypeScript-based architecture.**

The Kaneo project is an open-source web application that relies on a modern **frontend framework** stack to render its user interface. According to the `usekaneo/kaneo` repository source code, the application is built on React 19, leveraging the library's latest rendering capabilities and JSX syntax throughout the `apps/web` directory.

## React 19: The Core Frontend Framework

The foundation of Kaneo's UI is **React 19**, confirmed by the dependency declaration in [`apps/web/package.json`](https://github.com/usekaneo/kaneo/blob/main/apps/web/package.json). Lines 88-90 list both `react` and `react-dom` at version 19.x, establishing React as the primary UI library responsible for component lifecycles and virtual DOM management.

The codebase utilizes modern React APIs introduced in recent versions. In [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx), the application imports `StrictMode` and `createRoot` from the `react` and `react-dom/client` packages respectively. These APIs enable concurrent rendering features and strict mode diagnostics that characterize the React 19 implementation.

## Architectural Implementation

### Application Entry Point

The entry point at [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx) demonstrates the standard React 19 bootstrap pattern. The code creates a root container using `createRoot` and wraps the application tree in `StrictMode`:

```tsx
// apps/web/src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

function App() {
  // React component tree starts here
  return <RouterProvider router={router} context={{ user }} />;
}

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

```

This pattern confirms React's role as the **frontend framework** handling the initial mount and subsequent updates.

### Component Structure

Components throughout `apps/web/src/components/*` use React hooks and JSX syntax. A typical implementation imports `useState` or other hooks directly from the `react` package:

```tsx
// A typical component using React hooks
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Clicked {count} times
    </button>
  );
}

```

These components rely on React's functional component paradigm and hook-based state management.

## Modern React Ecosystem

While React serves as the core **frontend framework**, Kaneo integrates specialized libraries for specific concerns:

### Routing with TanStack React Router

File-based routing is handled by `@tanstack/react-router`, as evidenced by the generated route tree in [`apps/web/src/routeTree.gen.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routeTree.gen.tsx). This library integrates with React's component model to provide declarative routing while maintaining type safety.

### State Management and Data Fetching

Global client state is managed using **Zustand**, while server state caching utilizes **@tanstack/react-query**. Both libraries hook into React's context and lifecycle systems, extending the framework's capabilities without replacing its component model.

### UI Primitives and Styling

Accessible component primitives come from **@radix-ui/** and **@base-ui/react**, which provide unstyled, headless UI components designed specifically for React. Styling is implemented with **Tailwind CSS v4**, applying utility classes within JSX components.

## Key Files Demonstrating React Usage

Several files confirm React's role as the frontend foundation:

- **[`apps/web/package.json`](https://github.com/usekaneo/kaneo/blob/main/apps/web/package.json)** (lines 88-90): Declares `react` and `react-dom` at version 19.x as direct dependencies.
- **[`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx)** (lines 3-7): Contains the `createRoot` initialization and `StrictMode` wrapper.
- **[`apps/web/src/routeTree.gen.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routeTree.gen.tsx)**: Shows TanStack Router integration with React components.
- **`apps/web/src/components/*`**: Directory containing React component implementations using JSX and hooks.

## Summary

- Kaneo uses **React 19** as its core frontend framework, confirmed by [`package.json`](https://github.com/usekaneo/kaneo/blob/main/package.json) dependencies.
- The application entry point in [`apps/web/src/main.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/main.tsx) utilizes `createRoot` and `StrictMode` APIs.
- Component architecture relies on functional components, JSX, and React hooks.
- The React ecosystem includes TanStack Router for routing, Zustand for state, and Tailwind CSS for styling.

## Frequently Asked Questions

### What frontend framework does Kaneo use?

Kaneo uses **React 19** as its core frontend framework. The `usekaneo/kaneo` repository explicitly lists React version 19.x in [`apps/web/package.json`](https://github.com/usekaneo/kaneo/blob/main/apps/web/package.json), and the codebase utilizes modern React APIs like `createRoot` and `StrictMode` throughout the application.

### Does Kaneo use TypeScript with React?

Yes, Kaneo implements React with TypeScript. This is evident from the `.tsx` file extensions throughout `apps/web/src/` and the type-safe integration of routing libraries with React components.

### What routing solution does Kaneo implement with React?

Kaneo uses **@tanstack/react-router** for routing. The file [`apps/web/src/routeTree.gen.tsx`](https://github.com/usekaneo/kaneo/blob/main/apps/web/src/routeTree.gen.tsx) demonstrates the generated route tree that integrates with React's component architecture, providing type-safe navigation.

### How does Kaneo handle state management in React?

Kaneo uses **Zustand** for global client state and **@tanstack/react-query** for server state management. Both libraries integrate with React's context and hook systems to provide stateful capabilities while maintaining React's declarative component model.