https://github.com/ringcentral/juno

RingCentral React Component library, make your app have the same user experience as RingCentral Apps.
https://github.com/ringcentral/juno

material-ui react ringcentral ui-components

Last synced: 4 months ago
JSON representation

RingCentral React Component library, make your app have the same user experience as RingCentral Apps.

• Host: GitHub
• URL: https://github.com/ringcentral/juno
• Owner: ringcentral
• License: mit
• Created: 2021-08-13T07:53:56.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2026-01-28T18:06:03.000Z (4 months ago)
• Last Synced: 2026-01-28T19:33:55.909Z (4 months ago)
• Topics: material-ui, react, ringcentral, ui-components
• Language: JavaScript
• Homepage: https://ringcentral.github.io/juno
• Size: 67 MB
• Stars: 29
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Juno

![Static Badge](https://img.shields.io/badge/juno-core-f54785) [![NPM version](https://img.shields.io/npm/v/@ringcentral/juno/latest.svg)](https://www.npmjs.com/package/@ringcentral/juno)

![Static Badge](https://img.shields.io/badge/juno-icon-f5c747) [![NPM version](https://img.shields.io/npm/v/@ringcentral/juno-icon/latest.svg)](https://www.npmjs.com/package/@ringcentral/juno-icon)

[![Static Badge](https://img.shields.io/badge/github-8A2BE2)](https://github.com/ringcentral/juno) [![Static Badge](https://img.shields.io/badge/stackblitz-8A2BE2)](https://stackblitz.com/edit/juno-vite-example-zksfob?file=src%2FApp.tsx) [![Static Badge](https://img.shields.io/badge/Codesandbox-8A2BE2)](https://codesandbox.io/s/4j370)

Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

base on [MATERIAL-UI](https://material-ui.com/).

Explore Juno with the [interactive live Storybook instance](https://ringcentral.github.io/juno/).

### Install

```ts

npm i @ringcentral/juno @ringcentral/juno-icon styled-components dayjs

// or

yarn add @ringcentral/juno @ringcentral/juno-icon styled-components dayjs

```

### Quick Start

All components we using need contain in the `RcThemeProvider`.

```tsx

import {

  RcAvatar,

  RcTooltip,

  RcButton,

  RcIcon,

  RcLink,

  RcCircularProgress,

  RcThemeProvider,

} from '@ringcentral/juno';

```

```html

  SH

  Button

  LINK

  

  

```

### Use Juno Icon

We can use any component with `RcIcon` prop `symbol`, pass component into symbol that will render svg icon with our `RcIcon` style.

```tsx

import { RcIcon } from '@ringcentral/juno';

import { Phone } from '@ringcentral/juno-icon';

const App = (props) => {

  return (

    

      

    

  );

};

```