@airdraft/react-ui

Drop-in React UI components for Airdraft. Provides a full CMS admin panel, entry editor, media manager, schema editor, and composable primitives — all built on Tailwind CSS and shadcn/ui.

Installation

npm install @airdraft/react-ui

Requires @airdraft/client and a configured Airdraft API.

Tier 3 — Drop-in Compounds

Ready-to-use full-page components. Mount them in your app and they handle all data fetching and state.

| Component | Description | |---|---| | <CMSAdmin> | Full CMS admin panel with sidebar navigation, collections, media, team, and schema editor. | | <CollectionsIndex> | Browse and search entries in a collection. | | <ContentManager> | Lists collections; navigates to CollectionsIndex on selection. | | <EntryEditor> | Edit a single entry. Renders dynamic fields from the collection schema, handles validation errors, optimistic concurrency (SHA conflict detection), and save state. | | <MediaManager> | Upload and browse media files. | | <TeamManager> | Manage team members and invitations. | | <SchemaEditor> | Visual editor for collection schemas (requires plugin-schema-editor). | | <AuditLogViewer> | Paginated audit event log (requires plugin-audit-log). | | <LoginForm> | Username/password login form. | | <AcceptInviteForm> | Accept a team invitation. |

Tier 2 — Composable Slots

For custom layouts, use the composable primitives:

import { SchemaEditorRoot, SchemaEditorSidebar, SchemaEditorContent, SchemaEditorFieldDrawer } from '@airdraft/react-ui'

Shared Components

| Component | Description | |---|---| | <PageHeader> | Page title + description + action slot. | | <ErrorAlert> | Displays an error with title and message. Supports compact mode. | | <EmptyState> | Empty state with icon and call-to-action. | | <EntryRow> | Single row in a collection list. | | <MediaCard> | Media item thumbnail card. | | <UploadZone> | Drag-and-drop file upload area. | | <ConfirmDialog> | Confirmation modal. | | <StatusBadge> / <RoleBadge> | Status and role indicator badges. |

Field Types

EntryEditor renders the appropriate input for each field type defined in the collection schema:

| Type | Input | |---|---| | string | Text input | | number | Number input | | boolean | Toggle switch | | date | Date picker | | select | Dropdown | | multiselect / list | Tag input | | richtext | Rich text editor | | url | URL input with inline link icon | | image / media | Media picker (single or multiple files via multiple: true) | | relation / relations | Relation picker | | object | Grouped sub-fields | | blocks | Structured nested fields — single block object or a repeatable array of block items (with multiple: true). Sub-fields are defined in the schema; the type picker excludes blocks nesting. |

media field with multiple: true

The media picker opens a modal with the full media library. In multiple mode, selections are staged and committed with a "Done" button. Legacy entries that stored a single string key are automatically coerced to an array on save.

Changelog

See CHANGELOG.md.