React UI

Färdigt UI för bolags- och ticker-data.

Förinkopplade React-komponenter för vyerna du bygger om varje gång - bolagsprofiler, fleråriga räkenskaper, ägardata, peer-jämförelse, prissättning för noterade bolag och en strömmande chatt. Typade props, ditt tema, din data. Fungerar med React 18 och 19. 

$ npm install @regna-verkt/ui
Testa live-demon → Öppna Storybook Visa på npm
Snabbstart

Montera en komponent, skicka in din publishable-nyckel.

Datawidgets hämtar sin egen data - skicka in publishableKey och companyId så sköter de resten. Hämta en nyckel från dashboarden; rk_public_*-nycklar är browser-säkra och bundna till din domän-allowlist på servern. 

// 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" />
    </>
  )
}
Konversation

Fråga datan på naturligt språk.

<ChatBot />

Inbäddad chattpanel

Fullt samtals-UI med strömmade svar, synliga verktygsanrop och typad meddelandehistorik. Ansluter till /v1/chat via din publishable-nyckel (eller en 15-minuters session-token, se Integrationslägen nedan).

<ChatBot publishableKey={key} initialPrompt="Fråga något..." />
<FloatingChatBot />

Flytande chatt-bubbla

Bubbla i nedre högra hörnet som fälls ut till chattpanel. Passar för support-lik användning utan att ta upp yta permanent.

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

Självförsörjande vyer - skicka en nyckel och ett bolag.

<CompanyCard />

Kompakt bolagssammanfattning - namn, orgnr, bransch och nyckeltal.

<FinancialsTable />

Flerårig räkenskapstabell - omsättning, rörelseresultat, eget kapital och förändring år för år.

<OwnershipChart />

Ägardiagram och topp-N-lista, sammanställt från filings.

<NewsFeed />

Kronologiska pressmeddelanden och händelser, dedupad över källor.

<HealthScore />

Likviditets- och soliditetsbedömning med trendpil.

<CompanyValuation />

Peer-basket EV/Omsättning med metod och konfidens.

<SimilarCompanies />

Jämförbara bolag efter SNI-kod, storlek och region. Klick till profil.

Diagram och sammanställningar

Skicka in din egen data, få diagrammet.

Rendera finansiella visualiseringar från typade data-props - användbart när du redan har data i scope (eget dataflöde, en server-komponent, en custom-hook) och bara vill ha det polerade diagrammet.

<CompanyOverview />

Header-kort med namn, status-badge, sektor och nyckeltal.

<FinancialSummary />

Kompakt KPI-rutnät för omsättning, resultat, eget kapital och anställda.

<FinancialChart />

Linjediagram över valda års- eller kvartalsmått med inbyggd toggle.

<FinancialAreaChart />

Staplat eller överlappande areadiagram för flera mått samtidigt.

<BalanceSheet />

Visualisering av tillgångar och skulder med delsummor.

<WaterfallChart />

Resultatflöde - från omsättning ner till nettoresultat.

<FinancialRadarChart />

Flerdimensionell peer-jämförelse normaliserad till 0-100.

<PeerComparison />

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

<ChangeFeed />

Diff-style ström av registerändringar med fältnivå-granularitet.

<BudgetVsActuals />

Sida-vid-sida budgetuppföljning med varianshöjning.

<PricingSimulator />

Interaktiv tänkbar-räknare för omsättning- och marginalscenarier.

<InactiveTombstone />

Färdig platsfyllare när en tenants prenumeration är pausad.

Noterade bolag

För börsnoterade emittenter.

En separat uppsättning komponenter för de ~600 noterade svenska emittenterna - pris, orderdjup, nyckeltal och bolagshändelser hämtade från ESMA FIRDS och FI Finanscentralens filings.

<PriceHero />

Rubrikkursruta med dagens förändring, öppning, högsta, lägsta och volym.

<PriceChart />

Linjediagram med tidsintervall - 1d, 1v, 3m, 1å, 5å, max.

<CandlestickChart />

OHLC-candlesticks med volymöverlägg och valbart tidsintervall.

<KeyStats />

Börsvärde, P/E, P/B, direktavkastning, beta och 52-veckors-intervall.

<OrderBook />

Live köp- och säljstege med djup och spread.

<RecentTrades />

Tidsordnad lista över utförda avslut med köp- och sälj-taggar.

<EventsCalendar />

Kommande och tidigare bolagshändelser - rapport, utdelning, stämma och split.

Integrationslägen

Tre sätt att hålla nycklar utanför din bundle.

Publishable-nyckel

Standard för webbläsaren

Skicka in en rk_public_*-nyckel direkt. Domän-bunden på servern, så om den läcker utanför din origin bränner den ingen kvot.

Session-token

För ChatBot-anrop

Växla din secret-nyckel server-side mot en 15-minuters scopad JWT. Används av <ChatBot /> när striktare anrops-scoping krävs.

Proxy-läge

Backend-routad trafik

Sätt <RegnaProvider proxyBaseUrl /> och routa via din egen server. Proxyn injicerar din secret. Referensimplementationer för Cloudflare Workers, Vercel Edge och Node - mejla support.

Resurser

Live-demo, props-spelplats, npm.

Live-demo

Varje komponent renderad mot riktig data.
Storybook

Props, varianter och kopierbar kod.
npm

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

Den underliggande REST-ytan komponenterna kallar.

Redo att leverera?

MIT-licensierat. Hämta en publishable-nyckel från dashboarden så är du igång på fem minuter.

Starta provperiod → Se priser