PHPackages                             machinjiri/nsipe-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. machinjiri/nsipe-ui

ActiveLibrary

machinjiri/nsipe-ui
===================

UI System for Machinjiri framework

1.0.0(4mo ago)01MITPHPPHP ^8.2

Since Dec 30Pushed 4mo agoCompare

[ Source](https://github.com/preciouslyson/nsipe-ui)[ Packagist](https://packagist.org/packages/machinjiri/nsipe-ui)[ RSS](/packages/machinjiri-nsipe-ui/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

NsipeUI - PHP UI Component Library

NsipeUI is a comprehensive PHP-based UI component library that provides a simple, fluent interface for building modern web interfaces. Built with a component-based architecture, it offers pre-styled Bootstrap 5 compatible components with additional advanced features. It is a package for Machinjiri Framework

Features

· Bootstrap 5 Integration - All components are styled with Bootstrap 5 · Component-Based Architecture - Modular and reusable UI components · Responsive Layout System - Built-in grid and layout components · Fluent Interface - Chainable methods for easy configuration · Quick Form Building - Rapid form creation with validation · Data Tables - Interactive tables with search functionality · Notification System - Alerts, toasts, and notifications · File Upload Components - Upload with preview functionality · Modal System - Dynamic modal forms and dialogs · Page Builder - Structured page layout system

Installation

```
# Ensure Composer is installed
composer require mlangeni/machinjiri-nsipeui
```

Quick Start

```
use Mlangeni\Machinjiri\NsipeUI\NsipeUI;

// Create a simple button
echo NsipeUI::button('Click Me');

// Create a primary button
echo NsipeUI::primaryButton('Submit');

// Create an alert
echo NsipeUI::alert('Welcome message!');
```

Basic Components

Buttons

```
NsipeUI::button('Click Me', ['class' => 'btn-lg']);
NsipeUI::primaryButton('Submit');
```

Forms and Inputs

```
NsipeUI::textInput('username', 'Username');
NsipeUI::emailInput('email', 'Email Address');
NsipeUI::passwordInput('password', 'Password');
NsipeUI::textarea('message', 'Your Message');
NsipeUI::select('country', ['options' => ['US' => 'USA', 'UK' => 'United Kingdom']]);
```

Cards

```
NsipeUI::card()
    ->title('Card Title')
    ->text('Card content goes here')
    ->render();
```

Alerts

```
NsipeUI::alert('Information message');
NsipeUI::successAlert('Operation successful!');
```

Layout System

Containers

```
NsipeUI::container(); // Fixed container
NsipeUI::fluidContainer(); // Full-width container
NsipeUI::responsiveContainer('md'); // Responsive container
```

Grid System

```
echo NsipeUI::grid()
    ->row([
        NsipeUI::column(['md' => 6])->addContent('Left Column'),
        NsipeUI::column(['md' => 6])->addContent('Right Column')
    ])
    ->render();
```

Pre-defined Layouts

```
NsipeUI::twoColumnLayout(['left' => 'Content', 'right' => 'Sidebar']);
NsipeUI::threeColumnLayout(['left' => 'Left', 'middle' => 'Main', 'right' => 'Right']);
NsipeUI::heroLayout(['title' => 'Hero Title', 'subtitle' => 'Hero subtitle']);
NsipeUI::formLayout(['fields' => $fields]);
NsipeUI::cardGridLayout(['cards' => $cardsArray]);
```

Advanced Components

File Upload

```
NsipeUI::fileUpload('document', 'Upload Document');
NsipeUI::multiFileUpload('documents', 'Multiple Files');
NsipeUI::fileUploadWithPreview('image', 'Upload Image');
```

Notifications

```
NsipeUI::notification('User created successfully', 'success');
NsipeUI::toast('New Message', 'You have a new notification', 'info');
```

Data Tables

```
$headers = ['ID', 'Name', 'Email'];
$data = [
    [1, 'John Doe', 'john@example.com'],
    [2, 'Jane Smith', 'jane@example.com']
];

NsipeUI::dataTable($headers, $data);
NsipeUI::searchableDataTable($headers, $data);
```

Quick Form Builder

```
$fields = [
    ['name' => 'name', 'label' => 'Full Name', 'type' => 'text'],
    ['name' => 'email', 'label' => 'Email', 'type' => 'email'],
    ['name' => 'country', 'label' => 'Country', 'type' => 'select',
     'options' => ['US' => 'USA', 'UK' => 'UK']]
];

NsipeUI::quickForm($fields, '/submit', 'post');
```

Modal Forms

```
$fields = [
    ['name' => 'username', 'label' => 'Username'],
    ['name' => 'password', 'label' => 'Password', 'type' => 'password']
];

NsipeUI::modalForm('loginModal', 'Login', $fields, [
    'submitText' => 'Login',
    'action' => '/login'
]);
```

Page Builder

```
$sections = [
    [
        'type' => 'hero',
        'content' => NsipeUI::heroLayout(['title' => 'Welcome'])->render(),
        'classes' => 'mb-5'
    ],
    [
        'type' => 'content',
        'content' => 'Main content here'
    ]
];

NsipeUI::page($sections, ['container' => 'fluid']);
```

Action Cards

```
NsipeUI::actionCard(
    'User Profile',
    'Manage your profile settings',
    [
        ['label' => 'Edit', 'type' => 'primary', 'url' => '/edit'],
        ['label' => 'Delete', 'type' => 'danger', 'url' => '/delete']
    ]
);
```

Breadcrumb Builder

```
NsipeUI::breadcrumbBuilder([
    'Home' => '/',
    'Products' => '/products',
    'Category' => '/products/category'
], 'Current Product');
```

Requirements

· PHP 7.4 or higher · Bootstrap 5 CSS & JS (included via CDN or local assets) · jQuery (optional, for some interactive components) · Composer for autoloading

Dependencies

The library requires the following internal components:

· Mlangeni\\Machinjiri\\Components\\ComponentsFactory · Mlangeni\\Machinjiri\\Components\\Layout\\Layout

Browser Support

· Chrome (latest) · Firefox (latest) · Safari (latest) · Edge (latest) · Opera (latest)

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT

Support

For issues, questions, or feature requests, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue with details

Complete Example

```