https://github.com/cebus-org/cebus

Cebus is a simple collection of fast, clean, and accessible components ready to be used and customized on React based applications.
https://github.com/cebus-org/cebus

pongo react react-components typescript

Last synced: 3 months ago
JSON representation

Cebus is a simple collection of fast, clean, and accessible components ready to be used and customized on React based applications.

• Host: GitHub
• URL: https://github.com/cebus-org/cebus
• Owner: cebus-org
• License: mit
• Created: 2021-09-13T00:35:56.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-04T02:05:44.000Z (10 months ago)
• Last Synced: 2024-10-30T10:06:46.237Z (9 months ago)
• Topics: pongo, react, react-components, typescript
• Language: TypeScript
• Homepage:
• Size: 9.82 MB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Cebus




Cebus is a simple collection of fast, clean, and accessible components ready to be used and customized on [React](https://reactjs.org/) based applications. Our components are built using utilities from [FluentUI](https://github.com/microsoft/fluentui) and work hand in hand.

[![Build Status](https://img.shields.io/circleci/build/github/cebus-org/cebus/master?style=flat-square)](https://app.circleci.com/pipelines/github/cebus-org/cebus?branch=master&filter=all)

[![License](https://img.shields.io/badge/License-MIT-%232060cf?style=flat-square)](https://github.com/cebus-org/cebus/blob/HEAD/LICENSE)

![GitHub contributors](https://img.shields.io/github/contributors/cebus-org/cebus?style=flat-square)

[![codecov](https://codecov.io/gh/cebus-org/cebus/branch/master/graph/badge.svg?token=kqgYbdrr6I)](https://app.codecov.io/gh/cebus-org/cebus)

![GitHub top language](https://img.shields.io/github/languages/top/cebus-org/cebus?style=flat-square)

![GitHub Issues](https://img.shields.io/github/issues/cebus-org/cebus?label=issues&style=flat-square)

[![Chromatic](https://img.shields.io/badge/Chromatic-stories-important?style=flat-square&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODQiIGhlaWdodD0iODQiIHZpZXdCb3g9IjAgMCA4NCA4NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxjaXJjbGUgZmlsbD0iI0ZDNTIxRiIgY3g9IjQyIiBjeT0iNDIiIHI9IjQyIj48L2NpcmNsZT48cGF0aCBkPSJNNTEuOSA2MS4zbC02LjctMy44IDIwLTExLjYgMi4yLTEuNWMyLjcgMy43IDMgOC42LjYgMTIuNmExMS44IDExLjggMCAwIDEtMTYuMSA0LjN6bS0xLjYgMi44Yy43LjQgMS41LjggMi40IDEuMWExMS44IDExLjggMCAwIDEtMjIuNS01VjM3LjFsMTAuMiA1Ljh2MTQuNmMwIC41LjMgMSAuOCAxLjRsOSA1LjJ6bS0yNC0xLjJBMTEuOCAxMS44IDAgMCAxIDE0LjcgNDhjLjktMyAyLjgtNS42IDUuNS03LjJsNi43LTMuOHYyMy4xYzAgLjkgMCAxLjguMiAyLjdoLTF6bTI1LjktMjguNkw0MiA0MGwtMTIuNi03YTEuNiAxLjYgMCAwIDAtMS42IDBsLTkgNS4yLTIuMiAxLjVBMTEuNyAxMS43IDAgMCAxIDE2IDI3YTExLjggMTEuOCAwIDAgMSAxNi4xLTQuM2wyMC4xIDExLjZ6TTQyIDEyYzYuNSAwIDExLjggNS4zIDExLjggMTEuOHY3LjdMMzMuNyAxOS45YTE1IDE1IDAgMCAwLTIuNC0xLjFjMi00LjEgNi02LjggMTAuNy02Ljh6bTI2IDE1YTExLjggMTEuOCAwIDAgMS00LjMgMTYuMUw0My42IDU0LjdWNDIuOWwxMi42LTcuMmMuNS0uMy44LS45LjgtMS40VjIzLjhjMC0uOSAwLTEuOC0uMi0yLjZoMWM0LjIgMCA4IDIuMiAxMC4yIDUuOHoiIGZpbGw9IiNGRkYiPjwvcGF0aD48L2c+PC9zdmc+DQo=)](https://www.chromatic.com/library?appId=62579de5a4dd66003a914014)

[![NPM](https://img.shields.io/npm/dt/@cebus/react-components?color=%23cc3533&label=Downloads&logo=NPM&style=flat-square)](https://www.npmjs.com/package/@cebus/react-components)



## Installation

Using NPM

```

npm install @cebus/react-button

```

Using Yarn

```

yarn add @cebus/react-button

```

## Use

```jsx

import { Provider } from '@cebus/react-provider';

import { webLightTheme } from '@cebus/react-theme';

import { Button } from '@cebus/react-button';

const MyApp = () => {

  return (

    

      Hello World

    

  );

};

```

With the FluentProvider.

```jsx

import { FluentProvider } from '@fluentui/react-provider';

import { webLightTheme as cebusWebLightTheme } from '@cebus/react-theme';

import { webLightTheme as fluentWebLightTheme } from '@fluentui/react-theme';

import { Button as CebusButton } from '@cebus/react-button';

import { Button as FluentButton } from '@fluentui/react-button';

const MyApp = () => {

  return (

    

      Hello World

      Hello World

    

  );

};

```

## Licenses

All of our code is licensed under the terms of the

[MIT license](/LICENSE).

## Background

Previously called pongo-ui (the scientific name of orangutan), cebus (scientific name of a capuchin monkeys) is a component library that introduces a simplistic themeing system and a huge amount of components for specfic use cases. It was built to help apps easily build unique visual experinces without having to construct their own components.