React UI

Drop-in UI for company and ticker data.

Pre-wired React components for the views you keep rebuilding - company profiles, multi-year financials, ownership, peer comparison, listed-issuer pricing, and a streaming conversational chat. Typed props, your theme, your data. Works with React 18 and 19. 

$ npm install @regna-verkt/ui
Try the live demo → Open Storybook View on npm
Quick start

Mount a component, pass your publishable key.

Customer-facing data widgets fetch their own data - pass publishableKey and companyId and they handle the rest. Get a key from the dashboard; rk_public_* keys are browser-safe and bound to your domain allowlist on the server. 

// app.tsx
import { CompanyCard, FinancialsTable } from '@regna-verkt/ui'
import '@regna-verkt/ui/theme.css'

export function App() {
  return (
    <>
      <CompanyCard publishableKey="rk_public_..." companyId="5591234567" />
      <FinancialsTable publishableKey="rk_public_..." companyId="5591234567" />
    </>
  )
}
Conversational

Ask the data in natural language.

<ChatBot />

Inline chat panel

Full conversation UI with streaming responses, visible tool calls, and typed message history. Connects to /v1/chat via your publishable key (or a 15-min session token, see Integration modes below).

<ChatBot publishableKey={key} initialPrompt="Ask something..." />
<FloatingChatBot />

Floating chat bubble

Bottom-right floating bubble that expands to a chat panel. Ideal for support-style deployment without committing screen real estate.

<FloatingChatBot publishableKey={key} defaultOpen={false} />
Company data widgets

Self-contained views - pass a key and a company.

<CompanyCard />

Compact company summary - name, org number, industry, key metrics.

<FinancialsTable />

Multi-year financials table - revenue, operating result, equity, year-over-year delta.

<OwnershipChart />

Shareholder pie chart and top-N list, reconciled from filings.

<NewsFeed />

Chronological press releases and corporate events, deduped across sources.

<HealthScore />

Liquidity and solvency score with trend arrow.

<CompanyValuation />

Peer-basket EV/Revenue estimate with method and confidence.

<SimilarCompanies />

Peer suggestions by industry code, size, and region. Click-through to profiles.

Charts and summaries

Bring your own data, get the chart.

Render financial visualisations from typed data props - useful when you already have data in scope (your own data flow, a server component, a custom hook) and just want the polished chart.

<CompanyOverview />

Header card with name, status badge, sector, and key metrics.

<FinancialSummary />

Compact KPI tile grid for revenue, profit, equity, and employees.

<FinancialChart />

Line chart of selected annual or quarterly metrics with built-in toggle.

<FinancialAreaChart />

Stacked or overlapping area chart for multi-metric trends.

<BalanceSheet />

Assets-and-liabilities visualisation with sub-totals.

<WaterfallChart />

Profit-and-loss waterfall - revenue down to net income.

<FinancialRadarChart />

Multi-dimension peer comparison normalised to 0-100.

<PeerComparison />

Sortable peer table with target highlighting and rank badges.

<ChangeFeed />

Diff-style stream of registry edits, with field-level granularity.

<BudgetVsActuals />

Side-by-side budget tracker with variance highlighting.

<PricingSimulator />

Interactive what-if calculator for revenue and margin scenarios.

<InactiveTombstone />

Drop-in placeholder when a tenant subscription is paused.

Listed companies

For exchange-listed issuers.

A separate set of components for the ~600 listed Swedish issuers - pricing, order book, key statistics, and corporate events sourced from the ESMA FIRDS feed and FI Finanscentralen filings.

<PriceHero />

Headline price tile with intraday change, open, high, low, and volume.

<PriceChart />

Multi-range price line chart - 1d, 1w, 3m, 1y, 5y, max.

<CandlestickChart />

OHLC candles with volume overlay and selectable timeframe.

<KeyStats />

Market cap, P/E, P/B, dividend yield, beta, 52-week range.

<OrderBook />

Live bid and ask ladder with depth and spread.

<RecentTrades />

Time-ordered tape of executed trades with buyer and seller tags.

<EventsCalendar />

Upcoming and past corporate events - earnings, dividends, AGM, splits.

Integration modes

Three ways to keep keys out of your bundle.

Publishable key

Default for the browser

Pass an rk_public_* key directly. Domain-bound on the server, so leaking it off your origin doesn't burn quota.

Session token

For ChatBot calls

Exchange your secret key server-side for a 15-min scoped JWT. Used by <ChatBot /> when stricter request scoping is needed.

Proxy mode

Backend-routed traffic

Set <RegnaProvider proxyBaseUrl /> and route through your own server. Your proxy injects the secret. Reference impls for Cloudflare Workers, Vercel Edge, and Node - email support.

Resources

Live demo, props playground, npm.

Live demo

Every component rendered against real data.
Storybook

Props, variants, copy-pasteable code.
npm

@regna-verkt/ui on the registry.
API docs

The underlying REST surface the components call.

Ready to ship?

MIT-licensed. Get a publishable key from the dashboard and you're rendering data in five minutes.

Start your trial → See pricing