@mtzgpepe/react-ui-hero v1.0.1

React UI Hero Component

A flexible and customizable Hero component for React applications.

Installation

npm install @your-org/react-ui-hero

Usage

import { Hero } from '@your-org/react-ui-hero';

function App() {
  return (
    <Hero
      title="Welcome to Our Platform"
      subtitle="Discover amazing features and start building today"
      primaryAction={{
        label: 'Get Started',
        onClick: () => console.log('Get Started clicked')
      }}
      secondaryAction={{
        label: 'Learn More',
        onClick: () => console.log('Learn More clicked')
      }}
    />
  );
}

Props

• title (string, required): Main title text
• subtitle (string, optional): Subtitle text
• children (ReactNode, optional): Additional content
• primaryAction (object, optional): Primary call-to-action button configuration
  • label (string): Button text
  • onClick (function): Click handler
• secondaryAction (object, optional): Secondary call-to-action button configuration
  • label (string): Button text
  • onClick (function): Click handler
• backgroundClass (string, optional): Custom background CSS classes (default: 'bg-gradient-to-r from-blue-600 to-blue-500')
• imageUrl (string, optional): Background image URL

Development

Setup

1. Clone the repository
2. Install dependencies:

   npm install

Building

npm run build

Publishing

1. Update version in package.json
2. Build the package:

   npm run build

3. Login to npm:

   npm login

4. Publish the package:

   npm publish --access public

License

MIT