@structuralists/scaffolding
v0.4.1
Published
[](https://www.npmjs.com/package/@structuralists/scaffolding) [](https://github.com/struct
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">
<Input type="email" />
</Field>
<Button variant="primary">Continue</Button>
</Stack>
);
};Browse every component (with live controls) in the Storybook: bun run storybook.
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.