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:

``bash

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

`tsx

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

const App = () => {
return (

);
};

export default App;
`

🧩 Components

$3

A fundamental interactive element, offering various styles and sizes to fit different use cases.
!nex-ui-library Button Variants
#### Props

The Button component accepts the following specific props, in addition to standard HTML 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

``tsx
// Default primary button
Submit Form

// Secondary button with custom click handler
alert('Secondary action!')}>
Cancel


// Small, danger button
Remove

// Large, full-width ghost button

View All Items