orderly-sdk-ui-components

Orderly SDK UI Components

A comprehensive guide to all UI components available in the Orderly Network SDK for building decentralized exchange applications.

Overview

The Orderly SDK provides a complete UI component library built with React, Radix UI primitives, and Tailwind CSS. Components are organized into two main categories:

1. Base UI Components (@orderly.network/ui) - Foundational UI primitives like buttons, inputs, dialogs, tables
2. Domain-Specific Components (@orderly.network/ui-*) - Trading-specific widgets like order entry, positions, charts

Installation

Base UI Package

npm install @orderly.network/ui
# or
yarn add @orderly.network/ui
# or
pnpm add @orderly.network/ui

Domain-Specific Packages

# Order Entry
npm install @orderly.network/ui-order-entry

# Positions Management
npm install @orderly.network/ui-positions

# Orders Management
npm install @orderly.network/ui-orders

# Leverage Controls
npm install @orderly.network/ui-leverage

# Take-Profit/Stop-Loss
npm install @orderly.network/ui-tpsl

# Deposit/Withdraw/Transfer
npm install @orderly.network/ui-transfer

# Wallet Connection
npm install @orderly.network/ui-connector

# Chain Selection
npm install @orderly.network/ui-chain-selector

# TradingView Integration
npm install @orderly.network/ui-tradingview

# Share PnL
npm install @orderly.network/ui-share

# App Scaffolding
npm install @orderly.network/ui-scaffold

Setup

Import Styles

import "@orderly.network/ui/dist/styles.css";

Theme Provider

import { OrderlyThemeProvider } from "@orderly.network/ui";

function App() {
  return (
    <OrderlyThemeProvider>
      <YourApp />
    </OrderlyThemeProvider>
  );
}

---

Base UI Components (@orderly.network/ui)

Layout Components

Box

A polymorphic container component with flexbox utilities.

import { Box } from "@orderly.network/ui";

<Box p={4} m={2} r="lg" className="custom-class">
  Content
</Box>

Props:

Prop	Type	Description
p	number | string	Padding
px, py	number | string	Horizontal/vertical padding
m	number | string	Margin
r	"sm" | "md" | "lg" | "xl"	Border radius
intensity	number	Background intensity

---

Flex

Flexbox layout container.

import { Flex } from "@orderly.network/ui";

<Flex direction="row" gap={2} justify="between" align="center">
  <div>Item 1</div>
  <div>Item 2</div>
</Flex>

Props:

Prop	Type	Description
direction	"row" | "column"	Flex direction
gap	number	Gap between items
justify	"start" | "center" | "end" | "between" | "around"	Justify content
align	"start" | "center" | "end" | "stretch"	Align items
wrap	boolean	Flex wrap

---

Grid

CSS Grid layout container.

import { Grid } from "@orderly.network/ui";

<Grid cols={3} gap={4}>
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
</Grid>

---

Form Components

Button

Customizable button with multiple variants and colors.

import { Button } from "@orderly.network/ui";

<Button 
  variant="contained" 
  color="primary" 
  size="md"
  fullWidth
  loading={isLoading}
  disabled={isDisabled}
  onClick={handleClick}
>
  Submit Order
</Button>

Props:

Prop	Type	Description
variant	"text" | "outlined" | "contained" | "gradient"	Button style variant
color	"primary" | "secondary" | "success" | "danger" | "warning" | "buy" | "sell" | "gray"	Button color
size	"xs" | "sm" | "md" | "lg" | "xl"	Button size
fullWidth	boolean	Full width button
loading	boolean	Show loading spinner
disabled	boolean	Disable button
asChild	boolean	Render as child element

Size Reference:

• xs: 24px height
• sm: 28px height
• md: 32px height
• lg: 40px height
• xl: 54px height

---

Input

Text input with formatting and validation support.

import { Input, TextField, inputFormatter } from "@orderly.network/ui";

// Basic Input
<Input
  placeholder="Enter amount"
  size="md"
  color="default"
  disabled={false}
/>

// With Formatter (numeric input)
<Input
  placeholder="0.00"
  formatters={[inputFormatter.numberFormatter]}
  onValueChange={(value) => setValue(value)}
/>

// TextField with Label
<TextField
  label="Price"
  placeholder="Enter price"
  suffix="USDC"
  error="Invalid price"
/>

Props:

Prop	Type	Description
size	"xs" | "sm" | "md" | "lg" | "xl"	Input size
color	"default" | "success" | "danger" | "warning"	Input color state
disabled	boolean	Disable input
prefix	ReactNode	Prefix element
suffix	ReactNode	Suffix element
formatters	InputFormatter[]	Value formatters
onValueChange	(value: string) => void	Value change handler

Built-in Formatters:

import { inputFormatter } from "@orderly.network/ui";

inputFormatter.numberFormatter     // Numeric values only
inputFormatter.currencyFormatter   // Currency formatting
inputFormatter.dpFormatter(2)      // Decimal places limiter

---

Select

Dropdown select component.

import { Select, SelectItem } from "@orderly.network/ui";

<Select 
  value={selected}
  onValueChange={setSelected}
  placeholder="Select option"
  size="md"
>
  <SelectItem value="option1">Option 1</SelectItem>
  <SelectItem value="option2">Option 2</SelectItem>
  <SelectItem value="option3">Option 3</SelectItem>
</Select>

Props:

Prop	Type	Description
value	string	Selected value
defaultValue	string	Default value
onValueChange	(value: string) => void	Change handler
placeholder	string	Placeholder text
size	"xs" | "sm" | "md" | "lg"	Select size
error	boolean	Error state
showCaret	boolean	Show dropdown arrow
maxHeight	number	Max dropdown height

---

Checkbox

Checkbox input component.

import { Checkbox } from "@orderly.network/ui";

<Checkbox
  checked={isChecked}
  onCheckedChange={setIsChecked}
  id="terms"
>
  Accept terms and conditions
</Checkbox>

---

Switch

Toggle switch component.

import { Switch } from "@orderly.network/ui";

<Switch
  checked={isEnabled}
  onCheckedChange={setIsEnabled}
  size="default"
/>

---

Slider

Range slider with marks and custom styling.

import { Slider } from "@orderly.network/ui";

<Slider
  value={[50]}
  onValueChange={(values) => setValue(values[0])}
  min={0}
  max={100}
  step={1}
  color="primary"
  marks={[
    { value: 0, label: "0%" },
    { value: 25, label: "25%" },
    { value: 50, label: "50%" },
    { value: 75, label: "75%" },
    { value: 100, label: "100%" },
  ]}
/>

Props:

Prop	Type	Description
value	number[]	Current value(s)
onValueChange	(values: number[]) => void	Change handler
min	number	Minimum value
max	number	Maximum value
step	number	Step increment
color	"primary" | "primaryLight" | "buy" | "sell"	Slider color
marks	SliderMarks[]	Mark points
disabled	boolean	Disable slider

---

Typography

Text

Flexible text component with styling variants.

import { Text } from "@orderly.network/ui";

<Text 
  size="sm" 
  weight="semibold" 
  color="primary"
  intensity={80}
  as="span"
>
  Account Balance
</Text>

Props:

Prop	Type	Description
size	"3xs" | "2xs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl"	Font size
weight	"regular" | "semibold" | "bold"	Font weight
color	"inherit" | "neutral" | "primary" | "secondary" | "warning" | "danger" | "success" | "buy" | "sell"	Text color
intensity	12 | 20 | 36 | 54 | 80 | 98	Opacity intensity
as	"span" | "div" | "p" | "label"	HTML element
copyable	boolean	Enable copy on click

---

Numeral

Formatted numeric display.

import { Numeral } from "@orderly.network/ui";

<Numeral value={12345.67} dp={2} prefix="$" />
// Renders: $12,345.67

<Numeral 
  value={0.0534} 
  dp={4} 
  suffix="%" 
  coloring  // Green for positive, red for negative
/>

---

Overlay Components

Dialog

Modal dialog component.

import { 
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogBody,
  DialogFooter,
  DialogClose
} from "@orderly.network/ui";

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Order</DialogTitle>
    </DialogHeader>
    <DialogBody>
      Are you sure you want to place this order?
    </DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outlined">Cancel</Button>
      </DialogClose>
      <Button color="primary" onClick={handleConfirm}>
        Confirm
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

DialogContent Props:

Prop	Type	Description
size	"sm" | "md" | "lg"	Dialog size
closable	boolean	Show close button
onCloseAutoFocus	(e: Event) => void	Close focus handler

---

Sheet

Bottom/side sheet component.

import { 
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from "@orderly.network/ui";

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Menu</Button>
  </SheetTrigger>
  <SheetContent side="bottom">
    <SheetHeader>
      <SheetTitle>Options</SheetTitle>
    </SheetHeader>
    {/* Content */}
  </SheetContent>
</Sheet>

---

Content truncated.