DOCSEARCHbyAlgolia
Submit Docs

Sheaf UI Components

repository·master·Indexed 43 days ago

https://github.com/sheafui/components

A collection of open-source UI components for Laravel applications, delivered via a CLI tool. Built with Blade, Alpine.js, Livewire, and Tailwind CSS, Sheaf UI provides production-ready components like Accordions, Alerts, and Autocomplete that are installed directly into the developer's codebase for full customization.

Tokens
172.3K
Snippets
592
Records
711
Agent score
54%

What's inside Sheaf UI

  1. Overview of the Sidebar component

    master

    The Sidebar component is a responsive and collapsible navigation sidebar. It is designed for modern web applications with features including:

    • Smooth transitions between states.
    • Touch-friendly interactions for mobile devices.
    • Intelligent viewport behavior that adapts across mobile, tablet, and desktop screens.

  2. Overview of copper-search component

    master

    The copper-search component is a search implementation designed for Sheaf UI. It provides a complete search experience including query highlighting, recent search history management (with removal capabilities), full accessibility support, and smooth UI transitions during result changes.

    Key Features

    • Query Highlighting: Visually highlights search terms in results.
    • Recent Searches: Tracks and allows users to manage their search history.
    • Accessibility: Built with full accessibility support.
    • Smooth Transitions: Uses animations for seamless result updates.

  5. Overview of the SheafUI Starter Kit Tech Stack

    master

    The starter kit is built using a modern, reactive stack designed for Laravel developers:

    • Laravel 12: The core framework.
    • Livewire 3: For building modern reactive components.
    • Tailwind 4: For styling.
    • Pest 4: For testing.
    • Heroicons: SVG icons provided via wireui/heroicons.
    • Sheaf CLI: Command-line tools for SheafUI development.

  6. What is the Combobox component?

    master

    The Combobox component is a type-to-search input that merges a text field with a dropdown list of options.

    Key differences from the Select component:

    • Direct Input: Unlike Select, which uses a button trigger to open a menu, Combobox exposes the input field directly.
    • Filtering: Users type directly into the field to filter and navigate available options.

    It is designed for scenarios requiring multi-selection, grouping, server-side search, and deep integration with Livewire.

  7. What is Livewire Entanglement?

    master

    Entanglement is a mechanism in Livewire that synchronizes state between JavaScript (Alpine.js) and PHP (Livewire server-side) automatically.

    • JavaScript → PHP: Changing a value in JavaScript automatically syncs it to the Livewire component on the server.
    • PHP → JavaScript: When Livewire updates a property on the server, the JavaScript value updates automatically without manual event listeners.

    There are two modes of entanglement:

    1. Deferred (default): Syncs the value on the next Livewire request.
    2. Live: Syncs the value immediately by triggering an instant server request using the .live modifier.
    // Inside an Alpine component within a Livewire component
init() {
    // 1. Deferred (default) - Syncs on the next Livewire request
    this.volume = this.$wire.$entangle('volume');
    
    // 2. Live - Syncs immediately (triggers instant server request)
    this.volume = this.$wire.$entangle('volume').live;
}

  8. Understand the Tabs Component Structure

    master

    The Tabs component is composed of four hierarchical parts:

    1. <x-ui.tabs>: The root container that manages the overall state.
    2. <x-ui.tab.group>: A container for the tab buttons/triggers.
    3. <x-ui.tab>: Individual tab buttons (triggers).
    4. <x-ui.tab.panel>: The content panels that correspond to each tab.

  9. Preventing Alpine.js flicker with the Layout runtime script

    master

    To prevent the 'flash' or 'jump' that occurs when Alpine.js initializes (e.g., a sidebar appearing expanded when it should be collapsed), the Layout component uses a pre-hydration runtime script.

    This script executes before Alpine.js initializes to:

    • Retrieve the sidebar collapse state from localStorage using the key _x_collapsedSidebar.
    • Detect the current viewport (mobile, tablet, or desktop).
    • Apply the correct state via data attributes on the layout element immediately.

    This ensures a zero-flicker, perfect initial render during hydration.

  10. Bind data in Wizard Step partials using statePath

    master

    When creating Blade partials for individual wizard steps, you must use the provided $statePath to ensure wire:model bindings correctly target the specific form object owned by the parent component.

    Always use the pattern wire:model="{{ $statePath }}.fieldName". This allows the step partial to be decoupled and reusable across different wizards, as $statePath resolves to the property name of the form object (e.g., account or profile).

    {{-- resources/views/livewire/wizard/steps/account.blade.php --}}
@props(['statePath'])

<x-ui.input
    wire:model="{{ $statePath }}.username"
    type="text"
/>

  11. Configure Calendar Selection Modes

    master

    The Calendar component supports three selection modes via the mode attribute:

    1. Single Selection (Default): Users select exactly one date. The bound value is an ISO date string YYYY-MM-DD.
    2. Multiple Selection: Users can select multiple individual dates. The bound value is an array of ISO strings.
    3. Range Selection: Users select a start and end date. The bound value is either an associative array ['start' => '...', 'end' => '...'] or a DateRange object.
    <x-ui.calendar mode="single" />
<x-ui.calendar mode="multiple" />
<x-ui.calendar mode="range" />

  12. Configure Radio Item Properties

    master

    Each <x-ui.radio.item> within a group can be customized with the following properties:

    • value="string": The underlying value associated with the option.
    • label="string": The text displayed to the user.
    • description="string": Additional context or subtext displayed below the label.
    • icon="icon-name": An icon to enhance visual communication (works with segmented and cards variants).
    • checked: A boolean attribute to set the item as the default selected option.