Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
<div>Start your first project to organise your issues.</div> </div> </div> </div> </div> </div> <!-- Loading State Demo --> <div class="demo-section"> <h2 class="h2 mb-3">Loading State</h2> <p class="mb-3">Provide visual cues to users when processes may take longer than expected.</p> <div class="demo-buttons"> <button class="btn" id="loading-initial-btn">Show Initial Loading</button> <button class="btn" id="loading-skeleton-btn">Show Skeleton Loading</button> </div> <div class="select-panel"> <button class="btn trigger-button" id="loading-trigger"> Assign people <svg class="octicon octicon-triangle-down ml-1" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </button> <div class="select-panel-overlay" id="loading-panel"> <div class="select-panel-header"> <h3 class="select-panel-title">Assign people</h3> <button class="btn-octicon" id="loading-close"> <svg class="octicon octicon-x" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </div> <div class="select-panel-body"> <input type="text" class="form-control select-panel-input" placeholder="Search people..." id="loading-search"> <div class="select-panel-list" id="loading-list"> <div class="loading-state"> <svg class="octicon octicon-sync mr-2" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="animation: spin 1s linear infinite;"> <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"></path> </svg> Fetching people... </div> </div> </div> </div> </div> </div> <!-- Keyboard Navigation Table --> <div class="demo-section"> <h2 class="h2 mb-3">Keyboard Navigation</h2> <div class="border rounded-2 overflow-hidden"> <table class="width-full"> <thead class="bg-gray-light"> <tr> <th class=" </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> <script> document.addEventListener("turbo:load", function() { var alerts = document.querySelectorAll('.alert') alerts.forEach(function(alert) { new bootstrap.Alert(alert) }) }) </script> <!--popover--> <script> document.addEventListener("DOMContentLoaded", function () { const dropdowns = document.querySelectorAll('[data-controller="dropdown-popover"]'); for (let i = 0; i < dropdowns.length; i++) { const dropdown = dropdowns[i]; const button = dropdown.querySelector('[data-dropdown-popover-target="button"]'); const menu = dropdown.querySelector('[data-dropdown-popover-target="menu"]'); if (!button || !menu) continue; let open = false; // Open menu button.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; open = true; }); // Close after leaving both button and menu button.addEventListener("mouseleave", () => { setTimeout(() => { if (!menu.matches(':hover')) { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; } }, 100); }); // Keep open while hovering over menu menu.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; }); menu.addEventListener("mouseleave", () => { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; }); } }); </script> <!--sendJF--> <script> document.querySelectorAll('#sendFiddle').forEach((btn, index) => { btn.addEventListener('click', () => { const iframe = document.querySelectorAll('iframe')[index]; const srcdoc = iframe?.getAttribute('srcdoc'); if (!srcdoc) { alert('iframe srcdoc not available'); return; } // Extract <style> and <script> content from srcdoc using regex const cssMatches = [...srcdoc.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)]; const jsMatches = [...srcdoc.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)]; const css = cssMatches.map(m => m[1]).join('\n'); const js = jsMatches.map(m => m[1]).join('\n'); // Remove <style> and <script> blocks to isolate HTML const html = srcdoc .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&'); // Create and submit form to JSFiddle const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://jsfiddle.net/api/post/library/pure/'; form.target = '_blank'; const addField = (name, value) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = name; input.value = value; form.appendChild(input); }; addField('html', html.trim()); addField('css', css.trim()); addField('js', js.trim()); addField('title', 'From Layr iframe srcdoc'); document.body.appendChild(form); form.submit(); document.body.removeChild(form); }); }); </script> <!--fullscreen--> <script> document.querySelectorAll('#FullscreenTab').forEach((button) => { button.addEventListener('click', function () { // Prevent duplicate fullscreen overlays if (document.getElementById('fullscreen-iframe-wrapper')) return; // Find the closest snippet container and its iframe const snippetContainer = this.closest('[data-controller="snippet"]'); const iframe = snippetContainer?.querySelector('iframe'); if (!iframe) { console.error('No iframe found for this FullscreenTab.'); return; } // Create a cloned iframe using srcdoc or fallback to content HTML const iframeClone = document.createElement('iframe'); iframeClone.className = 'w-full h-full border-0 rounded-xl bg-white dark:bg-neutral-900'; iframeClone.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-forms'); iframeClone.srcdoc = iframe.srcdoc || iframe.contentDocument?.documentElement?.outerHTML; // Create overlay const overlay = document.createElement('div'); overlay.id = 'fullscreen-iframe-wrapper'; overlay.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4'; // Create container for iframe and close button const container = document.createElement('div'); container.className = ' iframe_main_show relative w-full max-w-6xl h-[90vh] bg-white dark:bg-neutral-900 rounded-xl overflow-hidden shadow-2xl'; // Close button const closeBtn = document.createElement('button'); closeBtn.innerHTML = '×'; closeBtn.className = ` absolute top-3 right-3 text-white text-2xl font-bold bg-black/40 hover:bg-black/70 rounded-full w-10 h-10 flex items-center justify-center transition `; closeBtn.addEventListener('click', () => overlay.remove()); // Assemble container.appendChild(closeBtn); container.appendChild(iframeClone); overlay.appendChild(container); document.body.appendChild(overlay); }); }); </script> </body> </html>