@crudx/shadcn

Tailwind + Radix implementation of the @crudx/core CRUD surface, with an identical public API to @crudx/mui. Drop-in replacement for consumers who prefer a shadcn-style UI over MUI. Uses @tanstack/react-table as the internal table engine.

Install

yarn add @crudx/shadcn @crudx/core @crudx/common \
  react react-dom \
  axios currency-symbol-map dayjs lodash numeral \
  @tanstack/react-table \
  @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-dialog \
  @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover \
  @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot \
  @radix-ui/react-tabs @radix-ui/react-tooltip \
  class-variance-authority classnames clsx lucide-react tailwind-merge \
  react-hot-toast

# plus a transport adapter — choose one:
yarn add @crudx/graphql-apollo-adapter @apollo/client graphql
# or:
yarn add @crudx/rest-tanstack-adapter @tanstack/react-query

Everything above is a peer dependency. Group by row: @crudx/* core, React, @crudx/{core,common} helpers, the table engine, the 11 Radix primitives the shadcn surface composes from, and the small utility set. Yarn 1 doesn't auto-install peer deps — install them explicitly.

@crudx/shadcn no longer pulls in next/link directly — to keep client-side routing under Next.js, React Router, etc. wrap your app once with <LinkProvider Link={...} /> from @crudx/common. See @crudx/common for usage.

The transport choice only affects the schema slots fed into CrudPanelView; the component surface itself is transport-neutral. See the main README for end-to-end live demos.

Tailwind setup (required)

This library ships classnames only; Tailwind runs on the consumer side. Two steps:

1. Scan the compiled output

In tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@crudx/shadcn/**/*.{js,mjs}',
  ],
  // ...
};

2. CSS variables (shadcn theme)

Paste this block into your globals.css (or equivalent):

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 215 20.2% 65.1%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --ring: 216 34% 17%;
  }
}

3. Optional: use the bundled preset

const preset = require('@crudx/shadcn/lib/tailwind-preset').default;

module.exports = {
  presets: [preset],
  content: ['./src/**/*.{ts,tsx}', './node_modules/@crudx/shadcn/**/*.{js,mjs}'],
};

Usage

import { Table } from '@crudx/shadcn';

<Table
  data={rows}
  columns={[
    { key: 'id', title: 'ID', dataIndex: 'id', sortable: true },
    { key: 'name', title: 'Name', dataIndex: 'name' },
  ]}
  page={page}
  pageSize={pageSize}
  total={total}
  onPageChange={setPage}
  onPageSizeChange={setPageSize}
/>

The prop surface mirrors @crudx/mui — if you know one, you know the other.