A developer reference for small, opt-in CSS

Status and support boundary

The public source and design system are live. Release candidate prepared; the package is not currently published and is not currently available from the npm registry. Do not use npm install @tekgadgt/neobrui as a current setup command.

Choose your entry

Entry	Use when	Import
Aggregate	You want every public module in a small consumer	import '@tekgadgt/neobrui' or @import '@tekgadgt/neobrui';
Selected modules	You want explicit CSS ownership and a smaller cascade	@import '@tekgadgt/neobrui/foundations.css'; then selected modules

The @tekgadgt/neobrui package exports its aggregate entry, foundations.css, layout.css, primitives.css, utilities.css, and package.json. CSS order is foundations, layout, primitives, utilities; the aggregate index preserves that order. The package declares CSS sideEffects, so bundlers must retain CSS imports.

Current reproducible source installation

Use a reviewed Git ref (replace the placeholder; pin a commit or reviewed tag in your lockfile):

pnpm add 'github:TekGadgt/neobrui#<commit-or-tag>'
npm install 'github:TekGadgt/neobrui#<commit-or-tag>'

For Ryan’s monorepo projects, a workspace dependency is local-only:

{ "dependencies": { "@tekgadgt/neobrui": "workspace:*" } }

A non-monorepo local path is also local-only, for example pnpm add ../neobrui (commit the resulting lockfile and path policy only when that is intentional). Git refs and lockfiles make builds reproducible; a moving branch does not. Registry installation is documented only after publication below; the candidate is not yet available.

After publication

npm install @tekgadgt/neobrui@next

Imports

/* app.css: explicit order */
@import '@tekgadgt/neobrui/foundations.css';
@import '@tekgadgt/neobrui/layout.css';
@import '@tekgadgt/neobrui/primitives.css';
@import '@tekgadgt/neobrui/utilities.css';

// CSS bundler entry; the import is intentionally side-effectful.
import '@tekgadgt/neobrui';
// Or select a module:
import '@tekgadgt/neobrui/layout.css';

Minimal runnable native HTML

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Neobrui example</title><link rel="stylesheet" href="app.css"></head>
<body>
  <main class="nbr-wrapper nbr-stack">
    <h1>Review queue</h1>
    <p class="nbr-surface" data-nbr-level="outlined">Native content remains the contract.</p>
    <div class="nbr-cluster">
      <button class="nbr-pressable" type="button">Approve</button>
      <a class="nbr-pressable" href="/help">Read the guide</a>
    </div>
  </main>
</body>
</html>

Neobrui has no reset, bare-element rules, runtime JavaScript, or required framework. Add classes explicitly; keep headings, labels, button behavior, focus, and application state in the native/product layer. The browser contract is modern CSS with logical properties, custom properties, :focus-visible, media queries, and system colors; test the engines your product supports.

A product theme is a scope

Core values are neutral fallbacks. Set roles on a product ancestor or one instance, never by editing the package:

[data-product="coral-ledger"] {
  color-scheme: light dark;
  --nbr-color-canvas: light-dark(#fff8ee, #1d1712);
  --nbr-color-text: light-dark(#201814, #fff8ee);
  --nbr-color-border: light-dark(#201814, #f0d8bd);
  --nbr-color-action: light-dark(#e85d3f, #ff967c);
  --nbr-color-on-action: light-dark(#201814, #201814);
  --nbr-color-shadow: light-dark(#201814, #f0d8bd);
}

Removal and next references

Remove the CSS import, Neobrui classes, and product token scope. Native semantics and application behavior remain; re-add any product declarations you intentionally delegated. Continue with Principles, Foundations, Layout, Primitives, Patterns, and Adoption.