cx
Transport-agnostic CRUD primitives for React

CRUD apps without the wiring tax.

@crudx gives you a tiny core that orchestrates list, detail, create, update, and delete operations — and pluggable transport adapters so you can ship the same UI on top of GraphQL, REST, or anything you wire up next.

Try the GraphQL demoTry the REST demoView on GitHub
Live demos

Pick your transport, pick your UI

The same CRUD orchestration, four entry points: GraphQL or REST, Material UI or shadcn/ui — fully interchangeable.

GraphQLMUI
GraphQL · Material UI
CREATE

Apollo Client wired through @crudx/graphql-apollo-adapter against the public GraphQLZero API. Read, create, update, delete — all live, no auth.

@crudx/core@crudx/graphql-apollo-adapter@crudx/mui
graphqlzero.almansi.me/apiOpen demo
GraphQLshadcn
GraphQL · shadcn/ui
+ create

Same GraphQLZero CRUD flow, rendered through @crudx/shadcn (Tailwind + Radix). API-compatible with the MUI variant.

@crudx/core@crudx/graphql-apollo-adapter@crudx/shadcn
graphqlzero.almansi.me/apiOpen demo
RESTMUI
REST · Material UI
CREATE

TanStack Query wired through @crudx/rest-tanstack-adapter against the public JSONPlaceholder API. Mutations auto-invalidate the list cache via the adapter.

@crudx/core@crudx/rest-tanstack-adapter@crudx/mui
jsonplaceholder.typicode.comOpen demo
RESTshadcn
REST · shadcn/ui
+ create

Same JSONPlaceholder CRUD flow, rendered through @crudx/shadcn (Tailwind + Radix). Drop-in alternative to the MUI variant.

@crudx/core@crudx/rest-tanstack-adapter@crudx/shadcn
jsonplaceholder.typicode.comOpen demo
Component reference

Browse every UI primitive

Below the high-level CrudPanelView sit the lower-level building blocks each UI package ships — tables, dropdowns, dialogs, breadcrumbs and more. Each reference page renders every export next to the JSX snippet that produced it.

@crudx/mui
Material UI components

Tables, drop-downs, dialogs and more — Emotion-styled.

@crudx/shadcn
shadcn/ui components

Tailwind + Radix primitives — sharp, monospace, themeable.

Claude Code skills

Scaffold from templates, not regenerate

Skip the manual wiring. Install our Claude Code skills and let Claude scaffold the repetitive parts of a crudx integration — transport providers, adapter schemas, full CRUD pages, single components — from pre-baked templates, not by re-generating boilerplate. Drastically lower token cost per scaffold.

Install
npx @crudx/skills install

Drops three slash commands into ./.claude/skills/. Open Claude Code in your project and type the command — each skill asks 2–4 short questions (transport, UI lib, resource name, …) and copies the matching template into your code.

/crudx-setup

One-time: install deps, wire transport provider, configure MUI theme or shadcn Tailwind.

/crudx-resource

Scaffold a complete CRUD page (types + adapter schema + page) for one resource. The highest-value scaffold.

/crudx-component

Drop a single basic atom (Dialog, Table, …) or major view (CrudPanelView, CrudFilterView, …) into an existing file.

Read the full guideBrowse the package
Packages

Seven packages, one mental model

@crudx/core

Transport-agnostic CRUD orchestration: schema slots, paging strategies, mutation callbacks. No transport dependency.

@crudx/common

Shared hooks and utilities (pagination, row selection, formatting) consumed by the UI packages.

@crudx/graphql-apollo-adapter

GraphQL transport adapter on top of Apollo Client. Identity helpers + createGraphqlApolloAdapter().schema() builder.

@crudx/rest-tanstack-adapter

REST transport adapter on top of TanStack Query. Cache invalidation, offset / cursor pagination presets, schema() builder.

@crudx/mui

Material UI + Emotion implementation of the CRUD surface (CrudPanelView, CrudTableView, …).

@crudx/shadcn

Tailwind + Radix (shadcn-style) implementation of the same surface; API-compatible with @crudx/mui.

@crudx/skills

Installable Claude Code skills (/crudx-setup, /crudx-resource, /crudx-component) that scaffold integration code from templates instead of regenerating boilerplate.