@protolabsai/ui-css

The protoLabs.studio component stylesheet — every .pl-* class from @protolabsai/ui, with no React runtime.

Pairs with @protolabsai/design for the --pl-* tokens the classes read. Those two packages are the whole CSS story:

| package | ships | | ---------------------- | ------------------------------------------------ | | @protolabsai/design | the --pl-* tokens + the element base layer | | @protolabsai/ui-css | the .pl-* component classes (this package) | | @protolabsai/ui | the React components that render those classes |

Use

For a project that does not render the React components — an Astro or Eleventy site, a server-rendered template, a plain HTML page built with a bundler:

@import "@protolabsai/design/css"; /* tokens + base layer */
@import "@protolabsai/ui-css"; /* component classes */

That installs two packages and zero React.

If you do use the React components, you don't need this package in your manifest — import "@protolabsai/ui/styles.css" forwards here, and @protolabsai/ui depends on it. Both paths load byte-identical CSS.

Why it's a separate package

@protolabsai/ui declares react/react-dom as peer dependencies and carries 15 runtime dependencies (Radix, dnd-kit, framer-motion, streamdown, …). npm 7+ auto-installs peers, so a project importing the library only for its stylesheet still got React, react-dom, scheduler and all 15 in its tree — and protoAgent's React-free marketing site broke on npm ci because of it (protoContent#495, protoAgent#2875). Splitting the CSS out removes the coupling at the root rather than trimming it.

react-free.test.mjs guards the invariant: this package's dependency closure must stay React-free, and @protolabsai/design at the floor of it must stay dependency-free.

Versioning

@protolabsai/ui-css and @protolabsai/ui are a fixed changesets group — they always publish the same version, so a component change and the CSS it needs never ship under versions you have to cross-reference. It starts at 0.59.2 to match the @protolabsai/ui it was split out of.

Partials

styles.css is an @import barrel over styles/*.css, one file per component domain. Order matters: touch.css is last on purpose — the touch floor overrides component defaults through source order rather than !important.