nex-ui-library

A simple yet elegant React UI component library, built with TypeScript and Styled Components. This library aims to provide a set of reusable and accessible UI components to accelerate your React development.

📖 Table of Contents

• Installation
• Usage
• Components
  • Button
• Documentation
• Local Development
• Contributing
• License

📦 Installation

To use nex-ui-library in your project, install it via npm or yarn:

# Using npm
npm install nex-ui-library styled-components react react-dom

# Using yarn
yarn add nex-ui-library styled-components react react-dom

📦 Usage

import React from 'react';
import { Button } from 'nex-ui-library'; // Import components from your library

const App = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <p>Explore the power of `nex-ui-library`:</p>

      {/* Basic Primary Button */}
      <Button onClick={() => alert('Hello from Button!')}>Click Me</Button>

      {/* Secondary Button */}
      <Button variant="secondary" style={{ marginLeft: '10px' }}>Learn More</Button>

      {/* Danger Button, large size */}
      <Button variant="danger" size="large" style={{ marginLeft: '10px' }}>Delete</Button>

      {/* Disabled Ghost Button */}
      <Button variant="ghost" disabled style={{ marginLeft: '10px' }}>Disabled Link</Button>

      <br /><br />

      {/* Full-width Button */}
      <div style={{ maxWidth: '300px' }}>
        <Button fullWidth onClick={() => console.log('Full width button clicked!')}>
          Save Changes
        </Button>
      </div>
    </div>
  );
};

export default App;

🧩 Components

Button

A fundamental interactive element, offering various styles and sizes to fit different use cases.

Props

The Button component accepts the following specific props, in addition to standard HTML <button> attributes:

| Prop | Type | Default | Description | | :---------- | :---------------------------------------- | :---------- | :--------------------------------------------------------------------------- | | children | React.ReactNode | - | The content (text, icons, etc.) to be rendered inside the button. | | variant | 'primary' \| 'secondary' \| 'danger' \| 'ghost' | 'primary' | Defines the visual theme of the button. | | size | 'small' \| 'medium' \| 'large' | 'medium' | Controls the physical size of the button, affecting padding and font size. | | fullWidth | boolean | false | If true, the button will expand to take the full width of its parent container. | | disabled | boolean | false | If true, the button will be unclickable and visually indicate a disabled state. |

Example Usage

// Default primary button
<Button>Submit Form</Button>

// Secondary button with custom click handler
<Button variant="secondary" onClick={() => alert('Secondary action!')}>
  Cancel
</Button>

// Small, danger button
<Button size="small" variant="danger">Remove</Button>

// Large, full-width ghost button
<Button size="large" variant="ghost" fullWidth>
  View All Items
</Button>