superbyte/ui

Superbyte UI — a hand-crafted, zero-dependency, composable UI component library for Laravel + Livewire.

Maintainers

Package info

github.com/superbyte23/superbyte-ui-livewire

pkg:composer/superbyte/ui

Transparency log

Statistics

Installs: 1

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

dev-main 2026-08-07 06:00 UTC

Requires

Requires (Dev)

MIT 88e93e1fa7b9238405767750af0127d50b490f7c

uicomponentslaravelbladetailwindlivewire

Published on Packagist.org on 2026-08-07 06:27 UTC

This package is auto-updated.

Last update: 2026-08-07 06:27:32 UTC

README

A hand-crafted, zero-dependency UI component library for Laravel + Livewire. Built with Blade anonymous components, Tailwind CSS v4 design tokens, and Alpine.js — no build step required.

<sb:button variant="primary" icon="plus">Save</sb:button>

Requirements

  • PHP 8.3+
  • Laravel 12
  • Livewire 4 (for wire:model / validation features)
  • Tailwind CSS v4 (optional but recommended — tokens are mapped via @theme)

Installation

composer require superbyte/ui

The service provider is auto-discovered. If your app does not use package discovery, register SuperbyteUi\SuperbyteUiServiceProvider in bootstrap/providers.php.

Quick start

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My App</title>

    @sbAppearance
    @sbStyles
    @sbScripts
</head>
<body>
    <sb:heading level="h1">Welcome</sb:heading>

    <sb:input wire:model="email" type="email" label="Email" />
    <sb:button type="submit">Save</sb:button>
</body>
</html>

The sb: prefix

Components are used with the sb prefix, rendered by the package's Blade tag compiler:

<sb:button>Save</sb:button>
<sb:card>
    <sb:card.header title="Settings" />
    <sb:card.footer><sb:button size="sm">Save</sb:button></sb:card.footer>
</sb:card>

Laravel's stock compiler only understands x- tags, so the package registers a custom compiler as a Blade precompiler. The classic x-sb::button syntax also keeps working. The prefix is configurable:

// config/superbyte-ui.php
'prefix' => 'sb',

Directives

@sbAppearance

Emits the pre-paint theme bootstrap — a small inline script that applies light/dark/system from localStorage (sb-theme, configurable) before first paint. No FOUC, no scroll jump.

@sbStyles

Emits the package CSS (design tokens + component base styles). By default the CSS is inlined into the page; set assets.inline to false to emit a link to the published asset instead:

php artisan vendor:publish --tag=superbyte-ui-assets

@sbScripts

Emits the package JavaScript (a tiny Alpine plugin / theme helper). Same inlining behavior as @sbStyles.

Theming

Design tokens are plain CSS custom properties with a .dark variant — e.g. --color-primary-*, --color-surface-*, --color-line, radius, and type scales. They map to Tailwind v4 utilities (bg-surface-1, text-primary-600) via @theme in the package CSS, and remain usable as raw variables for consumers without Tailwind.

// Toggle from JS
window.SuperbyteUi.setTheme('dark');

Publishing overrides

# Publish config
php artisan vendor:publish --tag=superbyte-ui-config

# Publish component views (loaded before the package defaults)
php artisan vendor:publish --tag=superbyte-ui-views

# Publish CSS/JS assets
php artisan vendor:publish --tag=superbyte-ui-assets

Documentation

See docs/ for the component catalog and reference pages (install, props, usage examples, and theming). Every component ships a dedicated reference page under docs/components/.

Development

Tests use Pest + Testbench and a small Livewire fixture:

composer install
vendor/bin/pest

The suite covers the class-merge engine, attribute forwarding, every component's rendering, directive output, and Livewire integration (wire:model forwarding, validation errors into <sb:error>, value persistence).

Version

0.1.0 — initial release. See DEV_PLAN.md (repo root) for the full roadmap.