@roger-hub/package-01

A modern UI component library for React applications, built with TailwindCSS and React.

Features

• 🎨 Beautiful UI components with a consistent design language
• 🧩 Modular approach, use only what you need
• ✨ Based on TailwindCSS for easy customization
• 📦 Tree-shakable for optimized production bundles
• 💻 TypeScript support with full type definitions

Installation

npm install @roger-hub/package-01

Quick Start

1. Install the package:

npm install @roger-hub/package-01

2. Configure Tailwind CSS in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Your project files
    "./src/**/*.{js,jsx,ts,tsx}",
    
    // Include our component library
    "./node_modules/@roger-hub/package-01/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      // Theme extensions needed by our components (see INTEGRATION-GUIDE.md)
    }
  }
}

4. Import styles in your main CSS file (before Tailwind directives):

/* main.css */
@import '@roger-hub/package-01/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Troubleshooting

CSS Import Issues

As of version 1.0.9, we've improved how CSS is handled to prevent the common error:

[postcss] Missing "./base" specifier in "tailwindcss" package

Our solution uses a precompiled CSS file that doesn't rely on Tailwind's direct imports. To use it:

/* Import our styles BEFORE your Tailwind directives */
@import '@roger-hub/package-01/styles.css';

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

For more detailed solutions, see our Tailwind Troubleshooting Guide.

3. Configure Tailwind to include the component styles:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "./node_modules/@roger-hub/package-01/dist/**/*.js"
  ],
  // See USAGE.md for complete theme configuration
}

4. Use components in your application:

import { Button } from '@roger-hub/package-01';

function App() {
  return (
    <div className="p-4">
      <h1 className="text-2xl mb-4">My App</h1>
      <Button>Click Me</Button>
    </div>
  );
}

TypeScript Support

All components and utilities are fully typed with TypeScript. You can import types directly:

import { Button, ButtonProps } from '@roger-hub/package-01';

// Create a custom button component
const CustomButton = (props: ButtonProps) => {
  return <Button {...props} className="custom-class" />;
};

The package includes TypeScript declarations that provide intellisense and type checking in your IDE.

Components

Button

A versatile button component with various styles and sizes.

import { Button } from '@roger-hub/package-01';

<Button variant="default" size="default">Default Button</Button>
<Button variant="destructive" size="sm">Destructive Button</Button>
<Button variant="outline" size="lg">Outline Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="link">Link Button</Button>

Utilities

cn function

Utility for conditionally joining class names:

import { cn } from '@roger-hub/package-01';

<div className={cn("base-class", isActive && "active-class")}>
  Content
</div>

Documentation

• Complete Usage Guide
• Publishing Guide
• TypeScript Troubleshooting

Troubleshooting

CSS Import Issues

If you encounter an error like:

[vite] Internal server error: [postcss] Missing "./dist/style.css" specifier in "@roger-hub/package-01" package

or

Error: Failed to scan for dependencies from entries:
  Missing "./dist/styles.css" specifier in "@roger-hub/package-01" package [plugin vite:dep-scan]

Make sure you're importing the CSS correctly:

/* Recommended way */
@import '@roger-hub/package-01/styles.css';

/* These also work with version 1.0.7+ */
@import '@roger-hub/package-01/dist/style.css';
@import '@roger-hub/package-01/dist/styles.css';

If you're using a bundler other than Vite or have specific CSS import requirements, you can also try:

@import '~@roger-hub/package-01/styles.css';

Make sure you're using version 1.0.7 or later to avoid CSS import issues.

License

MIT+ TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})