A React UI Component Library, powered by loplat Frontend Team.

Installation

// with yarn
yarn add loplat-ui

// with npm
npm install loplat-ui

Usage

Getting Started

import React from 'react';
import { Button } from 'loplat-ui';

function Example() {
  return <Button>Hello world!</Button>;
}

Styling Components

All the loplat UI components are styled with @emotion.

If you'd like to change the styles of loplat UI components, you must use styled API provided by either loplat-ui or @emotion/styled.

styled API provided by other CSS-in-JS libraries will not work as expected.

import { Button, styled } from 'loplat-ui';

const StyledButton = styled(Button)`
  color: red;
`;

function Example() {
  return <StyledButton>Hello world!</StyledButton>;
}

Documentation & Demo

Check out our storybook website.

Changelog

If you have recently updated, please read the changelog for details of what has changed.

Roadmap

• Table
• Pagination
• D3.js Charts

License

This project is licensed under the terms of the MIT license.