Jinmi UI

React component library and design tokens for Jinmi Work.

Installation

This package is ESM only.

pnpm add @jinmi/ui

It needs react and react-dom 19, antd 6 and motion 12. The full list is under peerDependencies in package.json.

Next.js

Add the package to transpilePackages:

// next.config.js
const nextConfig = {
  transpilePackages: ['@jinmi/ui'],
};

export default nextConfig;

Usage

Components are built on antd and styled with antd-style.

import { Button, ThemeProvider } from '@jinmi/ui';

export default () => (
  <ThemeProvider>
    <Button>Hello</Button>
  </ThemeProvider>
);

Headless primitives live under @jinmi/ui/base-ui:

import { Select, Switch } from '@jinmi/ui/base-ui';

Design tokens

The default theme ships the Jinmi tokens: neutral frame #F7F8F9, ink #0B0F12, Inter, and the Sky Cyan brand color. Brand colors are exposed as brandToken / brandCssVar and as the CSS variables --jinmi-color-brand*.

ConfigProvider (motion)

Pass a motion component through ConfigProvider, and keep ConfigProvider outside ThemeProvider:

import { ConfigProvider, ThemeProvider } from '@jinmi/ui';
import { motion } from 'motion/react';

export default () => (
  <ConfigProvider motion={motion}>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </ConfigProvider>
);

With LazyMotion, pass m:

import { ConfigProvider, ThemeProvider } from '@jinmi/ui';
import { LazyMotion, domAnimation } from 'motion/react';
import * as m from 'motion/react-m';

export default () => (
  <LazyMotion features={domAnimation}>
    <ConfigProvider motion={m}>
      <ThemeProvider>
        <App />
      </ThemeProvider>
    </ConfigProvider>
  </LazyMotion>
);

I18n

texts props on a component always take priority over the provider.

import { I18nProvider } from '@jinmi/ui';
import formMessages from '@jinmi/ui/i18n/resources/form';
import hotkeyMessages from '@jinmi/ui/i18n/resources/hotkey';

<I18nProvider resources={[formMessages, hotkeyMessages]}>
  <App />
</I18nProvider>;

Development

git clone [email protected]:xretail-jinmi-work/jinmi-ui.git
cd jinmi-ui
pnpm install
pnpm run build

Issues: https://gitlab.com/xretail-jinmi-work/jinmi-ui/-/issues

License

MIT. See LICENSE.