React UI Atoms

Atomic components for React UI styled with CSS Modules

Table Of Contents

• Usage
• Components List
• License

Usage

npm install --save @react-ui/core@latest @react-ui/atoms-css-modules

Supply components and their styles to initUI:

// src/components/ui/index.js

import initUI from '@react-ui/core';
import atoms from '@react-ui/atoms-css-modules';

import Header from 'src/components/ui/header';

const UI = initUI(atoms.components, { Header })(atoms.styles);

export default UI;

Use atomic components where needed:

import React, { Component } from 'react';

import UI from 'src/components/ui';
const {
  Button, Label,
  Grid: { Container, Row, Col },
} = UI;

class MyUberComponent extends Component {
  render() {
    return (
      <Container>
        <Row>
          <Col>
            <Header>Beautiful Header</Header>
          </Col>
        </Row>
        <Row>
          <Col>
            <Label>Here I am!</Label>
            <Button kind="primary">Press me</Button>
          </Col>
        </Row>
      </Container>
    );
  }
}

Components List

• Alert
• Badge
• Button
• BtnGroup
• Image
• Label
• Loading
• Media
• Panel
• Grid (12 columns)
  • Container
  • Row
  • Col
• Form
  • Container
  • Group
  • Select
  • Input
  • Label
  • Static
  • Textarea
  • Helper
• Navbar
  • Container
  • Menu
  • Link
  • Brand
  • Static
• Pager
• Table
  • Container
  • Row
  • Heading
  • Cell

License

Apache License, Version 2.0