@one-data/observable-themes

Modular CSS, React components, and utilities for Observable Framework projects. Maintained by ONE Data.

Full documentation and component preview →

Installation

npm install @one-data/observable-themes

Setup

1. Import the stylesheet in your project's CSS file:

/* src/style.css */
@import "@one-data/observable-themes/styles/index.css";

This brings in typography tokens, font faces (Colfax, Italian Plate No 2), layout styles, and all component styles.

2. Point your config to the stylesheet:

// observablehq.config.js
import { icon } from "@one-data/observable-themes/brand"

export default {
  head: `<link rel="icon" href=${icon} type="image/png" sizes="32x32">`,
  style: "src/style.css",
  // ...
}

3. Import components in your Framework pages using the npm: protocol:

import { Header, KPICards }              from "npm:@one-data/observable-themes/ui"
import { DropdownMenu, SegmentedToggle } from "npm:@one-data/observable-themes/inputs"
import { ONEVisual, AutoPlot }           from "npm:@one-data/observable-themes/charts"
import { ONEColors, ONEPalette }         from "npm:@one-data/observable-themes/colors"
import { formatValue, downloadXLSX }    from "npm:@one-data/observable-themes/utils"

For interactive demos, prop references, and usage examples for every component, visit the documentation site.