My UI Library

A simple React UI component library with modern, accessible components.

Installation

From npm (when published)

npm install my-ui-library

Local installation for development

npm install ../my-ui-library

Usage

Basic Example

import React from "react";
import { HelloButton } from "my-ui-library";

function App() {
  return (
    <div>
      <HelloButton>Click me!</HelloButton>
    </div>
  );
}

export default App;

Advanced Example

import React from "react";
import { HelloButton } from "my-ui-library";

function App() {
  return (
    <div>
      <HelloButton variant="primary" size="large">
        Primary Button
      </HelloButton>

      <HelloButton variant="secondary" size="medium">
        Secondary Button
      </HelloButton>

      <HelloButton size="small" disabled>
        Disabled Button
      </HelloButton>
    </div>
  );
}

export default App;

Components

HelloButton

A customizable button component with multiple variants and sizes.

Props

| Prop | Type | Default | Description | | ----------- | -------------------------------- | ----------- | ------------------------------ | | children | ReactNode | - | Button content (required) | | variant | 'primary' \| 'secondary' | 'primary' | Button style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | disabled | boolean | false | Whether the button is disabled | | className | string | - | Additional CSS class name |

Examples

// Primary button
<HelloButton variant="primary">Primary</HelloButton>

// Secondary button
<HelloButton variant="secondary">Secondary</HelloButton>

// Different sizes
<HelloButton size="small">Small</HelloButton>
<HelloButton size="medium">Medium</HelloButton>
<HelloButton size="large">Large</HelloButton>

// Disabled state
<HelloButton disabled>Disabled</HelloButton>

// With custom className
<HelloButton className="my-custom-class">Custom</HelloButton>

Development

Building the library

npm run build

Development mode

npm run dev

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request