@regna-verkt/ui

Embeddable React widgets for Regna Cap — financial data, ownership records, and news for Swedish companies, served as a single API and a drop-in React component library.

v0.x — pre-stable. Pin tightly. Minor bumps may include breaking changes until v1.0.

Installation

npm install @regna-verkt/ui

Peer dependencies: react ^18 || ^19, react-dom ^18 || ^19.

Quick start

The customer-facing data widgets (CompanyCard, FinancialsTable, NewsFeed, OwnershipChart, HealthScore, CompanyValuation, SimilarCompanies, ChatBot, FloatingChatBot) take publishableKey + companyId directly:

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

export function App() {
  const publishableKey = 'rk_public_...' // from regnaverkt.com/dashboard/keys/
  return (
    <>
      <CompanyCard publishableKey={publishableKey} companyId="5591234567" />
      <FinancialsTable publishableKey={publishableKey} companyId="5591234567" />
    </>
  )
}

The chart / financial-summary components (CompanyOverview, FinancialChart, etc.) compose with <RegnaProvider> for shared theme / tier / render-mode, then take typed data props directly:

import { RegnaProvider, FinancialChart, type AnnualFinancials } from '@regna-verkt/ui'
import '@regna-verkt/ui/theme.css'

export function App({ data }: { data: AnnualFinancials[] }) {
  return (
    <RegnaProvider publishableKey="rk_public_..." theme="light">
      <FinancialChart data={data} />
    </RegnaProvider>
  )
}

Get a publishable key from the Regna dashboard. Publishable keys (rk_public_*) are browser-safe — they're bound to a domain allowlist on the server, so leaking them off your domain doesn't burn quota.

Documentation

• Live demo — demo.regnaverkt.com — every component rendered against real data
• Storybook — storybook.regnaverkt.com — props, variants, copy-pasteable code
• API docs — regnaverkt.com/api/docs/ — the underlying REST surface

What's in the package

| Surface | What it is | Import | |---------|-----------|--------| | React widgets | CompanyCard, FinancialsTable, NewsFeed, OwnershipChart, HealthScore, CompanyValuation, SimilarCompanies, ChatBot, FloatingChatBot | import { CompanyCard } from '@regna-verkt/ui' | | Charts & summaries | CompanyOverview, FinancialSummary, FinancialChart, BalanceSheet, PeerComparison, ChangeFeed, PriceHero, OrderBook, KeyStats, EventsCalendar, RecentTrades, PriceChart, CandlestickChart, FinancialAreaChart, WaterfallChart, FinancialRadarChart, BudgetVsActuals, PricingSimulator, InactiveTombstone | import { FinancialChart } from '@regna-verkt/ui' | | Provider | RegnaProvider, useRegnaContext, useRegnaClient, useRegnaRenderMode | import { RegnaProvider } from '@regna-verkt/ui' | | Hooks | useCompany, useFinancials, useChangelog, usePeers | import { useCompany } from '@regna-verkt/ui' | | Theme | Single global stylesheet | import '@regna-verkt/ui/theme.css' | | i18n | Swedish, English, Norwegian | import { LocaleProvider } from '@regna-verkt/ui' | | Key guards | Client-side rk_public_* / rk_secret_* enforcement | import { detectKeyKind, assertClientSafeKey } from '@regna-verkt/ui' |

The data widgets accept a locale prop directly (locale="sv" etc.). Chart components read locale from <RegnaProvider> context — wrapping data widgets in <LocaleProvider> has no effect; pass them locale instead.

Integration modes

Three ways to keep keys out of your browser bundle:

1. Publishable key (default) — rk_public_* with a domain allowlist; safe to ship in JS.
2. Session token — exchange an rk_secret_* for a 15-min scoped JWT (for the <ChatBot /> endpoint).
3. Proxy mode — <RegnaProvider proxyBaseUrl={...}> routes calls through a customer-owned proxy that injects the secret server-side.

For proxy reference implementations (Cloudflare Workers, Vercel Edge, Node/Express) and a deeper comparison of the three modes, email [email protected].

TypeScript

Types ship with the package — no @types/* install required.

Non-React hosts

@regna-verkt/ui is React-only. To embed in a non-React page, mount a small React island:

import { createRoot } from 'react-dom/client'
import { CompanyCard } from '@regna-verkt/ui'
import '@regna-verkt/ui/theme.css'

createRoot(document.querySelector('#regna-card')!).render(
  <CompanyCard publishableKey="rk_public_..." companyId="5591234567" />
)

Migrating from @regna-verkt/widgets or @regna-verkt/elements

Swap the package name to @regna-verkt/ui; previous exports are available under the same names. For the full diff, email [email protected].

Support

Email [email protected] for bug reports, feature requests, integration help, and security disclosures.

License

MIT — see LICENSE.