$ show marmelab/shadcn-admin-kit
This repository provides a comprehensive component library for building admin dashboards and CRUD applications in React. It wraps react-admin's headless core (`ra-core`) with a shadcn/ui aesthetic, delivering over 80 reusable components including data table, forms, inputs, fields, buttons, layout elements, and a rich text editor. The architecture follows a provider pattern for data, authentication, and internationalization, making it backend-agnostic. It includes a demo e-commerce application, a Storybook for visual testing, a marketing website, and a shadcn registry for easy installation via the `shadcn add` command. The codebase is well-structured with extensive unit tests and documentation, though it depends on pre-release Base UI and several react-admin enterprise features that require a paid subscription.
The LLM identified 4 files worth highlighting for reuse:
A feature-rich, generic DataTable component built on HTML table elements with shadcn/ui styling. It provides built-in sorting, row selection, multi-select bulk actions, column visibility toggle, drag-and-drop column reordering, and optional row click navigation. The component is completely decoupled from data fetching; it accepts `data`, `total`, `isLoading`, and optional `onRowClick` as props, making it reusable in any context where you have a list of records. It uses useListContext from ra-core when inside a list context, but can be used standalone with its own props. This pattern demonstrates a clean separation of concerns between data logic and UI presentation.
A fully-featured rich text editor component wrapping TipTap with a minimal, customizable toolbar. It includes image upload with drag-resize, link insertion with edit/remove, color picker, code blocks with syntax highlighting, and various text formatting options. The editor is packaged as a self-contained module with its own extension set and CSS styles, making it easily portable to other projects. It demonstrates advanced patterns like custom TipTap extensions, event delegation, and responsive toolbar sections that adapt to container width.
A reusable component for displaying a related record's field by fetching it from the data provider using a foreign key. It uses ra-core's useReference hook internally to fetch the referenced record and then renders the specified child (typically a field component like TextField). This component exemplifies the relationship pattern common in admin UIs, abstracting away the boilerplate of fetching related data and handling loading/error states. It can be used both inside and outside a RecordContext and is easily extracted as a standalone component for any project needing foreign-key lookups.
An autocomplete input component that supports fetching choices from a data provider asynchronously, with built-in debouncing, pagination, and an optional 'create' action to add new choices on the fly. It wraps shadcn/ui's Command and Popover to provide a polished user experience. The component is tightly integrated with ra-core's useInput but can be adapted to work without it by accepting similar props. It handles edge cases like mismatched option text and value, limiting the number of suggestions, and resetting the input after selection. This pattern is a robust implementation of an async search combobox with extensible options.