@curatordev/mantine

React admin UI components for Mantine v8 and Refine.js.

Installation

``bash
pnpm add @curatordev/mantine @mantine/core @mantine/dates @mantine/hooks @mantine/modals @refinedev/core dayjs react-hook-form
`

Features

- Layout: Page layouts (Create, Edit, List, Show views with breadcrumbs and actions)
- Fields: Display components (Text, Number, Boolean, Date, Email, URL, Image, File, Markdown, Reference, Tag, Array, Computed)
- Inputs: Form inputs (Text, Number, Boolean, Date, DateTime, Select, MultiSelect, Autocomplete, File, Image, ManyToMany editor)
- Buttons: Action buttons (Create, Edit, Delete, Show, List, Save, Refresh, Export)
- Filters: Query filters (Text, Numeric, Boolean, Select, List, DateRange)
- Actions: Perform operations on multiple selected records with "select all" support
- Forms: Pre-built form layouts (EditForm)
- Overlays: Modal dialogs (Create, Edit overlays)
- Context: Data management (ManyToMany relationships)
- Utilities: General purpose utils (Export, Files)

Quick Start

`tsx
import { Edit, EditForm, TextFieldInput, BooleanFieldInput } from '@curatordev/mantine';

function UserEdit({ id }: { id: string }) {
return (

{(user, { resource, id }) => (





)}

);
}
`




Component Categories

$3


Page layout components:
- Create - Create page with breadcrumbs and back button
- Edit - Edit page with breadcrumbs and action buttons
- List - List page with breadcrumbs and create button
- Show - Show/detail page with breadcrumbs and action buttons

$3

Read-only display components for showing data:
- TextField - Display text values
- NumberField - Display numbers with formatting
- BooleanField - Display boolean as checkmark/x
- DateField - Display dates with formatting
- EmailField - Display email as mailto link
- UrlField - Display URL as link
- ImageField - Display image with lightbox
- FileField - Display file with download link
- MarkdownField - Render markdown content
- ReferenceField - Display related record
- TagField - Display value as tag/badge
- ArrayField - Display array items
- ComputedField - Display computed value
- LabeledField - Wrapper for label + field

$3

Form input components that work with react-hook-form:
- TextFieldInput - Text/textarea input
- NumberFieldInput - Number input
- BooleanFieldInput - Checkbox/switch input
- DateFieldInput - Date picker
- DateTimeFieldInput - Date + time picker
- SelectFieldInput - Single select dropdown
- MultiSelectFieldInput - Multi-select dropdown
- AutocompleteFieldInput - Autocomplete with search
- FileFieldInput - File upload
- ImageFieldInput - Image upload with preview
- ManyToManyTableEditor - Edit many-to-many relationships in a table

$3

Action buttons that integrate with Refine.js resource actions:
- CreateButton - Navigate to create page
- EditButton - Navigate to edit page
- ShowButton - Navigate to show/detail page
- DeleteButton - Delete a record with confirmation
- ListButton - Navigate back to list page
- SaveButton - Submit form
- RefreshButton - Refresh current data
- ExportButton - Export all filtered records to CSV (or custom format)

$3

Query filter components for list pages:
- TextFilter - Text search filter
- NumericFilter - Number range filter
- BooleanFilter - Boolean toggle filter
- SelectFilter - Single/multi select filter
- ListFilter - Filter by IDs
- DateRangeFilter - Date range filter with presets

$3

Perform operations on multiple selected records:
- BulkActions - UI component for bulk operations with dropdown and "select all" functionality
- useRecordSelection - Hook to manage record selection state

$3

Pre-built form layouts:
- EditForm - Standard edit/create form layout with save button

$3

Modal dialog components:
- CreateOverlay - Create form in a modal
- EditOverlay - Edit form in a modal

$3

Data management:
- ManyToManyProvider - Provider for many-to-many relationship data
- useManyToMany - Hook to access many-to-many context

$3

Utilities for exporting data:
- fetchAllRecords - Fetch all records across pages with filters
- fetchAllIds - Fetch all record IDs across pages
- recordsToCSV - Convert records to CSV format
- downloadFile - Trigger browser file download
- generateExportFilename` - Generate timestamped filename

Backend Integration

Curator components are designed to work with REST APIs that implement structured pagination, sorting, and filtering. For Go backends, check out dewey, which provides utilities for building these capabilities into your API endpoints.

License

MIT - see LICENSE for details.