@unsignd/uuuui

uuuui

Github Repository    Storybook Document   NPM Package

uuuui is an open-source React Typescript component library.
Anyone can easily use uuuui by installing it via npm or yarn.

Install

To install uuuui, run one of the following commands in your project's root directory using your terminal:

# NPM
npm i @unsignd/uuuui

# YARN
yarn add @unsignd/uuuui

Setup

As uuuui uses React contexts, <Provider> component should wrap others to make them work properly.

// index.jsx
import ReactDOM from 'react-dom/client';
import { Provider } from '@unsignd/uuuui';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider>{/* ... */}</Provider>);

// index.tsx
import ReactDOM from 'react-dom/client';
import { Provider } from '@unsignd/uuuui';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(<Provider>{/* ... */}</Provider>);

You can also specify the library's color palette and theme as <Provider>'s properties to override their initial values.

// index.jsx
import ReactDOM from 'react-dom/client';
import { Provider } from '@unsignd/uuuui';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider palette={/* ... */} theme="dark">
    {/* ... */}
  </Provider>
);

// index.tsx
import ReactDOM from 'react-dom/client';
import { Provider } from '@unsignd/uuuui';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <Provider palette={/* ... */} theme="dark">
    {/* ... */}
  </Provider>
);

Import

Import uuuui components you want to use from @unsignd/uuuui.

import { Button /* ... */ } from '@unsignd/uuuui';

Usage

For the usage of a specific component, check out the Component, Layout, Hook categories.
Also, there are structures of types in the Type category.

Troubleshooting

Refer to the Troubleshooting page for frequently occurring issues.
If you have any unsolved issues, requests or further questions, free to ask through the Github issue page or Email!