React Data Kit

TypeScript-first React components for data-heavy UIs: DataTable, QueryTable, DynamicForm, CrudManager, and Infinite Scroll adapters for RTK Query and React Query.

Install

npm install @thabeut/react-data-kit

Peer Dependencies

Make sure your app provides the required peers:

• react and react-dom (18+)
• antd
• react-hook-form
• @hookform/resolvers
• yup
• @iconify/react
• clsx
• dayjs
• i18next
• react-i18next

Theme Setup (Required)

This package uses data-theme on the root HTML element as the single source of truth for dark/light mode styling.

You must keep document.documentElement in sync with your app theme state:

const root = document.documentElement;
root.setAttribute("data-theme", theme); // "light" | "dark"

If your app toggles only html.dark (class-based theme), package components can appear with mixed styles. Always set data-theme to "light" or "dark".

CSS Isolation

Package components scope their styles under a dedicated wrapper class (root-rdk) so importing package CSS should not restyle unrelated host app UI.

Documentation

• DataTable guide
• QueryTable guide
• DynamicForm guide
• CrudManager guide
• Infinite Scroll guide

Playground / Docs Site

• Local playground: run npm run playground:dev
• Deployed playground/docs: https://react-data-kit.vercel.app/

Links

• GitHub repository: https://github.com/Thabeut/react-data-kit
• NPM package: https://www.npmjs.com/package/@thabeut/react-data-kit
• Hosted docs/playground: https://react-data-kit.vercel.app/

License

MIT