@structuralists/scaffolding
v1.11.0
Published
[](https://www.npmjs.com/package/@structuralists/scaffolding) [](https://github.com/struct
Downloads
5,549
Readme
@structuralists/scaffolding
@structuralists/scaffolding is a bundle of react components that can make scaffolding a UI quick and efficient. Unlike component libraries like a material UI, it does not target being used for production grade applications, but instead targets getting "something" up and running, where you don't care what exactly it looks like.
It is not designed to be customized. it's not pluggable. It is not designed to composed into another design system (though it is react, you can write you own components and pass them as children or whatever to your heart's content.)
It is designed to get you something working, and if you then do care what that looks like, build or import a design system and convert to that.
Install
npm install @structuralists/scaffolding
# or: bun add / pnpm add / yarn addPeer deps (you almost certainly already have these): react@^19, react-dom@^19, react-router@^7.
Setup
Import the design tokens once, at your app entry. They define the CSS custom properties every component reads:
import '@structuralists/scaffolding/tokens.css';That's it — no provider, no theme object. Theme switching is driven by data-theme on any ancestor (typically <html>):
<html data-theme="dark-warm">Available themes: light-warm, light-paper, light-sepia, dark-warm, dark-neutral, dark-dimmed. Omit the attribute to follow system preference.
Use it
import { Stack, Heading, Button, Input, Field } from '@structuralists/scaffolding';
export const SignupCard = () => {
return (
<Stack gap={3}>
<Heading level={1}>Sign up</Heading>
<Field label="Email" htmlFor="email">
<Input id="email" type="email" />
</Field>
<Button variant="primary">Continue</Button>
</Stack>
);
};Browse every component (with live controls) in the Storybook: bun run storybook. The sidebar opens with a Demo section — full mini-apps (like a CRUD Team Directory) composed entirely from the library's public pieces, showing what an app scaffolded with it looks like. The toolbar's Theme control (paintbrush icon) previews any of the themes above — "System (default)" leaves data-theme unset, following system preference.
Consumer notes
This package ships TypeScript source directly — main and types both point at ./index.ts. Modern bundlers handle that out of the box:
- Vite / Remix / Bun / Astro: works with no config.
- Next.js: add the package to
transpilePackages:// next.config.js module.exports = { transpilePackages: ['@structuralists/scaffolding'], }; - Plain Node / CRA: not supported — you need a bundler that understands
.ts/.tsxand CSS Modules.
Releasing
Releases are fully automated. Open a PR, merge it, done — CI bumps the version, publishes to npm with provenance, and creates a GitHub release with auto-generated notes.
The repo is configured for squash-only merging, and the PR title becomes the squash-commit title. That title drives the version bump:
| PR title pattern | Bump |
| ----------------------------------------------- | --------- |
| feat: ... or feat(scope): ... | minor |
| feat!: ... or any commit with BREAKING CHANGE in the body | major |
| anything else (fix:, chore:, docs:, etc.) | patch |
Match the conventional commits style when writing PR titles.
To skip a release for a specific merge, include [skip ci] in the PR title.
Back-to-back merges are safe: release runs are serialized (a GitHub Actions
concurrency group), each run releases from the current tip of main rather
than its trigger commit, and the branch + tag are pushed atomically. A run
whose commit was already covered by a newer release skips cleanly, and a
single release can cover several merges — the bump is the largest one called
for by the commits since the previous release.