Hello Design System

This package provides Tailwind CSS-based design system components for React projects.

Installation

Ensure that you have Node.js (>=18.17.0) and Tailwind CSS installed in your project.

For Version 1.1.5 or Higher (>= 1.1.5)

1. Install the package in your project directory:

# with npm
npm install -D hello-design-system

# with yarn
yarn add --dev hello-design-system

2. Add hello-design-system styles to your globals.css file:

Open your globals.css (or any global CSS file) and add the following line:

/* globals.css */
@import "hello-design-system/build/build.css";

3. Import your global.css to the root file

import 'globals.css'

(LEGACY) For Version 1.1.4 or Lower (<= 1.1.4)

1. Install the package in your project directory:

# with npm
npm install -D hello-design-system

# with yarn
yarn add --dev hello-design-system

2. Add hello-design-system to your tailwind.config.js files:

Include hello-design-system in the content array of your tailwind.config.js file to ensure Tailwind scans the component files:

// tailwind.config.js
module.exports = {
  content: [
    // your existing paths...
    "./node_modules/hello-design-system/**/*.{js,jsx,ts,tsx}",
  ],
  // other settings...
};

Notes

Make sure your project is properly configured to use Tailwind CSS. If you're new to Tailwind, please refer to the Tailwind CSS Documentation for the setup guide.

Repository

For more details and the latest updates, visit the npm repository for hello-design-system.