# Trading app UI for React

Markets on your feed: the terminal, a screener and the portfolio. 3 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks.

## Screens

1. [Trading terminal](https://beamline.io/components/trading-terminal.md): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
2. [Market screener](https://beamline.io/components/market-screener.md): The whole market at a glance and a way to narrow it down: a sector heatmap, today's top movers with the market's breadth, ready-made screens (gainers…
3. [Portfolio overview](https://beamline.io/components/portfolio.md): What an account holds and how it is doing: the total that rolls as prices tick with today's change, value over time against a benchmark, allocation by…

## The parts they're built from

- [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 3 of these screens
- [Button](https://beamline.io/components/button.md) (free): in 3 of these screens
- [Checkbox](https://beamline.io/components/checkbox.md) (free): in 3 of these screens
- [Chip group](https://beamline.io/components/chip-group.md) (free): in 3 of these screens
- [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 3 of these screens
- [Empty state](https://beamline.io/components/empty-state.md) (free): in 3 of these screens
- [Glow](https://beamline.io/components/glow.md) (free): in 3 of these screens
- [Kbd](https://beamline.io/components/kbd.md) (free): in 3 of these screens
- [Label](https://beamline.io/components/label.md) (free): in 3 of these screens
- [Pagination](https://beamline.io/components/pagination.md) (free): in 3 of these screens
- [Popover](https://beamline.io/components/popover.md) (free): in 3 of these screens
- [Search field](https://beamline.io/components/search-field.md) (free): in 3 of these screens
- [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 3 of these screens
- [Select](https://beamline.io/components/select.md) (free): in 3 of these screens
- [Skeleton](https://beamline.io/components/skeleton.md) (free): in 3 of these screens
- [Spinner](https://beamline.io/components/spinner.md) (free): in 3 of these screens
- [Text morph](https://beamline.io/components/text-morph.md) (free): in 3 of these screens
- [Tooltip](https://beamline.io/components/tooltip.md) (free): in 3 of these screens
- [Context menu](https://beamline.io/components/context-menu.md) (free): in 2 of these screens
- [Data grid](https://beamline.io/components/data-grid.md): in 2 of these screens
- [Slot text](https://beamline.io/components/slot-text.md) (free): in 2 of these screens
- [Sparkline](https://beamline.io/components/sparkline.md): in 2 of these screens
- [Table](https://beamline.io/components/table.md) (free): in 2 of these screens
- [Badge](https://beamline.io/components/badge.md) (free): in 1 of these screens
- [Bezel](https://beamline.io/components/bezel.md) (free): in 1 of these screens
- [Category bar](https://beamline.io/components/category-bar.md): in 1 of these screens
- [Depth chart](https://beamline.io/components/depth-chart.md): in 1 of these screens
- [Funding countdown](https://beamline.io/components/funding-countdown.md): in 1 of these screens
- [Line chart](https://beamline.io/components/line-chart.md): in 1 of these screens
- [Market heatmap](https://beamline.io/components/market-heatmap.md): in 1 of these screens

Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

Next: [SaaS admin](https://beamline.io/components/apps/saas-admin.md) · [All apps](https://beamline.io/components/apps.md)

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).