@oc-mui/ui

Shared component library built on Tailwind CSS v4, Radix UI primitives (via shadcn/ui) and @dnd-kit for drag-and-drop. Atomic components (Button, Card, Input, …) plus composed building blocks (app shell, datatable, metadata fields, ACL editor, date picker, sortable list, …).

This is the only place plugins should source UI components — the Theme Contract guarantees consistent styling, and bundling your own shadcn copies breaks org theming.

Usage

import { Button, Card, CardContent } from "@oc-mui/ui/components";
import { cn } from "@oc-mui/ui/lib/utils";
import { Home, Video } from "@oc-mui/ui/components/icons";

<Card className={cn("bg-card", className)}>
  <CardContent>
    <Button>Save</Button>
  </CardContent>
</Card>;

Plugin authors import from the subpath exports — never the package root — to keep the bundle tree-shakeable:

| Subpath | What it provides | |---------|------------------| | @oc-mui/ui/components | Atomic + composed components (Button, Card, Table, DataTable, PageShell, NavMain, …) — the plugin SDK surface, tracked in etc/ui-components.api.md. | | @oc-mui/ui/components/icons | lucide-react icons re-exported with a stable surface (Home, Video, ExternalLink, …). | | @oc-mui/ui/lib | Utility helpers (resolveFirstAssetUrl, …). | | @oc-mui/ui/lib/utils | The cn() class-merging helper. | | @oc-mui/ui/hooks | useIsMobile, useClickOutside. | | @oc-mui/ui/internal | Host-only assembly layer: Appshell, the router primitives (UiRouterProvider), DefaultLandingPage, the error pages, ThemeModeProvider. Not part of the SDK, no API report, not shared with remote plugins, lint-forbidden inside plugins/. | | @oc-mui/ui/styles, @oc-mui/ui/globals.css | The semantic-token CSS. Imported once by the shell. | | @oc-mui/ui/config-primitives | Building blocks for plugin config UIs. | | @oc-mui/ui/postcss.config | Deprecated, no-op. Tailwind runs through @tailwindcss/vite (wired by @oc-mui/vite-config); a host needs no PostCSS config. Kept as an empty config for one major cycle. |

Components

The library is split between atomic shadcn components (under src/components/ui/) and composed components (everything else under src/components/). The atomic ones are generated by npx shadcn@latest add; the composed ones are hand-written and depend on them.

| Composed component | What it does | |--------------------|--------------| | AppShell | The shell's layout — sidebar, header, footer, main content area. The host mounts this once; plugin extension points fill the slots. | | DataTable / MuiTable | Sortable, filterable, paginated tables — the canonical way to render lists. | | MetadataField, MetadataUpdateField | Form controls for Opencast metadata. | | AclEditor | Access-control-list editor. | | DatePicker, DateTimePicker | Calendar input. | | InfiniteScroll | Sentinel-driven incremental loading. | | SortableList | Vertically sortable list with a drag handle, full keyboard reordering, and screen-reader announcements; moveItem for non-drag moves. | | Container, AppHeading, OverflowTooltip, DebouncedInput | General-purpose layout/UX. |

Theme

Components consume the semantic tokens from src/styles/globals.css. Org themes override the token values, not the class names. Full contract: docs/extend/styling.md.

PageShell — the standard page frame

Content pages (episodes, series, upload, marketplace) render inside PageShell: uniform page padding, the title in the same place and type scale everywhere, optional description, an optional right-aligned actions slot, separator, then the content. Plugin apps should use it too, so their pages sit visually flush with the core ones. The landing page deliberately does not — it is a marketing surface, not a content page.

Layer

Integration. Depends on @oc-mui/i18n, @oc-mui/plugin-system, @oc-mui/query, @oc-mui/ui-config, @oc-mui/utils.

Deliberately not a dependency: @oc-mui/router. Router-aware components (sidebar nav, data table) get their Link/usePathname primitives injected by the host via UiRouterProvider — importing the router here would invert the layering and create a dependency cycle. See src/components/router-context.tsx for the full rationale.

See also

• docs/extend/styling.md — the Theme Contract.
• packages/tailwind-config/README.md — the shared Tailwind preset.