Orderly Network: UI Components

Build trading interfaces with Orderly's pre-built React components. The SDK ships a base component library (@orderly.network/ui), granular trading widgets (ui-order-entry, ui-positions, …), high-level feature pages (trading, portfolio, markets), and an app scaffold (ui-scaffold).

Imports matter. Components live in specific packages — do not import everything from @orderly.network/react (that package does not exist). Use @orderly.network/react-app for the provider, @orderly.network/ui for base components, and the feature package for page-level widgets. See the package table below.

When to Use

• Rapidly building a trading UI
• Using pre-built, styled components
• Implementing standard trading interface patterns

Prerequisites

• React 18+
• @orderly.network/react-app, @orderly.network/ui installed
• OrderlyAppProvider wrapping your app
• Tailwind CSS configured (content glob on app/)