https://github.com/loplat/loplat-ui

A React-based UI Component Library, powered by loplat Frontend Team.
https://github.com/loplat/loplat-ui

design-system loplat react typescript ui ui-library

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/loplat/loplat-ui
• Owner: loplat
• License: mit
• Created: 2022-02-21T09:40:46.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-23T02:41:29.000Z (over 1 year ago)
• Last Synced: 2025-10-05T06:41:29.842Z (9 months ago)
• Topics: design-system, loplat, react, typescript, ui, ui-library
• Language: TypeScript
• Homepage: https://ui.loplat.com
• Size: 2.52 MB
• Stars: 26
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          




  



loplat UI


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

[![license](https://badgen.net/github/license/loplat/loplat-ui)](https://github.com/loplat/loplat-ui/blob/main/LICENSE)

[![license](https://badgen.net/npm/v/loplat-ui)](https://www.npmjs.com/package/loplat-ui)

[![license](https://badgen.net/bundlephobia/minzip/loplat-ui)](https://bundlephobia.com/package/loplat-ui)

[![license](https://badgen.net/npm/types/loplat-ui)](https://www.npmjs.com/package/loplat-ui)

[![license](https://badgen.net/bundlephobia/tree-shaking/loplat-ui)](https://bundlephobia.com/package/loplat-ui)

[![license](https://badgen.net/npm/dt/loplat-ui)](https://www.npmjs.com/package/loplat-ui)



## Installation

```sh

// with yarn

yarn add loplat-ui

// with npm

npm install loplat-ui

```

## Usage

### Getting Started

```jsx

import React from 'react';

import { Button } from 'loplat-ui';

function Example() {

  return Hello world!;

}

```

### 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.

```jsx

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

const StyledButton = styled(Button)`

  color: red;

`;

function Example() {

  return Hello world!;

}

```

## Documentation & Demo

Check out our [storybook website](https://ui.loplat.com/).

## Changelog

If you have recently updated, please read the [changelog](https://github.com/loplat/loplat-ui/blob/main/CHANGELOG.md) for details of what has changed.

## Roadmap

- Table

- Pagination

- D3.js Charts

## License

This project is licensed under the terms of the [MIT license](https://github.com/loplat/loplat-ui/blob/main/LICENSE).