hello-design-system
v1.3.1
Published
Hello Design System UI Components
Downloads
829
Readme
hello-design-system
This package provides Tailwind design system components for React projects.
Installation
Ensure that you have Node.js (>=18.17.0) and Tailwind CSS installed.
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.
Demo Site
Visit the Hello Design System Demo Site to explore and try out various components: