OFranke / kedro-ui

A React component library for building web applications the QuantumBlack way

Kedro UI

This repo represents a set of UI components that we use in our internal products and applications. It allows us to move at speed i.e. not rewrite the wheel on every new endeavour.

👀 Getting Started

Installation

To install Kedro UI into your project, run the following in your project directory:

npm install @quantumblack/kedro-ui

Usage

The recommended way to import Kedro UI components is to import each component and the core CSS separately:

// Core CSS (import once)
import '@quantumblack/kedro-ui/lib/styles/app.css';
// Single component (import in each file you use it)
import Button from '@quantumblack/kedro-ui/lib/components/input';

However the quickest way to import Kedro UI components is with a destructured import:

import { Button } from '@quantumblack/kedro-ui';

Doing this will import the entire library, which will increase your bundle size and affect your page load time, so we don't recommend using this method unless you are using babel-plugin-transform-imports or you don't care about bundle size.

Once you have installed the library and imported a component, you can use it in your project:

import React from 'react';
import ReactDOM from 'react-dom';
import '@quantumblack/kedro-ui/lib/styles/app.css';
import Button from '@quantumblack/kedro-ui/lib/components/input';

const MyComponent = () => (
  <Button theme='light' size='small' mode='secondary'>Hello world!</Button>
);

ReactDOM.render(<MyComponent />, document.getElementById('root'));

📚 Documentation

We use styleguidist to document our comments and their usage. To try them out head over here.

👋 Contact

This project needs your help! If you have any questions email: [e-mail]