A suite of common React components used to compose React applications for the LeanStacks organization.

This library requires the following

• Node LTS 18 or higher
• React 18.x
• TailwindCSS 3.x

To install this library, issue the following command in your react project

npm install @leanstacks/react-common

LeanStacks components are styled with TailwindCSS. You must include this library in your project's Tailwind configuration so that Tailwind styles are applied to the components from this library.

In your project, create or open your tailwind.config.js file. Ensure that LeanStacks library paths are included by adding './node_modules/@leanstacks/**/*.{js,jsx,ts,tsx}' to the content section.

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@leanstacks/**/*.{js,jsx,ts,tsx}'],
 darkMode: 'class',
 theme: {
 extend: {},
 },
 plugins: [],
};

See the Tailwind installation guide for more details about this configuration file.

To use React components from the library in your React application, simply import the desired component(s) and use them as you would any React component.

import { Text, TextVariant } from '@leanstacks/react-common';
const MyComponent: React.FC = () => {
 return (
 <Text variant={TextVariant.Heading1} className="mb-4">
 Welcome to React!
 </Text>
 );
};

To prevent warnings from Tailwind CSS rules, install a plugin like the Tailwind CSS Intellisense plugin for Visual Studio Code.

If you are using Prettier, you may also install the Prettier plugin for Tailwind that will automatically sort Tailwind classes in the recommended order.

MIT License