Elementary UI

A collection of reusable React UI components built with styled-components.

Documentation

• To check out live examples visit https://dmitrymorozoff.github.io/elementary-ui-kit/

Install

# Install
$ npm install --save elementary-ui-kit

# You can also test the components locally by cloning this repo and doing the following steps:
$ git clone https://github.com/dmitrymorozoff/elementary-ui-kit.git

# Install dependencies from package.json:
$ npm install

# Start local development server `localhost:1234`:
$ npm start

# Start react-styleguidist
$ npm run docs

# Run linter
$ npm run lint

# Start tests followed by jest.
$ npm run test

Quick Start:

import React from "react";
import ReactDOM from "react-dom";
import { Card, CardContent, Text, CardButtons, Button } from "elementary-ui-kit";

function App() {
    return (
        <Card hover={true}>
            <CardContent>
                <Text fontSize="28px" gutterBottom={true}>
                    Penguin
                </Text>
                <Text>
                    They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos
                    penguin, found north of the equator.
                </Text>
                <CardButtons>
                    <Button>Share</Button>
                    <Button type="primary">More</Button>
                </CardButtons>
            </CardContent>
        </Card>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

Components:

• Forms
  • Button
  • Input
  • Link
  • Switch
  • Checkbox
  • Select
    • SelectItem
• Others
  • Card
    • CardButtons
    • CardContent
    • CardMedia
  • Collapse
    • CollapseTitle
    • CollapseContent
  • Text
  • Label
• Icons
  • RightArrow
  • RightUp
  • RightDown
  • Search

@TODO

• [ ] Table
• [ ] Modal
• [ ] List
• [ ] Radio
• [ ] Tabs
• [ ] Textarea
• [ ] Nav
• [ ] Pagination