@comparaonline/comparanent-ui

Comparanent-UI

React UI Component Library for Compara
based on TSDX

Table of Contents

• Usage
  • Installation
  • Component
• Contributing
• Changelog

Usage

Installation

Comparanent-UI is available as an npm package

// with npm
npm install @comparaonline/comparanent-ui

// with yarn
yarn add @comparaonline/comparanent-ui

Styles

You need to import the component styles in your application. There are two options depending on your setup:

Option 1: If you need all Tailwind CSS helpers

Create a CSS file (e.g., styles.css) and import the full styles including Tailwind utilities:

@import '../../node_modules/@comparaonline/comparanent-ui/dist/index.css';

Option 2: If you already import Tailwind utilities in your project

If your styles.css already includes Tailwind utilities (e.g., @tailwind base; @tailwind components; @tailwind utilities;), use components.css instead to avoid style duplication and precedence issues:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '../../node_modules/@comparaonline/comparanent-ui/dist/components.css';

Then import this CSS file in your main application file (e.g., App.tsx or index.tsx):

import './styles.css';

Additionally, you need to configure Tailwind CSS to use the Comparanent-UI preset. In your tailwind.config.ts:

import TailwindCUI from '@comparaonline/comparanent-ui/dist/tailwind.config';
import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{ts,tsx}', './node_modules/@comparaonline/comparanent-ui/dist/**/*.js'],
  presets: [TailwindCUI],
} satisfies Config;

Component

import React, { FC } from 'react';
import { Demo } from '@comparaonline/comparanent-ui';

export const MyComponent: FC<{}> = () => <Demo>Just a basic demo</Demo>;

Deployment

Deployment is handled automatically based on semantic-release plugin running as a github action.

It is important to note that the feat and fix branches are the ones that generate new releases according to the semantic-release plugin rules.

Contributing

Read the contributing guide to learn about our development process and how to build, test and commit your changes to Comparanent-UI.

Changelog

If you have recently updated, please read the changelog for details of what has changed.