> ## Documentation Index
> Fetch the complete documentation index at: https://orderly.network/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Build modern, responsive trading interfaces with Orderly Components SDK.

<img src="https://mintcdn.com/orderly/OzqpKdtQuSFdqT6W/images/sdks/react/sdk-cover.webp?fit=max&auto=format&n=OzqpKdtQuSFdqT6W&q=85&s=3af33d498bbf9ff25eaa24fc736f96d2" alt="" width="2400" height="1350" data-path="images/sdks/react/sdk-cover.webp" />

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:

| Name                                      | Description                                                |
| ----------------------------------------- | ---------------------------------------------------------- |
| `@orderly.network/ui`                     | Base UI component library.                                 |
| `@orderly.network/ui-scaffold`            | Page layout components (e.g., headers, footers, sidebars). |
| `@orderly.network/react-app`              | Providers for any React app built with Orderly components. |
| `@orderly.network/trading`                | Trading page components.                                   |
| `@orderly.network/portfolio`              | Personal 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](https://storybook.orderly.network/), 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

<img src="https://mintcdn.com/orderly/OzqpKdtQuSFdqT6W/images/sdks/react/orderly-architecture.webp?fit=max&auto=format&n=OzqpKdtQuSFdqT6W&q=85&s=0d3bf18e85b3373ca0549b767ea37cdf" alt="" width="2272" height="1440" data-path="images/sdks/react/orderly-architecture.webp" />

`@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