Skip to content

Introduction

Modern, component-driven UI library for the Workflow Orchestrator. Built with Next.js, TypeScript, and React.

NPM Version NPM Downloads GitHub Stars Discord


The Orchestrator UI Library is a collection of reusable React components and pages built for the Workflow Orchestrator Programme. Developed by SURF and the community, it enables rapid development of modern frontends for service orchestration.

What is this library?

The Orchestrator UI Library provides a collection of production-ready, accessible React components and complete pages designed to work seamlessly with the Orchestrator Core backend. It abstracts away the complexity of connecting to the orchestrator engine, allowing you to focus on building user experiences.

Key Features

  • Modern React Components: Built with React 18+, TypeScript, and Next.js for type-safe development
  • Fully Composable: Use individual components or complete pages, mix and match as needed
  • Usability: Designed with UX in mind, with support for light and dark modes
  • Production-Ready: Used in production environments by WFO programme members and continuously QA tested

What’s Included?

The main NPM package of the library is @orchestrator-ui/orchestrator-ui-components.

It contains a collection of reusable React components and pages for building orchestrator frontends, such as:

  • Pages for managing subscriptions, workflows, and products
  • Form components for user input
  • Data display components (tables, lists, cards)
  • Workflow visualization components
  • Authentication and permission helpers

All components are prefixed with Wfo for easy identification.

Getting Started

Install the components package

npm install @orchestrator-ui/orchestrator-ui-components

Use it in your app

import { WfoSubscriptionList } from '@orchestrator-ui/orchestrator-ui-components';

export default function SubscriptionsPage() {
  return <WfoSubscriptionList />;
}

For a complete example, check out the example-orchestrator-ui repository.

Technology Stack

Community & Support