getjacked-components

Production-ready React UI primitives: Button, Card, Modal, Input, and Badge. Ships as ESM + CJS with TypeScript types, CSS Modules bundled to a single style.css, optional theming via ThemeProvider and CSS variables, and tree-shakeable named exports.

Requirements

• React 18 or 19
• react-dom 18 or 19

Install

npm install getjacked-components

Quick start

import { ThemeProvider, Button, Card, CardBody, CardHeader, CardTitle } from 'getjacked-components';

export function App() {
  return (
    <ThemeProvider defaultMode="system">
      <Card>
        <CardHeader>
          <CardTitle>Hello</CardTitle>
        </CardHeader>
        <CardBody>
          <Button variant="primary">Action</Button>
        </CardBody>
      </Card>
    </ThemeProvider>
  );
}

• Styles: dist/index.mjs and dist/index.cjs start with a side-effect import / require of ./style.css, so Vite, webpack, and similar bundlers usually load getjacked-components/style.css automatically when you import from the package. If your setup ignores CSS in node_modules, add import 'getjacked-components/style.css' once in your app entry. Tokens live on :root / [data-gj-theme].
• Wrap your app (or a subtree) with ThemeProvider for light / dark / system and data-gj-theme on the provider root.

Scripts (library repo)

| Script | Description | | ------------------- | ------------------------------------ | | npm run dev | vite build --watch for local linking | | npm run build | Typecheck + library bundle + .d.ts | | npm run test | Vitest | | npm run lint | ESLint | | npm run storybook | Component docs at localhost:6006 |

Publishing to npm

1. Login: npm login
2. Version (pick one):
   • npm version patch — bug fixes
   • npm version minor — new features, backwards compatible
   • npm version major — breaking changes
     This updates package.json / package-lock.json and creates a git tag if the repo is initialized.
3. Publish: npm publish --access public
prepack runs npm run build (so dist/ exists in the tarball). prepublishOnly runs npm run test.

Scoped name example: rename name in package.json to @your-scope/getjacked-components and publish with --access public for a public scope.

Consuming from a local folder

In your app:

"dependencies": {
  "getjacked-components": "file:../path/to/getjacked-components"
}

Installing from file: runs prepack in this package, which runs npm run build so dist/ is included. If you ever pack without scripts (or use an old npm), run npm run build in the library once, then npm install in the app.

If node_modules/getjacked-components only has package.json: the published/packed tarball had no dist/ folder. This repo’s files field only ships dist and README.md — there is no source on npm. Fix: ensure prepack runs (normal npm install / npm publish), or run npm run build manually before packing.

Git URL installs (github:...): npm clones the repo and installs dependencies; prepack runs when the dependency is packed. You need a lockfile/install that actually executes lifecycle scripts (and devDependencies available for the build).

See examples/consumer-app for a minimal Vite + React consumer.

Theming

• Override CSS variables (e.g. --gj-color-primary) on :root or on a wrapper with [data-gj-theme='light'] / [data-gj-theme='dark'].
• Use ThemeProvider mode / defaultMode: 'light' | 'dark' | 'system', and useTheme() for resolved, setMode, and toggle.

Tailwind (optional)

This package uses CSS Modules + variables so it stays framework-agnostic. In a Tailwind app, you can still pass className on components to layer utility classes.

License

MIT