mk-ui

A lightweight, themeable React component library — Button, Input, Textarea, Select, Checkbox, Card, Badge, Spinner, Switch.

1. Install dependencies and build

cd mk-ui
npm install
npm run build

This produces a dist/ folder containing:

• mk-ui.es.js (ESM build)
• mk-ui.cjs.js (CommonJS build)
• style.css (all component styles)

2. Try it locally first (no publishing needed)

From inside another project on your machine:

npm install /absolute/path/to/mk-ui

or link it:

# inside mk-ui
npm link

# inside your other project
npm link mk-ui

Either way, npm install mk-ui behaves the same afterward as if it came from the registry.

3. Publish so you can npm install mk-ui on ANY computer

npm login
npm publish

The name mk-ui may already be taken on the public npm registry. If npm publish fails with a naming conflict, either pick a different name in package.json (e.g. mk-ui-kit) or publish under your own npm scope:

"name": "@yourusername/mk-ui"

npm publish --access public

Once published, on any computer with Node.js installed:

npm install mk-ui
# or: npm install @yourusername/mk-ui

Prefer not to publish publicly?

Push this folder to a GitHub repo and install directly from it, no npm registry needed:

npm install github:yourusername/mk-ui

4. Usage

import { Button, Input, Card, Badge, Switch } from 'mk-ui';
import 'mk-ui/style.css';

function Example() {
  return (
    <Card header="Sign in" hoverable>
      <Input label="Email" placeholder="[email protected]" />
      <Button variant="primary">Continue</Button>
      <Badge variant="success" dot>Active</Badge>
      <Switch label="Enable notifications" />
    </Card>
  );
}

Components

| Component | Key props | |---|---| | Button | variant (primary/secondary/ghost/danger), size (sm/md/lg), loading, fullWidth, leftIcon, rightIcon | | Input | label, error, helperText, leftIcon, rightIcon | | Textarea | label, error, helperText, rows | | Select | label, options ([{ label, value }]), placeholder, error | | Checkbox | label, checked, indeterminate | | Switch | label, checked | | Card | header, footer, hoverable | | Badge | variant (neutral/primary/success/warning/danger), dot | | Spinner | size (sm/md/lg) |

Theming

Override CSS variables to restyle everything (defined in dist/style.css):

:root {
  --mk-color-primary: #16a34a;
  --mk-radius-md: 4px;
}

Add class mk-dark to any ancestor element for a built-in dark palette.

License

MIT