caricati-io/rui

RUI Design System, made to be light and simple

⛔️ Warning!

This library is not ready yet. Everything will be fine when version 1.0.0 is released.

---

RUI

This project was made in React to be lightweight and with few dependencies.

Install in your React project

First, you need to install by command line using npm or yarn:

npm install @caricati/rui --save

and then, install the <InstallRui /> in your root component:

import { InstallRui } from '@caricati/rui'
...
ReactDOM.render(
  <React.StrictMode>
    <InstallRui>
      <App />
    </InstallRui>
  </React.StrictMode>,
  document.getElementById('root'),
)

Use styled-components from rui

import { styled, useTheme } from '@caricati/rui'

const Container = styled.div`
  display: grid;
  grid-template-columns: 230px 1fr;
`

function Component() {
  const { color } = useTheme()
  ...
  return (
    <Container>
      <aside>Sidebar</aside>
      <div>Container</div>
    </Container>
  )
}