Skip to main content

Installation

Prism ships three ways, depending on how much of a build you run: a no-build drop-in, the tokens package (npm), and the component registry (shadcn-style source).

1. Drop-in (no build)​

The fastest path. Link the stylesheet and compiled bundle, then read components off the global namespace.

<link rel="stylesheet" href="/runtime/styles.css" />
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="/runtime/_ds_bundle.js"></script>
<script>
  const { Button } = window.PrismDesignSystem_39d121;
  // render with React as usual
</script>

This is exactly what every live demo on this site does. (Self-host styles.css, _ds_bundle.js and assets/fonts/ from the design-system repo.)

2. Authenticate to GitHub Packages (one-time)​

The npm package and the registry's token dependency are private, published to GitHub Packages under the @artoftechconsulting scope. Before you can npm install them:

  1. Create a token — GitHub → Settings → Developer settings → Personal access tokens (classic) → scope read:packages.

  2. Add an .npmrc (in your project root, or ~/.npmrc):

    @artoftechconsulting:registry=https://npm.pkg.github.com
    //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

    Then export GITHUB_TOKEN=ghp_… (or put the literal token on the second line).

Keep the scope line — it's a security control

The @artoftechconsulting:registry=… line is required, not optional. It pins the entire @artoftechconsulting scope to GitHub Packages. Without it, npm can fall back to public npm for that name — which is the classic dependency-confusion attack vector (someone publishes a malicious @artoftechconsulting/prism-tokens publicly and your install grabs it). Always ship this line in any project — and any CI — that consumes Prism.

3. Tokens in a Tailwind project​

npm install @artoftechconsulting/prism-tokens

The tokens ship as a v3 preset and a v4 theme, so either Tailwind major works:

// tailwind.config.js (Tailwind v3)
module.exports = {
  presets: [require('@artoftechconsulting/prism-tokens/dist/tailwind-v3-preset.cjs')],
};
/* Tailwind v4 */
@import "@artoftechconsulting/prism-tokens/dist/tailwind-v4.css";

Or just pull in the raw CSS variables (no Tailwind):

@import "@artoftechconsulting/prism-tokens";   /* → dist/tokens.css */

Now bg-brand-500, text-accent, the spacing scale and the font roles resolve to Prism values, and the theming attributes (data-signature, data-theme, data-density, data-scale) work.

4. Components via the registry​

The full component library is distributed source-first through a shadcn-style registry — you pull a component (and its dependencies) into your own repo and own the code.

Add the Prism registry to your components.json:

{
  "registries": {
    "@prism": "https://prism.artoftechconsulting.com/registry/{name}.json"
  }
}

Then add components by their namespaced name:

npx shadcn add @prism/button
npx shadcn add @prism/data-grid @prism/dialog @prism/empty-state

shadcn copies the component source into your project and automatically resolves its registry dependencies (e.g. prism-core-css, prism-globals) from the same @prism registry. Because components consume @artoftechconsulting/prism-tokens, make sure step 2 (auth) and step 3 (tokens install) are done first.

Browse available items at /registry/registry.json.

Fonts​

The token layer references the three Prism webfonts (Roboto Flex, Atkinson Hyperlegible Next, Atkinson Hyperlegible Mono). Self-host them from the repo's assets/fonts/ (the demos serve them from /runtime/assets/fonts/) so text renders correctly without a flash of fallback.