/// getting-started

Templates

Two minimal, runnable starter apps preconfigured with @protocore/pds — the stylesheet, fonts, theming, and a composed dashboard already wired. Clone one, run npm install && npm run dev, and you are looking at AppShell, DataTable, StatCards and an AreaChart rendering real data. Then delete the sample page and build.

Pick a starter

Both install @protocore/pds from npm (not a workspace link), so they run stand-alone anywhere — locally, in CI, or in a browser tab via StackBlitz. Each ships the same dashboard so the only difference is the build tool.

Template	Stack	Reach for it when
`next-starter`	Next.js 15 · App Router · React 19	You want SSR/SSG, file-based routing, and `next/font` self-hosting.
`vite-starter`	Vite 6 · React 19	You want a lean client-rendered SPA and the fastest dev server.

Next.js starter

A Next.js App Router app. app/layout.tsx is the five-minute PDS setup from the Installation guide — it imports @protocore/pds/styles.css once, self-hosts Roboto + Roboto Mono with next/font, and stamps the theme attributes on <html>. app/page.tsx is the dashboard.

/// ACMELive · Next.js

Open in StackBlitz

terminal

# clone just this repo and run the Next.js starter
git clone https://github.com/Protocore-io/pds.git
cd pds/templates/next-starter
npm install
npm run dev
# → http://localhost:3000

Vite starter

A Vite + React SPA. index.html stamps the theme attributes and loads the two fonts; src/main.tsx imports the stylesheet and mounts the app; src/App.tsx is the dashboard. No framework, no server — just the design system and a fast dev server.

/// ACMELive · Vite

Open in StackBlitz

terminal

# clone just this repo and run the Vite starter
git clone https://github.com/Protocore-io/pds.git
cd pds/templates/vite-starter
npm install
npm run dev
# → http://localhost:5173

What each starter wires

The setup is deliberately tiny — a handful of files you can read in a minute:

The stylesheet — @protocore/pds/styles.css imported once, as high in the app as possible, before any app CSS.
The fonts — Roboto + Roboto Mono, mapped onto the --font-roboto / --font-roboto-mono variables the token layer reads (next/font in Next, a font <link> in Vite).
The theme — data-theme / data-accent / data-density on <html>, which theme the whole tree with no provider.
A composed page — AppShell framing a TopBar, Sidebar, a Grid of StatCards with a Sparkline and MetricDelta, an AreaChart from the @protocore/pds/charts subpath, and a DataTable.

Charts are opt-in

Both starters install recharts because the dashboard draws a chart. recharts is a peer of the @protocore/pds/charts subpath only — the core entry has no chart dependency, so an app that never charts can drop it.

The StackBlitz link pattern

The “Open in StackBlitz” buttons above point at a stable URL shape you can reuse for any directory in the repo — StackBlitz clones the subtree and runs npm install against its package.json:

url shape

https://stackblitz.com/github/Protocore-io/pds/tree/main/templates/<name>

Because each starter depends on the published @protocore/pds package rather than a workspace link, that install resolves cleanly in the StackBlitz sandbox with no monorepo checkout.

Adding PDS to an existing app

Not starting fresh? The starters are the same four steps applied to a blank app — follow the Installation guide to wire @protocore/pds into an app you already have, then lift the dashboard in app/page.tsx (or src/App.tsx) as a worked example.