@editora/ui-react

React-first UI package for Editora application and editor interfaces.

Installation

npm i @editora/ui-react @editora/ui-core

If you only need sortable without the broader UI bundles:

npm i @editora/ui-sortable

You can use it either as:

• a standalone web component via import '@editora/ui-sortable'
• a standalone React wrapper via import { Sortable } from '@editora/ui-sortable/react'

Quick Start

import { ThemeProvider, Button, DialogProvider } from "@editora/ui-react";

export function App() {
  return (
    <ThemeProvider>
      <DialogProvider>
        <Button variant="primary">Save</Button>
      </DialogProvider>
    </ThemeProvider>
  );
}

Advanced Showcase

For a full application example instead of isolated component snippets, use the hospital operations app:

• Hospital Management Showcase

It demonstrates @editora/ui-react components working together across routing, drawers, dialogs, tables, date pickers, overlays, dashboards, and record-management workflows.

API Reference

Surface	Type	Notes
Button, Tooltip, Alert, Dropdown, Input, Textarea, Field, Combobox	Component exports	Base controls
Badge, EmptyState, Table, DataTable, FiltersBar, DataViewToolbar, Chart, Timeline, Calendar, Carousel, Marquee, AnimatedText, AnimatedBeam, Dock, Orbiter, Stat, MetricCard, PageHeader, PageToolbar, RecordHeader, CodeBlock, CodeSnippet, CopyButton	Component exports	Data display, motion, launcher, metrics, docs, and higher-level workflow/page-shell surfaces
ColorPicker, DatePicker, DateRangePicker, TimePicker, DateTimePicker, DateRangeTimePicker	Component exports	Date/time and color controls
Gantt, Stepper, Wizard, QuickActions, Sortable	Component exports	Workflow controls, including standalone-installable sortable drag and drop for both web component and standalone React wrapper use
NavigationMenu, Menubar, Dialog, Popover, Tabs, Menu, ContextMenu	Component exports	Nav + overlay components
FloatingToolbar, BlockControls, CommandPalette, SelectionPopup, PluginPanel	Component exports	Editor-specific surfaces
Form, useForm, useFloating	Component + hooks	Form and floating behavior
Box, Flex, Grid, Section, Container, Sidebar, Breadcrumb, AppHeader, Drawer, Layout, Kbd, Shortcut	Component exports	Layout system plus server-safe keycap surfaces
ThemeProvider, useTheme	Provider + hook	Theme control
DialogProvider, useDialog, AlertDialogProvider, useAlertDialog	Providers/hooks	Dialog state APIs
Icon	Component export	Icon wrapper
Toast, ToastAPI, toast, toastApi	Toast exports	Notification APIs
Checkbox, Radio, RadioGroup, Switch, Toggle, ToggleGroup, AspectRatio, Avatar, Presence, Progress, Portal, ScrollArea, Separator, Slot, Toolbar, VisuallyHidden, Collapsible, Pagination, Accordion, AccordionItem, AccordionTrigger, AccordionPanel, DirectionProvider, HoverCard, Label, AlertDialog, Select, Slider, Skeleton	Component exports	Primitive catalog

Best Practices

• Keep provider boundaries explicit and stable.
• Reuse composition patterns across screens for consistency.
• Wrap high-frequency subtrees with memoized adapters where needed.

Accessibility

Validate aria labels, tab order, and focus return for dialog + menu flows.

Performance Notes

Prevent broad context churn and avoid recreating large prop objects on every render.

For Sortable, normal and moderately large boards are a good fit today. If you plan to render very large visible datasets, validate with your real item count because the surface is not virtualized.