WJHA UI Kit

WJHA is a modern ReactJS UI kit designed to help you build beautiful and consistent user interfaces quickly and efficiently.

Features

• ⚡️ Easy to use React components
• 🎨 Customizable themes
• 📦 Lightweight and modular
• 🛠️ Built with TypeScript
• 🌐 Responsive and accessible

Installation

npm install wjha
# or
yarn add wjha

Usage

import { Button } from 'wjha';

function App() {
    return <Button>Click Me</Button>;
}

Including the package CSS

This package ships compiled CSS in dist/index.css. To ensure Tailwind-based styles (utility classes and the custom utilities in this library) are applied, import the generated CSS in your app's entry file:

// e.g. src/main.jsx or src/index.jsx
import 'wjha/dist/index.css';
import App from './App';

If you prefer the consumer app to process Tailwind itself (so your build tree includes the library's raw CSS sources), then add this library's source files to your Tailwind content/scan globs and include the library's CSS in your app's CSS entry. Example steps:

1. In your app's tailwind.config.js, add the library source paths (adjust depending on how you import the package):

module.exports = {
    content: [
        './src/**/*.{js,jsx,ts,tsx}',
        './node_modules/wjha/src/**/*.{js,ts,jsx,tsx}'
    ],
    // ...rest of your config
}

2. Import the library CSS from the package in your app's CSS entry (so Tailwind processes it):

@import 'wjha/src/index.css';
/* or, if you copy/merge parts, make sure Tailwind directives are present in your build: */
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';

Quick dev/test snippet

If you just want to verify the Button and styles work in a new app quickly, create a small Vite/CRA app, install this package locally (npm install ../path/to/wjha), then import the built CSS:

import 'wjha/dist/index.css';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button } from 'wjha';

createRoot(document.getElementById('root')).render(<Button>Test</Button>);

If anything looks unstyled in the consumer app, inspect the loaded CSS in browser devtools and confirm dist/index.css (or your app's generated CSS that includes the utilities) is actually present in the page.

Documentation

Full documentation and component examples are available at https://wjha-ui.com.

Contributing

Contributions are welcome! Please read the CONTRIBUTING.md for guidelines.

License

MIT