@nilfoundation/ui-kit

=nil; Foundation user interface kit

UI components library to build React applications using =nil; pre-designed styles out of the box.

Table of contents

• Getting started
• Usage
• SSR
• License

Getting started

npm

npm install @nilfoundation/ui-kit baseui styletron-engine-atomic styletron-react

yarn

yarn add @nilfoundation/ui-kit baseui styletron-engine-atomic styletron-react

CDN

<script src="https://unpkg.com/@nilfoundation/ui-kit/dist/ui-kit.iife.js"></script>

Notice, that global React variable should be accessible, because it is not included in the standalone bundle.

Usage

import { BaseProvider } from "baseui";
import { Client as Styletron } from "styletron-engine-atomic";
import { Provider as StyletronProvider } from "styletron-react";
import { createTheme, Button } from "@nilfoundation/ui-kit";

const engine = new Styletron();
const { theme } = createTheme(engine);

function App() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={theme}>
        <Button>Button Label</Button>
      </BaseProvider>
    </StyletronProvider>
  );
}

SSR

Use this workaround to make Styletron, which this package is levelraging, work with SSR.

License

MIT