Getting started
Installation
Install the adapter for your framework, the grounds stylesheet, and (optionally) the typeface. A bundler is required: Vite, Next.js or the Angular CLI.
Requirements
| Framework | Package | Peers | Integration |
|---|---|---|---|
| React | @silverpoint/react | react and react-dom 18.2+ or 19; @knight-lab/timelinejs ^3.9.13 (optional, for SpTimeline) | Vite and Next.js (App Router, React Server Components) are validated. |
| Vue | @silverpoint/vue | vue ^3.5.0; @knight-lab/timelinejs ^3.9.13 (optional, for SpTimeline) | Vite is validated; SSR is verified with @vue/server-renderer. Nuxt works but is not a validated integration. |
| Angular | @silverpoint/angular | @angular/core, @angular/common and @angular/forms >=21 <23; @knight-lab/timelinejs ^3.9.13 (optional) | The Angular CLI (@angular/build, on Vite) is validated, including @angular/ssr. |
| Reflex (Python) | reflex-silverpoint-react | reflex >= 0.10.0 (React 19), Python 3.11+ | A Reflex custom component wrapping @silverpoint/react 0.8; Reflex installs the npm side for you. Every chart, UI component, composed component, overlay and the timeline is the npm component, with a snake_case Python API. |
Install
Pick your framework; the choice is remembered on every page of the site.
npm install @silverpoint/react @silverpoint/grounds @silverpoint/fontsnpm install @silverpoint/vue @silverpoint/grounds @silverpoint/fontsnpm install @silverpoint/angular @silverpoint/grounds @silverpoint/fontspip install reflex-silverpoint-react| Package | Why |
|---|---|
@silverpoint/<adapter> | The components. Brings @silverpoint/core with it. |
@silverpoint/grounds | The stylesheet (styles.css) that colours the strokes. Required. Its ui.css styles the UI components, opt-in. |
@silverpoint/fonts | Optional. Self-hosted EB Garamond, the typeface the charts are designed for. |
Import the stylesheets once
Import the two stylesheets once, at the root of the app: in main.tsx / main.ts or the root component for React and Vue, in src/styles.css for Angular. The packages declare sideEffects: false except for .css, so no bundler drops the import.
// React / Vue
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css'; // only if you use the UI components
import '@knight-lab/timelinejs/dist/css/timeline.css'; // only with SpTimeline (0.7)…
import '@silverpoint/grounds/timeline.css'; // …and after TimelineJS's own
/* Angular: src/styles.css */
@import '@silverpoint/fonts/fonts.css';
@import '@silverpoint/grounds/styles.css';
@import '@silverpoint/grounds/ui.css'; /* only if you use the UI components */
@import '@knight-lab/timelinejs/dist/css/timeline.css'; /* only with SpTimeline */
@import '@silverpoint/grounds/timeline.css';Tip
In Reflex there is nothing to import:
reflex-silverpoint-react installs the npm packages and adds the stylesheets for you, ui.css included.No CDN, no Tailwind
silverpoint is distributed as ES modules for bundlers. It needs no CDN and no Tailwind; the optional Tailwind preset only names its variables for the rest of your page.