Installation

Setup

Ensure your have the latest version of NodeJS, and a package manager: NPM or Yarn. If you want to see a complete example, please browse our sample collection.

yarn add @cfxjs/react-ui

import { CfxProvider, CssBaseline } from '@cfxjs/react-ui'

const Application = () => (
  <CfxProvider>
    <CssBaseline /> // ---> normalize styles
    <AppComponent /> // ---> Your App Component
  </CfxProvider>
)

import { Button } from '@cfxjs/react-ui'

const MyComponent = () => <Button>Click Me</Button>

Single component

CFX UI supports importing single, specific components when you need them. This is referred to as tree-shaking.

E.g.

import Button from '@cfxjs/react-ui/esm/button'

const MyComponent = () => <Button>Click Me</Button>

Create React App

A React project created by create-react-app can also easily use @cfxjs/react-ui. You don't need to make any changes, just install and use.

If you want to eject certain configs, tree-shaking, please refer to this example.

Next.js

In the next.js project, you need to customize the app.jsx entry file to load the provider. Start your NextJS project with this example.