Components

This page covers repository-wide React components that are shared across the application. For model-specific search and form components, see Model UI.

Repository Components

Repository-wide components are placed in ui/components/ and provide functionality that isn’t tied to a specific record model.

Component Structure

• ui
  • components
    • semantic-ui
      • js
        • MyFeature
          • index.js
          • MyComponent.jsx
        • app.js
    • webpack.py

Discovering Available Components

oarepo-ui Components

The oarepo-ui package provides several repository-wide components that you can use in your applications.

The oarepo-ui  package provides several general-purpose components that can be used repository-wide:

ClipboardCopyButton

Places a copy button that copies specified text to the clipboard:

import { ClipboardCopyButton } from "@js/oarepo_ui/components";
 
<ClipboardCopyButton copyText="https://example.com/record/123" />

IdentifierBadge

Displays identifier badges (ORCID, DOI, etc.) with clickable links:

import { IdentifierBadge } from "@js/oarepo_ui/components";
 
<IdentifierBadge
  identifier={{
    scheme: "orcid",
    identifier: "0000-0000-0000-0000",
    url: "https://orcid.org/0000-0000-0000-0000"
  }}
  creatibutorName="Jane Doe"
/>

Disabled

Returns null - useful for disabling built-in UI components through the override mechanism. This allows you to remove default functionality that InvenioRDM provides without modifying core templates:

import { Disabled } from "@js/oarepo_ui/components";
 
// In your override configuration, replace an unwanted component:
export const componentOverrides = {
  // Completely removes the "share" button from the record detail page
  "Record.RecordManagement.ShareButton": Disabled,
};

Common use cases:

• Removing unused action buttons (e.g., “Share”, “Edit” for anonymous users)
• Disabling features that require specific permissions
• Suppressing UI elements that conflict with custom workflows

See the oarepo-ui components source  for more details.

Components from Installed Packages

Additional React components may be available through Python packages installed in your virtual environment. These packages can register webpack aliases that make their components importable via the @js/ prefix.

To discover all available components:

1. Check the webpack build configuration generated by your repository site:

cat .venv/var/instance/assets/build/config.json

2. Look for the aliases section, which lists all @js/ import paths available in your environment:

{
  "aliases": {
    "@js/invenio_app_rdm": "js/invenio_app_rdm",
    "@js/oarepo_ui": "js/oarepo_ui",
    "@js/oarepo_vocabularies_ui": "js/oarepo_vocabularies_ui",
    "@js/invenio_communities": "js/invenio_communities",
    "@js/invenio_requests": "js/invenio_requests",
    "@js/invenio_rdm_records": "js/invenio_rdm_records",
    ...
  }
}

Each alias corresponds to a Python package or library that provides React components. For example:

• @js/invenio_app_rdm — InvenioRDM core components (search, forms, deposit UI)
• @js/oarepo_ui — oarepo-ui shared components and utilities
• @js/oarepo_vocabularies_ui — Vocabulary management UI components
• @js/invenio_communities — Community pages and management components
• @js/invenio_requests — Request/review workflow components
• @js/invenio_rdm_records — Record-specific components

You can then import and use these components:

import { RecordAuthors } from "@js/invenio_app_rdm";
import { SearchBar } from "@js/oarepo_ui/search";

These packages may also export specialized sub-modules like forms, search utilities, and admin UI components.

Related Resources