React UI

Ferdig UI for selskaps- og ticker-data.

Forhåndskoblede React-komponenter for visningene du bygger om hver gang - selskapsprofiler, flerårige regnskap, eierdata, peer-sammenligning, prising for noterte selskaper og en strømmende chat. Typede props, ditt tema, dine data. Fungerer med React 18 og 19. 

$ npm install @regna-verkt/ui
Test live-demoen → Åpne Storybook Vis på npm
Hurtigstart

Monter en komponent, send inn din publishable-nøkkel.

Datawidgets henter sine egne data - send inn publishableKey og companyId, så ordner de resten. Hent en nøkkel fra dashbordet; rk_public_*-nøkler er trygge i nettleseren og bundet til din domene-allowlist på serveren. 

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

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

Spør dataene på naturlig språk.

<ChatBot />

Innebygd chat-panel

Fullt samtale-UI med strømmede svar, synlige verktøykall og typed meldingshistorikk. Kobles til /v1/chat via din publishable-nøkkel (eller en 15-minutters sesjons-token, se Integrasjonsmoduser nedenfor).

<ChatBot publishableKey={key} initialPrompt="Spør om noe..." />
<FloatingChatBot />

Flytende chat-boble

Boble nederst til høyre som folder seg ut til chat-panel. Passer til support-bruk uten å ta opp plass permanent.

<FloatingChatBot publishableKey={key} defaultOpen={false} />
Selskaps-widgets

Selvforsynte visninger - send en nøkkel og et selskap.

<CompanyCard />

Kompakt selskapssammendrag - navn, orgnr, bransje og nøkkeltall.

<FinancialsTable />

Flerårig regnskapstabell - omsetning, driftsresultat, egenkapital og endring år for år.

<OwnershipChart />

Eierdiagram og topp-N-liste, sammenstilt fra filings.

<NewsFeed />

Kronologiske pressemeldinger og hendelser, dedupet på tvers av kilder.

<HealthScore />

Likviditets- og soliditetsvurdering med trendpil.

<CompanyValuation />

Peer-basket EV/Omsetning med metode og konfidens.

<SimilarCompanies />

Sammenlignbare selskaper etter NACE-kode, størrelse og region. Klikk til profil.

Diagrammer og sammenstillinger

Send inn dine egne data, få diagrammet.

Render finansielle visualiseringer fra typede data-props - nyttig når du allerede har dataene i scope (egen dataflyt, en server-komponent, en custom-hook) og bare vil ha det polerte diagrammet.

<CompanyOverview />

Header-kort med navn, status-badge, sektor og nøkkeltall.

<FinancialSummary />

Kompakt KPI-rutenett for omsetning, resultat, egenkapital og ansatte.

<FinancialChart />

Linjediagram over valgte års- eller kvartalsmål med innebygd toggle.

<FinancialAreaChart />

Stablet eller overlappende arealdiagram for flere mål samtidig.

<BalanceSheet />

Visualisering av eiendeler og gjeld med delsummer.

<WaterfallChart />

Resultatflyt - fra omsetning ned til nettoresultat.

<FinancialRadarChart />

Flerdimensjonal peer-sammenligning normalisert til 0-100.

<PeerComparison />

Sorterbar peer-tabell med target-markering og rank-badges.

<ChangeFeed />

Diff-stil strøm av registerendringer med feltnivå-granularitet.

<BudgetVsActuals />

Side-ved-side budsjettoppfølging med variansheving.

<PricingSimulator />

Interaktiv tenk-deg-kalkulator for omsetning- og marginscenarier.

<InactiveTombstone />

Ferdig plassholder når en tenants abonnement er pauset.

Noterte selskaper

For børsnoterte utstedere.

Et eget sett komponenter for noterte utstedere på Oslo Børs, Nasdaq Stockholm og US-børser - kurs, ordredybde, nøkkeltall og selskapshendelser hentet fra ESMA FIRDS, SEC EDGAR og børsfilings.

<PriceHero />

Overskriftskursrute med dagens endring, åpning, høyeste, laveste og volum.

<PriceChart />

Linjediagram med tidsintervall - 1d, 1u, 3m, 1å, 5å, maks.

<CandlestickChart />

OHLC-candlesticks med volumoverlegg og valgbart tidsintervall.

<KeyStats />

Markedsverdi, P/E, P/B, direkteavkastning, beta og 52-ukers intervall.

<OrderBook />

Live kjøps- og salgsstige med dybde og spread.

<RecentTrades />

Tidsordnet liste over utførte handler med kjøps- og salgs-tagger.

<EventsCalendar />

Kommende og tidligere selskapshendelser - rapport, utbytte, generalforsamling og split.

Integrasjonsmoduser

Tre måter å holde nøkler ute av bundlen din.

Publishable-nøkkel

Standard for nettleseren

Send inn en rk_public_*-nøkkel direkte. Domene-bundet på serveren, så hvis den lekker utenfor din origin brenner den ingen kvote.

Sesjons-token

For ChatBot-kall

Veksle din secret-nøkkel server-side mot en 15-minutters scopet JWT. Brukes av <ChatBot /> når strengere kall-scoping kreves.

Proxy-modus

Backend-rutet trafikk

Sett <RegnaProvider proxyBaseUrl /> og rut via din egen server. Proxyen injiserer din secret. Referanseimplementasjoner for Cloudflare Workers, Vercel Edge og Node - mail support.

Ressurser

Live-demo, props-lekeplass, npm.

Live-demo

Hver komponent rendret mot ekte data.
Storybook

Props, varianter og kopierbar kode.
npm

@regna-verkt/ui i registeret.
API-docs

Den underliggende REST-flaten komponentene kaller.

Klar til å levere?

MIT-lisensiert. Hent en publishable-nøkkel fra dashbordet, så er du i gang på fem minutter.

Start prøveperiode → Se priser