The Orderly Components SDK provides a set of components needed to build a DEX UI, allowing you to quickly build a DEX on top of Orderly. It is designed modularly and consists of various npm packages. Based on your needs you have to install the respective packages:
NameDescription
@orderly.network/uiBase UI component library.
@orderly.network/ui-scaffoldPage layout components (e.g., headers, footers, sidebars).
@orderly.network/react-appProviders for any React app built with Orderly components.
@orderly.network/tradingTrading page components.
@orderly.network/portfolioPersonal portfolio dashboard components.
@orderly.network/trading-rewards
@orderly.network/affiliate
@orderly.network/markets
@orderly.network/ui-connector
@orderly.network/ui-chain-selector
@orderly.network/ui-order-entry
@orderly.network/ui-orders
@orderly.network/ui-positions
@orderly.network/ui-tpsl
@orderly.network/ui-transfer
@orderly.network/ui-share
@orderly.network/ui-leverage
@orderly.network/wallet-connector
@orderly.network/default-evm-adapter
@orderly.network/default-solana-adapter
@orderly.network/web3-provider-ethers

​
Storybook

You can check out our Storybook, which has all components included.

​
Features

  • Provides feature-complete React components, allowing you to build a DEX with little to no code
  • Full compatibility on different viewports
  • Modular design and layered, allowing you to customize according to your needs
  • i18n support
  • Customizable themes

​
Architecture

@orderly.network/react has three layers, all of which can be used individually.
  • UI components: Provides basic UI components, such as buttons, input forms
  • Block components: Provides DEX related components, such as symbol chooser, orderbook, trade history components
  • Page: Provides fully functional pages, such as the trading page

​
Compatibility

  • Compatible with all modern browsers and IE11 or above