Skip to content
Sikessem Sikessem

The UI Package

TailwindCSS, Alpine.js and Laravel Livewire UI kit for Artisans.

📋 Requirements

🎉 Getting Started

⚡️ Installation

Install the Sikessem UI kit using Composer:

  • By adding the sikessem/ui dependency to your composer.json file:
{
    "require" : {
        "sikessem/ui": "self.version"
    }
}
  • Or by including the dependency:
Terminal window
composer require sikessem/ui --no-dev

🧑‍💻 Usage

📝 Syntax

There are several ways to use Sikessem’s UI components.

In the following examples component-name represents the name of the desired UI component. If you want to use the text component, replace component-name with text as needed.

You can find the list of all components here.

View namespace
<x-ui::component-name property="value">
  Content
</x-ui::component-name>
Component alias
<x-ui-component-name property="value">
  Content
</x-ui-component-name>
Component tags
<s-component-name property="value"/>
<s-component-name property="value">
  {{ $slot }}
</s-component-name>
Component slots
<s-component-name property="value">
  <s:slot-name slot-property="property-value">
    My Slot
  </s:slot-name>
</s-component-name>
Blade directives

Render a UI component:

@ui('component-name', ['property' => 'value'], 'Optional component slot or content')

If component-name is not a UI component it will be rendered as an HTML element.

Render an HTML orphan tag:

@tag('element-name', ['property' => 'value'])

Render an HTML paired tag:

@tag('element-name', ['property' => 'value'])
  Here, element content or nothing.
@endtag

Note that the name of the element is not specified when closing. This is automatically detected according to the nesting order of the paired elements.

ui() helper
ui()->make('component-name', ['property' => 'value'], 'content')
UI facade
UI::make('component-name', ['property' => 'value'], 'content')

🍱 UI Components

In the following examples, we will use component tags. However, the result will be the same if you prefer to use another syntax.

Text component

Allows to translate and/or escape a text:

<s-text value="Sigui Kessé Emmanuel<contact@sigui.ci>" escape translate/>

This will output the following HTML:

Sigui Kessé Emmanuel&lt;contact@sigui.ci&gt;

Create an anchor pointing to a route or URL:

<s-link route="home">Back to home</s-link>
<s-link href="/">Back to home</s-link>

This will output the following HTML:

<a href="/">Back to home</a>
<a href="http://localhost/">Back to home</a>
Button component

The Blade input:

<s-button>Click me</s-button>

The HTML output:

<button type="button">Click me</button>

The Blade input:

<s-button value="Click me"/>

The HTML output:

<input type="button" value="Click me"/>

The Blade input:

<s-button href="/">Click me</s-button>

The HTML output:

<a href="http://localhost">Click me</a>

The Blade input:

<s-submit-button>Click me</s-submit-button>

The HTML output:

<button type="submit">Click me</button>

The Blade input:

<s-reset-button>Click me</s-reset-button>

The HTML output:

<button type="reset">Click me</button>

The Blade input:

<s-image-button src="..." alt="...">Click me</s-image-button>

The HTML output:

<button type="image" src="..." alt="...">Click me</button>

Create a menu containing a list of entries:

<s-menu ordered :list="['Red', 'Green', 'Blue']"/>
<s-menu href="['Color' => ['Red', 'Green', 'Blue'], 'Author' => ['Kessé Emmanuel', 'Sigui']]"/>

This will output the following HTML:

<ol>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ol>
<ul>
  <li>
    Color
    <ul>
      <li>Red</li>
      <li>Green</li>
      <li>Blue</li>
    </ul>
  </li>
  <li>
    Author
    <ul>
      <li>Kessé Emmanuel</li>
      <li>Sigui</li>
    </ul>
  </li>
</ul>
Label component

Create a label:

<s-label>Content</s-label>
<s-label for="name" text="Name"/>

This will output the following HTML:

<label>Content</label>
<label for="name">Name</label>
Flash component

Create a flash:

<s-flash type="info"/>
<s-flash class="alert" type="info" message="Default info"/>

If session “info” was set to “Info”, the output will be:

<p>Info</p>

Otherwise, the output will be:

<p></p>

Or (in the second example):

<p class="alert">Default info</p>
Flashes component
<s-flashes :messages="['info' => 'Info', 'warning']"/>

If the “info” and “warning” sessions have been set to “Info” and “Warning” respectively, the output will be:

<ul>
  <li>Info</li>
  <li>Warning</li>
</ul>

Otherwise, the output will be:

<ul>
  <li>Info</li>
</ul>
Form component

Create a form:

<s-form>
  Put the form content here
</s-form>

This will output the following HTML:

<form method="GET" action="#">
  <input type="hidden" name="_token" value="...">
</form>
Error component

Create a error:

<s-error field="name"/>
Errors component
<s-errors/>
Entry component

Create an entry:

<s-entry type="email"/>
<s-entry type="textarea" name="comment"/>
<s-entry type="name" autocomplete :datalist=""/>

This will output the following HTML:

<input type="email" name="email" id="email" autocomplete="email" :datalist="[\'Emmanuel\', \'Kessé\', \'Sigui\']" aria-invalid="false"/>
<textarea name="comment" id="comment" autocomplete="comment" aria-invalid="false">
</textarea>
<input type="name" name="name" id="name" autocomplete="name" list="name-input-datalist" aria-invalid="false"/>
<datalist id="text-input-datalist">
  <option >Emmanuel</option>
  <option >Kessé</option>
  <option >Sigui</option>
</datalist>',
Icon component
<s-icon name="user-group"/>
<s-icon element="svg" name="user-group" type="solid" width="20" height="20" size="20"/>
<s-icon element="i" name="user-group" type="solid" width="20" height="20" size="20"/>
<s-icon element="img" name="user-group" type="solid" width="20" height="20" size="20"/>

🎨 Custom components

Create custom components from config/ui.php file.

@ui('custom', ['class' => 'element', 'id' => 'myElement'], '')
  My custom component
@endui

Output:

<custom-element class="my custom element" id="myElement">
  My custom component
</custom-element>

Component styles

Color utilities

<div class="text-red bg-red-light-0 border-red-dark-0"></div>