Funding countdown

A React component in Beamline's Trading category.

Perpetual funding rate with who pays, and a live countdown ring to the next funding.

Use it for

  • Perpetual futures headers.

Not for

Anatomy

  • label
  • rate (+ who pays)
  • ring
  • hh:mm:ss

Variants

  • ring: on, off

States

  • positive
  • negative
  • unpublished

Keyboard

  • Read-only; role=timer.

Motion

Ring empties continuously; digits tick each second, only while on screen in a visible tab and before the funding time (then it holds 00:00:00).

Props

PropTypeDefaultDescription
rate (required)number | null—
nextAt (required)number (ms epoch)—
intervalHoursnumber8
style / refCSSProperties / native Ref—native HTMLDivElement
classNamesFundingCountdownClassNames—

Import

import { FundingCountdown } from "@/components/funding-countdown/funding-countdown";

Get it

Funding countdown is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent

More in Trading

  • Depth chart: Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
  • Market heatmap: Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
  • Order book: Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
  • Order ticket: Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
  • Positions table: Open positions with live unrealised PnL, liquidation warnings and close actions.
  • Price chart: Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
  • Price ticker: Symbol, last price with a directional flash, 24h change and stats.
  • Ticker tape: A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
  • Trades tape: Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
  • Watchlist: A selectable, sortable list of markets with mini trends, prices, changes and stars.