@stridge/noctis

The Stridge design system, and the single package consumers install. It pairs Base UI behavior with precompiled, framework-neutral component CSS on the semantic token layer, and ships the authoring substrate every primitive builds on — the polymorphic Primitive base, the Surface elevation primitive, render utilities, Icon, and the unified NoctisProvider (CSP + theme + locale/direction). It re-exports the design tokens, theme engine, and i18n through subpaths so apps depend on one package.

Styling

Components are styled by hand-authored, per-component .css under @layer noctis.components, keyed off data-slot — no styling framework required. Import the one stylesheet:

// app CSS entry
@import "@stridge/noctis/styles.css";

Authoring with Tailwind is optional. Tailwind users additionally import the utility bridge and pull class helpers from the adapter subpath:

@import "@stridge/noctis/tailwind.css"; // mints bg-background-style utilities

import { cn, tv } from "@stridge/noctis/tailwind";
import { Primitive } from "@stridge/noctis";

Usage

import { NoctisProvider } from "@stridge/noctis"; // foundation lives on the root barrel
import { Button } from "@stridge/noctis/button"; // each styled component ships from its own subpath
import { Dialog } from "@stridge/noctis/dialog";

<NoctisProvider>
  <Button>Save</Button>
</NoctisProvider>;

The root barrel is the foundation only (NoctisProvider, Primitive, Surface, Icon, the render/copy/motion utilities, ThemeScope + its preset maps, VisuallyHidden, UI_PACKAGE). Every styled component imports from its own deep path, @stridge/noctis/<component> — explicit imports, tree-shaking by default.

Subpaths

• @stridge/noctis — the foundation barrel (NoctisProvider, Primitive, Surface, Icon, render/copy/motion utilities, ThemeScope + its RADIUS_PRESETS/DENSITY_PRESETS/FONT_SCALE_PRESETS, VisuallyHidden, UI_PACKAGE). Foundation only — no styled components.
• @stridge/noctis/<component> — each styled component's own subpath (@stridge/noctis/button, @stridge/noctis/dialog, …); Surface and Icon are also reachable here. The exports map is generated by pnpm --filter @stridge/noctis exports:gen (freshness-checked in CI).
• @stridge/noctis/props — RSC-safe *Props() escape-hatch builders (no "use client" boundary).
• @stridge/noctis/styles.css — the precompiled component stylesheet.
• @stridge/noctis/tailwind.css — the optional Tailwind utility bridge.
• @stridge/noctis/tailwind — the optional Tailwind adapter (cn, tv).
• @stridge/noctis/tokens (+ /react) — re-exported @stridge/noctis-design-tokens.
• @stridge/noctis/theme (+ /react) — re-exported @stridge/noctis-theme-engine.
• @stridge/noctis/i18n (+ /messages) — re-exported @stridge/noctis-intl + the default catalog.
• @stridge/noctis/primitives/<name> — the generated per-name Base UI primitive re-exports (no aggregate barrel).

Working with an agent

The full documentation ships inside the package, generated from this exact version — so it describes the installed code rather than whatever is on main, and needs no network:

• AGENTS.md — the rules for consuming the system (imports, tokens, slots, composition).
• agent/llms.txt — the index; agent/catalog.json the same thing machine-readable (import path, exports, parts, variants, slots, component tokens, example names for all 55 components).
• agent/components/<name>.md, agent/foundations/<name>.md — the full reference pages.
• dist/components/<name>/<name>.css — each component's own stylesheet, as readable reference. styles.css stays the only import target.

npx noctis rules            # print AGENTS.md
npx noctis catalog button   # one component's machine-readable entry
npx noctis docs dialog      # one component's full page
npx noctis agents init      # install a Noctis skill into .claude/skills/

Enforce the same rules in your own code with the published lint plugin:

// .oxlintrc.json — the `consumer` set, spelled out (JSON cannot import the exported map).
{
    "jsPlugins": ["@stridge/noctis-lint"],
    "rules": {
        "stridge/semantic-tokens": "error",
        "stridge/no-hardcoded-strings": "error",
        "stridge/logical-utilities": "error"
    }
}

Build & checks

build runs tsdown, then scripts/bundle-css.mjs (the two stylesheets plus the per-component reference copies), then scripts/bundle-agent.mjs (the agent/ documentation pack, assembled from the committed docs data). check:publish runs publint + size-limit. Component CSS is governed by stylelint.

The component authoring contract lives in COMPONENTS.md, the slot catalog in SLOTS.md, and the repo-wide rules in /AGENTS.md.