Developing

Set up the design system in your project. The same packages work in Next.js, plain React (Vite), and React Native (Expo).

Authenticate with GitHub Packages

Packages live on the private registry. You need a classic PAT (fine-grained PATs don't authenticate against npm.pkg.github.com).

  1. Open https://github.com/settings/tokens/new (classic, not /personal-access-tokens/new).
  2. Scope: tick only read:packages. Expiration: 90 days.
  3. Add to ~/.npmrc: 
    //npm.pkg.github.com/:_authToken=ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
@yashiel:registry=https://npm.pkg.github.com
  4. In your project's committed .npmrc, add only: 
    @yashiel:registry=https://npm.pkg.github.com

Install

pnpm add @yashiel/mihcm-ui @yashiel/mihcm-theme @yashiel/mihcm-tokens @yashiel/mihcm-icons

Next.js (App Router)

/* app/globals.css */
@import "@yashiel/mihcm-theme/globals.css";
// app/page.tsx
import { Button } from '@yashiel/mihcm-ui/Button';
 
export default function Home() {
  return <Button>Hello</Button>;
}

Heads-up — Next.js still ships a postcss version with a known XSS advisory. Add this to your root package.json:

{ "pnpm": { "overrides": { "postcss": "^8.5.14" } } }

React + Vite

/* src/index.css */
@import "@yashiel/mihcm-theme/globals.css";
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ plugins: [react(), tailwindcss()] });

React Native (Expo)

NativeWind v4 is required (v5 deferred until upstream stable).

// tailwind.config.js
const preset = require('@yashiel/mihcm-theme/tailwind.preset').default;
module.exports = {
  presets: [preset],
  content: [
    './app/**/*.{ts,tsx}',
    './node_modules/@yashiel/mihcm-ui/**/*.{js,mjs}',
  ],
};
// app/_layout.tsx
import { ThemeProvider } from '@yashiel/mihcm-theme';
import { Button } from '@yashiel/mihcm-ui/Button';
import './global.css';
 
export default function Layout() {
  return (
    <ThemeProvider scheme="light">
      <Button>Hello</Button>
    </ThemeProvider>
  );
}

Verify

pnpm exec tsc --noEmit
pnpm audit --audit-level=high

Both should be clean.