One dataset, one .base file, many views.

Copy it in, pinned

shadcn/ui copies a component's source into your app, and from then on you own it and edit it. data-ui copies the built kit instead: dist/ goes into your static folder whole, with manifest.json listing every file's sha256, and you never edit it there. To update, re-copy. You change data-ui from the outside: tokens for its look, .base files for its views, registerView() for a view of your own.

Why not the shadcn way? Copies that apps edited are how Clank's views froze, one fork per app. A pinned copy is one version everywhere, and still nothing loads from a CDN. From a bundler, the same files are a pinned package: import 'data-ui', 'data-ui/kpi'.

npm --prefix ~/data-ui run build
cp -r ~/data-ui/dist/{data-ui.js,data-ui.css,views,LICENSES.md,manifest.json} static/vendor/data-ui/

Two tags, one file

<link rel="stylesheet" href="/static/vendor/data-ui/data-ui.css">
<script type="module" src="/static/vendor/data-ui/data-ui.js"></script>

<data-facets for="parts"></data-facets>
<data-views id="parts" src="/data/actuators.base"></data-views>

Only the core loads up front; each view's code loads the first time it shows. <data-kpi> and <data-sparkline> work on their own with views/kpi.js (a plain page).

A .base file

data: actuators.json          # JSON rows, CSV, JSONL or a field schema
filters: '!photo.isEmpty()'
views:
  - type: table
    name: Table
    order: [model, brand, peak_torque, mass]
    sort:
      - { property: peak_torque, direction: DESC }
  - type: chart                  # inside chart: it is Vega-Lite
    name: Chart
    chart:
      encoding:                  # no mark: Show Me picks one
        x: { field: mass, scale: { type: log } }
        y: { field: peak_torque }

Tokens, or nothing

Every colour, radius and font is a --data-* token that falls back to shadcn's variable, so a shadcn app maps nothing. Anything else maps one block, light and dark:

:root {
  --data-bg: var(--bg);       --data-fg: var(--ink);
  --data-muted: var(--ink2);  --data-border: var(--rule);
  --data-accent: var(--accent);
  --data-font: var(--sans);   --data-radius: 6px;
}