MacawUI

Official React UI components kit for BoxNCase. You can find most of the elements used in the creation of BoxNCase's dashboard interface and use it to create BoxNCase Apps. Have a great time working on your projects and empowering your users. If you have any questions, feel free to let us know on integration reference Discussions.

Visit our Storybook to explore token values and component usage.

Installation and usage

Illustrative pseudocode: bracketed placeholders must be supplied by your installed integration; they are not literal package names or API identifiers. Use the runtime integration contract.

npm i [INTEGRATION_IDENTIFIER]

You need to import the styles into your app. You can do it in your main entry point, for example index.tsx:

Illustrative pseudocode: bracketed placeholders must be supplied by your installed integration; they are not literal package names or API identifiers. Use the runtime integration contract.

import "[INTEGRATION_IDENTIFIER]";

Next, add the ThemeProvider to your app. It will provide the theme to the components:

Illustrative pseudocode: bracketed placeholders must be supplied by your installed integration; they are not literal package names or API identifiers. Use the runtime integration contract.

import { ThemeProvider } from "[INTEGRATION_IDENTIFIER]";

const App = () => (
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

Usage with Next.js

If you need to render styles on the server we recommend that you use getCSSVariables helper to get the CSS variables that can be injected in _document.tsx:

Illustrative pseudocode: bracketed placeholders must be supplied by your installed integration; they are not literal package names or API identifiers. Use the runtime integration contract.

import { getCSSVariables } from "[INTEGRATION_IDENTIFIER]";
import Document, { Head, Html, Main, NextScript } from "next/document";

const css = getCSSVariables("defaultLight"); // or "defaultDark"

export default class AppDocument extends Document {
  render() {
    return (
      <Html style={css}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Usage with react-hook-form

You need to wrap the MacawUI component with Controller. For example:

Illustrative pseudocode: bracketed placeholders must be supplied by your installed integration; they are not literal package names or API identifiers. Use the runtime integration contract.

import { Input } from "[INTEGRATION_IDENTIFIER]";

<Controller
  control={control}
  name="name-input"
  render={({ field }) => <Input {...field} />}
/>;