Installation

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

Chelone is a headless admin engine for React and Vue. @chelone/core holds the headless logic — data providers, the resource registry, the CRUD controllers, validation, i18n, and the store — and the adapters sit on top of it: @chelone/react and @chelone/vue. An optional TanStack Router reference adapter is available at @chelone/react/tanstack-router.

The admin components are not bundled into the adapters. They ship through a shadcn registry, so you pull the source into your own project and can edit it freely.

Pick your adapter

The React install steps are on the React section's setup page. The Vue install steps are the section below, and the Vue setup page covers the wiring:

The registry

Each adapter serves its own registry. The entry has the same shape in both, and only the URL differs:

Add the entry for your adapter to your components.json, keeping the rest of your shadcn configuration. Each adapter's full components.json snippet sits with its install steps: React setup for React, and Install for Vue below for Vue.

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 or 5. Add it with its peers and Zod (Zod 3.25 or later, or Zod 4). @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 \
  vue@^3.5.34 vue-router@^5.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.