PHPackages                             orzubek-rakhimov/laravel-sdui - 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. orzubek-rakhimov/laravel-sdui

ActiveLibrary

orzubek-rakhimov/laravel-sdui
=============================

Server-Driven UI framework for Laravel - Build dynamic, native-like mobile and web interfaces declaratively in PHP

00PHPCI passing

Since Mar 29Pushed 1mo agoCompare

[ Source](https://github.com/Orzubek-Rakhimov/laravel-sdui)[ Packagist](https://packagist.org/packages/orzubek-rakhimov/laravel-sdui)[ RSS](/packages/orzubek-rakhimov-laravel-sdui/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel SDUI - Server-Driven UI for Laravel
===========================================

[](#laravel-sdui---server-driven-ui-for-laravel)

Build dynamic, native-like mobile and web interfaces using Laravel. Define your UI declaratively in PHP and render it anywhere.

[![PHP](https://camo.githubusercontent.com/c8d8dad6beb757a2b8acba331d16140813699543b88a37af0a81f20bd35f61de/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332532422d626c7565)](https://www.php.net)[![Laravel](https://camo.githubusercontent.com/2a6b0c29d9909a64e2fce849f5d12d73548da205740f347ab1f3a79094e58b6e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d313225324631332d726564)](https://laravel.com)[![Tests](https://camo.githubusercontent.com/4d7de43fa7f42b2475eef3e8154de29355fd898c82ed28efab4f1bb6d0f35d4c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f54657374732d373625323070617373696e672d677265656e)](#testing)[![License](https://camo.githubusercontent.com/5caa455d8debc46fb23abbadb45a733a937f3910a73fc875c2f7820468e1bb54/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e)](LICENSE)

Features
--------

[](#features)

✨ **Declarative UI Definition** - Define screens in pure PHP using a fluent, chainable API 🎯 **Type-Safe** - Full PHP 8.3+ type hints and strict typing throughout 🧩 **Component-Based** - Rich set of built-in components (Text, Button, Image, Stack, Card, Badge, etc.) ⚡ **Action System** - Handle navigation, URL opening, events, and custom actions 🔄 **Dynamic Rendering** - Conditionally render components, map collections, nest layouts 🎨 **Highly Extensible** - Create custom components by extending the base Component class 🧪 **Thoroughly Tested** - 76+ comprehensive unit and integration tests 📦 **Single Dependency** - Only requires `illuminate/support`

Installation
------------

[](#installation)

```
composer require sdui/laravel-sdui
```

The package is auto-discovered by Laravel. If you're not using Laravel auto-discovery, add the service provider:

```
// config/app.php
'providers' => [
    // ...
    SDUI\SDUIServiceProvider::class,
],

'aliases' => [
    // ...
    'SDUI' => SDUI\Facades\SDUI::class,
],
```

Quick Start
-----------

[](#quick-start)

### Basic Screen

[](#basic-screen)

```
use SDUI\Screen;
use SDUI\Components\Text;
use SDUI\Components\Button;

$screen = Screen::make('home')
    ->title('Welcome')
    ->add(
        Text::make('Hello, World!')
            ->bold()
            ->variant('heading')
    )
    ->add(
        Button::make('Get Started')
            ->variant('primary')
            ->navigateTo('features')
    );

return $screen->render();
```

### Using the Facade

[](#using-the-facade)

```
use SDUI\Facades\SDUI;

$screen = SDUI::screen('dashboard')
    ->title('Dashboard')
    ->add(Text::make('Welcome to your dashboard'));

return $screen->render();
```

### Conditional Rendering

[](#conditional-rendering)

```
$screen = Screen::make('profile')
    ->title('User Profile')
    ->add(Text::make($user->name))
    ->add(Text::make($user->email)->muted())
    ->addIf($user->isAdmin(), Button::make('Admin Panel')->destructive())
    ->addIf($user->isPremium(), Text::make('Premium User')->color('gold'));
```

### Rendering Collections

[](#rendering-collections)

```
$products = Product::all();

$screen = Screen::make('products')
    ->title('Our Products')
    ->addMany($products, fn($product) =>
        Stack::vertical(12)
            ->add(Image::make($product->image)->width(200)->height(200))
            ->add(Text::make($product->name)->bold())
            ->add(Text::make("$" . $product->price)->color('green'))
            ->add(
                Button::make('View')
                    ->navigateTo('product.show', ['id' => $product->id])
            )
    );
```

### Components

[](#components)

#### Text

[](#text)

```
Text::make('Hello')
    ->bold()
    ->variant('heading') // display | heading | subheading | body | caption | label
    ->align('center')
    ->color('blue')
    ->muted()
```

#### Button

[](#button)

```
Button::make('Click Me')
    ->variant('primary') // primary | secondary | ghost | danger
    ->disabled()
    ->loading()
    ->fullWidth()
    ->icon('icon-name', 'left')
    ->navigateTo('route.name', ['id' => 1])
```

#### Image

[](#image)

```
Image::make('https://example.com/image.jpg')
    ->width(300)
    ->height(300)
    ->rounded(12)
    ->circle()
    ->alt('Description')
```

#### Stack (Layouts)

[](#stack-layouts)

```
Stack::vertical(16)  // spacing in pixels
    ->add(Text::make('Item 1'))
    ->add(Text::make('Item 2'))
    ->align('center')
    ->justify('space-between')

Stack::horizontal(8)
    ->add(Button::make('Cancel'))
    ->add(Button::make('Confirm'))
```

#### Card

[](#card)

```
Card::make()
    ->add(Text::make('Card content'))
    ->padding(16)
    ->elevated()
```

#### Badge

[](#badge)

```
Badge::make('NEW')
    ->color('green')
    ->variant('filled')
```

#### ListItem

[](#listitem)

```
ListItem::make('Item Label')
    ->subtitle('Subtitle text')
    ->icon('icon-name')
    ->trailing('→')
    ->disclosure()
```

### Actions

[](#actions)

#### Navigate

[](#navigate)

```
Button::make('Go to Profile')
    ->navigateTo('profile.show', ['id' => $user->id])
```

#### Open URL

[](#open-url)

```
Button::make('Visit Website')
    ->openUrl('https://example.com', $inApp = true)
```

#### Emit Events

[](#emit-events)

```
Button::make('Submit')
    ->emit('form_submitted', ['status' => 'success'])
```

#### Custom Actions

[](#custom-actions)

```
Button::make('Custom')
    ->action('my_custom_action', ['key' => 'value'])
```

### Metadata

[](#metadata)

```
$screen = Screen::make('app')
    ->title('My App')
    ->meta('version', '1.0')
    ->meta('user_id', auth()->id())
    ->meta('timestamp', now())
    ->add(/* components */);
```

Building a REST API Response
----------------------------

[](#building-a-rest-api-response)

```
use Illuminate\Routing\Controller;

class ScreenController extends Controller
{
    public function home()
    {
        return Screen::make('home')
            ->title('Welcome')
            ->add(Text::make('This is your home screen'))
            ->render();
    }

    public function statusCode()
    {
        return Screen::make('error')
            ->add(Text::make('Something went wrong'))
            ->render(500);
    }

    public function withHeaders()
    {
        return Screen::make('app')
            ->add(Text::make('Content'))
            ->render(200, [
                'X-Custom-Header' => 'value',
            ]);
    }
}
```

Artisan Commands
----------------

[](#artisan-commands)

### Make a Custom Component

[](#make-a-custom-component)

```
php artisan sdui:make-component CustomComponent
```

This creates a new component template in `app/SDUI/Components/CustomComponent.php`

### Preview a Screen

[](#preview-a-screen)

```
php artisan sdui:preview HomeScreen
```

JSON Output Format
------------------

[](#json-output-format)

```
{
  "sdui": 1,
  "screen": {
    "id": "home",
    "title": "Welcome",
    "meta": {
      "version": "1.0"
    },
    "root": {
      "type": "stack",
      "props": {
        "direction": "vertical",
        "gap": 16
      },
      "children": [
        {
          "type": "text",
          "props": {
            "text": "Hello World",
            "bold": true,
            "variant": "heading"
          }
        },
        {
          "type": "button",
          "props": {
            "label": "Click Me",
            "variant": "primary"
          },
          "action": {
            "type": "navigate",
            "payload": {
              "route": "features"
            }
          }
        }
      ]
    }
  }
}
```

Testing
-------

[](#testing)

```
# Run all tests
composer test

# Run with coverage
XDEBUG_MODE=coverage composer test:coverage

# Run specific test
./vendor/bin/phpunit tests/Unit/ScreenTest.php

# Watch mode
composer test:watch
```

**Test Coverage**: 76+ tests covering all components, actions, and edge cases.

Available Components
--------------------

[](#available-components)

- **Text** - Display text with styling
- **Button** - Interactive button with actions
- **Image** - Display images with sizing
- **Stack** - Vertical/horizontal layouts
- **Card** - Contained content with styling
- **Badge** - Labels and tags
- **Avatar** - User profile pictures
- **Spacer** - Add spacing between elements
- **Divider** - Visual separators
- **ListItem** - List entry components
- **StatGrid** - Display statistics in a grid

Creating Custom Components
--------------------------

[](#creating-custom-components)

```