Candi-ui NPM | npm.io

Candi UI

Component Library for React on top of Styled Component.

Usage

Prerequisites

Candi UI requires styled-components v4+. First, install Candi UI Package and styled-components.

# yarn
$ yarn add styled-components candi-ui

# npm
$ npm install --save styled-components candi-ui

Then, you will need to apply the style resets + theme provider. Wrap your app inside the CandiProvider to ThemeProvider component provided by Candi UI, and the GlobalStyles as well.

import { CandiProvider, GlobalStyles } from 'candi-ui';

export default function MyApp({ children }) {
  return (
    <CandiProvider>
      <GlobalStyles />
      {children}
    </CandiProvider>
  );
}

Once you've applied the style resets, you can use Candi UI components in your app. See the example below.

Example

Candi UI is built in React, with styling done in styled-components. To use these components, import them as follows:

// Example for `<Text />` component.

import * as React from 'react';
import { Text } from 'candi-ui';

export default function Component() {
  return <Text>This is Text component</Text>;
}

Read the Storybook for more examples.