UNCX UI Library

A component library built with React, supporting both SCSS and Tailwind CSS, designed for modular use across your applications.

DEMO (Storybook)

Installation

To install the library:

npm install @uncx/ui-library

Peer Dependencies

This library relies on several peer dependencies. Something could not work if they are not installed in your project:

npm install react react-dom tailwindcss autoprefixer clsx date-fns luxon react-toastify recharts uniqolor viem

Usage

The library is divided into two main parts:

• Main: Components using SCSS modules.
• V2: Components using Tailwind CSS.

1. Importing Components

Importing Main Components

To import components from the main module:

import { Button, type ButtonProps } from "@uncx/ui-library";
import '@uncx/ui-library/main.css';

Importing V2 Components

To import components from the V2 module:

import { Button, type ButtonProps } from "@uncx/ui-library/v2";
import '@uncx/ui-library/v2.css';

2. Using Components

Example: Button Component

import React from 'react';
import { Button, type ButtonProps } from '@uncx/ui-library';
import '@uncx/ui-library/main.css';

const App = () => {
  return (
    <div>
      <Button 
        type="primary" 
        onClick={()=>alert('Clicked!')}
      >
        Test button
      </Button>
    </div>
  );
};

export default App;

Example: Using V2 Button Component with Tailwind

import React from 'react';
import { Button } from '@uncx/ui-library/v2';
import '@uncx/ui-library/v2.css';

const App = () => {
  return (
    <div className="p-4">
      <Button 
        className="bg-blue-500 text-white" 
        color="accent" 
        onClick={() => alert('clicked')}
      >
        Test button
      </Button>
    </div>
  );
};

export default App;

Storybook

This library is developed with Storybook for component testing and preview. If you want to run the Storybook for development, clone the repository and use:

npm run storybook

Build

For contributors and advanced users, the build commands are as follows:

• Build for production: npm run build
• Build Storybook: npm run build-storybook