Installation

Install Chelone with React Router v7 or Vue Router 4, plus an optional TanStack Router reference adapter.

Chelone is a headless admin engine for React and Vue. This page is React-first, using react-router v7 by default; the Vue section covers @chelone/vue. An optional TanStack Router reference adapter is available at @chelone/react/tanstack-router. The headless logic is packaged as @chelone/react, and the shadcn-native UI components install through the shadcn CLI from the Chelone registry, so you own the component code.

Install the engine

Add the React adapter, its required router and TanStack peers, and Zod for resource schemas. @chelone/react depends on @chelone/core, whose required TanStack peers are included here for package managers that do not install peers automatically:

npm install @chelone/react zod@^3.24.0 \
  react-router@^7.0.0 \
  @tanstack/react-query@^5.0.0 @tanstack/react-store@^0.11.0 \
  @tanstack/form-core@^1.33.0 @tanstack/query-core@^5.0.0

Your app must also have React and React DOM installed. The peer ranges declared by @chelone/react are:

@chelone/core also requires these peers:

Add the UI components

Chelone's admin components (List, DataTable, the fields and inputs, the layout shell) are distributed as a shadcn registry, so you pull the source into your own project and can edit it freely. Initialise shadcn if you haven't:

npx shadcn@latest init

Add the Chelone registry to your components.json, keeping the rest of your shadcn configuration:

{
  "registries": {
    "@chelone": "https://chelone.dev/r/{name}.json"
  }
}

Then add the full admin surface:

npx shadcn@latest add @chelone/admin

This writes the admin components into components/admin and the supporting helpers into lib/. The admin block declares the shadcn primitives it composes (button, card, field, sidebar, table, and the rest) as registry dependencies, so the CLI resolves and writes those into components/ui and adds the use-mobile hook to hooks/ automatically — nothing dangles.

Mount an admin

Chelone runs as a client-side single-page app. The example below imports fakeDataProvider from @chelone/core. Declare it as a direct dependency so that import resolves with pnpm and Yarn Plug'n'Play:

npm install @chelone/core

Wrap your admin in a router and the <Admin> provider, then declare a <Resource> per entity:

import { fakeDataProvider } from "@chelone/core";
import { Admin, Layout, Resource } from "@chelone/react";
import { QueryClient } from "@tanstack/react-query";
import { BrowserRouter } from "react-router";
import { PostList } from "./posts";
 
const queryClient = new QueryClient();
const dataProvider = fakeDataProvider({ posts: [] });
 
export function App() {
  return (
    <BrowserRouter>
      <Admin dataProvider={dataProvider} queryClient={queryClient}>
        <Admin.Layout>
          <Layout />
        </Admin.Layout>
        <Resource name="posts" list={PostList} />
      </Admin>
    </BrowserRouter>
  );
}

Install for Vue

@chelone/vue is the Vue 3 adapter. It sits on the same @chelone/core engine as the React adapter and uses vue-router 4. Add it with its peers and Zod. @chelone/core is listed directly because the examples below import fakeDataProvider from it, which pnpm and Yarn Plug'n'Play only resolve for a direct dependency:

npm install @chelone/vue @chelone/core zod@^3.24.0 \
  vue@^3.4.0 vue-router@^4.0.0 \
  @tanstack/vue-query@^5.0.0 \
  @tanstack/form-core@^1.33.0 @tanstack/query-core@^5.0.0

The peer ranges declared by @chelone/vue are:

@chelone/core also requires these peers:

Add the Chelone registry to your components.json, keeping the rest of your shadcn-vue configuration:

{
  "registries": {
    "@chelone": "https://chelone.dev/r/vue/{name}.json"
  }
}

Then add the full admin surface:

npx shadcn-vue@latest add @chelone/admin

The CLI copies the Vue components into your project so you can edit them. @chelone/vue still exports the same components if you prefer to import them from the package.

Install the router on your app, then mount <Admin> with a <Resource> per entity. <Admin> builds the resource routes as each <Resource> registers, so the router starts with none:

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
 
const router = createRouter({
  history: createWebHistory(),
  routes: [],
});
 
createApp(App).use(router).mount("#app");

<script setup lang="ts">
import { fakeDataProvider } from "@chelone/core";
import { Admin, Resource } from "@chelone/vue";
import { QueryClient } from "@tanstack/vue-query";
import PostList from "./PostList.vue";
 
const queryClient = new QueryClient();
const dataProvider = fakeDataProvider({ posts: [] });
</script>
 
<template>
  <Admin :data-provider="dataProvider" :query-client="queryClient">
    <Resource name="posts" :list="PostList" />
  </Admin>
</template>

The Vue setup page covers how <Admin> joins your router and the props it takes. The rest of these docs are written for React; the Vue demo in the repository is a working reference.

Next step: the Quick Start Guide builds a real CRUD admin from a Zod schema.