### Install Sheaf UI Alerts Component Source: https://sheafui.dev/docs/components/alerts Installs the 'alerts' component using the 'sheaf artisan' command. This command automates the setup process for the component. ```bash php artisan sheaf:install alerts ``` -------------------------------- ### Sheaf UI Component Installation (Artisan) Source: https://sheafui.dev/docs/guides/cli-installation Details the process of installing Sheaf UI components using the Artisan CLI. Shows basic installation, examples, and various options like force overwrite, dry runs, and dependency management. ```bash php artisan sheaf:install component-name ``` ```bash # Install a button component php artisan sheaf:install button # Install a modal component (may include dependencies) php artisan sheaf:install modal ``` ```bash php artisan sheaf:install button --force ``` ```bash php artisan sheaf:install button --dry-run ``` ```bash php artisan sheaf:install button --internal-deps --external-deps ``` ```bash php artisan sheaf:install button --only-deps ``` ```bash php artisan sheaf:install button --skip-deps ``` ```bash # Install all form components php artisan sheaf:install button input select textarea switch radio ``` -------------------------------- ### Install Sheaf UI Textarea Component Source: https://sheafui.dev/docs/components/textarea Installs the textarea component using the sheaf artisan command. This is the initial setup step for using the component. ```php php artisan sheaf:install textarea ``` -------------------------------- ### Install Sheaf UI Switch Component Source: https://sheafui.dev/docs/components/switch Installs the 'switch' component using the sheaf artisan command. This is the initial setup step before using the component in Blade views. ```shell php artisan sheaf:install switch ``` -------------------------------- ### Install Sheaf UI Description Component Source: https://sheafui.dev/docs/components/description Installs the description component using the sheaf artisan command. This is the primary method for adding the component to your project. ```bash php artisan sheaf:install description ``` -------------------------------- ### Install Theme Switcher Component Source: https://sheafui.dev/docs/components/theme-switcher Installs the theme-switcher component using the sheaf artisan command. Ensure the themes system is set up first. ```bash php artisan sheaf:install theme-switcher ``` -------------------------------- ### Basic Modal Example Source: https://sheafui.dev/docs/components/modal A fundamental example demonstrating the basic structure and content placement for a SheafUI modal. ```html Modal content goes here... ``` -------------------------------- ### Install Sheaf UI Input Component Source: https://sheafui.dev/docs/components/input Installs the 'input' component using the sheaf artisan command. This is the primary method for adding the component to your project. ```bash php artisan sheaf:install input ``` -------------------------------- ### Install Sheaf UI Key-Value Component Source: https://sheafui.dev/docs/components/key-value Installs the key-value component using the Sheaf Artisan command. This is the initial step to integrate the component into your project. ```bash php artisan sheaf:install key-value ``` -------------------------------- ### Install Sheaf UI via Artisan Source: https://sheafui.dev/docs/index This command scaffolds Sheaf UI components into your Laravel project, streamlining the setup process and avoiding manual copy-pasting. ```bash php artisan make:sheaf-ui ``` -------------------------------- ### Install Sheaf UI Button Component Source: https://sheafui.dev/docs/components/button Installs the Sheaf UI Button component using the artisan command. This is a prerequisite for using the component in your project. ```bash php artisan sheaf:install button ``` -------------------------------- ### Install Sheaf UI Tabs Component Source: https://sheafui.dev/docs/components/tabs Installs the Tabs component using the sheaf artisan command. This is the primary method for adding the component to your project. ```bash php artisan sheaf:install tabs ``` -------------------------------- ### Install Heroicons WireUI Wrapper Source: https://sheafui.dev/docs/components/icon Installs the WireUI wrapper package for Heroicons. This is a prerequisite for using Heroicons with the Sheaf UI Icon component. ```bash composer require wireui/heroicons ``` -------------------------------- ### Install Sheaf UI Tags Input Component Source: https://sheafui.dev/docs/components/tags-input Installs the tags-input component using the sheaf artisan command. This is the initial step to integrate the component into your project. ```php php artisan sheaf:install tags-input ``` -------------------------------- ### Install Sheaf UI Icon Component Source: https://sheafui.dev/docs/components/icon Installs the Icon component using the Sheaf artisan command. This command makes the `` component readily available for use in your views. ```bash php artisan sheaf:install icon ``` -------------------------------- ### Install Sheaf UI Modal Component Source: https://sheafui.dev/docs/components/modal Installs the modal component using the sheaf artisan command and imports the necessary JavaScript file into app.js. ```shell php artisan sheaf:install modal ``` ```javascript // ... import './globals/modals.js'; // ... ``` -------------------------------- ### Install OTP Component with Sheaf CLI Source: https://sheafui.dev/docs/components/otp Installs the OTP component using the sheaf artisan command. This is the primary method for adding the component to your project. ```bash php artisan sheaf:install otp ``` -------------------------------- ### Install Sheaf UI Badge Component Source: https://sheafui.dev/docs/components/badge Installs the Sheaf UI badge component using the Artisan command. This command is typically run once after project setup to integrate the component. ```php php artisan sheaf:install badge ``` -------------------------------- ### Install Sheaf UI Dropdown Component Source: https://sheafui.dev/docs/components/dropdown Installs the dropdown component using the sheaf artisan command. This is a command-line operation for setting up the component within a PHP project. ```shell php artisan sheaf:install dropdown ``` -------------------------------- ### Install Sheaf UI Tooltip Component Source: https://sheafui.dev/docs/components/tooltip Installs the tooltip component using the sheaf artisan command. This is the initial step before using the component in Blade views. ```bash php artisan sheaf:install tooltip ``` -------------------------------- ### Install Sheaf UI Starter Kit for Laravel Source: https://sheafui.dev/docs/guides/starter-kit Command to create a new Laravel application using the Sheaf UI starter kit skeleton. This is the primary method to begin a new project with these tools. ```bash laravel new example-name --using=sheaf/starter-kit ``` -------------------------------- ### Install Sheaf UI Link Component Source: https://sheafui.dev/docs/components/link Installs the 'link' component for Sheaf UI using the Artisan command. This is the primary method for integrating the component into your project. ```php php artisan sheaf:install link ``` -------------------------------- ### Sheaf UI Switch Icon Examples Source: https://sheafui.dev/docs/components/switch Presents multiple examples of using different icon combinations for the Switch component's on and off states, showcasing flexibility with sizes. ```blade ``` -------------------------------- ### Modal Sizing Examples Source: https://sheafui.dev/docs/components/modal Provides examples of setting the `width` prop for SheafUI modals to control their size, ranging from small confirmations to larger content areas and full-screen mobile views. ```html ``` -------------------------------- ### Tabs Alignment: Justify Start Source: https://sheafui.dev/docs/components/tabs Shows how to align tabs to the start of the tab group using the `justify-start` class on the `x-ui.tab.group` element. This example also includes icons. ```html ... ... ... ``` -------------------------------- ### Install Sheaf UI Avatar Component Source: https://sheafui.dev/docs/components/avatar Installs the avatar component using the sheaf artisan command. After installation, the component can be used in Blade views. ```php php artisan sheaf:install avatar ``` -------------------------------- ### Install Sheaf UI Toast Component Source: https://sheafui.dev/docs/components/toast Installs the toast component using the sheaf artisan command. Requires the component to be placed in a global layout file. ```php php artisan sheaf:install toast ``` ```html ``` -------------------------------- ### Usage Example: Reverse Layout Source: https://sheafui.dev/docs/components/accordion Example demonstrating how to use the reverse layout for the accordion. ```APIDOC ## Reverse Layout ### Description Use the reverse layout to position chevron icons on the left side. ### Method N/A ### Endpoint N/A ### Parameters #### Path Parameters - **reverse** (boolean) - Required - Applies the reverse layout to the accordion. ### Request Example ```html ``` ### Response #### Success Response (200) - **N/A** - This is a UI component example. #### Response Example ```html ``` ``` -------------------------------- ### Install Sheaf UI Text Component (Artisan) Source: https://sheafui.dev/docs/components/text Installs the 'text' component using the Sheaf UI Artisan command. This is the primary method for adding the component to your project. ```bash php artisan sheaf:install text ``` -------------------------------- ### Install Sheaf UI Radio Component Source: https://sheafui.dev/docs/components/radio Installs the Radio component using the Sheaf UI artisan command. This is the initial step to enable the use of radio button components in your project. ```php php artisan sheaf:install radio ``` -------------------------------- ### Install Label Component (PHP) Source: https://sheafui.dev/docs/components/label Installs the Label component using the Sheaf Artisan command-line tool. This is the primary method for adding the component to your project. ```bash php artisan sheaf:install label ``` -------------------------------- ### Install Sheaf UI Select Component Source: https://sheafui.dev/docs/components/select Installs the Sheaf UI select component using the Artisan command. This command sets up the necessary files and configurations for using the select component in your Laravel project. ```php php artisan sheaf:install select ``` -------------------------------- ### Install Sheaf UI Brand Component Source: https://sheafui.dev/docs/components/brand Installs the 'brand' component for Sheaf UI using the Artisan command-line tool. This is the first step before using the component in Blade views. ```shell php artisan sheaf:install brand ``` -------------------------------- ### Install Sheaf UI Popover Component Source: https://sheafui.dev/docs/components/popover Installs the 'popover' component into your Sheaf UI project using the Artisan command. ```php php artisan sheaf:install popover ``` -------------------------------- ### Install Sheaf UI Autocomplete Component Source: https://sheafui.dev/docs/components/autocomplete Installs the Autocomplete component for Sheaf UI using the Artisan command. This is the primary method for setting up the component in a Laravel project. ```bash php artisan sheaf:install autocomplete ``` -------------------------------- ### Install Separator Component (Artisan) Source: https://sheafui.dev/docs/components/separator Installs the Separator component using the sheaf artisan command. This is the primary method for adding the component to your Laravel project. ```bash php artisan sheaf:install separator ``` -------------------------------- ### Description Component for Website URL Input Source: https://sheafui.dev/docs/components/description Shows how to use the description component to guide users on entering a full website URL, including the protocol. ```html Website URL Enter your full website URL including https:// ``` -------------------------------- ### Initialize Sheaf CLI in Laravel Project Source: https://sheafui.dev/docs/guides/cli-installation Initializes the Sheaf UI package in your Laravel project, setting up essential dependencies and configurations. This is a one-time setup command. It can be run with various options to customize the setup, such as including dark mode or specific icon libraries. ```php php artisan sheaf:init ``` ```php php artisan sheaf:init --with-dark-mode --with-phosphor ``` ```php php artisan sheaf:init --css-file=styles/main.css --theme-file=custom-theme ``` ```php php artisan sheaf:init --skip-prompts ``` ```php php artisan sheaf:init --force ``` ```php php artisan sheaf:init \ --with-dark-mode \ --with-phosphor \ --css-file=resources/css/app.css \ --theme-file=sheaf-theme \ --skip-prompts ``` -------------------------------- ### Install Sheaf UI Accordion Component Source: https://sheafui.dev/docs/components/accordion Installs the Accordion component for Sheaf UI using a PHP artisan command. This is the primary method for setting up the component in your project. ```php php artisan sheaf:install accordion ``` -------------------------------- ### Install Sheaf CLI with Composer Source: https://sheafui.dev/docs/guides/cli-installation This command installs the Sheaf UI CLI package into your Laravel project using Composer. Ensure you meet the specified Laravel, PHP, and Tailwind CSS version requirements. ```bash composer require sheaf/cli ``` -------------------------------- ### Install Sheaf UI Error Component Source: https://sheafui.dev/docs/components/error Installs the Error component using the Sheaf UI Artisan command. This is the primary method for adding the component to your project. ```shell php artisan sheaf:install error ``` -------------------------------- ### Install Sheaf UI Heading Component Source: https://sheafui.dev/docs/components/heading Installs the Heading component using the Sheaf UI artisan command. This command sets up the necessary files for the component to be used in Blade views. ```shell php artisan sheaf:install heading ``` -------------------------------- ### Install Sheaf UI Fieldset Component Source: https://sheafui.dev/docs/components/fieldset Installs the 'fieldset' component for Sheaf UI using the Artisan command-line tool. This command is specific to the PHP/Laravel ecosystem. ```bash php artisan sheaf:install fieldset ``` -------------------------------- ### Install Phosphor Icons WireUI Wrapper Source: https://sheafui.dev/docs/components/icon Installs the WireUI wrapper package for Phosphor Icons. This is necessary to utilize Phosphor Icons within the Sheaf UI Icon component. ```bash composer require wireui/phosphoricons ``` -------------------------------- ### Slideover Modal Example Source: https://sheafui.dev/docs/components/modal Demonstrates creating a slideover panel by setting the `slideover` prop to true. ```html Slideover content goes here... ``` -------------------------------- ### Add Component via CLI Source: https://sheafui.dev/docs/guides/overview Demonstrates how to add a component to your project using the Sheaf UI CLI. This command handles setup, imports, and file placement for the specified component. ```php php artisan sheaf:add button php artisan sheaf:add tags-input php artisan sheaf:add select php artisan sheaf:add ... ``` -------------------------------- ### Sheaf UI Button Variant Examples Source: https://sheafui.dev/docs/components/button Presents examples of the different visual variants supported by the Sheaf UI Button component, including default, ghost, outline, solid, soft, and danger. ```blade Button Ghost Outline solid soft Danger ``` -------------------------------- ### Sheaf UI Field with Description Example Source: https://sheafui.dev/docs/components/field Illustrates how to include a description for a form field using the 'x-ui.description' component within the 'x-ui.field' wrapper. This provides additional context or instructions to the user regarding the input. This example shows a password field. ```html Password Must be at least 8 characters long and include numbers ``` -------------------------------- ### Scale Animation Modal Example Source: https://sheafui.dev/docs/components/modal Demonstrates applying a scale animation to the modal by setting the `animation` prop to 'scale'. ```html The modal scales from 95% to 100% size with opacity transition. ``` -------------------------------- ### Install Sheaf UI Field Component Source: https://sheafui.dev/docs/components/field Installs the 'field' component for Sheaf UI using the Artisan command-line tool. This command-line interface (CLI) operation is specific to the PHP/Laravel ecosystem. ```bash php artisan sheaf:install field ``` -------------------------------- ### Install Sheaf UI Card Component Source: https://sheafui.dev/docs/components/card Installs the Card component for Sheaf UI using the Artisan command-line tool. This makes the component available for use in Blade views. ```bash php artisan sheaf:install card ``` -------------------------------- ### Sheaf UI Avatar Basic Usage Examples Source: https://sheafui.dev/docs/components/avatar Demonstrates the different ways to use the Avatar component: displaying an image, initials, an icon, or a fallback avatar. ```html ``` -------------------------------- ### Tabs Navigation Example Source: https://sheafui.dev/docs/index Illustrates creating tab navigation with associated content for user profiles and settings. ```blade User Settings Clock
User tab : Lorem ipsum dolor sit amet, consectetur adipisicing elit. ad.
Setting tab : Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus?
Clock tab : Clock tab Lorem ipsum dolor, sit amet consectetura dipisicing elit..
``` -------------------------------- ### Dynamic Options with Livewire for SheafUI Select Source: https://sheafui.dev/docs/components/select Provides an example of dynamically populating options in a SheafUI select component using Livewire. It shows how to define categories in a Livewire component and bind them to the select element. ```php // In your Livewire component public $selectedCategories = []; public $categories = [ 'web' => 'Web Development', 'mobile' => 'Mobile Development', 'design' => 'UI/UX Design', 'backend' => 'Backend Development', ]; ``` ```html @foreach ($categories as $key => $value) {{ $value }} @endforeach ``` -------------------------------- ### Heroicons Usage Examples Source: https://sheafui.dev/docs/components/icon Demonstrates how to use the Icon component with Heroicons, showcasing different variants like 'outline', 'solid', 'mini', and 'micro' for various sizes and styles. ```blade ``` -------------------------------- ### Registration Form Example (Blade) Source: https://sheafui.dev/docs/components/label A complete form example demonstrating the use of Label components with Field, Input, and Error components for a registration form. Includes required fields and input placeholders. ```blade
Full Name Email Address Company
``` -------------------------------- ### Popover Usage and API Key Example Source: https://sheafui.dev/docs/components/popover Demonstrates how to use the popover component for help information and API key display, including hover triggers and custom content. ```APIDOC ## Popover Usage This section demonstrates the basic usage of the popover component, including how to display help information and API keys. ### Example ```html
Help
How to use this feature This feature allows you to quickly access common actions. Click on any item to perform the action.
  • Use keyboard shortcuts for faster access
  • Right-click for additional options
  • Hold Shift to select multiple items
 API Key
Your API key is used to authenticate requests. Keep it secure and don't share it publicly.
``` ``` -------------------------------- ### Transparent Backdrop Modal Example Source: https://sheafui.dev/docs/components/modal Shows how to use a transparent backdrop for a modal by setting the `backdrop` prop to 'transparent'. ```html You can see the background clearly through the transparent backdrop. ``` -------------------------------- ### Slide Animation Modal Example Source: https://sheafui.dev/docs/components/modal Shows how to apply a slide animation to the modal by setting the `animation` prop to 'slide'. ```html The modal slides in from the right side of the screen. ``` -------------------------------- ### Dropdown Menu Example Source: https://sheafui.dev/docs/index Shows how to create a reusable dropdown menu with Sheaf UI, including options for file operations. ```blade File Menu New File Open File ``` -------------------------------- ### Select Dropdown Example Source: https://sheafui.dev/docs/index Demonstrates the usage of a dropdown selector component for choosing cities, featuring search functionality. ```blade ``` -------------------------------- ### Dark Backdrop Modal Example Source: https://sheafui.dev/docs/components/modal Illustrates using a dark backdrop for a modal by setting the `backdrop` prop to 'dark'. ```html The background is darkened for better focus. ``` -------------------------------- ### Sheaf UI Complex Alert Example Source: https://sheafui.dev/docs/components/alerts A comprehensive example combining all features: error type, custom icon, descriptive content with a list, and multiple action buttons for user interaction. ```blade Security Alert: Suspicious Activity Detected

We've detected unusual login attempts from an unrecognized location. If this wasn't you, please secure your account immediately.

  • Location: San Francisco, CA
  • Time: Today at 2:15 PM
  • Device: Unknown mobile device
 Secure Account This Was Me Learn More ``` -------------------------------- ### Alpine.js x-modelable Example Source: https://sheafui.dev/docs/guides/usage-patterns Illustrates the core concept of Alpine.js's `x-modelable` for syncing component state with an external model. This is fundamental for cross-framework compatibility. ```html
Number:
``` -------------------------------- ### Basic Radio Group Example Source: https://sheafui.dev/docs/components/radio A fundamental example of a radio group with multiple options. It includes a label and several radio items, with one item pre-selected using the `checked` attribute. ```blade ``` -------------------------------- ### Using the $modal Store for Modal Management Source: https://sheafui.dev/docs/components/modal Provides examples of how to interact with the global '$modal' store in Alpine.js to control modal visibility. This includes opening modals by ID, closing them, checking their open state, closing all modals, and getting a list of currently open modals. ```javascript $modal.open('login'); // Opens the login modal $modal.close('login'); // Closes the login modal console.log($modal.isOpen('login')); // false after close $modal.closeAll(); // Close every open modal instantly console.log($modal.getOpenedModals()); // [] ``` -------------------------------- ### Tabs with Icons Source: https://sheafui.dev/docs/components/tabs Shows how to add icons to Sheaf UI tabs using the `icon` prop on the `x-ui.tab` component. This example includes user, settings, and clock icons. ```html ... ... ... ``` -------------------------------- ### Status Badge Examples Source: https://sheafui.dev/docs/components/badge Demonstrates common usage patterns for status indicators and labels using the Status Badge component. ```APIDOC ## Status Badge Examples ### Description Common usage patterns for status indicators and labels. ### Code Examples ```html
Order Status: Shipped
Priority: High Medium Low
Tags: React TypeScript Tailwind
``` ``` -------------------------------- ### Bottom Positioned Modal Example Source: https://sheafui.dev/docs/components/modal Shows how to position a modal at the bottom of the viewport using the `position` prop. ```html Modal content goes here... ``` -------------------------------- ### Basic Modal Example Source: https://sheafui.dev/docs/index Demonstrates the usage of a simple modal component in Laravel Blade, showcasing its basic structure and content rendering. ```blade Open modal Modal content goes here... ``` -------------------------------- ### Usage Example: Disabled Accordion Item Source: https://sheafui.dev/docs/components/accordion Example demonstrating how to disable an accordion item. ```APIDOC ## Disabled Accordion Item ### Description Disable specific accordion items to prevent user interaction. ### Method N/A ### Endpoint N/A ### Parameters #### Path Parameters - **disabled** (boolean) - Required - Sets the item to a disabled state. - **trigger** (string) - Required - Text for the accordion item trigger. ### Request Example ```html

This content is not yet available.

 ``` ### Response #### Success Response (200) - **N/A** - This is a UI component example. #### Response Example ```html ``` ``` -------------------------------- ### Sheaf UI Avatar Initials Generation Examples Source: https://sheafui.dev/docs/components/avatar Details the automatic generation of initials from names, including options for single initials, multiple names, and custom initials. ```html ``` -------------------------------- ### Post Creation with Success Toast Source: https://sheafui.dev/docs/components/toast An example snippet showing how to flash a success toast after a record has been successfully created in the database. It then redirects to the index page. ```php // After creating a record $post = Post::create($validatedData); session()->flash('notify', [ 'content' => 'Post created successfully!', 'type' => 'success' ]); return redirect()->route('posts.index'); ``` -------------------------------- ### List All Sheaf UI Components (PHP) Source: https://sheafui.dev/docs/guides/cli-installation This command lists all available components within the Sheaf UI library. It is a fundamental command for discovering what components are ready for use in your project. ```php php artisan sheaf:list ``` -------------------------------- ### Conditional Options in SheafUI Select with Livewire Source: https://sheafui.dev/docs/components/select Demonstrates how to conditionally render options within a SheafUI select component based on a user's attributes or other logic in Livewire. This example shows displaying an 'Enterprise Plan' only if the user qualifies. ```html Free Plan Pro Plan @if($user->isEnterprise()) Enterprise Plan @endif ``` -------------------------------- ### Install Breadcrumbs Component with Sheaf Artisan Source: https://sheafui.dev/docs/components/breadcrumbs Installs the breadcrumbs component using the sheaf artisan command. This is the primary method for adding the component to your project. ```bash php artisan sheaf:install breadcrumbs ``` -------------------------------- ### Phosphor Icons Usage Examples Source: https://sheafui.dev/docs/components/icon Illustrates using the Icon component with Phosphor Icons. Icons are prefixed with 'ps:' or 'phosphor:', and variants like 'thin', 'light', 'regular', 'duotone', 'bold', and 'fill' are supported. ```blade ``` -------------------------------- ### Using Theme Variables in Components Source: https://sheafui.dev/docs/guides/themes Illustrates how to apply theme variables directly to HTML elements using utility classes. This example shows a button styled with the primary color and foreground text color. ```html ``` -------------------------------- ### Basic OTP Input Usage (Livewire) Source: https://sheafui.dev/docs/components/otp Demonstrates the basic usage of the OTP component with Livewire, binding the input to a Livewire property. ```html ``` -------------------------------- ### Complete Form Example with SheafUI Source: https://sheafui.dev/docs/components/input Demonstrates a comprehensive form structure using SheafUI's fieldset, field, label, description, input, and error components for personal and professional details. It includes input fields for name, email, password, website, and company, with features like clearable and revealable passwords. ```html
Full Name Your first and last name Email Address
Password Confirm Password
Website Your personal or company website https:// .com Company
``` -------------------------------- ### E-commerce Context Breadcrumbs Example Source: https://sheafui.dev/docs/components/breadcrumbs A practical example showcasing breadcrumbs tailored for an e-commerce scenario. It includes a home icon, slash separators, and displays a product hierarchy. ```blade Electronics Laptop MacBook Pro 16" ``` -------------------------------- ### Basic Usage with Livewire Source: https://sheafui.dev/docs/components/tags-input Demonstrates the basic usage of the tags-input component within a Livewire application, binding the tags state using `wire:model`. ```html ``` -------------------------------- ### Basic Textarea Usage Source: https://sheafui.dev/docs/components/textarea Demonstrates the basic implementation of the textarea component with Livewire model binding and a placeholder. ```html ``` -------------------------------- ### Initialize Sheaf UI with CLI Source: https://sheafui.dev/docs/guides/dark-mode Command to initialize Sheaf UI, which automatically adds utility files for theme management and other global functionalities. ```bash php artisan sheaf:init ``` -------------------------------- ### Sheaf UI Authentication Commands (Artisan) Source: https://sheafui.dev/docs/guides/cli-installation Demonstrates the Artisan commands for managing authentication with your Sheaf UI account. Includes logging in, checking the current user, and logging out. ```bash php artisan sheaf:login ``` ```bash php artisan sheaf:whoami ``` ```bash php artisan sheaf:logout ``` -------------------------------- ### Basic OTP Input Usage (Alpine.js) Source: https://sheafui.dev/docs/components/otp Shows how to use the OTP component with Alpine.js, binding the input using x-model. ```html
``` -------------------------------- ### Popover Positioning Examples Source: https://sheafui.dev/docs/components/popover Illustrates how to control the popover's position relative to its trigger using the 'position' attribute, with examples for 'bottom' and 'top'. It shows basic popover structure with custom positioning. ```html Bottom

Bottom positioned

 Top

Top positioned

 ``` -------------------------------- ### Key-Value Input with Livewire Source: https://sheafui.dev/docs/components/key-value Shows how to use the key-value component with Livewire, expecting an array of keyed arrays. Includes customization of labels for keys and values. ```html
``` -------------------------------- ### Basic Link Usage in Sheaf UI Source: https://sheafui.dev/docs/components/link Demonstrates the basic usage of the `x-ui.link` component to create a styled hyperlink. It includes the target URL and the link text. ```html Visit our website ``` -------------------------------- ### Center Aligned Modal Example Source: https://sheafui.dev/docs/components/modal Illustrates how to vertically center a modal using the `position` prop. ```html Modal content goes here... ``` -------------------------------- ### Searchable Multiple Selection with SheafUI Select Source: https://sheafui.dev/docs/components/select Demonstrates how to use the SheafUI select component to enable searching and selecting multiple options from a list. It includes attributes for placeholder, icons, and Livewire model binding. ```html John Doe Jane Smith Mike Johnson Sarah Wilson David Brown Lisa Davis ``` -------------------------------- ### Basic Key-Value Input in Blade Source: https://sheafui.dev/docs/components/key-value Demonstrates the basic usage of the key-value component in a Blade template. It takes a `wire:model` for Livewire integration and a customizable label. ```html ```