1<!DOCTYPE html> 2<html lang="en" class="bg-[#FCFBF9] dark:bg-[#111111] text-neutral-800 dark:text-neutral-50"> 3 <head> 4 <title>Rails Blocks | Changelog | Rails Blocks updates</title> 5<meta name="description" content="A list of updates and changes to Rails Blocks. Subscribe to the newsletter or RSS feed to get notified when new components come out." /> 6<meta name="keywords" content="rails, ui, components, free, stimulus, controllers, ruby on rails, rails blocks, rails blocks ui, rails blocks components, rails blocks ui components, rails blocks free, rails blocks pro, rails blocks pro ui, rails blocks pro ui components, rails blocks pro ui components free" /> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <meta charset="utf-8"> 9 10 <!-- Theme initialization script to prevent FOUC --> 11
11<script> 12 (function() { 13 function selectedPalette() { 14 const storedMode = localStorage.getItem("theme"); 15 16 if (storedMode === "light" || storedMode === "dark") return storedMode; 17 18 return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; 19 } 20 21 function paintTheme(root) { 22 const palette = selectedPalette(); 23 const dark = palette === "dark"; 24 25 root.classList.toggle("dark", dark); 26 root.classList.toggle("sl-theme-dark", dark); 27 root.style.colorScheme = palette; 28 root.dataset.theme = palette; 29 } 30 31 paintTheme(document.documentElement); 32 33 document.addEventListener("turbo:before-render", function(event) { 34 paintTheme(event.detail.newBody.ownerDocument.documentElement); 35 }); 36 37 document.addEventListener("turbo:render", function() { 38 paintTheme(document.documentElement); 39 }); 40 41 document.addEventListener("turbo:load", function() { 42 paintTheme(document.documentElement); 43 }); 44 })(); 45 </script>
45 46 47 <!-- SEO Meta Tags --> 48 <meta name="author" content="Rails Blocks"> 49 <meta name="robots" content="index, follow"> 50 51 <!-- Open Graph / Facebook --> 52 <meta property="og:type" content="website"> 53 <meta property="og:url" content="https://railsblocks.com/changelog"> 54 <meta property="og:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus"> 55 <meta property="og:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI & MCP server."> 56 <meta property="og:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png"> 57 58 <!-- Twitter --> 59 <meta property="twitter:card" content="summary_large_image"> 60 <meta property="twitter:url" content="https://railsblocks.com/changelog"> 61 <meta property="twitter:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus"> 62 <meta property="twitter:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI & MCP server."> 63 <meta property="twitter:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png"> 64 65 <!-- Canonical URL --> 66 <link rel="canonical" href="https://railsblocks.com/changelog"> 67 68 <!-- RSS Feed --> 69 <link rel="alternate" type="application/rss+xml" title="Rails Blocks - Component Updates" href="https://railsblocks.com/feeds/documentation.xml"> 70 71 <meta name="csrf-param" content="authenticity_token" /> 72<meta name="csrf-token" content="BGIU3Hbrj-M4Xst9jqn5Yj9vT_xb7y3iuADMuowCRr8bjEOLS7LHVLAefmfPHJRsZ40T8bVgO7uYxvmOXXg1TQ" /> 73 74 75 <!-- Inter font stylesheet --> 76 <link rel="preconnect" href="https://rsms.me" crossorigin> 77 <link rel="stylesheet" href="https://rsms.me/inter/inter.css" crossorigin="anonymous"> 78 79 <!-- Preload Quincy font to prevent FOUT --> 80 <link rel="preload" href="/QuincyCF-Bold.woff" as="font" type="font/woff" crossorigin> 81 82 <!-- Geist Mono for code blocks (shadcn style) --> 83 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.min.css"> 84 85 <!-- Air Datepicker CSS --> 86 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css"> 87 88 <!-- PhotoSwipe CSS --> 89 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css"> 90 91 <!-- --> 92 <link rel="stylesheet" href="/assets/application-4e2eb78ae7afb82739067fcdf95589ec6529fc31571e977ee8fc82478ac9c706.css" /> 93
93<script type="importmap" data-turbo-track="reload">{ 94 "imports": { 95 "application": "/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js", 96 "@hotwired/stimulus": "/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js", 97 "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js", 98 "@hotwired/turbo-rails": "/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js", 99 "@rails/actioncable": "/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js", 100 "chartkick": "/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js", 101 "Chart.bundle": "/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js", 102 "@rails/activestorage": "/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js", 103 "@activeadmin/activeadmin": "https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js", 104 "@rails/ujs": "https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js", 105 "motion": "https://cdn.jsdelivr.net/npm/motion@latest/+esm", 106 "tom-select": "https://cdn.jsdelivr.net/npm/[email protected]/+esm", 107 "tailwindcss-stimulus-components": "https://cdn.jsdelivr.net/npm/[email protected]/+esm", 108 "@rails/request.js": "https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm", 109 "number-flow": "https://esm.sh/number-flow", 110 "number-flow/group": "https://esm.sh/number-flow/group", 111 "air-datepicker": "https://esm.sh/[email protected]", 112 "air-datepicker/locale/en": "https://esm.sh/[email protected]/locale/en", 113 "embla-carousel": "https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm", 114 "embla-carousel-wheel-gestures": "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm", 115 "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm", 116 "emoji-mart": "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js", 117 "@emoji-mart/data": "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm", 118 "posthog-js": "https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm", 119 "photoswipe": "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js", 120 "prism": "/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js", 121 "lexxy_extensions": "/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js", 122 "lucide_callout_icons": "/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js", 123 "controllers/accordion_controller": "/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js", 124 "controllers/activity_stats_controller": "/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js", 125 "controllers/analytics_controller": "/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js", 126 "controllers/animated_number_controller": "/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js", 127 "controllers/animated_number_controller_basic": "/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js", 128 "controllers/application": "/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js", 129 "controllers/autocomplete_controller": "/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js", 130 "controllers/autocomplete_fuzzy_search_controller": "/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js", 131 "controllers/autocomplete_navigation_controller": "/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js", 132 "controllers/autocomplete_recent_searches_controller": "/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js", 133 "controllers/autogrow_controller": "/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js", 134 "controllers/autosubmit_controller": "/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js",
135 "controllers/banner_controller": "/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js", 136 "controllers/black_hole_background_controller": "/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js", 137 "controllers/carousel_controller": "/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js", 138 "controllers/checkbox_select_all_controller": "/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js", 139 "controllers/clickable_animated_number_controller": "/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js", 140 "controllers/clipboard_controller": "/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js", 141 "controllers/code_filter_controller": "/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js", 142 "controllers/collapsible_controller": "/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js", 143 "controllers/component_search_controller": "/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js", 144 "controllers/conditional_field_controller": "/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js", 145 "controllers/confirmation_controller": "/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js", 146 "controllers/context_menu_controller": "/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js", 147 "controllers/datatable_controller": "/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js", 148 "controllers/datatable_preview_controller": "/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js", 149 "controllers/date_picker_controller": "/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js", 150 "controllers/dock_controller": "/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js", 151 "controllers/drawer_controller": "/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js", 152 "controllers/dropdown_popover_controller": "/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js", 153 "controllers/emoji_picker_controller": "/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js", 154 "controllers/feedback_controller": "/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js", 155 "controllers/header_controller": "/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js", 156 "controllers/hello_controller": "/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js", 157 "controllers/highlight_controller": "/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js", 158 "controllers/hotkey_controller": "/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js", 159 "controllers/increment_controller": "/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js", 160 "controllers": "/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js", 161 "controllers/infinite_scroll_controller": "/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js", 162 "controllers/inline_edit_controller": "/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js", 163 "controllers/lightbox_controller": "/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js", 164 "controllers/marquee_controller": "/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js", 165 "controllers/menu_controller": "/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js", 166 "controllers/modal_controller": "/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js", 167 "controllers/navbar_controller": "/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js", 168 "controllers/nested_form_controller": "/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js", 169 "controllers/newsletter_controller": "/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js", 170 "controllers/onboarding_checklist_controller": "/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js", 171 "controllers/os_detect_controller": "/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js", 172 "controllers/page_view_controller": "/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
1725e36d.js", 173 "controllers/password_controller": "/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js", 174 "controllers/popover_controller": "/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js", 175 "controllers/pricing_tabs_controller": "/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js", 176 "controllers/rainbow_button_controller": "/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js", 177 "controllers/read_more_controller": "/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js", 178 "controllers/scroll_area_controller": "/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js", 179 "controllers/scroll_preservation_controller": "/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js", 180 "controllers/searchable_dropdown_controller": "/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js", 181 "controllers/select_controller": "/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js", 182 "controllers/setup_code_filter_controller": "/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js", 183 "controllers/shoelace_color_picker_controller": "/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js", 184 "controllers/sidebar_controller": "/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js", 185 "controllers/slideover_controller": "/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js", 186 "controllers/slider_number_flow_controller": "/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js", 187 "controllers/snippet_controller": "/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js", 188 "controllers/stepper_controller": "/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js", 189 "controllers/table_of_contents_controller": "/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js", 190 "controllers/tabs_controller": "/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js", 191 "controllers/text_cycler_controller": "/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js", 192 "controllers/theme_builder_controller": "/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js", 193 "controllers/theme_controller": "/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js", 194 "controllers/toast_controller": "/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js", 195 "controllers/tooltip_controller": "/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js", 196 "controllers/tree_view_controller": "/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js", 197 "controllers/turnstile_controller": "/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js", 198 "controllers/two_factor_controller": "/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js", 199 "channels/consumer": "/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js", 200 "channels": "/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js" 201 } 202}</script>
202 203<link rel="modulepreload" href="/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js"> 204<link rel="modulepreload" href="/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js"> 205<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js"> 206<link rel="modulepreload" href="/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js"> 207<link rel="modulepreload" href="/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js"> 208<link rel="modulepreload" href="/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js"> 209<link rel="modulepreload" href="/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js"> 210<link rel="modulepreload" href="/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js"> 211<link rel="modulepreload" href="https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js"> 212<link rel="modulepreload" href="https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js"> 213<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/motion@latest/+esm"> 214<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm"> 215<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm"> 216<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm"> 217<link rel="modulepreload" href="https://esm.sh/number-flow"> 218<link rel="modulepreload" href="https://esm.sh/number-flow/group"> 219<link rel="modulepreload" href="https://esm.sh/[email protected]"> 220<link rel="modulepreload" href="https://esm.sh/[email protected]/locale/en"> 221<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm"> 222<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"> 223<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm"> 224<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> 225<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm"> 226<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm"> 227<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js"> 228<link rel="modulepreload" href="/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js"> 229<link rel="modulepreload" href="/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js"> 230<link rel="modulepreload" href="/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js"> 231<link rel="modulepreload" href="/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js"> 232<link rel="modulepreload" href="/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js"> 233<link rel="modulepreload" href="/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js"> 234<link rel="modulepreload" href="/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js"> 235<link rel="modulepreload" href="/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js"> 236<link rel="modulepreload" href="/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js"> 237<link rel="modulepreload" href="/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js"> 238<link rel="modulepreload" href="/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js"> 239<link rel="modulepreload" href="/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js"> 240<link rel="modulepreload" href="/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js"> 241<link rel="modulepreload" href="/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js"> 242<link rel="modulepreload" href="/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js">
243<link rel="modulepreload" href="/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js"> 244<link rel="modulepreload" href="/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js"> 245<link rel="modulepreload" href="/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js"> 246<link rel="modulepreload" href="/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js"> 247<link rel="modulepreload" href="/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js"> 248<link rel="modulepreload" href="/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js"> 249<link rel="modulepreload" href="/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js"> 250<link rel="modulepreload" href="/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js"> 251<link rel="modulepreload" href="/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js"> 252<link rel="modulepreload" href="/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js"> 253<link rel="modulepreload" href="/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js"> 254<link rel="modulepreload" href="/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js"> 255<link rel="modulepreload" href="/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js"> 256<link rel="modulepreload" href="/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js"> 257<link rel="modulepreload" href="/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js"> 258<link rel="modulepreload" href="/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js"> 259<link rel="modulepreload" href="/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js"> 260<link rel="modulepreload" href="/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js"> 261<link rel="modulepreload" href="/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js"> 262<link rel="modulepreload" href="/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js"> 263<link rel="modulepreload" href="/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js"> 264<link rel="modulepreload" href="/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js"> 265<link rel="modulepreload" href="/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js"> 266<link rel="modulepreload" href="/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js"> 267<link rel="modulepreload" href="/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js"> 268<link rel="modulepreload" href="/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js"> 269<link rel="modulepreload" href="/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js"> 270<link rel="modulepreload" href="/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js"> 271<link rel="modulepreload" href="/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js"> 272<link rel="modulepreload" href="/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js"> 273<link rel="modulepreload" href="/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js"> 274<link rel="modulepreload" href="/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js"> 275<link rel="modulepreload" href="/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js"> 276<link rel="modulepreload" href="/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js"> 277<link rel="modulepreload" href="/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js"> 278<link rel="modulepreload" href="/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js"> 279<link rel="modulepreload" href="/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js"> 280<link rel="modulepreload" href="/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
2805e36d.js"> 281<link rel="modulepreload" href="/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js"> 282<link rel="modulepreload" href="/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js"> 283<link rel="modulepreload" href="/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js"> 284<link rel="modulepreload" href="/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js"> 285<link rel="modulepreload" href="/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js"> 286<link rel="modulepreload" href="/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js"> 287<link rel="modulepreload" href="/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js"> 288<link rel="modulepreload" href="/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js"> 289<link rel="modulepreload" href="/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js"> 290<link rel="modulepreload" href="/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js"> 291<link rel="modulepreload" href="/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js"> 292<link rel="modulepreload" href="/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js"> 293<link rel="modulepreload" href="/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js"> 294<link rel="modulepreload" href="/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js"> 295<link rel="modulepreload" href="/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js"> 296<link rel="modulepreload" href="/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js"> 297<link rel="modulepreload" href="/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js"> 298<link rel="modulepreload" href="/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js"> 299<link rel="modulepreload" href="/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js"> 300<link rel="modulepreload" href="/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js"> 301<link rel="modulepreload" href="/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js"> 302<link rel="modulepreload" href="/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js"> 303<link rel="modulepreload" href="/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js"> 304<link rel="modulepreload" href="/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js"> 305<link rel="modulepreload" href="/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js"> 306<link rel="modulepreload" href="/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js"> 307<link rel="modulepreload" href="/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js"> 308<link rel="modulepreload" href="/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js">
309<script type="module">import "application"</script>
309 310 311 <!-- Prism.js Theme loaded via application.css (shadcn style) --> 312 313
313<script type="module">import "prism"</script>
313 314 315 <!-- app styles --> 316 317 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet"> 318 319 <link rel="stylesheet" href="/assets/tailwind-8dd8a1967e9bfb39e33fd6b97de1fb9540804eb5e014bd755b551ab3b78c8f67.css" data-turbo-track="reload" /> 320 321 <!-- Shoelace --> 322
322<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script>
322 323 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"> 324 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"> 325 326 327<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 328<link rel="icon" type="image/svg+xml" href="/favicon.svg"> 329<link rel="shortcut icon" href="/favicon.ico"> 330<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 331<meta name="apple-mobile-web-app-title" content="Rails Blocks"> 332<link rel="manifest" href="/site.webmanifest"> 333 334 <!-- Fathom - beautiful, simple website analytics --> 335
335<script src="https://cdn.usefathom.com/script.js" data-site="RGMCTRCC" defer></script>
335 336
336<script> 337 // Defines the Fathom queue if it's not already defined 338 window.fathom = window.fathom || {}; 339 window.fathom.trackEvent = window.fathom.trackEvent || function() { 340 (window.fathom.q = window.fathom.q || []).push(arguments); 341 }; 342 </script>
342 343 <!-- / Fathom --> 344 345
345<script> 346 !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Ie Ts Ms Ee Es Rs capture Ge calculateEventProperties Os register register_once register_for_session unregister unregister_for_session js getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ds Fs createPersonProfile Ls Ps opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Cs debug I As getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); 347 posthog.init('phc_1peGskgJndUl9aKkfvJan2QftpxzdEl4tplxzntLjz3', { 348 api_host: 'https://f.railsblocks.com', 349 defaults: '2026-01-30', 350 person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well 351 }) 352 </script>
352 353 354 355 <!-- Cloudflare Turnstile --> 356
356<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
356 357 358 <!-- JSON-LD Structured Data --> 359
359<script type="application/ld+json"> 360 { 361 "@context": "https://schema.org", 362 "@type": "WebSite", 363 "name": "Rails Blocks", 364 "url": "https://railsblocks.com/", 365 "description": "Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI & MCP server." 366 } 367 </script>
367 368 369 <meta name="sentry-trace" content="3f986b3b5fef46a0b7f93ca91f688128-d3d2aa0af4f542d5-1"> 370<meta name="baggage" content="sentry-trace_id=3f986b3b5fef46a0b7f93ca91f688128,sentry-sample_rate=1.0,sentry-sample_rand=0.459669,sentry-sampled=true,sentry-environment=production,sentry-release=c1339cab003834fc5d3ba9a59528fe484c754c35,sentry-public_key=75ec06e0a9c5a635bb41b06c332c1f78"> 371 </head> 372 373 <body> 374 375<header class="sticky z-50 top-0 h-14 w-full gap-3 mx-auto" data-controller="header"> 376 <nav class="flex items-center justify-center flex-wrap w-full"> 377 <div class="w-full border-b border-neutral-950/5 dark:border-white/10"> 378 <div class="bg-white dark:bg-neutral-950"> 379 <div class="flex h-14 items-center justify-between gap-2 md:gap-8 px-4 sm:px-6"> 380 <div class="flex items-center gap-4"> 381 <div class="w-full flex items-center shrink-0 justify-center gap-4"> 382 <a class="flex items-center hover:opacity-80 gap-1.5" href="/"> 383 <img class="size-6" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" /> 384 <span class="font-semibold shrink-0 text-lg md:text-xl text-neutral-900 dark:text-neutral-50">Rails Blocks</span> 385</a> <div data-controller="modal os-detect" class="hidden md:block"> 386 <button data-controller="hotkey" 387 data-action="click->modal#open:prevent keydown.meta+k@document->hotkey#click keydown.ctrl+k@document->hotkey#click" 388 class="flex items-center justify-center gap-1.5 rounded-lg bg-neutral-100/75 dark:bg-neutral-800 p-2.5 md:px-3 md:py-2 text-xs font-medium whitespace-nowrap text-neutral-500 hover:text-neutral-900 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200 border border-black/10 dark:border-white/10"> 389 <span class="hidden md:block">Search</span> 390 <div class="hidden md:flex items-center gap-0.5"> 391 <kbd data-os-detect-target="mac" class="hidden"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[0.6rem]" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.25,10.5h-1.25v-3h1.25c1.517,0,2.75-1.233,2.75-2.75s-1.233-2.75-2.75-2.75-2.75,1.233-2.75,2.75v1.25h-3v-1.25c0-1.517-1.233-2.75-2.75-2.75s-2.75,1.233-2.75,2.75,1.233,2.75,2.75,2.75h1.25v3h-1.25c-1.517,0-2.75,1.233-2.75,2.75s1.233,2.75,2.75,2.75,2.75-1.233,2.75-2.75v-1.25h3v1.25c0,1.517,1.233,2.75,2.75,2.75s2.75-1.233,2.75-2.75-1.233-2.75-2.75-2.75Zm-1.25-5.75c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25-.561,1.25-1.25,1.25h-1.25v-1.25Zm-8.5,0c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25v1.25h-1.25c-.689,0-1.25-.561-1.25-1.25Zm2.5,8.5c0,.689-.561,1.25-1.25,1.25s-1.25-.561-1.25-1.25,.561-1.25,1.25-1.25h1.25v1.25Zm1.5-5.75h3v3h-3v-3Zm5.75,7c-.689,0-1.25-.561-1.25-1.25v-1.25h1.25c.689,0,1.25,.561,1.25,1.25s-.561,1.25-1.25,1.25Z"></path></g></svg></kbd> 392 <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd> 393 <span>+</span> 394 <kbd>K</kbd> 395 </div> 396 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 md:hidden" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75 15.75L11.6386 11.6386"></path> <path d="M7.75 13.25C10.7875 13.25 13.25 10.7875 13.25 7.75C13.25 4.7125 10.7875 2.25 7.75 2.25C4.7125 2.25 2.25 4.7125 2.25 7.75C2.25 10.7875 4.7125 13.25 7.75 13.25Z"></path></g></svg> 397 </button> 398 399 <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dar
399k:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose"> 400 <div class="sm:max-w-md w-full"> 401 402 <div class="sm:max-w-md mx-auto w-full"> 403 <div class="relative" 404 data-controller="autocomplete" 405 data-autocomplete-delay-value="50" 406 data-autocomplete-submit-on-select-value="false" 407 data-autocomplete-highlight-matches-value="false" 408 data-autocomplete-suggestion-class-value="border-l-3 border-transparent" 409 data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected" 410 data-autocomplete-anchor-value="form" 411 data-autocomplete-max-suggestions-value="50" 412 data-autocomplete-render-mode-value="inline" 413 data-autocomplete-always-show-value="true" 414 data-autocomplete-auto-select-first-value="true" 415 data-autocomplete-preserve-search-on-select-value="true" 416 data-autocomplete-select-action-value="modal#close:prevent" 417 data-autocomplete-local-data-value="[{"title":"Installation","url":"/docs/installation","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"View Components","url":"/docs/view-components","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Shared Partials","url":"/docs/shared-partials","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"CLI","url":"/docs/cli","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"MCP","url":"/docs/mcp","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Author's Note","url":"/docs/authors-note","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Accordion","url":"/docs/accordion","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Alert","url":"/docs/alert","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Animated Number","url":"/docs/animated-number","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Autocomplete Search","url":"/docs/autocomplete","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Autogrow","url":"/docs/autogrow","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Avatar","url":"/docs/avatar","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Badge","url":"/docs/badge","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Banner","url":"/docs/banner","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Breadcrumb","url":"/docs/breadcrumb","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Buttons","url":"/docs/buttons","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Card","url":"/docs/card","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Carousel","url":"/docs/carousel","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Checkbox","url":"/docs/checkbox","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Checkbox Select All","url":"/docs/checkbox-select-all","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Clipboard","url":"/docs/clipboard","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Collapsible","url":"/docs/collapsible","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Color Picker","url":"/docs/color-picker","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Combobox","url":"/docs/combobox","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Command Palette","url":"/docs/command-palette","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Confirmation","url":"/docs/confirmation","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Context Menu","url":"/docs/context-menu","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Datatable","url":"/docs/datatable","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Date Picker","url":"/docs/date-picker","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Dark Mode Switcher","url":"/docs/dark-mode-switcher","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Dock","url":"/docs/dock","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Drawer","url":"/docs/drawer","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Dropdown","url":"/docs/dropdown","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Emoji Picker","url":"/docs/emoji-picker","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Feedback","url":"/docs/feedback","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Forms","url":"/docs/forms","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Infinite Scroll","url":"/docs/infinite-scroll","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"KBD \u0026 Hotkeys","url":"/docs/kbd","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Lightbox","url":"/docs/lightbox","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Loading Indicator","url":"/docs/loading-indicator","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Marquee","url":"/docs/marquee","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Modal","url":"/docs/modal","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Onboarding Checklist","url":"/docs/onboarding-checklist","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Navbar","url":"/docs/navbar","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Password","url":"/docs/password","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Pagination","url":"/docs/pagination","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Popover","url":"/docs/popover","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Radio","url":"/docs/radio","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Scroll Area","url":"/docs/scroll-area","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Select","url":"/docs/select","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Sidebar","url":"/docs/sidebar","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Skeleton","url":"/docs/skeleton","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Slideover","url":"/docs/slideover","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Stepper","url":"/docs/stepper","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Switch","url":"/docs/switch","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Tabs","url":"/docs/tabs","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Table","url":"/docs/table","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Testimonial","url":"/docs/testimonial","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Toast","url":"/docs/toast","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Tooltip","url":"/docs/tooltip","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Tree View","url":"/docs/tree-view","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Two Factor","url":"/docs/two-factor","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"}]"> 418 419 <div class="relative"> 420 <input id="command_palette_search" 421 autofocus 422 required 423 data-autocomplete-target="input" 424 placeholder="Search documentation..." 425 class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4"> 426 427 <!-- Clear Button --> 428 <button type="button" 429 data-autocomplete-target="clearButton" 430 data-action="click->autocomplete#clearInput" 431 class="hidden absolute right-2 top-1/2 -translate-y-1/2 items-center justify-center size-8 mr-1 rounded-full hover:bg-neutral-100 transition-colors text-neutral-400 hover:text-neutral-500 dark:hover:bg-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
431k:focus-visible:outline-neutral-200"> 432 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg> 433 </button> 434 </div> 435 436 <div data-autocomplete-target="results" 437 class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto" 438 role="listbox" 439 tabindex="-1"> 440 </div> 441 </div> 442 </div> 443 444 <!-- Footer --> 445 <div class="hidden sm:flex flex-wrap gap-1 items-center bg-neutral-50 px-4 py-3 text-xs text-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-t border-black/10 dark:border-white/10"> 446 <div class="flex items-center gap-1"> 447 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd> 448 <span>to close,</span> 449 </div> 450 <div class="flex items-center gap-1"> 451 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd> 452 <span>to select,</span> 453 </div> 454 <div class="flex items-center gap-1"> 455 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 456 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.391,8.448L9.398,1.867c-.2-.264-.597-.264-.797,0L3.609,8.448c-.25,.329-.015,.802,.398,.802h2.743v6c0,.552,.448,1,1,1h2.5c.552,0,1-.448,1-1v-6h2.743c.413,0,.648-.473,.398-.802Z"></path></g></svg> 457 </kbd> 458 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 459 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.609,9.552l4.993,6.581c.2,.264,.597,.264,.797,0l4.993-6.581c.25-.329,.015-.802-.398-.802h-2.743V2.75c0-.552-.448-1-1-1h-2.5c-.552,0-1,.448-1,1v6h-2.743c-.413,0-.648,.473-.398,.802Z"></path></g></svg> 460 </kbd> 461 <span>to navigate.</span> 462 </div> 463 </div> 464 </div> 465 </dialog> 466</div> 467 468 </div> 469 </div> 470 <div class="flex items-center gap-2 md:gap-6"> 471 <div class="flex items-center gap-6"> 472 <button type="button" class="hidden flex items-center gap-1 rounded-full bg-neutral-950/2 px-2 py-1 inset-ring inset-ring-neutral-950/8 dark:bg-white/5 dark:inset-ring-white/2"> 473 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-neutral-600 dar
473k:fill-neutral-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="[.os-macos_&]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">âK</kbd><kbd class="not-[.os-macos_&]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">Ctrl K</kbd> 474 </button> 475 476 <div data-controller="modal"> 477 <button class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" data-action="click->modal#open:prevent"> 478 Newsletter 479 </button> 480 481 <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full lg:rounded-2xl z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-800 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose"> 482 <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rou
482nded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline"> 483 <button type="button" data-action="modal#close:prevent" class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none"> 484 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg> 485 <span class="sr-only">Close</span> 486 </button> 487 488 <div class="relative mt-8 mb-6"> 489 <div class="mx-auto"> 490 <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-900"> 491 <div data-controller="newsletter" 492 class="max-w-xs"> 493 <div data-newsletter-target="form"> 494 <form data-action="submit->newsletter#submit" 495 class="space-y-3"> 496 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 497 <input type="email" 498 data-newsletter-target="email" 499 placeholder="Enter your email..." 500 class="form-control" 501 autofocus 502 required> 503 <div class="flex justify-center"> 504 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 505 </div> 506 <button type="submit" 507 data-newsletter-target="submitButton" 508 class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"> 509 Subscribe to the newsletter 510 </button> 511 </form> 512 <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]"> 513 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 514 </div> 515 </div> 516 517 <div data-newsletter-target="successMessage" 518 class="text-center py-4" 519 style="display: none;"> 520 <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50"> 521 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 522 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 523 </svg> 524 </div> 525 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
526 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 527 </div> 528 </div> 529 </div> 530 </div> 531</div> 532 533 534 <div class="mt-4 flex justify-center"> 535 <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 536 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.792" x2="6.25" y2="13.292"></line><line x1="11.75" y1="4.708" x2="11.75" y2="15.208"></line><path d="M2.533,3.576l3.432-.763c.186-.041,.38-.029,.559,.036l4.952,1.801c.179,.065,.373,.078,.559,.036l2.998-.666c.625-.139,1.217,.336,1.217,.976V13.448c0,.469-.326,.875-.783,.976l-3.432,.763c-.186,.041-.38,.029-.559-.036l-4.952-1.801c-.179-.065-.373-.078-.559-.036l-2.998,.666c-.625,.139-1.217-.336-1.217-.976V4.552c0-.469,.326-.875,.783-.976Z"></path></g></svg> 537 Component roadmap 538 </a> 539 </div> 540 541 <div class="mt-4 flex justify-center"> 542 <a href="https://railsblocks.com/changelog" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 543 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.75 1.75V7.25"></path> <path d="M3.75 16.25V10.75"></path> <path d="M14.25 2.75H8.75C8.198 2.75 7.75 3.2 7.75 3.75V6.25C7.75 6.8 8.198 7.25 8.75 7.25H14.25C14.802 7.25 15.25 6.8 15.25 6.25V3.75C15.25 3.2 14.802 2.75 14.25 2.75Z"></path> <path d="M3.75 10.75C4.716 10.75 5.5 9.97 5.5 9C5.5 8.03 4.716 7.25 3.75 7.25C2.784 7.25 2 8.03 2 9C2 9.97 2.784 10.75 3.75 10.75Z"></path> <path d="M14.25 10.75H8.75C8.198 10.75 7.75 11.2 7.75 11.75V14.25C7.75 14.8 8.198 15.25 8.75 15.25H14.25C14.802 15.25 15.25 14.8 15.25 14.25V11.75C15.25 11.2 14.802 10.75 14.25 10.75Z"></path></g></svg> 544 Changelog 545 </a> 546 </div> 547 </div> 548 </dialog> 549</div> 550 551 552 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/installation">Installation</a> 553 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/themes">Themes</a> 554 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/cli">CLI</a> 555 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/mcp">MCP</a> 556 557 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 558 <a href="/pro" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 559 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
5596,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 560 Pro 561 </a> 562 </div> 563 564 <div class="hidden md:block border-r border-neutral-200 dark:border-neutral-700 h-6"></div> 565 566 <a class="hidden" aria-label="GitHub" href="https://github.com"> 567 <svg viewBox="0 0 20 20" class="size-5 fill-black/40 dark:fill-neutral-400 hover:opacity-75"><path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z"></path></svg> 568 </a> 569 <div class="flex items-center gap-2 max-md:hidden"> 570 <a href="/login" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">Login</a> 571 <a href="/signup" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Signup</a> 572 </div> 573 </div> 574 <div class="flex items-center gap-2.5 md:hidden"> 575 <button type="button" aria-label="Search" class="hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 576 <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg> 577 </button> 578 <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full" data-dropdown-popover-menubar-value="true" data-dropdown-popover-portal-value="false" data-dropdown-popover-placement-value="bottom-end top-end"> 579 <button type="button" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" class="outline-hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" aria-label="Navigation"> 580 <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path></svg> 581 </button> 582 583 <dialog 584 class="outline-hidden absolute top-full z-10 mt-1 w-48 rounded-lg border border-neutral-200 bg-white text-neutral-900 shadow-md transition-opacity ease-out duration-150 opacity-0 dark:bg-neutral-800 dark:text-neutral-100 dar
584k:border-neutral-700/50" 585 data-controller="menu" 586 data-dropdown-popover-target="menu" 587 data-action="click@document->dropdown-popover#closeOnClickOutside 588 keydown.up->menu#prev keydown.down->menu#next 589 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 590 > 591 <div class="flex flex-col p-1" role="menu"> 592 <a href="/" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 593 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg></span> 594 Home 595 </a> 596 <a href="/docs/installation" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 597 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M11.5 7.25L9 9.75L6.5 7.25"></path> <path d="M6 2.75H3.75C2.6454 2.75 1.75 3.645 1.75 4.75V10.75C1.75 11.855 2.6454 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.855 16.25 10.75V4.75C16.25 3.645 15.3546 2.75 14.25 2.75H12"></path> <path d="M9 9.75V2.75"></path></g></svg></span> 598 Installation 599 </a> 600 <a class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" href="/themes"> 601 <span class="text-xs text-neutral-500 dark:text-neutral-400"> 602 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m8.3034,16.217c-3.7776-.3601-6.7098-3.619-6.5469-7.5271.157-3.7659,3.3501-6.8755,7.1188-6.9388,4.0612-.0683,7.3747,3.2034,7.3747,7.2489h0c0,1.5188-1.2312,2.75-2.75,2.75h-2.963c-1.0336,0-1.6928,1.1036-1.2027,2.0137l.2374.4409c.2597.4823.2062,1.0732-.1361,1.501h0c-.2736.342-.6962.553-1.1322.5115Z"></path><circle cx="9" cy="5" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="6.1716" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="11.8284" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="5" cy="9" r="1" fill="currentColor" stroke-width="0"></circle></g></svg> 603 </span> 604 Themes 605</a> <a href="/docs/cli" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dar
605k:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 606 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg></span> 607 CLI 608 </a> 609 <a href="/docs/mcp" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 610 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" fill="currentColor" fill-rule="evenodd" height="18" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em"><title>ModelContextProtocol</title> <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path> <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg></span> 611 MCP 612 </a> 613 <a href="/docs/authors-note" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 614 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M10 9.54501L5.07001 14.475"></path> <path d="M1.86329 13.6331C1.06149 12.8389 0.825792 12.1376 0.776992 11.604C0.602992 9.68 2.75199 8.65301 2.73799 6.50601C2.72899 5.12901 1.83399 4.01499 1.10399 3.30399"></path> <path d="M15.241 8.05701L13.649 12.553C13.532 12.883 13.252 13.128 12.909 13.198L5.75203 14.679C5.22403 14.788 4.75603 14.321 4.86603 13.793L6.34703 6.63599C6.41803 6.29299 6.66303 6.013 6.99203 5.896L11.488 4.30399"></path> <path d="M11.496 2.29599L11.195 2.59698C10.804 2.98798 10.804 3.62099 11.195 4.01099L13.364 6.17999L15.533 8.349C15.924 8.74 16.557 8.74 16.947 8.349L17.248 8.048"></path> <path d="M10 10.295C10.4142 10.295 10.75 9.95901 10.75 9.54501C10.75 9.13101 10.4142 8.79501 10 8.79501C9.5858 8.79501 9.25 9.13101 9.25 9.54501C9.25 9.95901 9.5858 10.295 10 10.295Z" fill="currentColor"></path></g></svg></span> 615 Author's note 616 </a> 617 <div class="border-t my-1 border-neutral-100 dark:border-neutral-700"></div> 618 <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/login">
619 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9.75,2.75h3.5c1.105,0,2,.895,2,2V13.25c0,1.105-.895,2-2,2h-3.5"></path><polyline points="6.75 12.5 10.25 9 6.75 5.5"></polyline><line x1="10.25" y1="9" x2="2.75" y2="9"></line></g></svg></span> 620 Login 621</a> <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/signup"> 622 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 7.2505C10.5188 7.2505 11.75 6.0195 11.75 4.5005C11.75 2.9815 10.5188 1.7505 9 1.7505C7.4812 1.7505 6.25 2.9815 6.25 4.5005C6.25 6.0195 7.4812 7.2505 9 7.2505Z"></path> <path d="M17.25 14.7505H12.25"></path> <path d="M14.75 12.2505V17.2505"></path> <path d="M12.2164 10.677C11.2752 10.102 10.1839 9.7505 8.99999 9.7505C6.44899 9.7505 4.26099 11.2805 3.29099 13.4705C2.92599 14.2955 3.37799 15.2444 4.23799 15.5154C5.46299 15.9014 7.08389 16.2495 8.99999 16.2495C9.22329 16.2495 9.43029 16.2319 9.64399 16.2214"></path></g></svg></span> 623 Signup 624</a> </div> 625 </dialog> 626 </div> 627 </div> 628 </div> 629 </div> 630 </div> 631 </div> 632 </nav> 633</header> 634 635 636<!-- smooth scroll nav links -->
637<script type="text/javascript"> 638 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 639 anchor.addEventListener('click', function (e) { 640 e.preventDefault(); 641 642 document.querySelector(this.getAttribute('href')).scrollIntoView({ 643 behavior: 'smooth' 644 }); 645 }); 646 }); 647</script>
647 648 649 <div class="fixed bottom-4 right-4 z-50" data-turbo-permanent id="theme-switcher"> 650 <div 651 data-controller="theme" 652 data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20" 653 data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5"> 654 <div class="opacity-0 transition-opacity duration-200 relative z-0 inline-grid p-0.5 grid-cols-3 rounded-full bg-white/80 backdrop-blur-md text-neutral-950 border border-black/10 dark:border-white/10 dark:bg-neutral-800/80 dark:text-white shadow-xs" data-theme-target="picker" role="radiogroup" aria-label="Theme selection"> 655 <button 656 class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 657 aria-label="System theme" 658 data-controller="tooltip" 659 data-tooltip-content="System" 660 data-tooltip-animation-value="fade origin" 661 data-tooltip-delay-value="500" 662 data-theme-target="option" 663 data-action="click->theme#choose keydown->theme#navigate" 664 data-theme-mode="system" 665 type="button" 666 role="radio" 667 aria-checked="true" 668 tabindex="0" 669 id="theme-option-system"> 670 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V10.75C1.75 11.8546 2.64543 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.8546 16.25 10.75V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z"></path></g></svg> 671 </button> 672 <button 673 class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 674 aria-label="Light theme" 675 data-controller="tooltip" 676 data-tooltip-content="Light mode" 677 data-tooltip-animation-value="fade origin" 678 data-tooltip-delay-value="500" 679 data-theme-target="option" 680 data-action="click->theme#choose keydown->theme#navigate" 681 data-theme-mode="light" 682 type="button" 683 role="radio" 684 aria-checked="false" 685 tabindex="-1" 686 id="theme-option-light"> 687 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="1.25" x2="9" y2="2.25"></line><line x1="14.48" y1="3.52" x2="13.773" y2="4.227"></line><line x1="16.75" y1="9" x2="15.75" y2="9"></line><line x1="14.48" y1="14.48" x2="13.773" y2="13.773"></line><line x1="9" y1="16.75" x2="9" y2="15.75"></line><line x1="3.52" y1="14.48" x2="4.227" y2="13.773"></line><line x1="1.25" y1="9" x2="2.25" y2="9"></line><line x1="3.52" y1="3.52" x2="4.227" y2="4.227"></line><circle cx="9" cy="9" r="4.25"></circle></g></svg> 688 </button> 689 <button 690 class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 691 aria-label="Dark theme" 692 data-controller="tooltip" 693 data-tooltip-content="Dark mode" 694 data-tooltip-animation-value="fade origin" 695 data-tooltip-delay-value="500" 696 data-theme-target="option" 697 data-action="click->theme#choose keydown->theme#navigate" 698 data-theme-mode="dark" 699 type="button" 700 role="radio" 701 aria-checked="false" 702 tabindex="-1" 703 id="theme-option-dark"> 704 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M13,11.75c-3.452,0-6.25-2.798-6.25-6.25,0-1.352,.433-2.599,1.162-3.622-3.364,.628-5.912,3.575-5.912,7.122,0,4.004,3.246,7.25,7.25,7.25,3.372,0,6.198-2.306,7.009-5.424-.95,.583-2.063,.924-3.259,.924Z"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.
704104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-stroke="none" stroke="none"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle></g></svg> 705 </button> 706 </div> 707 </div> 708</div> 709 710 711 <main class="mx-auto "> 712 713 <div data-controller="toast" 714 id="toast_triggers" 715 data-toast-position-value="top-center" 716 data-toast-layout-value="default"> 717 <ul 718 data-toast-target="container" 719 data-action="mouseenter->toast#handleMouseEnter mouseleave->toast#handleMouseLeave" 720 class="fixed block w-full group z-[99] max-w-[300px] sm:max-w-xs left-1/2 -translate-x-1/2 top-0 overflow-visible" 721 style="transition: height 300ms ease;" 722 > 723 </ul> 724</div> 725 726 727 728 729 730 731 732<div class="relative sm:py-6 mt-14"> 733 <div class="mx-auto"> 734 <div class="text-center max-w-xl mx-auto px-4"> 735 <h1 class="text-4xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 font-quincy"> 736 <span class="block text-neutral-900 dark:text-neutral-50">Changelog</span> 737 </h1> 738 <p class="mt-3 max-w-md mx-auto text-base text-neutral-500 dark:text-neutral-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> 739 A list of updates and changes to Rails Blocks. 740 </p> 741 </div> 742 743 <div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto mt-12"> 744 <!-- Timeline --> 745 <div> 746 <!-- Item - July 27th 2026 --> 747 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 748 <!-- Icon --> 749 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 750 <div class="relative z-10 size-6 flex justify-center items-center"> 751 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 752 </div> 753 </div> 754 <!-- End Icon --> 755 756 <!-- Right Content --> 757 <div class="grow pb-8 relative"> 758 <div class="grid grid-cols-1 gap-6 md:gap-12"> 759 <div> 760 <div class="space-y-3"> 761 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 762 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 763 July 27<sup>th</sup> 2026 764 </h2> 765 </div> 766 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
766k:text-neutral-300"> 767 <li class="flex items-start"> 768 <span class="mr-2">â¢</span> 769 <span>Launched the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/themes">Theme Builder</a>, with 18 primary colors, 9 base palettes, live light and dark component previews, and copy-ready Tailwind CSS plus an AI migration prompt.</span> 770 </li> 771 <li class="flex items-start"> 772 <span class="mr-2">â¢</span> 773 <span>Added changes related to primary colors to the installation CSS and updated checkbox and radio components to follow generated themes.</span> 774 </li> 775 <li class="flex items-start"> 776 <span class="mr-2">â¢</span> 777 <span><a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/checkbox">Checkbox</a> ViewComponent and shared partial now accept input data attributes for Stimulus integrations</span> 778 </li> 779 <li class="flex items-start"> 780 <span class="mr-2">â¢</span> 781 <span>Dynamically updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltips</a> now retain their positioning arrow.</span> 782 </li> 783 <li class="flex items-start"> 784 <span class="mr-2">â¢</span> 785 <span>Fixed a regression that caused duplicate tooltip arrows after Turbo navigation on persistent interface elements.</span> 786 </li> 787 </ul> 788 </div> 789 </div> 790 </div> 791 </div> 792 <!-- End Right Content --> 793 </div> 794 <!-- End Item --> 795 796 <!-- Item - July 19th 2026 --> 797 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 798 <!-- Icon --> 799 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 800 <div class="relative z-10 size-6 flex justify-center items-center"> 801 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 802 </div> 803 </div> 804 <!-- End Icon --> 805 806 <!-- Right Content --> 807 <div class="grow pb-8 relative"> 808 <div class="grid grid-cols-1 gap-6 md:gap-12"> 809 <div> 810 <div class="space-y-3"> 811 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 812 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 813 July 19<sup>th</sup> 2026 814 </h2> 815 </div> 816 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
816k:text-neutral-300"> 817 <li class="flex items-start"> 818 <span class="mr-2">â¢</span> 819 <span>Added the new Pro <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/onboarding-checklist">Onboarding Checklist component</a>, with server-driven task state, overlay and inline layouts, live progress updates, optional task skipping, and persistence hooks.</span> 820 </li> 821 <div class="my-4 w-full"> 822 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 823 <li class="relative"> 824 <div class="absolute left-4 top-4 z-10 text-xs text-neutral-500 dark:text-neutral-400"> 825 <div class="inline relative"> 826 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 827 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 828 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 829 Pro 830 </a> 831 </div> 832 </div> 833 834 </div> 835 836 <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover"> 837 <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
837k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200"> 838 <span class="text-xs">?</span> 839 </button> 840 841 <template data-popover-target="content"> 842 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 843 <div class="space-y-2"> 844 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 845 846 <div class="flex items-center gap-1.5 text-xs"> 847 <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308 .326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 848 <span>Tailwind CSS</span> 849 </div> 850 851 <div class="flex items-center gap-1.5 text-xs"> 852 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
852ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 853 <g class="fill-neutral-800 dark:fill-white"> 854 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 855 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 856 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 857 </g> 858 </svg> 859 <span class="flex grow gap-2">Stimulus</span> 860 </div> 861 <div class="flex items-center gap-1.5 text-xs"> 862 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 863 <span>Floating UI</span> 864 </div> 865 866 <div class="flex items-center gap-1.5 text-xs"> 867 <img alt="Number Flow" class="size-3.5 rounded" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" />
868 <span>Number Flow</span> 869 </div> 870 </div> 871 </div> 872 </template> 873 </div> 874 875 <div class="pointer-events-none absolute inset-0"> 876 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl px-5"> 877 <div class="w-full max-w-[320px]"> 878 879<div 880 class="relative w-full" 881 data-controller="onboarding-checklist" 882 data-action="click@window->onboarding-checklist#close keydown.esc@window->onboarding-checklist#escape" 883 data-onboarding-checklist-data-value="{"checklist_id":"changelog-preview","title":"Make Acme yours","panel_title":"Your quick start","panel_description":"A few small wins, then youâre flying.","completed_summary":"All set! Your workspace is ready","dismiss_on_complete":false,"tasks":[{"id":"profile","title":"Polish your profile","description":"Add a photo and your role","status":"completed","icon":"user"},{"id":"workspace","title":"Name your workspace","description":"Make it feel like home","status":"completed","icon":"folder"},{"id":"invite","title":"Invite your first teammate","description":"Great work happens together","status":"pending","action":"Invite","icon":"users"},{"id":"project","title":"Create your first project","description":"Turn an idea into a plan","status":"pending","action":"Create","icon":"sparkles"},{"id":"shortcut","title":"Learn the command menu","description":"Move around at the speed of thought","status":"pending","action":"Explore","url":"/docs/kbd","icon":"keyboard","optional":true}]}" 884 data-onboarding-checklist-mode-value="overlay-below" 885 data-onboarding-checklist-open-value="false" 886 data-onboarding-checklist-compact-value="true" 887> 888 <div data-onboarding-checklist-target="surface" class="relative mx-auto w-full max-w-[280px]"> 889 <div class="relative rounded-2xl border border-black/10 bg-white p-1 shadow-[0_10px_28px_rgb(0_0_0_/_10%)] dark:border-white/15 dark:bg-neutral-900 dark:shadow-[0_14px_36px_rgb(0_0_0_/_35%)]"> 890 <button 891 type="button" 892 data-onboarding-checklist-target="trigger" 893 data-action="click->onboarding-checklist#toggle" 894 aria-expanded="false" 895 aria-controls="changelog-onboarding-checklist" 896 class="flex min-h-13 w-full items-center gap-2.5 rounded-xl px-3 py-2 text-left transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-500 dark:hover:bg-white/5" 897 > 898 <span data-onboarding-checklist-target="ready progressVisual" aria-hidden="true" class="relative flex size-9 shrink-0 items-center justify-center opacity-0 transition-opacity duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none"> 899 <span data-onboarding-checklist-target="completionHalo" class="pointer-events-none absolute inset-1 rounded-full bg-emerald-400/35 opacity-0 will-change-transform" aria-hidden="true"></span> 900 <svg class="size-9 -rotate-90" viewBox="0 0 40 40" aria-hidden="true"> 901 <circle cx="20" cy="20" r="17" fill="none" stroke="currentColor" stroke-width="2.75" class="text-neutral-200 dark:text-neutral-700" /> 902 <circle data-onboarding-checklist-target="ring" cx="20" cy="20" r="17" pathLength="100" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100" class="text-neutral-800 transition-[stroke-dashoffset,color] duration-[480ms] ease-[cubic-bezier(0.65,0,0.35,1)] motion-reduce:transition-none dark:text-neutral-200" /> 903 </svg> 904 <number-flow data-onboarding-checklist-target="progress" class="absolute text-[8px] font-semibold tabular-nums text-neutral-700
904will-change-transform transition-colors duration-300 motion-reduce:transition-none dark:text-neutral-200"></number-flow> 905 </span> 906 <span class="min-w-0 flex-1"> 907 <span data-onboarding-checklist-target="title" class="block truncate text-xs font-semibold tracking-[-0.01em] text-neutral-900 dark:text-white">Make Acme yours</span> 908 <span data-onboarding-checklist-target="summary ready" aria-hidden="true" class="mt-0.5 block truncate text-[10px] text-neutral-500 opacity-0 transition-opacity duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none dark:text-neutral-400"></span> 909 </span> 910 <span class="flex size-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400"> 911 <svg data-onboarding-checklist-target="chevron" class="size-3.5 will-change-transform transition-transform duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 7 4.5 4 4.5-4" /></svg> 912 </span> 913 </button> 914 </div> 915 916 <div id="changelog-onboarding-checklist" data-onboarding-checklist-target="panel" hidden class="left-0 z-40 w-full overflow-hidden rounded-2xl border border-black/10 bg-white will-change-transform transition-[height,opacity,transform] duration-[450ms] ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none shadow-[0_16px_40px_rgb(0_0_0_/_14%)] dark:border-white/15 dark:bg-neutral-900 dark:shadow-[0_20px_48px_rgb(0_0_0_/_45%)]"> 917 <div class="flex items-start justify-between border-b border-neutral-200/70 px-5 py-4 dark:border-white/8"> 918 <div> 919 <p data-onboarding-checklist-target="panelTitle" class="text-xs font-semibold text-neutral-900 dark:text-white">Your quick start</p> 920 <p data-onboarding-checklist-target="panelDescription" class="mt-0.5 text-[10px] text-neutral-500 dark:text-neutral-400">A few small wins, then youâre flying.</p> 921 </div> 922 </div> 923 <ol data-onboarding-checklist-target="taskList"></ol> 924 </div> 925 </div> 926 927 <p data-onboarding-checklist-target="liveRegion" class="sr-only" aria-live="polite"></p> 928</div> 929 930 </div> 931 </div> 932 </div> 933 934 <a class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-colors duration-200 motion-reduce:transition-none hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200" href="/docs/onboarding-checklist" data-turbo-frame="_top"> 935 <div class="h-48"></div> 936 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 937 Onboarding Checklist 938 <svg class="w-0 transition-[width] duration-200 motion-reduce:transition-none group-hover:w-4" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 6h9.75M7.75 9.25 11 6 7.75 2.75" /></svg> 939 </p> 940 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p> 941 </a> 942</li> 943 944 </ul> 945 </div> 946 </ul> 947 </div> 948 </div> 949 </div> 950 </div> 951 <!-- End Right Content --> 952 </div> 953 <!-- End Item --> 954 955 <!-- Item - July 16th 2026 --> 956 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 957 <!-- Icon --> 958 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 959 <div class="relative z-10 size-6 flex justify-center items-center"> 960 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 961 </div> 962 </div> 963 <!-- End Icon --> 964 965 <!-- Right Content --> 966 <div class="grow pb-8 relative"> 967 <div class="grid grid-cols-1 gap-6 md:gap-12"> 968 <div> 969 <div class="space-y-3"> 970 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 971 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 972 July 16<sup>th</sup> 2026 973 </h2> 974 </div> 975 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
975k:text-neutral-300"> 976 <li class="flex items-start"> 977 <span class="mr-2">â¢</span> 978 <span>Added the new free <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dark-mode-switcher">Dark Mode Switcher component</a>, with System, Light, and Dark preferences, three switcher variants, accessible keyboard controls, and persistent cross-tab syncing.</span> 979 </li> 980 <div class="my-4 w-full"> 981 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 982 <li class="relative"> 983 <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 984 <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 985 <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200"> 986 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg> 987 New 988 </div> 989 </div> 990</div> 991 992 993 <div class="pointer-events-none absolute inset-0 left-0 top-0"> 994 <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover"> 995 <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
995k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200"> 996 <span class="text-xs">?</span> 997 </button> 998 999 <template data-popover-target="content"> 1000 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1001 <div class="space-y-2"> 1002 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 1003 1004 <div class="flex items-center gap-1.5 text-xs"> 1005 <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308 .326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 1006 <span>Tailwind CSS</span> 1007 </div> 1008 1009 <div class="flex items-center gap-1.5 text-xs"> 1010 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1010ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1011 <g class="fill-neutral-800 dark:fill-white"> 1012 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 1013 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 1014 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 1015 </g> 1016 </svg> 1017 <span class="flex grow gap-2">Stimulus</span> 1018 </div> 1019 <div class="flex items-center gap-1.5 text-xs"> 1020 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 1021 <span>Floating UI</span> 1022 </div> 1023 </div> 1024 </div> 1025 </template> 1026 </div> 1027 1028 <div class="pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl border border-black/10 bg-white p-4 dark:border-white/20 dark:bg-[#080808]"> 1029 <div 1030 data-controller="theme" 1031 data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20" 1032 data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5">
1033 <div 1034 class="relative z-0 inline-grid grid-cols-3 rounded-full border border-black/10 bg-white/80 p-0.5 text-neutral-950 opacity-0 shadow-xs backdrop-blur-md transition-opacity duration-200 dark:border-white/10 dark:bg-neutral-800/80 dark:text-white" 1035 data-theme-target="picker" 1036 role="radiogroup" 1037 aria-label="Theme selection"> 1038 <button 1039 class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 1040 aria-label="System theme" 1041 data-controller="tooltip" 1042 data-tooltip-content="System" 1043 data-tooltip-animation-value="fade origin" 1044 data-tooltip-delay-value="500" 1045 data-theme-target="option" 1046 data-action="click->theme#choose keydown->theme#navigate" 1047 data-theme-mode="system" 1048 type="button" 1049 role="radio" 1050 aria-checked="true" 1051 tabindex="0"> 1052 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path><path d="M9 12.75V15.25"></path><path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V10.75C1.75 11.8546 2.64543 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.8546 16.25 10.75V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z"></path></g></svg> 1053 </button> 1054 <button 1055 class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 1056 aria-label="Light theme" 1057 data-controller="tooltip" 1058 data-tooltip-content="Light mode" 1059 data-tooltip-animation-value="fade origin" 1060 data-tooltip-delay-value="500" 1061 data-theme-target="option" 1062 data-action="click->theme#choose keydown->theme#navigate" 1063 data-theme-mode="light" 1064 type="button" 1065 role="radio" 1066 aria-checked="false" 1067 tabindex="-1"> 1068 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="1.25" x2="9" y2="2.25"></line><line x1="14.48" y1="3.52" x2="13.773" y2="4.227"></line><line x1="16.75" y1="9" x2="15.75" y2="9"></line><line x1="14.48" y1="14.48" x2="13.773" y2="13.773"></line><line x1="9" y1="16.75" x2="9" y2="15.75"></line><line x1="3.52" y1="14.48" x2="4.227" y2="13.773"></line><line x1="1.25" y1="9" x2="2.25" y2="9"></line><line x1="3.52" y1="3.52" x2="4.227" y2="4.227"></line><circle cx="9" cy="9" r="4.25"></circle></g></svg> 1069 </button> 1070 <button 1071 class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 1072 aria-label="Dark theme" 1073 data-controller="tooltip" 1074 data-tooltip-content="Dark mode" 1075 data-tooltip-animation-value="fade origin" 1076 data-tooltip-delay-value="500" 1077 data-theme-target="option" 1078 data-action="click->theme#choose keydown->theme#navigate" 1079 data-theme-mode="dark" 1080 type="button" 1081 role="radio" 1082 aria-checked="false" 1083 tabindex="-1"> 1084 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M13,11.75c-3.452,0-6.25-2.798-6.25-6.25,0-1.352,.433-2.599,1.162-3.622-3.364,.628-5.912,3.575-5.912,7.122,0,4.004,3.246,7.25,7.25,7.25,3.372,0,6.198-2.306,7.009-5.424-.95,.583-2.063,.924-3.259,.924Z"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" stroke="none"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" stroke="none"></circle></g></svg> 1085 </button> 1086 </div> 1087</div> 1088 1089 </div> 1090 </div> 1091 1092 <a href="/docs/dark-mode-switcher" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200"> 1093 <div class="h-48"></div> 1094 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 1095 Dark Mode Switcher 1096 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 transition-all duration-200 group-hover:w-4" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 1097 </p> 1098 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p> 1099 </a> 1100</li> 1101 1102 </ul> 1103 </div> 1104 </ul> 1105 </div> 1106 </div> 1107 </div> 1108 </div> 1109 <!-- End Right Content --> 1110 </div> 1111 <!-- End Item --> 1112 1113 <!-- Item - July 15th 2026 --> 1114 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1115 <!-- Icon --> 1116 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1117 <div class="relative z-10 size-6 flex justify-center items-center">
1118 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1119 </div> 1120 </div> 1121 <!-- End Icon --> 1122 1123 <!-- Right Content --> 1124 <div class="grow pb-8 relative"> 1125 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1126 <div> 1127 <div class="space-y-3"> 1128 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1129 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1130 July 15<sup>th</sup> 2026 1131 </h2> 1132 </div> 1133 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dark:text-neutral-300"> 1134 <li class="flex items-start"> 1135 <span class="mr-2">â¢</span> 1136 <span>Added the new free <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/infinite-scroll">Infinite Scroll component</a>, with automatic and manual loading, Pagy-backed batches, and reduced-motion-safe transitions.</span> 1137 </li> 1138 <div class="my-4 w-full"> 1139 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 1140 <li class="relative"> 1141 <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 1142 <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 1143 <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200"> 1144 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg> 1145 New 1146 </div> 1147 </div> 1148</div> 1149 1150 1151 <div class="pointer-events-none absolute inset-0 left-0 top-0"> 1152 <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover"> 1153 <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
1153k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200"> 1154 <span class="text-xs">?</span> 1155 </button> 1156 1157 <template data-popover-target="content"> 1158 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1159 <div class="space-y-2"> 1160 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 1161 1162 <div class="flex items-center gap-1.5 text-xs"> 1163 <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 1164 <span>Tailwind CSS</span> 1165 </div> 1166 1167 <div class="flex items-center gap-1.5 text-xs"> 1168 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1168ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1169 <g class="fill-neutral-800 dark:fill-white"> 1170 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 1171 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 1172 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 1173 </g> 1174 </svg> 1175 <span class="flex grow gap-2">Stimulus</span> 1176 </div> 1177 1178 <div class="flex items-center gap-1.5 text-xs"> 1179 <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" /> 1180 <span>Pagy</span> 1181 </div> 1182 </div> 1183 </div> 1184 </template> 1185 </div> 1186 1187 <div class="pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl border border-black/10 bg-white p-4 dark:border-white/20 dark:bg-[#080808]"> 1188 1189<div 1190 class="relative h-[9.5rem] w-full max-w-[14rem] overflow-hidden rounded-lg border border-black/10 bg-white shadow-xs dark:border-white/10 dark:bg-neutral-900" 1191 data-controller="infinite-scroll" 1192 data-infinite-scroll-url-value="/docs/infinite-scroll/items?page=2&preview=home" 1193 data-infinite-scroll-scroll-root-value="container" 1194 data-infinite-scroll-root-margin-value="0px 0px 20px" 1195 data-infinite-scroll-manual-value="false" 1196 data-infinite-scroll-loading-label-value="Loading..."> 1197 <div class="flex items-center justify-between border-b border-neutral-100 px-3 py-2 dark:border-neutral-800"> 1198 <div> 1199 <p class="text-[10px] font-semibold leading-none text-neutral-900 dark:text-white">Recent activity</p> 1200 <p class="mt-1 text-[8px] leading-none text-neutral-400">Workspace updates</p> 1201 </div> 1202 <span class="flex items-center gap-1 rounded-full bg-emerald-50 px-1.5 py-1 text-[7px] font-medium leading-none text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300">
1203 <span class="size-1 rounded-full bg-emerald-500"></span> 1204 Live 1205 </span> 1206 </div> 1207 1208 <div class="small-scrollbar h-[7.35rem] overflow-y-auto overscroll-contain pb-2" data-infinite-scroll-target="viewport"> 1209 <div class="divide-y divide-neutral-100 px-2 dark:divide-neutral-800" data-infinite-scroll-target="list"> 1210 1211 <div id="home_preview_activity_1" class="flex items-center gap-2 px-1 py-2"> 1212 <span class="size-5 shrink-0 rounded-full bg-violet-100 dark:bg-violet-400/20"></span> 1213 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Olivia shipped a release</p> 1214 <span class="text-[7px] tabular-nums text-neutral-400">2m</span> 1215 </div> 1216 <div id="home_preview_activity_2" class="flex items-center gap-2 px-1 py-2"> 1217 <span class="size-5 shrink-0 rounded-full bg-sky-100 dark:bg-sky-400/20"></span> 1218 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Noah left feedback</p> 1219 <span class="text-[7px] tabular-nums text-neutral-400">4m</span> 1220 </div> 1221 <div id="home_preview_activity_3" class="flex items-center gap-2 px-1 py-2"> 1222 <span class="size-5 shrink-0 rounded-full bg-amber-100 dark:bg-amber-400/20"></span> 1223 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Mia uploaded files</p> 1224 <span class="text-[7px] tabular-nums text-neutral-400">6m</span> 1225 </div> 1226 <div id="home_preview_activity_4" class="flex items-center gap-2 px-1 py-2"> 1227 <span class="size-5 shrink-0 rounded-full bg-emerald-100 dark:bg-emerald-400/20"></span> 1228 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Ethan completed a task</p> 1229 <span class="text-[7px] tabular-nums text-neutral-400">8m</span> 1230 </div> 1231 1232 </div> 1233 1234 <div class="h-9 [overflow-anchor:none]" data-infinite-scroll-target="sentinel"></div> 1235 1236 <div class="pointer-events-none sticky bottom-1 z-10 -mt-9 flex h-9 items-center justify-center" data-infinite-scroll-target="controls"> 1237 <button 1238 type="button" 1239 class="pointer-events-auto inline-flex min-h-6 min-w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-100/75 px-2.5 py-1 text-[8px] font-medium text-neutral-600 opacity-0 shadow-lg shadow-black/10 ring-1 ring-black/10 backdrop-blur-sm backdrop-filter transition-opacity duration-150 ease-out motion-reduce:transition-none disabled:cursor-wait dark:bg-neutral-800/75 dark:text-neutral-300 dark:ring-white/15" 1240 data-infinite-scroll-target="button" 1241 data-action="infinite-scroll#load" 1242 hidden> 1243 <svg hidden data-infinite-scroll-target="spinner" class="size-2.5 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true"> 1244 <circle class="opacity-25" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3"></circle> 1245 <path class="opacity-80" fill="currentColor" d="M21 12a9 9 0 0 0-9-9v3a6 6 0 0 1 6 6h3Z"></path> 1246 </svg> 1247 <span class="motion-reduce:animate-none" data-infinite-scroll-target="label">Load more</span> 1248 </button> 1249 <p hidden class="rounded-full bg-neutral-100/75 px-2.5 py-1 text-[8px] text-neutral-500 shadow-lg shadow-black/10 ring-1 ring-black/10 backdrop-blur-sm backdrop-filter dark:bg-neutral-800/75 dark:text-neutral-400 dark:ring-white/15" data-infinite-scroll-target="end">You're all caught up</p> 1250 </div> 1251 </div> 1252 1253 <p class="sr-only" aria-live="polite" data-infinite-scroll-target="status"></p> 1254</div> 1255 1256 </div> 1257 </div> 1258 1259 <a href="/docs/infinite-scroll" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200"> 1260 <div class="h-48"></div> 1261 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 1262 Infinite Scroll 1263 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 transition-all duration-200 group-hover:w-4" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 1264 </p> 1265 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 1 component</p> 1266 </a> 1267</li> 1268 1269 </ul> 1270 </div> 1271 </ul> 1272 </div> 1273 </div> 1274 </div> 1275 </div> 1276 <!-- End Right Content --> 1277 </div> 1278 <!-- End Item --> 1279 1280 <!-- Item - July 14th 2026 --> 1281 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1282 1283 <!-- Icon --> 1284 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1285 <div class="relative z-10 size-6 flex justify-center items-center">
1286 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1287 </div> 1288 </div> 1289 <!-- End Icon --> 1290 1291 <!-- Right Content --> 1292 <div class="grow pb-8 relative"> 1293 <!-- Grid --> 1294 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1295 <div> 1296 <div class="space-y-3"> 1297 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1298 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1299 July 14<sup>th</sup> 2026 1300 </h2> 1301 </div> 1302 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dark:text-neutral-300"> 1303 <li class="flex items-start"> 1304 <span class="mr-2">â¢</span> 1305 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltip</a> positioning for fixed elements so tooltips stay aligned while scrolling.</span> 1306 </li> 1307 <li class="flex items-start"> 1308 <span class="mr-2">â¢</span> 1309 <span>Added the new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/avatar">avatar component set</a>, including five examples.</span> 1310 </li> 1311 <div class="my-4 w-full"> 1312 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 1313 <li class="relative"> 1314 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 1315 <div class="inline relative"> 1316 <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 1317 <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200"> 1318 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg> 1319 New 1320 </div> 1321 </div> 1322</div> 1323 1324 </div> 1325 1326 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1327 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1328 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1328k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 1329 <span class="text-xs">?</span> 1330 </button> 1331 1332 <template data-popover-target="content"> 1333 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1334 <div class="space-y-2"> 1335 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1336 1337 <div class="flex items-center gap-1.5 text-xs"> 1338 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 1339 <span class="flex grow gap-2">Tailwind CSS</span> 1340 </div> 1341 </div> 1342 </div> 1343 </template> 1344 </div> 1345 1346 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 1347 <!-- Recommended group overlap: xs -space-x-2, sm -space-x-3, md -space-x-4, lg -space-x-5, xl -space-x-6 --> 1348<div class="flex w-fit -space-x-4 [&>*]:isolate" role="group" aria-label="Project members"> 1349 <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]"> 1350 <img 1351 class="size-full rounded-full object-cover" 1352 src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop&crop=face&auto=format&q=80" 1353 alt="Olivia Martin"> 1354 </span> 1355 <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]"> 1356 <img 1357 class="size-full rounded-full object-cover" 1358 src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&h=160&fit=crop&crop=face&auto=format&q=80" 1359 alt="Noah Williams"> 1360 </span> 1361 <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]"> 1362 <img 1363 class="size-full rounded-full object-cover" 1364 src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=160&h=160&fit=crop&crop=face&auto=format&q=80" 1365 alt="Emma Davis"> 1366 </span> 1367 <span class="relative inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-xs font-medium text-neutral-600 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:bg-neutral-800 dark:text-neutral-300 dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]" aria-label="3 more project members"> 1368 +3 1369 </span> 1370</div> 1371 1372 </div> 1373 </div> 1374 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/avatar" data-turbo-frame="_top"> 1375 <div class="h-48"></div> 1376 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1377 Avatar 1378 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 1379 </p> 1380 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 1381 </a> 1382</li> 1383 1384 </ul> 1385 </div> 1386 </ul> 1387 </div> 1388 </div> 1389 <!-- End Col --> 1390 </div> 1391 <!-- End Grid --> 1392 </div> 1393 1394 <!-- End Right Content --> 1395 </div> 1396 <!-- End Item --> 1397 1398 <!-- Item - June 17th 2026 --> 1399 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1400 1401 <!-- Icon --> 1402 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1403 <div class="relative z-10 size-6 flex justify-center items-center">
1404 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1405 </div> 1406 </div> 1407 <!-- End Icon --> 1408 1409 <!-- Right Content --> 1410 <div class="grow pb-8 relative"> 1411 <!-- Grid --> 1412 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1413 <div> 1414 <div class="space-y-3"> 1415 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1416 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1417 June 17<sup>th</sup> 2026 1418 </h2> 1419 </div> 1420 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dark:text-neutral-300"> 1421 <li class="flex items-start"> 1422 <span class="mr-2">â¢</span> 1423 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> positioning: top-level menus now portal to the body while open so scroll containers do not clip them.</span> 1424 </li> 1425 <li class="flex items-start"> 1426 <span class="mr-2">â¢</span> 1427 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> interactions: searchable dropdowns, checkbox/radio activation, nested submenus, and hover-based submenu navigation now behave more consistently with keyboard and pointer input.</span> 1428 </li> 1429 <li class="flex items-start"> 1430 <span class="mr-2">â¢</span> 1431 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> behavior with portaled menus, including nested submenu hover handling and explicit close actions inside the menu.</span> 1432 </li> 1433 <li class="flex items-start"> 1434 <span class="mr-2">â¢</span> 1435 <span>Added <span class="inline-block relative" data-controller="popover" data-popover-trigger-value="mouseenter focus" data-popover-max-width-value="320"> 1436 <button type="button" data-popover-target="button" class="cursor-help border-0 bg-transparent p-0 text-left underline decoration-dashed underline-offset-4 decoration-neutral-300 transition-colors hover:decoration-neutral-500 focus-visible:decoration-neutral-500 dark:decoration-neutral-500 dark:hover:decoration-neutral-300 dark:focus-visible:decoration-neutral-300" aria-label="More information about prediction cone handling"> 1437 prediction cone/safe triangle 1438 </button> 1439 <template data-popover-target="content"> 1440 <div> 1441 <p class="rounded-t-[0.4375rem] border-b border-b-neutral-100 bg-neutral-50 px-3 py-2.5 font-semibold text-neutral-700 dark:border-neutral-700/75 dark:bg-neutral-700/25 dark:text-neutral-200"> 1442 Prediction cone/Safe triangle 1443 </p> 1444 <div class="p-3"> 1445 <img alt="Animation showing the prediction cone hover area for nested submenu navigation" class="w-full rounded" src="/assets/prediction-cone-74f81ef919876f2cd5b88c86826b7a64d54a9126a342e0ecf0f034bb386b415e.gif" /> 1446 </div> 1447 </div> 1448 </template> 1449 </span> handling for nested <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> submenus so moving diagonally toward a submenu is more forgiving.</span> 1450 </li> 1451 <li class="flex items-start">
1452 <span class="mr-2">â¢</span> 1453 <span>Updated Tailwind CSS to v4.3.1.</span> 1454 </li> 1455 <li class="flex items-start"> 1456 <span class="mr-2">â¢</span> 1457 <span>Updated Tom Select to v2.6.1.</span> 1458 </li> 1459 <li class="flex items-start"> 1460 <span class="mr-2">â¢</span> 1461 <span>Updated Pagy to v43.5.6.</span> 1462 </li> 1463 </ul> 1464 </div> 1465 </div> 1466 <!-- End Col --> 1467 </div> 1468 <!-- End Grid --> 1469 </div> 1470 1471 <!-- End Right Content --> 1472 </div> 1473 <!-- End Item --> 1474 1475 <!-- Item - June 3rd 2026 --> 1476 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1477 1478 <!-- Icon --> 1479 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1480 <div class="relative z-10 size-6 flex justify-center items-center"> 1481 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1482 </div> 1483 </div> 1484 <!-- End Icon --> 1485 1486 <!-- Right Content --> 1487 <div class="grow pb-8 relative"> 1488 <!-- Grid --> 1489 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1490 <div> 1491 <div class="space-y-3"> 1492 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1493 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1494 June 3<sup>rd</sup> 2026 1495 </h2> 1496 </div> 1497 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1497k:text-neutral-300"> 1498 <li class="flex items-start"> 1499 <span class="mr-2">â¢</span> 1500 <span>Fixed an issue with the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/navbar">navbar</a> menu on small screens which led it to close unexpectedly.</span> 1501 </li> 1502 <li class="flex items-start"> 1503 <span class="mr-2">â¢</span> 1504 <span>Cleaned up dark mode styles in component snippets to improve consistency.</span> 1505 </li> 1506 </ul> 1507 </div> 1508 </div> 1509 <!-- End Col --> 1510 </div> 1511 <!-- End Grid --> 1512 </div> 1513 1514 <!-- End Right Content --> 1515 </div> 1516 <!-- End Item --> 1517 1518 <!-- Item - May 14th 2026 --> 1519 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1520 1521 <!-- Icon --> 1522 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1523 <div class="relative z-10 size-6 flex justify-center items-center"> 1524 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1525 </div> 1526 </div> 1527 <!-- End Icon --> 1528 1529 <!-- Right Content --> 1530 <div class="grow pb-8 relative"> 1531 <!-- Grid --> 1532 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1533 <div> 1534 <div class="space-y-3"> 1535 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1536 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1537 May 14<sup>th</sup> 2026 1538 </h2> 1539 </div> 1540 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1540k:text-neutral-300"> 1541 <li class="flex items-start"> 1542 <span class="mr-2">â¢</span> 1543 <span>Published the new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/mcp">Rails Blocks MCP server</a> so AI coding agents can discover docs, inspect examples, and install components from Rails Blocks.</span> 1544 </li> 1545 <li class="flex items-start"> 1546 <span class="mr-2">â¢</span> 1547 <span>Added new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/cli">CLI commands</a> to list, search, preview, install, diff, and update Rails Blocks components from the terminal.</span> 1548 </li> 1549 <li class="flex items-start"> 1550 <span class="mr-2">â¢</span> 1551 <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/cli#use-the-cli-as-an-ai-skill">CLI skill</a> so agents can use the Rails Blocks CLI with safer defaults, dry runs, and component-specific context.</span> 1552 </li> 1553 <li class="flex items-start"> 1554 <span class="mr-2">â¢</span> 1555 <span>Open sourced the free Rails Blocks components in the <a target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80" href="https://github.com/Rails-Blocks/components">Rails-Blocks/components</a> repository, including documentation, Stimulus controllers, and the free Rails Blocks CSS.</span> 1556 </li> 1557 <li class="flex items-start"> 1558 <span class="mr-2">â¢</span> 1559 <span>Improved LLM-friendly documentation endpoints, including <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/llms.txt">llms.txt</a> & improved installation markdown docs.</span> 1560 </li> 1561 <li class="flex items-start"> 1562 <span class="mr-2">â¢</span> 1563 <span>Added the ability to display keyboard shortcuts in <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip#delayed-tooltips">tooltips</a>.</span> 1564 </li> 1565 <li class="flex items-start"> 1566 <span class="mr-2">â¢</span> 1567 <span>Added a small fix to <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> chevron icons to avoid a layout shift on Safari.</span> 1568 </li> 1569 <li class="flex items-start"> 1570 <span class="mr-2">â¢</span> 1571 <span>Updated Pagy to v43.5.4.</span> 1572 </li> 1573 <li class="flex items-start"> 1574 <span class="mr-2">â¢</span> 1575 <span>Updated Tailwind CSS to v4.3.0.</span> 1576 </li> 1577 </ul> 1578 </div> 1579 </div> 1580 <!-- End Col --> 1581 </div> 1582 <!-- End Grid --> 1583 </div> 1584 1585 <!-- End Right Content --> 1586 </div> 1587 <!-- End Item --> 1588 1589 <!-- Item - March 20th 2026 --> 1590 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1591 1592 <!-- Icon --> 1593 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1594 <div class="relative z-10 size-6 flex justify-center items-center"> 1595 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1596 </div> 1597 </div> 1598 <!-- End Icon --> 1599 1600 <!-- Right Content --> 1601 <div class="grow pb-8 relative"> 1602 <!-- Grid --> 1603 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1604 <div> 1605 <div class="space-y-3"> 1606 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1607 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1608 March 20<sup>th</sup> 2026 1609 </h2> 1610 </div> 1611 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1611k:text-neutral-300"> 1612 <li class="flex items-start"> 1613 <span class="mr-2">â¢</span> 1614 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/navbar">navbar</a> component: Added hover-to-open with intelligent delays to the stimulus controller and improve the down chevron SVG.</span> 1615 </li> 1616 <li class="flex items-start"> 1617 <span class="mr-2">â¢</span> 1618 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/select">select</a>: added <span class="code-inline-text">openOnMouseDown</span> and <span class="code-inline-text">lockScroll</span> options and improved dropdown scroll locking inside dialogs and overlays.</span> 1619 </li> 1620 <li class="flex items-start"> 1621 <span class="mr-2">â¢</span> 1622 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a>: Fixed the <span class="code-inline-text">lockScroll</span> option, which had an edge case issue with nested submenus.</span> 1623 </li> 1624 <li class="flex items-start"> 1625 <span class="mr-2">â¢</span> 1626 <span>Improved mobile behavior for <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a>, <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a>, and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a>: scroll locking now applies immediately with consistent scrollbar compensation.</span> 1627 </li> 1628 </ul> 1629 </div> 1630 </div> 1631 <!-- End Col --> 1632 </div> 1633 <!-- End Grid --> 1634 </div> 1635 1636 <!-- End Right Content --> 1637 </div> 1638 <!-- End Item --> 1639 1640 <!-- Item - March 12th 2026 --> 1641 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1642 1643 <!-- Icon --> 1644 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1645 <div class="relative z-10 size-6 flex justify-center items-center"> 1646 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1647 </div> 1648 </div> 1649 <!-- End Icon --> 1650 1651 <!-- Right Content --> 1652 <div class="grow pb-8 relative"> 1653 <!-- Grid --> 1654 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1655 <div> 1656 <div class="space-y-3"> 1657 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1658 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1659 March 12<sup>th</sup> 2026 1660 </h2> 1661 </div> 1662 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1662k:text-neutral-300"> 1663 <li class="flex items-start"> 1664 <span class="mr-2">â¢</span> 1665 <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/forms#nested-form">nested form example</a> to the Forms documentation</span> 1666 </li> 1667 </ul> 1668 </div> 1669 </div> 1670 <!-- End Col --> 1671 </div> 1672 <!-- End Grid --> 1673 </div> 1674 1675 <!-- End Right Content --> 1676 </div> 1677 <!-- End Item --> 1678 1679 <!-- Item - March 10th 2026 --> 1680 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1681 1682 <!-- Icon --> 1683 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1684 <div class="relative z-10 size-6 flex justify-center items-center"> 1685 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1686 </div> 1687 </div> 1688 <!-- End Icon --> 1689 1690 <!-- Right Content --> 1691 <div class="grow pb-8 relative"> 1692 <!-- Grid --> 1693 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1694 <div> 1695 <div class="space-y-3"> 1696 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1697 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1698 March 10<sup>th</sup> 2026 1699 </h2> 1700 </div> 1701 <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50"> 1702 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 1703 <div class="flex items-center h-full"> 1704 <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M2.795,13.957L5.568,4.846c.22-.722,1.13-.95,1.664-.416l6.339,6.339c.534,.534,.306,1.444-.416,1.664l-9.112,2.773c-.765,.233-1.481-.482-1.248-1.248Z"></path><line x1="6.825" y1="14.359" x2="4.654" y2="7.848"></line><line x1="10.346" y1="13.287" x2="7.475" y2="4.673"></line><path d="M16.743,2.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-stroke="none" stroke="none"></path><circle cx="12.75" cy="5.25" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle><path d="M10,3.439c.184-.133,.588-.465,.823-1.048,.307-.763,.118-1.442,.055-1.64"></path><path d="M14.561,8c.133-.184,.465-.588,1.048-.823,.763-.307,1.442-.118,1.64-.055"></path></g></svg> 1705 </div> 1706 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 1707 New: Shared Partials, ViewComponents & Markdown documentation 1708 </h3> 1709 <div></div>
1710 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 1711 Since the beginning of the year, I've been working on creating Shared Partials and ViewComponents for all 52 component sets that were released in 2025, and I'm glad to announce that they are finally ready! ð 1712 </div> 1713 <div></div> 1714 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 1715 I've also added Markdown documentation for each component set so you can easily ask questions about them in your LLM of choice, or give enough context before customizing Rails Blocks components. 1716 </div> 1717 </div> 1718 </div> 1719 <div style="position:relative;aspect-ratio:16/9;" class="rounded-lg overflow-hidden outline outline-1 outline-neutral-200 dark:outline-neutral-700"> 1720 <iframe 1721 loading="lazy" title="Rails Blocks Changelog Update" 1722 src="https://play.gumlet.io/embed/69af366ff96956f2b50de1e3?background=false&autoplay=false&loop=false&disable_player_controls=false" 1723 style="border:none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;" 1724 referrerpolicy="origin" 1725 allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"> 1726 </iframe> 1727 </div> 1728 <p class="text-neutral-500 dark:text-neutral-400"> 1729 I also updated dependencies: 1730 </p> 1731 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1731k:text-neutral-300"> 1732 <li class="flex items-start"> 1733 <span class="mr-2">â¢</span> 1734 <span>Tailwind CSS to v4.2.0</span> 1735 </li> 1736 <li class="flex items-start"> 1737 <span class="mr-2">â¢</span> 1738 <span>Pagy to v43.3.1</span> 1739 </li> 1740 <li class="flex items-start"> 1741 <span class="mr-2">â¢</span> 1742 <span>Floating UI to v1.7.6</span> 1743 </li> 1744 <li class="flex items-start"> 1745 <span class="mr-2">â¢</span> 1746 <span>Tom Select to v2.5.2</span> 1747 </li> 1748 </ul> 1749 <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50"> 1750 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 1751 <div class="flex items-center h-full"> 1752 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400"> 1753 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 1754 <circle cx="9" cy="9" r="7.25"></circle> 1755 <path d="M9 5.75V9.25"></path> 1756 <path d="M9 12.25H9.0075"></path> 1757 </g> 1758 </svg> 1759 </div> 1760 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 1761 About dependencies 1762 </h3> 1763 <div></div>
1764 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 1765 You can safely update your dependencies to the latest versions. 1766 </div> 1767 </div> 1768 </div> 1769 </div> 1770 </div> 1771 <!-- End Col --> 1772 </div> 1773 <!-- End Grid --> 1774 </div> 1775 1776 <!-- End Right Content --> 1777 </div> 1778 <!-- End Item --> 1779 1780 <!-- Item - February 2026 --> 1781 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1782 1783 <!-- Icon --> 1784 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1785 <div class="relative z-10 size-6 flex justify-center items-center"> 1786 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1787 </div> 1788 </div> 1789 <!-- End Icon --> 1790 1791 <!-- Right Content --> 1792 <div class="grow pb-8 relative"> 1793 <!-- Grid --> 1794 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1795 <div> 1796 <div class="space-y-3"> 1797 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1798 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1799 February 2026 1800 </h2> 1801 </div> 1802 <p class="text-neutral-500 dark:text-neutral-400"> 1803 In February 2026, I also shipped these fixes and improvements: 1804 </p> 1805 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1805k:text-neutral-300"> 1806 <li class="flex items-start"> 1807 <span class="mr-2">â¢</span> 1808 <span>Fixed lightboxes opening behind dialog-based components (<a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a>, <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a>, and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a>)</span> 1809 </li> 1810 <li class="flex items-start"> 1811 <span class="mr-2">â¢</span> 1812 <span>Improved shared <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a> overlays: synchronized scroll-lock and scrollbar compensation across nested overlays, and hardened div-based modal behavior when portaled to <span class="code-inline-text"><body></span></span> 1813 </li> 1814 <li class="flex items-start"> 1815 <span class="mr-2">â¢</span> 1816 <span>Revamped the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a> interaction and animation system (smoother snap/drag/open motion), and improved the first-open of asynchronously loaded content UX across <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a>, <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a>, and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a> by temporary disabling the button</span> 1817 </li> 1818 <li class="flex items-start"> 1819 <span class="mr-2">â¢</span> 1820 <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/toast">toast</a> stacking: toasts now stay above <span class="code-inline-text"><dialog></span> elements</span> 1821 </li> 1822 <li class="flex items-start"> 1823 <span class="mr-2">â¢</span> 1824 <span>Refactored the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/marquee">marquee</a> animation engine for smoother slow-on-hover and resume behavior across Safari and Chrome</span> 1825 </li> 1826 <li class="flex items-start"> 1827 <span class="mr-2">â¢</span> 1828 <span>Fixed a Safari blinking issue when closing the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/feedback">feedback</a> widget after submit or manual close</span> 1829 </li> 1830 <li class="flex items-start"> 1831 <span class="mr-2">â¢</span> 1832 <span>Added a new <a href="/docs/marquee#vertical-marquee" class="text-neutral-900 dark:text-white underline hover:opacity-80">vertical marquee</a> component</span> 1833 </li> 1834 <li class="flex items-start"> 1835 <span class="mr-2">â¢</span> 1836 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/popover">popover</a> stacking behavior in sticky layouts</span> 1837 </li> 1838 <li class="flex items-start"> 1839 <span class="mr-2">â¢</span> 1840 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/stepper">stepper</a>: smoother entrance behavior, persistent current/visited step restoration, and submit loading state support</span> 1841 </li> 1842 <li class="flex items-start"> 1843 <span class="mr-2">â¢</span>
1844 <span>Refactored <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/two-factor">two factor</a> to use dynamic <span class="code-inline-text">digit</span> targets (instead of <span class="code-inline-text">num1..num6</span>) and added optional <span class="code-inline-text">numericOnly</span> mode</span> 1845 </li> 1846 <li class="flex items-start"> 1847 <span class="mr-2">â¢</span> 1848 <span>Fixed <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tabs">tabs</a> disabled-state behavior: disabled tabs are skipped during keyboard navigation and cannot be activated</span> 1849 </li> 1850 <li class="flex items-start"> 1851 <span class="mr-2">â¢</span> 1852 <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/collapsible">collapsible</a> with instant icon switching and a new <span class="code-inline-text">animated</span> option to disable content motion when needed</span> 1853 </li> 1854 <li class="flex items-start"> 1855 <span class="mr-2">â¢</span> 1856 <span>Added a new plus/minus icon example for <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/collapsible">collapsible</a></span> 1857 </li> 1858 <li class="flex items-start"> 1859 <span class="mr-2">â¢</span> 1860 <span>Improved the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/carousel">carousel</a> controller behavior and added a new <a href="/docs/carousel#vertical-carousel" class="text-neutral-900 dark:text-white underline hover:opacity-80">vertical carousel</a> example</span> 1861 </li> 1862 <li class="flex items-start"> 1863 <span class="mr-2">â¢</span> 1864 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> interactions: smoother nested submenu focus/highlight behavior during fast pointer movement</span> 1865 </li> 1866 <li class="flex items-start"> 1867 <span class="mr-2">â¢</span> 1868 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/sidebar">sidebar</a> component examples with better styling for the profile when the sidebar is collapsed</span> 1869 </li> 1870 </ul> 1871 <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50"> 1872 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 1873 <div class="flex items-center h-full"> 1874 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400"> 1875 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 1876 <circle cx="9" cy="9" r="7.25"></circle> 1877 <path d="M9 5.75V9.25"></path> 1878 <path d="M9 12.25H9.0075"></path> 1879 </g> 1880 </svg> 1881 </div> 1882 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 1883 Recommendation 1884 </h3> 1885 <div></div>
1886 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 1887 If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes. 1888 </div> 1889 </div> 1890 </div> 1891 </div> 1892 </div> 1893 <!-- End Col --> 1894 </div> 1895 <!-- End Grid --> 1896 </div> 1897 1898 <!-- End Right Content --> 1899 </div> 1900 <!-- End Item --> 1901 1902 <!-- Item - January 2026 --> 1903 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1904 1905 <!-- Icon --> 1906 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1907 <div class="relative z-10 size-6 flex justify-center items-center"> 1908 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1909 </div> 1910 </div> 1911 <!-- End Icon --> 1912 1913 <!-- Right Content --> 1914 <div class="grow pb-8 relative"> 1915 <!-- Grid --> 1916 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1917 <div> 1918 <div class="space-y-3"> 1919 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1920 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1921 January 2026 1922 </h2> 1923 </div> 1924 <p class="text-neutral-500 dark:text-neutral-400"> 1925 In January 2026, I updated the site with the following improvements: 1926 </p> 1927 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1927k:text-neutral-300"> 1928 <li class="flex items-start"> 1929 <span class="mr-2">â¢</span> 1930 <span>Added code syntax highlighting with Prism for improved code example rendering</span> 1931 </li> 1932 </ul> 1933 </div> 1934 </div> 1935 <!-- End Col --> 1936 </div> 1937 <!-- End Grid --> 1938 </div> 1939 <!-- End Right Content --> 1940 </div> 1941 <!-- End Item --> 1942 1943 <!-- Item - December 2025 --> 1944 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 1945 1946 <!-- Icon --> 1947 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 1948 <div class="relative z-10 size-6 flex justify-center items-center"> 1949 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 1950 </div> 1951 </div> 1952 <!-- End Icon --> 1953 1954 <!-- Right Content --> 1955 <div class="grow pb-8 relative"> 1956 <!-- Grid --> 1957 <div class="grid grid-cols-1 gap-6 md:gap-12"> 1958 <div> 1959 <div class="space-y-3"> 1960 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 1961 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 1962 December 2025 1963 </h2> 1964 </div> 1965 <p class="text-neutral-500 dark:text-neutral-400"> 1966 Happy new year! In December 2025, I built 4 new component sets: 1967 </p> 1968 <div class="my-4"> 1969 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 1970 <li class="relative"> 1971 <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 1972 <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 1973 <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200"> 1974 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg> 1975 New 1976 </div> 1977 </div> 1978</div> 1979 1980 1981 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1982 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1983 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1983k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 1984 <span class="text-xs">?</span> 1985 </button> 1986 1987 <template data-popover-target="content"> 1988 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1989 <div class="space-y-2"> 1990 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1991 1992 <div class="flex items-center gap-1.5 text-xs"> 1993 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 1994 <span class="flex grow gap-2">Tailwind CSS</span> 1995 </div> 1996 1997 <div class="flex items-center gap-1.5 text-xs"> 1998 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1998ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1999 <g class="fill-neutral-800 dark:fill-white"> 2000 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 2001 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 2002 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 2003 </g> 2004 </svg> 2005 <span class="flex grow gap-2">Stimulus</span> 2006 </div> 2007 </div> 2008 </div> 2009 </template> 2010 </div> 2011 2012 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2013 <div class="w-fit mx-auto" data-controller="checkbox-select-all" data-checkbox-select-all-toggle-key-value="x"> 2014 <div class="space-y-1.5"> 2015 <!-- Select All --> 2016 <div class="flex items-center gap-x-3"> 2017 <input 2018 type="checkbox" 2019 id="preview-select-all" 2020 tabindex="0" 2021 data-checkbox-select-all-target="selectAll" 2022 data-action="click->
2022checkbox-select-all#toggleAll"> 2023 <label for="preview-select-all" class="inline-block text-sm font-medium cursor-pointer select-none"> 2024 Select All 2025 </label> 2026 </div> 2027 2028 <!-- Checkbox List --> 2029 <div class="space-y-1.5 pl-7"> 2030 <div class="flex items-center gap-x-3"> 2031 <input 2032 type="checkbox" 2033 id="preview-item-1" 2034 tabindex="0" 2035 data-checkbox-select-all-target="checkbox" 2036 data-action="click->checkbox-select-all#toggle"> 2037 <label for="preview-item-1" class="inline-block text-sm cursor-pointer select-none"> 2038 Product Design 2039 </label> 2040 </div> 2041 2042 <div class="flex items-center gap-x-3"> 2043 <input 2044 type="checkbox" 2045 id="preview-item-2" 2046 tabindex="0" 2047 data-checkbox-select-all-target="checkbox" 2048 data-action="click->checkbox-select-all#toggle"> 2049 <label for="preview-item-2" class="inline-block text-sm cursor-pointer select-none"> 2050 Development 2051 </label> 2052 </div> 2053 2054 <div class="flex items-center gap-x-3"> 2055 <input 2056 type="checkbox" 2057 id="preview-item-3" 2058 tabindex="0" 2059 data-checkbox-select-all-target="checkbox" 2060 data-action="click->checkbox-select-all#toggle"> 2061 <label for="preview-item-3" class="inline-block text-sm cursor-pointer select-none"> 2062 Marketing 2063 </label> 2064 </div> 2065 </div> 2066 </div> 2067</div> 2068 2069 2070 </div> 2071 </div> 2072 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/checkbox-select-all" data-turbo-frame="_top"> 2073 <div class="h-48"></div> 2074 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2075 Checkbox Select All 2076 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 2077 </p> 2078 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 2079 </a> 2080</li> 2081 2082 2083 <li class="relative"> 2084 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 2085 <div class="inline relative"> 2086 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 2087 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 2088 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 2089 Pro 2090 </a> 2091 </div> 2092 </div> 2093 2094 </div> 2095 2096 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2097 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2098 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2098k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 2099 <span class="text-xs">?</span> 2100 </button> 2101 2102 <template data-popover-target="content"> 2103 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2104 <div class="space-y-2"> 2105 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2106 2107 <div class="flex items-center gap-1.5 text-xs"> 2108 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 2109 <span class="flex grow gap-2">Tailwind CSS</span> 2110 </div> 2111 2112 <div class="flex items-center gap-1.5 text-xs"> 2113 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2113ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2114 <g class="fill-neutral-800 dark:fill-white"> 2115 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 2116 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 2117 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 2118 </g> 2119 </svg> 2120 <span class="flex grow gap-2">Stimulus</span> 2121 </div> 2122 2123 <div class="flex items-center gap-1.5 text-xs"> 2124 <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" /> 2125 <span class="flex grow gap-2">Pagy</span> 2126 </div> 2127 </div> 2128 </div> 2129 </template> 2130 </div> 2131 2132 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2133 2134 2135<div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4"> 2136 <div class="w-full max-w-md bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 shadow-xs overflow-hidden" 2137 data-controller="datatable-preview" 2138 data-datatable-preview-sort-column-value="name" 2139 data-datatable-preview-sort-direction-value="asc" 2140 data-datatable-preview-page-value="1" 2141 data-datatable-preview-per-page-value="3" 2142 data-datatable-preview-total-value="9"> 2143 <table class="w-full text-[10px]">
2144 <thead class="bg-neutral-100 dark:bg-neutral-800"> 2145 <tr class="*:py-1 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]"> 2146 <th scope="col" 2147 class="group pl-3 pr-2 cursor-pointer select-none" 2148 data-datatable-preview-target="header" 2149 data-column="name" 2150 data-action="click->datatable-preview#sort"> 2151 <div class="inline-flex items-center gap-1"> 2152 <span class="font-semibold text-neutral-900 dark:text-neutral-50">Name</span> 2153 2154<span class="sort-indicator-mini overflow-hidden inline-flex items-center justify-center rounded ring-1 ring-inset ring-black/10 bg-white/50 transition hover:ring-black/20 dark:ring-white/10 dark:bg-neutral-800/50 dark:hover:ring-white/20 text-neutral-900 dark:text-white"> 2155 <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5"> 2156 <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 2157 <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd"></path> 2158 </svg> 2159 </span> 2160 2161 <span data-datatable-target="loader" class="hidden p-0.5"> 2162 <div class="flex items-center justify-center size-2.5"> 2163 <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2164 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> 2165 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> 2166 </svg> 2167 </div> 2168 </span> 2169</span> 2170 2171 2172 </div> 2173 </th> 2174 2175 <th scope="col" 2176 class="group px-2 cursor-pointer select-none" 2177 data-datatable-preview-target="header" 2178 data-column="role" 2179 data-action="click->datatable-preview#sort"> 2180 <div class="inline-flex items-center gap-1"> 2181 <span class="font-semibold text-neutral-900 dark:text-neutral-50">Role</span> 2182 2183<span class="sort-indicator-mini overflow-hidden inline-flex items-center justify-center rounded ring-1 ring-inset ring-black/10 bg-white/50 transition hover:ring-black/20 dark:ring-white/10 dark:bg-neutral-800/50 dark:hover:ring-white/20 text-neutral-400 dark:text-neutral-500"> 2184 <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5"> 2185 <svg class="size-2.5 opacity-50 group-hover:opacity-100 transition-opacity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 2186 <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path> 2187 </svg> 2188 </span> 2189 2190 <span data-datatable-target="loader" class="hidden p-0.5"> 2191 <div class="flex items-center justify-center size-2.5"> 2192 <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2193 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> 2194 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> 2195 </svg> 2196 </div> 2197 </span> 2198</span> 2199 2200 2201 </div> 2202 </th> 2203 2204 <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50"> 2205 Status 2206 </th> 2207 </tr> 2208 </thead> 2209 <tbody data-datatable-preview-target="body" class="*:*:py-1"> 2210 <tr data-name="Alex Johnson" 2211 data-role="Admin" 2212 data-status-color="green" 2213 data-status="Active" 2214 data-index="0" 2215 class=""> 2216 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2217 Alex Johnson 2218 </td> 2219 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2220 Admin 2221 </td> 2222 <td class="pl-2 pr-3">
2223 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2224 Active 2225 </span> 2226 </td> 2227 </tr> 2228 <tr data-name="Sarah Miller" 2229 data-role="Editor" 2230 data-status-color="green" 2231 data-status="Active" 2232 data-index="1" 2233 class=""> 2234 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2235 Sarah Miller 2236 </td> 2237 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2238 Editor 2239 </td> 2240 <td class="pl-2 pr-3"> 2241 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2242 Active 2243 </span> 2244 </td> 2245 </tr> 2246 <tr data-name="Michael Chen" 2247 data-role="Viewer" 2248 data-status-color="yellow" 2249 data-status="Pending" 2250 data-index="2" 2251 class=""> 2252 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2253 Michael Chen 2254 </td> 2255 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2256 Viewer 2257 </td> 2258 <td class="pl-2 pr-3"> 2259 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-yellow-50 text-yellow-700 outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25"> 2260 Pending 2261 </span> 2262 </td> 2263 </tr> 2264 <tr data-name="Emily Davis" 2265 data-role="Editor" 2266 data-status-color="green" 2267 data-status="Active" 2268 data-index="3" 2269 class="hidden"> 2270 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2271 Emily Davis 2272 </td> 2273 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2274 Editor 2275 </td> 2276 <td class="pl-2 pr-3"> 2277 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2278 Active 2279 </span> 2280 </td> 2281 </tr> 2282 <tr data-name="James Wilson" 2283 data-role="Viewer" 2284 data-status-color="green" 2285 data-status="Active" 2286 data-index="4" 2287 class="hidden"> 2288 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2289 James Wilson 2290 </td> 2291 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2292 Viewer 2293 </td> 2294 <td class="pl-2 pr-3"> 2295 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2296 Active 2297 </span> 2298 </td> 2299 </tr> 2300 <tr data-name="Lisa Anderson" 2301 data-role="Admin" 2302 data-status-color="green" 2303 data-status="Active" 2304 data-index="5" 2305 class="hidden"> 2306 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2307 Lisa Anderson 2308 </td> 2309 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2310 Admin 2311 </td> 2312 <td class="pl-2 pr-3"> 2313 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2314 Active 2315 </span> 2316 </td> 2317 </tr> 2318 <tr data-name="Robert Brown" 2319 data-role="Viewer" 2320 data-status-color="green" 2321 data-status="Active" 2322 data-index="6" 2323 class="hidden"> 2324 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2325 Robert Brown 2326 </td> 2327 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2328 Viewer 2329 </td> 2330 <td class="pl-2 pr-3">
2331 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2332 Active 2333 </span> 2334 </td> 2335 </tr> 2336 <tr data-name="Patricia Taylor" 2337 data-role="Editor" 2338 data-status-color="yellow" 2339 data-status="Pending" 2340 data-index="7" 2341 class="hidden"> 2342 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2343 Patricia Taylor 2344 </td> 2345 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2346 Editor 2347 </td> 2348 <td class="pl-2 pr-3"> 2349 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-yellow-50 text-yellow-700 outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25"> 2350 Pending 2351 </span> 2352 </td> 2353 </tr> 2354 <tr data-name="David Martinez" 2355 data-role="Admin" 2356 data-status-color="green" 2357 data-status="Active" 2358 data-index="8" 2359 class="hidden"> 2360 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2361 David Martinez 2362 </td> 2363 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2364 Admin 2365 </td> 2366 <td class="pl-2 pr-3"> 2367 <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2368 Active 2369 </span> 2370 </td> 2371 </tr> 2372 </tbody> 2373 </table> 2374 2375 <div class="border-t border-black/10 dark:border-white/10 px-3 py-1 flex items-center justify-between gap-2"> 2376 <p class="text-[9px] text-neutral-500 dark:text-neutral-400" data-datatable-preview-target="info"> 2377 1â3 of 9 2378 </p> 2379 <div class="inline-flex items-center gap-1"> 2380 <button type="button" 2381 data-datatable-preview-target="prevBtn" 2382 data-action="click->datatable-preview#prevPage" 2383 disabled 2384 class="inline-flex items-center justify-center size-5 rounded border border-black/10 bg-white text-neutral-400 dark:border-white/10 dark:bg-neutral-800 dark:text-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:bg-neutral-50 dark:hover:not-disabled:bg-neutral-700 transition-colors"> 2385 <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 2386 <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> 2387 </svg> 2388 </button> 2389 <span class="text-[9px] font-medium text-neutral-700 dark:text-neutral-300 tabular-nums min-w-[2.5rem] text-center" data-datatable-preview-target="pageInfo"> 2390 1 / 3 2391 </span> 2392 <button type="button" 2393 data-datatable-preview-target="nextBtn" 2394 data-action="click->datatable-preview#nextPage" 2395 class="inline-flex items-center justify-center size-5 rounded border border-black/10 bg-white dark:border-white/10 dark:bg-neutral-800 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:bg-neutral-50 dark:hover:not-disabled:bg-neutral-700 transition-colors text-neutral-400 dark:text-neutral-500"> 2396 <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 2397 <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> 2398 </svg> 2399 </button> 2400 </div> 2401 </div> 2402 </div> 2403</div> 2404 2405 </div> 2406 </div> 2407 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/datatable" data-turbo-frame="_top"> 2408 <div class="h-48"></div> 2409 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2410 Datatable 2411 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 2412 </p> 2413 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 2414 </a> 2415</li> 2416 2417 <li class="relative"> 2418 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2419 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2420 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2420k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 2421 <span class="text-xs">?</span> 2422 </button> 2423 2424 <template data-popover-target="content"> 2425 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2426 <div class="space-y-2"> 2427 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2428 2429 <div class="flex items-center gap-1.5 text-xs"> 2430 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 2431 <span class="flex grow gap-2">Tailwind CSS</span> 2432 </div> 2433 2434 <div class="flex items-center gap-1.5 text-xs"> 2435 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2435ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2436 <g class="fill-neutral-800 dark:fill-white"> 2437 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 2438 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 2439 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 2440 </g> 2441 </svg> 2442 <span class="flex grow gap-2">Stimulus</span> 2443 </div> 2444 2445 <div class="flex items-center gap-1.5 text-xs"> 2446 <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" /> 2447 <span class="flex grow gap-2">Pagy</span> 2448 </div> 2449 </div> 2450 </div> 2451 </template> 2452 </div> 2453 2454 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2455 2456<turbo-frame id="pagy-preview" class="inline-flex items-center gap-3 rounded-lg border border-black/10 bg-white px-3 py-2 shadow-xs dark:border-white/10 dark:bg-neutral-900"> 2457 <span class="select-none inline-flex items-center gap-1 text-sm font-medium text-neutral-400 cursor-not-allowed dark:text-neutral-600" 2458 aria-label="Previous page (disabled)"> 2459 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"> 2460 <g fill="currentColor"> 2461 <path d="M11.5607 3.93934C11.9512 4.32986 11.9512 4.96303 11.5607 5.35355L7.91421 9L11.5607 12.6464C11.9512 13.037 11.9512 13.6701 11.5607 14.0607C11.1701 14.4512 10.537 14.4512 10.1464 14.0607L5.79289 9.70711C5.40237 9.31658 5.40237 8.68342 5.79289 8.29289L10.1464 3.93934C10.537 3.54882 11.1701 3.54882 11.5607 3.93934Z" fill="currentColor"></path> 2462 </g> 2463 </svg> 2464 Previous 2465 </span> 2466
2467 <span class="text-sm text-neutral-600 dark:text-neutral-400"> 2468 Page <span class="font-medium text-neutral-900 dark:text-white">1</span> of <span class="font-medium text-neutral-900 dark:text-white">3</span> 2469 </span> 2470 2471 <a href="/changelog?preview_page=2" 2472 data-turbo-frame="pagy-preview" 2473 class="select-none inline-flex items-center gap-1 text-sm font-medium text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white" 2474 aria-label="Next page"> 2475 Next 2476 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"> 2477 <g fill="currentColor"> 2478 <path d="M6.43934 14.0607C6.04882 13.6701 6.04882 13.037 6.43934 12.6464L10.0858 9L6.43934 5.35355C6.04882 4.96303 6.04882 4.32986 6.43934 3.93934C6.82986 3.54882 7.46303 3.54882 7.85355 3.93934L12.2071 8.29289C12.5976 8.68342 12.5976 9.31658 12.2071 9.70711L7.85355 14.0607C7.46303 14.4512 6.82986 14.4512 6.43934 14.0607Z" fill="currentColor"></path> 2479 </g> 2480 </svg> 2481 </a> 2482</turbo-frame> 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 </div> 2494 </div> 2495 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/pagination" data-turbo-frame="_top"> 2496 <div class="h-48"></div> 2497 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2498 Pagination 2499 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 2500 </p> 2501 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 2502 </a> 2503</li> 2504 2505 <li class="relative"> 2506 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2507 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2508 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2508k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 2509 <span class="text-xs">?</span> 2510 </button> 2511 2512 <template data-popover-target="content"> 2513 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2514 <div class="space-y-2"> 2515 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2516 2517 <div class="flex items-center gap-1.5 text-xs"> 2518 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 2519 <span class="flex grow gap-2">Tailwind CSS</span> 2520 </div> 2521 2522 </div> 2523 </div> 2524 </template> 2525 </div> 2526 2527 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2528 <div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4"> 2529 <div class="w-full max-w-md bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 shadow-xs overflow-hidden"> 2530 <table class="w-full text-[9px]"> 2531 <thead class="bg-neutral-100 dark:bg-neutral-800"> 2532 <tr class="*:py-1 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]"> 2533 <th scope="col" class="pl-3 pr-2 font-semibold text-neutral-900 dark:text-neutral-50"> 2534 Name 2535 </th> 2536 <th scope="col" class="px-2 font-semibold text-neutral-900 dark:text-neutral-50"> 2537 Role 2538 </th> 2539 <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50"> 2540 Status 2541 </th> 2542 </tr> 2543 </thead> 2544 <tbody class="*:*:py-1"> 2545 <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]"> 2546 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2547 Alex Johnson 2548 </td> 2549 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2550 Admin 2551 </td> 2552 <td class="pl-2 pr-3"> 2553 <span class="inline-flex items-center rounded-full bg-green-50 px-1 py-0.5 text-[9px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2554 Active 2555 </span> 2556 </td> 2557 </tr> 2558 <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]"> 2559 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2560 Sarah Miller 2561 </td> 2562 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2563 Editor 2564 </td> 2565 <td class="pl-2 pr-3"> 2566 <span class="inline-flex items-center rounded-full bg-green-50 px-1 py-0.5 text-[9px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"> 2567 Active 2568 </span> 2569 </td> 2570 </tr> 2571 <tr> 2572 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2573 Michael Chen 2574 </td> 2575 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2576 Viewer 2577 </td> 2578 <td class="pl-2 pr-3"> 2579 <span class="inline-flex items-center rounded-full bg-yellow-50 px-1 py-0.5 text-[9px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25"> 2580 Pending 2581 </span> 2582 </td> 2583 </tr> 2584 </tbody> 2585 </table> 2586 </div> 2587</div> 2588 2589 </div> 2590 </div> 2591 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/table" data-turbo-frame="_top"> 2592 <div class="h-48"></div> 2593 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2594 Table 2595 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 2596 </p> 2597 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 2598 </a> 2599</li> 2600 2601 </ul> 2602 </div> 2603 <p class="text-neutral-500 dark:text-neutral-400"> 2604 I also updated existing components: 2605 </p> 2606 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
2606k:text-neutral-300"> 2607 <li class="flex items-start"> 2608 <span class="mr-2">â¢</span> 2609 <span>Renamed and refactored the conditional radio controller to <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/radio#radio-cards-with-conditional-fields">conditional field</a> controller for improved flexibility with both radio buttons and checkboxes</span> 2610 </li> 2611 <li class="flex items-start"> 2612 <span class="mr-2">â¢</span> 2613 <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/banner">banner</a> controller logic to improve header positioning and remove jittery animations when navigating between pages</span> 2614 </li> 2615 <li class="flex items-start"> 2616 <span class="mr-2">â¢</span> 2617 <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltip</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/popover">popover</a> controllers to improve behavior when scrolling the page</span> 2618 </li> 2619 <li class="flex items-start"> 2620 <span class="mr-2">â¢</span> 2621 <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/forms">forms</a> CSS to add a new checkbox state</span> 2622 </li> 2623 <li class="flex items-start"> 2624 <span class="mr-2">â¢</span> 2625 <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> custom CSS for better mobile support for the <span class="code-inline-text">dropdown_input</span> plugin, and improved the <span class="code-inline-text">clearInput</span> method</span> 2626 </li> 2627 <li class="flex items-start"> 2628 <span class="mr-2">â¢</span> 2629 <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tree-view">tree view</a> component and improved tree view controller and styling</span> 2630 </li> 2631 <li class="flex items-start"> 2632 <span class="mr-2">â¢</span> 2633 <span>Fixed a Safari bug in the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/autocomplete">autocomplete</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/command-palette">command palette</a> components where keyboard navigation would incorrectly jump to the mouse cursor position when scrolling</span> 2634 </li> 2635 <li class="flex items-start"> 2636 <span class="mr-2">â¢</span> 2637 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> scroll behavior: removed aggressive auto-scroll on mouse hover, and enhanced keyboard navigation to show context around the selected option</span> 2638 </li> 2639 <li class="flex items-start"> 2640 <span class="mr-2">â¢</span> 2641 <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> components with improved state management using <span class="code-inline-text">data-highlighted</span> and <span class="code-inline-text">data-state</span> attributes, plus better accessibility with <span class="code-inline-text">aria-haspopup</span></span> 2642 </li> 2643 <li class="flex items-start"> 2644 <span class="mr-2">â¢</span>
2645 <span>Updated all secondary button styles for better dark mode visibility</span> 2646 </li> 2647 <li class="flex items-start"> 2648 <span class="mr-2">â¢</span> 2649 <span>Added a new filter toggle to ignore dark mode classes in the code examples</span> 2650 </li> 2651 </ul> 2652 <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50"> 2653 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 2654 <div class="flex items-center h-full"> 2655 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400"> 2656 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 2657 <circle cx="9" cy="9" r="7.25"></circle> 2658 <path d="M9 5.75V9.25"></path> 2659 <path d="M9 12.25H9.0075"></path> 2660 </g> 2661 </svg> 2662 </div> 2663 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 2664 Recommendation 2665 </h3> 2666 <div></div>
2667 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 2668 If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes. 2669 </div> 2670 </div> 2671 </div> 2672 </div> 2673 </div> 2674 <!-- End Col --> 2675 </div> 2676 <!-- End Grid --> 2677 </div> 2678 <!-- End Right Content --> 2679 </div> 2680 <!-- End Item --> 2681 2682 <!-- Item - November 2025 --> 2683 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 2684 2685 <!-- Icon --> 2686 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 2687 <div class="relative z-10 size-6 flex justify-center items-center"> 2688 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 2689 </div> 2690 </div> 2691 <!-- End Icon --> 2692 2693 <!-- Right Content --> 2694 <div class="grow pb-8 relative"> 2695 <!-- Grid --> 2696 <div class="grid grid-cols-1 gap-6 md:gap-12"> 2697 <div> 2698 <div class="space-y-3"> 2699 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 2700 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 2701 November 2025 2702 </h2> 2703 </div> 2704 <p class="text-neutral-500 dark:text-neutral-400"> 2705 In November 2025, I built 4 new component sets: 2706 </p> 2707 <div class="my-4"> 2708 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 2709 <li class="relative"> 2710 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2711 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2712 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2712k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 2713 <span class="text-xs">?</span> 2714 </button> 2715 2716 <template data-popover-target="content"> 2717 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2718 <div class="space-y-2"> 2719 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2720 2721 <div class="flex items-center gap-1.5 text-xs"> 2722 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 2723 <span class="flex grow gap-2">Tailwind CSS</span> 2724 </div> 2725 2726 <div class="flex items-center gap-1.5 text-xs"> 2727 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2727ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2728 <g class="fill-neutral-800 dark:fill-white"> 2729 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 2730 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 2731 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 2732 </g> 2733 </svg> 2734 <span class="flex grow gap-2">Stimulus</span> 2735 </div> 2736 </div> 2737 </div> 2738 </template> 2739 </div> 2740 2741 <div class="[&_[data-controller='banner']]:!absolute [&_[data-controller='banner']]:!-translate-y-0 relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2742 <div class="h-12 w-full absolute top-0 left-0 right-0 bg-neutral-100 dar
2742k:bg-neutral-800"></div> 2743<div data-controller="banner" data-banner-cookie-name-value="preview_banner" data-banner-cookie-days-value="-1" class="hidden fixed top-12 left-0 right-0 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white border-b border-black/10 dark:border-white/10 shadow-xs transition-all duration-300 ease-in-out opacity-0 -translate-y-full"> 2744 <div class="container mx-auto px-4"> 2745 <div class="flex items-center justify-between gap-2 sm:gap-4 py-3"> 2746 <div class="flex items-center gap-3 flex-1"> 2747 <div class="hidden sm:flex size-9 shrink-0 items-center justify-center rounded-full sm:bg-neutral-100 dark:sm:bg-neutral-800" aria-hidden="true"> 2748 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-90" aria-hidden="true"> 2749 <path d="M12 2L2 7l10 5 10-5-10-5z"></path> 2750 <path d="m2 17 10 5 10-5"></path> 2751 <path d="m2 12 10 5 10-5"></path> 2752 </svg> 2753 </div> 2754 <div class="space-y-1"> 2755 <p class="text-sm font-semibold">New Feature Launch! ð</p> 2756 </div> 2757 </div> 2758 <div class="flex items-center gap-2"> 2759 <button data-action="click->banner#hide" class="inline-flex items-center justify-center p-1.5 right-2 top-2 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none" aria-label="Close banner"> 2760 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg> 2761 </button> 2762 </div> 2763 </div> 2764 </div> 2765</div> 2766 2767 </div> 2768 </div> 2769 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/banner" data-turbo-frame="_top"> 2770 <div class="h-48"></div> 2771 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2772 Banner 2773 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 2774 </p> 2775 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 2776 </a> 2777</li> 2778 2779 <li class="relative"> 2780 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2781 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2782 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2782k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 2783 <span class="text-xs">?</span> 2784 </button> 2785 2786 <template data-popover-target="content"> 2787 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2788 <div class="space-y-2"> 2789 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2790 2791 <div class="flex items-center gap-1.5 text-xs"> 2792 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 2793 <span class="flex grow gap-2">Tailwind CSS</span> 2794 </div> 2795 2796 </div> 2797 </div> 2798 </template> 2799 </div> 2800 2801 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2802 <div class="flex flex-row"> 2803 <div class="flex items-center justify-center p-8"> 2804 <svg xmlns="http://www.w3.org/2000/svg" class="rounded-full animate-spin size-8 text-neutral-800 dark:text-neutral-200" width="18" height="18" viewBox="0 0 18 18"> 2805 <g fill="currentColor"> 2806 <path d="m9,17c-4.4111,0-8-3.5889-8-8S4.5889,1,9,1s8,3.5889,8,8-3.5889,8-8,8Zm0-14.5c-3.584,0-6.5,2.916-6.5,6.5s2.916,6.5,6.5,6.5,6.5-2.916,6.5-6.5-2.916-6.5-6.5-6.5Z" opacity=".4" stroke-width="0"></path> 2807 <path d="m16.25,9.75c-.4141,0-.75-.3359-.75-.75,0-3.584-2.916-6.5-6.5-6.5-.4141,0-.75-.3359-.75-.75s.3359-.75.75-.75c4.4111,0,8,3.5889,8,8,0,.4141-.3359.75-.75.75Z" stroke-width="0"></path> 2808 </g> 2809 </svg> 2810</div> 2811 2812 <div class="flex items-center justify-center p-8"> 2813 <svg xmlns="http://www.w3.org/2000/svg" class="size-8 rounded-full animate-[spin_0.8s_steps(8)_infinite]" width="18" height="18" viewBox="0 0 18 18"> 2814 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 2815 <line x1="9" y1="1.75" x2="9" y2="4.25" opacity=".13"></line> 2816 <line x1="14.127" y1="3.873" x2="12.359" y2="5.641" opacity=".25"></line> 2817 <line x1="16.25" y1="9" x2="13.75" y2="9" opacity=".38"></line> 2818 <line x1="14.127" y1="14.127" x2="12.359" y2="12.359" opacity=".5"></line> 2819 <line x1="9" y1="16.25" x2="9" y2="13.75" opacity=".63"></line> 2820 <line x1="3.873" y1="14.127" x2="5.641" y2="12.359" opacity=".75"></line> 2821 <line x1="1.75" y1="9" x2="4.25" y2="9" opacity=".88"></line> 2822 <line x1="3.873" y1="3.873" x2="5.641" y2="5.641"></line> 2823 </g> 2824 </svg> 2825</div> 2826 2827 <div class="flex items-center justify-center p-8"> 2828 <div class="flex space-x-1.5"> 2829 <div class="size-1.5 bg-neutral-800 dark:bg-neutral-200 rounded-full animate-bounce" style="animation-delay: 0ms;"></div> 2830 <div class="size-1.5 bg-neutral-800/80 dark:bg-neutral-200/80 rounded-full animate-bounce" style="animation-delay: 150ms;"></div> 2831 <div class="size-1.5 bg-neutral-800/60 dark:bg-neutral-200/60 rounded-full animate-bounce" style="animation-delay: 300ms;"></div> 2832 </div> 2833</div> 2834 2835</div> 2836 2837 </div> 2838 </div> 2839 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/loading-indicator" data-turbo-frame="_top"> 2840 <div class="h-48"></div> 2841 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2842 Loading Indicator 2843 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 2844 </p> 2845 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 2846 </a> 2847</li> 2848 2849 <li class="relative"> 2850 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2851 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2852 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2852k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 2853 <span class="text-xs">?</span> 2854 </button> 2855 2856 <template data-popover-target="content"> 2857 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2858 <div class="space-y-2"> 2859 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2860 2861 <div class="flex items-center gap-1.5 text-xs"> 2862 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 2863 <span class="flex grow gap-2">Tailwind CSS</span> 2864 </div> 2865 2866 <div class="flex items-center gap-1.5 text-xs"> 2867 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2867ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2868 <g class="fill-neutral-800 dark:fill-white"> 2869 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 2870 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 2871 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 2872 </g> 2873 </svg> 2874 <span class="flex grow gap-2">Stimulus</span> 2875 </div> 2876 </div> 2877 </div> 2878 </template> 2879 </div> 2880 2881 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2882 <div data-controller="scroll-area" data-scroll-area-target="root" data-action="mouseenter->scroll-area#onRootMouseEnter mouseleave->scroll-area#onRootMouseLeave" class="relative h-32 w-full max-w-[240px] rounded-lg border border-neutral-200 bg-white px-4 py-2.5 dark:border-neutral-700 dark:bg-neutral-800"> 2883 <!-- Viewport --> 2884 <div data-scroll-area-target="viewport" data-action="scroll->scroll-area#onViewportScroll" class="h-full overflow-auto scrollbar-hide scroll-fade-y pr-1"> 2885 <div class="flex flex-col gap-3 text-xs leading-relaxed text-neutral-900 dark:text-neutral-100"> 2886 <p> 2887 Rails Blocks is a modern component library for Ruby on Rails applications. It provides 2888 production-ready UI components that integrate seamlessly with Hotwire, Stimulus, and Tailwind CSS. 2889 </p> 2890 <p> 2891 Built with Rails conventions in mind, each component works perfectly with Turbo Drive, 2892 Turbo Frames, and Turbo Streams. All components are fully responsive and support both 2893 light and dark modes out of the box. 2894 </p> 2895 <p> 2896 Build modern, interactive web applications without extensive JavaScript. The library leverages 2897 Stimulus controllers for interactivity while keeping your Rails application fast and native. 2898 </p> 2899 <p> 2900 Every component is copy-and-paste friendly, giving you full control. Customize styles, 2901 behavior, and markup to fit your needs while maintaining consistency across your application. 2902 </p> 2903 </div> 2904 </div> 2905 2906 <!-- Vertical Scrollbar --> 2907 <div data-scroll-area-target="scrollbar" data-scroll-area-orientation-value="vertical" data-action="click->
2907scroll-area#onScrollbarClick" class="absolute right-2 top-2 bottom-2 flex w-1.5 justify-center rounded-full bg-black/5 backdrop-blur-sm opacity-0 transition-opacity duration-150 delay-300 pointer-events-none data-[hovering]:opacity-100 data-[hovering]:duration-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-100 data-[scrolling]:delay-0 data-[scrolling]:pointer-events-auto dark:bg-white/10"> 2908 <!-- Thumb --> 2909 <div data-scroll-area-target="thumb" data-action="mousedown->scroll-area#onThumbMouseDown" class="relative w-full rounded-full bg-neutral-500 transition-opacity duration-100 dark:bg-neutral-400"></div> 2910 </div> 2911</div> 2912 2913 </div> 2914 </div> 2915 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/scroll-area" data-turbo-frame="_top"> 2916 <div class="h-48"></div> 2917 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2918 Scroll Area 2919 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 2920 </p> 2921 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 2922 </a> 2923</li> 2924 2925 <li class="relative"> 2926 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 2927 <div class="inline relative"> 2928 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 2929 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 2930 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 2931 Pro 2932 </a> 2933 </div> 2934 </div> 2935 2936 </div> 2937 2938 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2939 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2940 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2940k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 2941 <span class="text-xs">?</span> 2942 </button> 2943 2944 <template data-popover-target="content"> 2945 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2946 <div class="space-y-2"> 2947 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2948 2949 <div class="flex items-center gap-1.5 text-xs"> 2950 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 2951 <span class="flex grow gap-2">Tailwind CSS</span> 2952 </div> 2953 2954 <div class="flex items-center gap-1.5 text-xs"> 2955 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2955ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2956 <g class="fill-neutral-800 dark:fill-white"> 2957 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 2958 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 2959 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 2960 </g> 2961 </svg> 2962 <span class="flex grow gap-2">Stimulus</span> 2963 </div> 2964 </div> 2965 </div> 2966 </template> 2967 </div> 2968 2969 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 2970 <div data-controller="stepper" 2971 data-stepper-current-step-value="0" 2972 data-stepper-validate-on-next-value="true" 2973 data-stepper-save-progress-value="false" 2974 data-stepper-cloak-value="true" 2975 data-stepper-animate-entrance-value="true" 2976 style="visibility: hidden; opacity: 0;" 2977 class="w-full max-w-xs mx-auto p-4 mt-10 relative"> 2978 2979 2980 <!-- Step Indicators --> 2981 <div class="max-w-24 mx-auto absolute -top-4 inset-x-0"> 2982 <ul class="relative flex flex-row gap-x-1"> 2983 <li class="group relative shrink flex-1 last:flex-none"> 2984 <div class="w-full inline-flex items-center align-middle text-xs"> 2985 <div class="relative inline-flex flex-col items-center"> 2986 <button type="button" data-stepper-target="indicator" data-action="click->
2986stepper#goToStep" data-step="0" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold"> 2987 <span class="step-number">1</span> 2988 <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg> 2989 </button> 2990 </div> 2991 <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div> 2992 </div> 2993 </li> 2994 <li class="group relative shrink flex-1 last:flex-none"> 2995 <div class="w-full inline-flex items-center align-middle text-xs"> 2996 <div class="relative inline-flex flex-col items-center"> 2997 <button type="button" data-stepper-target="indicator" data-action="click->stepper#goToStep" data-step="1" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold"> 2998 <span class="step-number">2</span> 2999 <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg> 3000 </button> 3001 </div> 3002 <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div> 3003 </div> 3004 </li> 3005 <li class="group relative shrink flex-1 last:flex-none"> 3006 <div class="w-full inline-flex items-center align-middle text-xs"> 3007 <div class="relative inline-flex flex-col items-center"> 3008 <button type="button" data-stepper-target="indicator" data-action="click->
3008stepper#goToStep" data-step="2" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold"> 3009 <span class="step-number">3</span> 3010 <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg> 3011 </button> 3012 </div> 3013 <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div> 3014 </div> 3015 </li> 3016 </ul> 3017 </div> 3018 3019 <!-- Step 1: Choose Your Plan --> 3020 <div data-stepper-target="step" class="block"> 3021 <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Choose Your Plan</h3> 3022 3023 <fieldset class="flex gap-2 justify-center"> 3024 <legend class="sr-only">Select a plan</legend> 3025 3026 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3027 <input type="radio" name="preview-plan" value="free" class="sr-only" required> 3028 <div class="flex-1"> 3029 <div class="flex items-center justify-between"> 3030 <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 3031 Free 3032 </p> 3033 </div> 3034 </div> 3035 </label> 3036 3037 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3038 <input type="radio" name="preview-plan" value="lite" class="sr-only" required> 3039 <div class="flex-1"> 3040 <div class="flex items-center justify-between"> 3041 <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 3042 Lite 3043 </p> 3044 </div> 3045 </div> 3046 </label> 3047 3048 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3049 <input type="radio" name="preview-plan" value="basic" class="sr-only" required> 3050 <div class="flex-1"> 3051 <div class="flex items-center justify-between"> 3052 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 3053 Basic 3054 </p> 3055 </div> 3056 </div> 3057 </label> 3058 3059 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3060 <input type="radio" name="preview-plan" value="pro" class="sr-only" required> 3061 <div class="flex-1"> 3062 <div class="flex items-center justify-between"> 3063 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 3064 Pro 3065 </p> 3066 </div> 3067 </div> 3068 </label> 3069 </fieldset> 3070 </div> 3071 3072 <!-- Step 2: What is your role? --> 3073 <div data-stepper-target="step" class="hidden"> 3074 <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">What is your role?</h3> 3075 3076 <fieldset class="flex gap-2 justify-center"> 3077 <legend class="sr-only">Select your role</legend> 3078 3079 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3080 <input type="radio" name="preview-role" value="ceo" class="sr-only" required> 3081 <div class="flex-1"> 3082 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">CEO</p> 3083 </div> 3084 </label> 3085 3086 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3087 <input type="radio" name="preview-role" value="developer" class="sr-only" required> 3088 <div class="flex-1"> 3089 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Developer</p> 3090 </div> 3091 </label> 3092 3093 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3094 <input type="radio" name="preview-role" value="designer" class="sr-only" required> 3095 <div class="flex-1"> 3096 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Designer</p> 3097 </div> 3098 </label> 3099 </fieldset> 3100 </div> 3101 3102 <!-- Step 3: Where did you learn about us? --> 3103 <div data-stepper-target="step" class="hidden"> 3104 <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Where did you learn about us?</h3> 3105 3106 <fieldset class="flex gap-2 justify-center"> 3107 <legend class="sr-only">Select how you found us</legend> 3108 3109 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3110 <input type="radio" name="preview-source" value="search" class="sr-only" required> 3111 <div class="flex-1"> 3112 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Search</p> 3113 </div> 3114 </label> 3115 3116 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3117 <input type="radio" name="preview-source" value="social" class="sr-only" required> 3118 <div class="flex-1"> 3119 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Social</p> 3120 </div> 3121 </label> 3122 3123 <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white"> 3124 <input type="radio" name="preview-source" value="referral" class="sr-only" required> 3125 <div class="flex-1"> 3126 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Referral</p> 3127 </div> 3128 </label> 3129 </fieldset> 3130 </div> 3131 3132 <!-- Navigation Buttons --> 3133 <div class="mt-4 flex items-center justify-between gap-2 mx-auto px-8"> 3134 <button type="button" data-stepper-target="prevButton" data-action="click->
3134stepper#previous" class="hidden w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-200 bg-white/90 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 3135 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18"> 3136 <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"> 3137 <polyline points="11.25 14.25 5.75 9 11.25 3.75"></polyline> 3138 </g> 3139 </svg> 3140 Back 3141 </button> 3142 3143 <button type="button" data-stepper-target="nextButton" data-action="click->stepper#next" class="w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-400/30 bg-neutral-800 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-white shadow-sm select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"> 3144 Continue 3145 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18"> 3146 <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"> 3147 <polyline points="6.75 3.75 12.25 9 6.75 14.25"></polyline> 3148 </g> 3149 </svg> 3150 </button> 3151 3152 <button type="button" data-stepper-target="submitButton" data-action="click->
3152stepper#submit" class="hidden w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-400/30 bg-neutral-800 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-white shadow-sm select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"> 3153 Submit 3154 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18"> 3155 <g fill="currentColor"> 3156 <path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path> 3157 </g> 3158 </svg> 3159 </button> 3160 </div> 3161</div> 3162 3163 </div> 3164 </div> 3165 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/stepper" data-turbo-frame="_top"> 3166 <div class="h-48"></div> 3167 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3168 Stepper 3169 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 3170 </p> 3171 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 3172 </a> 3173</li> 3174 3175 </ul> 3176 </div> 3177 <p class="text-neutral-500 dark:text-neutral-400"> 3178 I also updated existing components: 3179 </p> 3180 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
3180k:text-neutral-300"> 3181 <li class="flex items-start"> 3182 <span class="mr-2">â¢</span> 3183 <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/emoji-picker">emoji picker</a>'s min-width</span> 3184 </li> 3185 <li class="flex items-start"> 3186 <span class="mr-2">â¢</span> 3187 <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/navbar">navbar</a> component with improved hover behavior and <span class="code-inline-text">data-target</span> attributes</span> 3188 </li> 3189 <li class="flex items-start"> 3190 <span class="mr-2">â¢</span> 3191 <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> component with improved functionality and i18n support</span> 3192 </li> 3193 <li class="flex items-start"> 3194 <span class="mr-2">â¢</span> 3195 <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal#div-based-modal">div-based modal</a> variant</span> 3196 </li> 3197 <li class="flex items-start"> 3198 <span class="mr-2">â¢</span> 3199 <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/switch">switch</a> variant with an enhanced active state</span> 3200 </li> 3201 </ul> 3202 <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50"> 3203 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 3204 <div class="flex items-center h-full"> 3205 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400"> 3206 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 3207 <circle cx="9" cy="9" r="7.25"></circle> 3208 <path d="M9 5.75V9.25"></path> 3209 <path d="M9 12.25H9.0075"></path> 3210 </g> 3211 </svg> 3212 </div> 3213 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 3214 Recommendation 3215 </h3> 3216 <div></div>
3217 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 3218 If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes. 3219 </div> 3220 </div> 3221 </div> 3222 </div> 3223 </div> 3224 <!-- End Col --> 3225 </div> 3226 <!-- End Grid --> 3227 </div> 3228 <!-- End Right Content --> 3229 </div> 3230 <!-- End Item --> 3231 3232 <!-- Item - September 2025 --> 3233 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 3234 3235 <!-- Icon --> 3236 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 3237 <div class="relative z-10 size-6 flex justify-center items-center"> 3238 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 3239 </div> 3240 </div> 3241 <!-- End Icon --> 3242 3243 <!-- Right Content --> 3244 <div class="grow pb-8 relative"> 3245 <!-- Grid --> 3246 <div class="grid grid-cols-1 gap-6 md:gap-12"> 3247 <div> 3248 <div class="space-y-3"> 3249 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 3250 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 3251 September 2025 3252 </h2> 3253 </div> 3254 <p class="text-neutral-500 dark:text-neutral-400"> 3255 In September 2025, I built 4 new free component sets: 3256 </p> 3257 <div class="my-4"> 3258 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 3259 <li class="relative"> 3260 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3261 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3262 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3262k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 3263 <span class="text-xs">?</span> 3264 </button> 3265 3266 <template data-popover-target="content"> 3267 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3268 <div class="space-y-2"> 3269 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3270 3271 <div class="flex items-center gap-1.5 text-xs"> 3272 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 3273 <span class="flex grow gap-2">Tailwind CSS</span> 3274 </div> 3275 3276 <div class="flex items-center gap-1.5 text-xs"> 3277 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3277ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3278 <g class="fill-neutral-800 dark:fill-white"> 3279 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 3280 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 3281 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 3282 </g> 3283 </svg> 3284 <span class="flex grow gap-2">Stimulus</span> 3285 </div> 3286 3287 <div class="flex items-center gap-1.5 text-xs"> 3288 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 3289 <span class="flex grow gap-2">Floating UI</span> 3290 </div> 3291 3292 <div class="flex items-center gap-1.5 text-xs"> 3293 <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c4
329300aafdebbd.webp" /> 3294 <span class="flex grow gap-2">Motion.dev</span> 3295 </div> 3296 </div> 3297 </div> 3298 </template> 3299 </div> 3300 3301 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 3302 3303 3304 <div class=""> 3305 <div class="rounded-xl flex items-center justify-center"> 3306 <div class="flex w-fit mx-auto items-center justify-center" data-controller="dock"> 3307 <div class="mx-auto hidden h-16 items-end gap-4 rounded-2xl bg-neutral-50 px-4 pb-3 md:flex dark:bg-neutral-950 border border-neutral-200/50 dark:border-neutral-600/50"> 3308 <a href="#" class="rounded-full" data-dock-target="icon" data-tooltip="Home" data-tooltip-placement="top" > 3309 <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700"> 3310 <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%"> 3311 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg> 3312 </div> 3313 </div> 3314 </a> 3315 <a href="/?articles=true" class="rounded-full" data-dock-target="icon" data-tooltip="Articles" data-tooltip-placement="top" > 3316 <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700"> 3317 <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%"> 3318 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.25,12.25v2c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V3.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v1.5"></path><line x1="4.75" y1="5.75" x2="9.25" y2="5.75"></line><line x1="4.75" y1="8.75" x2="7" y2="8.75"></line><line x1="4.75" y1="11.75" x2="6.25" y2="11.75"></line><path d="M12.375,10.625c.444-.444,2.948-2.948,4.216-4.216,.483-.483,.478-1.261-.005-1.745h0c-.483-.483-1.261-.489-1.745-.005-1.268,1.268-3.772,3.772-4.216,4.216-.625,.625-1.125,2.875-1.125,2.875,0,0,2.25-.5,2.875-1.125Z"></path></g></svg> 3319 </div> 3320 </div> 3321 </a> 3322 <a href="/?projects=true" class="rounded-full" data-dock-target="icon" data-tooltip="Projects" data-tooltip-placement="top" > 3323 <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700"> 3324 <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%"> 3325 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="8" cy="5.5" r="3.75"></circle><path d="M1.953,15c1.298-1.958,3.522-3.25,6.047-3.25"></path><path d="M14.925,16.25h-6.175l1.868-4.203c.08-.181,.259-.297,.457-.297h5.406c.362,0,.604,.372,.457,.703l-1.556,3.5c-.08,.181-.259,.297-.457,.297Z"></path><line x1="8.75" y1="16.25" x2="5.75" y2="16.25"></line></g></svg> 3326 </div> 3327 </div> 3328 </a> 3329 </div> 3330 <div class="absolute right-5 bottom-17 flex items-end flex-col gap-2 hidden md:hidden" data-dock-target="mobileMenu"> 3331 <a href="#" data-tooltip="Home" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dar
3331k:active:bg-neutral-700"> 3332 <span class="text-sm">Home</span> 3333 <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg></span> 3334 </a> 3335 <a href="/?articles=true" data-tooltip="Articles" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-700"> 3336 <span class="text-sm">Articles</span> 3337 <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.25,12.25v2c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V3.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v1.5"></path><line x1="4.75" y1="5.75" x2="9.25" y2="5.75"></line><line x1="4.75" y1="8.75" x2="7" y2="8.75"></line><line x1="4.75" y1="11.75" x2="6.25" y2="11.75"></line><path d="M12.375,10.625c.444-.444,2.948-2.948,4.216-4.216,.483-.483,.478-1.261-.005-1.745h0c-.483-.483-1.261-.489-1.745-.005-1.268,1.268-3.772,3.772-4.216,4.216-.625,.625-1.125,2.875-1.125,2.875,0,0,2.25-.5,2.875-1.125Z"></path></g></svg></span> 3338 </a> 3339 <a href="/?projects=true" data-tooltip="Projects" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-700"> 3340 <span class="text-sm">Projects</span> 3341 <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="8" cy="5.5" r="3.75"></circle><path d="M1.953,15c1.298-1.958,3.522-3.25,6.047-3.25"></path><path d="M14.925,16.25h-6.175l1.868-4.203c.08-.181,.259-.297,.457-.297h5.406c.362,0,.604,.372,.457,.703l-1.556,3.5c-.08,.181-.259,.297-.457,.297Z"></path><line x1="8.75" y1="16.25" x2="5.75" y2="16.25"></line></g></svg></span> 3342 </a> 3343 </div> 3344 <div class="flex items-center gap-2 md:hidden"> 3345 <span class="text-sm max-w-[175px]">The dock is replaced by a drop-up menu on mobile</span> 3346 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="14.25" y1="14.25" x2="3.75" y2="3.75"></line><path d="M8.24,14.25c3.388-1.562,6.01,0,6.01,0,0,0-1.562-2.622,0-6.01"></path></g></svg> 3347 </div> 3348 <div class="absolute right-5 bottom-5 block md:hidden" 3349 data-action="click->dock#toggleMobile"> 3350 <button data-dock-target="mobileButton" class="flex h-10 w-10 items-center justify-center border border-neutral-200/50 rounded-full bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-600/50"> 3351 <svg class="size-5 rotate-0 text-neutral-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="2.75 11.5 9 5.25 15.25 11.5"></polyline></g></svg> 3352 </button> 3353 </div> 3354 </div> 3355 </div> 3356 </div> 3357 3358 </div> 3359 </div> 3360 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/dock" data-turbo-frame="_top"> 3361 <div class="h-48"></div> 3362 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3363 Dock Menu 3364 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 3365 </p> 3366 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 1 component</p> 3367 </a> 3368</li> 3369 3370 <li class="relative"> 3371 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3372 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3373 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3373k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 3374 <span class="text-xs">?</span> 3375 </button> 3376 3377 <template data-popover-target="content"> 3378 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3379 <div class="space-y-2"> 3380 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3381 3382 <div class="flex items-center gap-1.5 text-xs"> 3383 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 3384 <span class="flex grow gap-2">Tailwind CSS</span> 3385 </div> 3386 3387 <div class="flex items-center gap-1.5 text-xs"> 3388 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3388ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3389 <g class="fill-neutral-800 dark:fill-white"> 3390 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 3391 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 3392 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 3393 </g> 3394 </svg> 3395 <span class="flex grow gap-2">Stimulus</span> 3396 </div> 3397 </div> 3398 </div> 3399 </template> 3400 </div> 3401 3402 <div data-turbo="false" class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center overflow-visible"> 3403 <nav class="flex w-fit justify-center" data-controller="navbar"> 3404 <div class="relative"> 3405 <!-- Menu List --> 3406 <ul data-navbar-target="menu" class="m-0 flex list-none items-center gap-1 rounded-lg border border-neutral-200 bg-white p-1 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"> 3407 <li> 3408 <a href="/" class="block rounded-md px-1.5 py-1.5 text-xs font-medium text-neutral-700 no-underline select-none hover:bg-neutral-100 dar
3408k:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"> 3409 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg> 3410 </a> 3411 </li> 3412 3413 <!-- Components Dropdown --> 3414 <li class="relative hidden sm:block"> 3415 <button type="button" data-navbar-target="trigger" data-content-id="components-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"> 3416 Blocks 3417 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg> 3418 </button> 3419 </li> 3420 3421 <!-- Resources Dropdown --> 3422 <li class="relative hidden sm:block"> 3423 <button type="button" data-navbar-target="trigger" data-content-id="resources-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"> 3424 Resources 3425 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg> 3426 </button> 3427 </li> 3428 3429 <li class="relative sm:hidden"> 3430 <button type="button" data-navbar-target="trigger" data-content-id="mobile-menu-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-1.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"> 3431 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9" x2="15.75" y2="9"></line><line x1="2.25" y1="3.75" x2="15.75" y2="3.75"></line><line x1="2.25" y1="14.25" x2="15.75" y2="14.25"></line></g></svg> 3432 </button> 3433 </li> 3434 </ul> 3435 3436 <!-- Viewport Container --> 3437 <div data-navbar-target="viewport" data-action="pointerenter->navbar#cancelClose pointerleave->navbar#handlePointerLeave" data-state="closed" class="absolute top-full z-50 mt-2 origin-top transition-all duration-200 ease-out data-[state=closed]:pointer-events-none data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=closing]:pointer-events-none data-[state=closing]:scale-95 data-[state=closing]:opacity-0 data-[state=open]:pointer-events-auto data-[state=open]:scale-100 data-[state=open]:opacity-100 left-1/2 -translate-x-1/2 sm:left-0 sm:translate-x-0"> 3438 <!-- Indicator Arrow --> 3439 <div data-navbar-target="indicator" class="pointer-events-none absolute -top-1 z-10 flex h-2 w-10 items-end justify-center overflow-visible transition-opacity duration-200"> 3440 <div class="h-2 w-2 rotate-45 border-t border-l border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800"></div> 3441 </div> 3442 3443 <div data-navbar-target="background" class="relative z-0 rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-800"> 3444 <!-- Components Content --> 3445 <div id="components-content" data-navbar-target="content" data-state="closed" class="hidden"> 3446 <div class="grid grid-cols-1 gap-1.5 p-4 w-[300px] sm:w-[420px] sm:grid-cols-[0.75fr_1fr]"> 3447 <!-- Featured Callout --> 3448 <a href="/" class="row-span-3 flex h-full w-full cursor-pointer flex-col justify-end rounded-lg bg-gradient-to-br from-red-400 to-red-600 p-6 no-underline transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3448k:from-red-500 dark:to-red-800 dark:focus-visible:outline-neutral-200 hover:opacity-90"> 3449 <img class="size-9 mb-4" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" /> 3450 <div class="mb-1 text-base font-medium text-white">Rails Blocks</div> 3451 <p class="m-0 text-xs text-neutral-100">Delightful Rails components.</p> 3452 </a> 3453 3454 <!-- Menu Items --> 3455 <a href="/docs/modal" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3456 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Modal</div> 3457 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Dialog boxes for user interactions and confirmations.</p> 3458 </a> 3459 3460 <a href="/docs/dropdown" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3460k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3461 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Dropdown</div> 3462 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Contextual menus with keyboard navigation.</p> 3463 </a> 3464 3465 <a href="/docs/tooltip" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3466 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Tooltip</div> 3467 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Helpful hints that appear on hover or focus.</p> 3468 </a> 3469 </div> 3470 </div> 3471 3472 <!-- Resources Content --> 3473 <div id="resources-content" data-navbar-target="content" data-state="closed" class="hidden"> 3474 <div class="grid grid-cols-1 gap-2 p-5 w-[300px] sm:w-[420px] sm:grid-cols-2"> 3475 <a href="/docs/installation" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3475k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3476 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Installation</div> 3477 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Get started with Rails Blocks in your Rails app.</p> 3478 </a> 3479 3480 <a href="/docs/authors-note" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3481 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Author's Note</div> 3482 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Learn about the philosophy behind Rails Blocks.</p> 3483 </a> 3484 3485 <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" rel="noopener noreferrer" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3485k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3486 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Roadmap</div> 3487 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">See what's coming next and vote on features.</p> 3488 </a> 3489 3490 <a href="/changelog" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3491 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Changelog</div> 3492 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Latest updates and new component releases.</p> 3493 </a> 3494 3495 <a href="/pro" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3495k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3496 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Rails Blocks Pro</div> 3497 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Unlock premium components and features.</p> 3498 </a> 3499 3500 <a href="/signup" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 3501 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Create an account</div> 3502 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">And get notified when new components are released.</p> 3503 </a> 3504 </div> 3505 </div> 3506 3507 <!-- Mobile Menu Content --> 3508 <div id="mobile-menu-content" data-navbar-target="content" data-state="closed" class="hidden"> 3509 <div class="grid grid-cols-1 gap-1.5 p-4 w-[280px] sm:w-[420px] sm:grid-cols-2"> 3510 <div class="relative"> 3511 <button type="button" data-navbar-target="trigger" data-content-id="components-content" data-action="click->navbar#toggleMenu keydown->navbar#handleTriggerKeydown" data-state="closed" class="w-full group flex items-center justify-between gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3511k:focus-visible:outline-neutral-200"> 3512 Blocks 3513 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg> 3514 </button> 3515 </div> 3516 3517 <!-- Resources Dropdown --> 3518 <div class="relative"> 3519 <button type="button" data-navbar-target="trigger" data-content-id="resources-content" data-action="click->navbar#toggleMenu keydown->navbar#handleTriggerKeydown" data-state="closed" class="w-full group flex items-center justify-between gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3519k:focus-visible:outline-neutral-200"> 3520 Resources 3521 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg> 3522 </button> 3523 </div> 3524 </div> 3525 </div> 3526 </div> 3527 </div> 3528 </div> 3529 </nav> 3530 </div> 3531 </div> 3532 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/navbar" data-turbo-frame="_top"> 3533 <div class="h-48"></div> 3534 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3535 Navbar 3536 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 3537 </p> 3538 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p> 3539 </a> 3540</li> 3541 3542 <li class="relative"> 3543 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3544 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3545 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3545k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 3546 <span class="text-xs">?</span> 3547 </button> 3548 3549 <template data-popover-target="content"> 3550 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3551 <div class="space-y-2"> 3552 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3553 3554 <div class="flex items-center gap-1.5 text-xs"> 3555 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 3556 <span class="flex grow gap-2">Tailwind CSS</span> 3557 </div> 3558 3559 <div class="flex items-center gap-1.5 text-xs"> 3560 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3560ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3561 <g class="fill-neutral-800 dark:fill-white"> 3562 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 3563 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 3564 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 3565 </g> 3566 </svg> 3567 <span class="flex grow gap-2">Stimulus</span> 3568 </div> 3569 </div> 3570 </div> 3571 </template> 3572 </div> 3573 3574 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 3575 <!-- Note: You will likely need to replace all the min-h-[192px] with a min-h-screen --> 3576 3577<div class="flex h-full w-full flex-col relative" data-controller="sidebar" data-sidebar-storage-key-value="previewSidebar"> 3578 <!-- Mobile Sidebar Overlay --> 3579 <div class="absolute inset-0 z-50 md:hidden hidden" data-sidebar-target="mobileSidebar"> 3580 <!-- Backdrop --> 3581 <div class="absolute inset-0 bg-black/50 transition-opacity duration-300" data-sidebar-target="mobileBackdrop" data-action="click->
3581sidebar#closeMobile"></div> 3582 3583 <!-- Sidebar Panel --> 3584 <div class="absolute inset-y-0 left-0 w-32 border-r border-neutral-200 dark:border-neutral-800 transition-transform duration-300 ease-out" data-sidebar-target="mobilePanel"> 3585 <div data-sidebar-target="sharedContent"></div> 3586 </div> 3587 </div> 3588 3589 <div class="relative z-0 flex h-full w-full"> 3590 <div class="relative flex h-full flex-row"> 3591 <details class="w-11 open:w-32 group/sidebar relative z-20 h-full shrink-0 overflow-hidden max-md:hidden motion-safe:transition-all motion-safe:duration-300 dark:border-neutral-800" data-sidebar-target="desktopSidebar"> 3592 <!-- Tiny Sidebar (shown when closed) --> 3593 <summary class="group-open/sidebar:hidden flex min-h-[192px] h-full cursor-e-resize list-none flex-col items-start pl-2 pr-1.5"> 3594 <div class="flex h-13 w-full items-center justify-start"> 3595 <button class="cursor-e-resize flex size-7 items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800" data-action="click->sidebar#open"> 3596 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.75" x2="6.25" y2="15.25"></line><polyline points="10.25 6.5 12.75 9 10.25 11.5"></polyline><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg> 3597 </button> 3598 </div> 3599 3600 <div class="flex w-full flex-col items-start"> 3601 <a href="javascript:void(0)" aria-label="Dashboard" data-controller="tooltip" data-tooltip-content="Dashboard" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800"> 3602 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg> 3603 </a> 3604 <a href="javascript:void(0)" aria-label="Contacts" data-controller="tooltip" data-tooltip-content="Contacts" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800"> 3605 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="9" cy="4.5" r="2.75"></circle><path d="M13.762,15.516c.86-.271,1.312-1.221,.947-2.045-.97-2.191-3.159-3.721-5.709-3.721s-4.739,1.53-5.709,3.721c-.365,.825,.087,1.7
360574,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg> 3606 </a> 3607 <a href="javascript:void(0)" aria-label="Companies" data-controller="tooltip" data-tooltip-content="Companies" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800"> 3608 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M7.75 16.25V7.75C7.75 7.198 8.198 6.75 8.75 6.75H14.25C14.802 6.75 15.25 7.198 15.25 7.75V16.25"></path> <path d="M2.75 16.25V4.412C2.75 4.01 2.99 3.64701 3.36 3.49101L7.86 1.58802C8.519 1.30902 9.25 1.79301 9.25 2.50901V3.75001"></path> <path d="M1.75 16.25H16.25"></path> <path d="M10.25 10.25V9.75"></path> <path d="M12.75 10.25V9.75"></path> <path d="M10.25 13.25V12.75"></path> <path d="M12.75 13.25V12.75"></path></g></svg> 3609 </a> 3610 </div> 3611 3612 <div class="grow"></div> 3613 3614 <div class="sticky bottom-0 z-30 bg-white py-1.5 empty:hidden dark:bg-neutral-950"> 3615 <button class="w-full flex items-center gap-1.5 rounded-lg px-1 sm:px-1.5 py-1 sm:py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50"> 3616 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 3617 <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30"> 3618 <img alt="Profile image" class="size-4 shrink-0 object-cover" referrerpolicy="no-referrer" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100&h=100&fit=crop"> 3619 </div> 3620 </div> 3621 </button> 3622 </div> 3623 </summary> 3624 3625 <!-- Full Sidebar (shown when open) --> 3626 <div class="h-full w-32 overflow-x-clip overflow-y-auto text-clip whitespace-nowrap" data-sidebar-target="desktopContent"> 3627 <!-- Shared Sidebar Content Template --> 3628 <template data-sidebar-target="contentTemplate"> 3629 <nav class="min-h-[192px] bg-white dark:bg-neutral-950 relative flex h-full w-full flex-1 flex-col overflow-y-auto select-none"> 3630 <div class="sticky top-0 z-30"> 3631 <div class="px-1.5 sm:px-2"> 3632 <div class="flex h-13 items-center justify-between"> 3633 <a href="javascript:void(0)" aria-label="Home" class="flex size-7 items-center justify-center rounded-lg text-neutral-900 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800"> 3634 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 9C1 4.58168 4.58179 1 9 1C13.4182 1 17 4.58168 17 9C17 13.4183 13.4182 17 9 17C4.58179 17 1 13.4183 1 9Z" fill-opacity="0.4"></path></g></svg> 3635 </a> 3636 <div class="flex"> 3637 <button class="flex size-7 cursor-w-resize items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800" aria-expanded="true" aria-label="Close sidebar" data-state="closed" data-action="click->sidebar#close"> 3638 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="11.75" y1="2.75" x2="11.75" y2="15.25"></line><polyline points="7.75 6.5 5.25 9 7.75 11.5"></polyline><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2"></rect></g></svg> 3639 </button> 3640 </div> 3641 </div> 3642 </div> 3643 </div> 3644 3645 <aside class="relative px-1.5 last:mb-5 sm:px-2"> 3646 <a href="javascript:void(0)" aria-label="Dashboard" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dar
3646k:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50"> 3647 <div class="flex min-w-0 items-center gap-1.5"> 3648 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 3649 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg> 3650 </div> 3651 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 3652 <div class="truncate">Dashboard</div> 3653 </div> 3654 </div> 3655 <div class="text-neutral-500 dark:text-neutral-400"> 3656 <div class="hidden sm:block"> 3657 <div class="hidden ml-auto group-hover:flex text-xs"> 3658 â1 3659 </div> 3660 </div> 3661 </div> 3662 </a> 3663 <a href="javascript:void(0)" aria-label="Contacts" title="Contacts" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50"> 3664 <div class="flex min-w-0 items-center gap-1.5"> 3665 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 3666 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="9" cy="4.5" r="2.75"></circle><path d="M13.762,15.516c.86-.271,1.312-1.221,.947-2.045-.97-2.191-3.159-3.721-5.709-3.721s-4.739,1.53-5.709,3.721c-.365,.825,.087,1.7
366674,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg> 3667 </div> 3668 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 3669 <div class="truncate">Contacts</div> 3670 </div> 3671 </div> 3672 <div class="text-neutral-500 dark:text-neutral-400"> 3673 <div class="hidden sm:block"> 3674 <div class="hidden ml-auto group-hover:flex text-xs"> 3675 â2 3676 </div> 3677 </div> 3678 </div> 3679 </a> 3680 <a href="javascript:void(0)" aria-label="Companies" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50"> 3681 <div class="flex min-w-0 items-center gap-1.5"> 3682 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 3683 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M7.75 16.25V7.75C7.75 7.198 8.198 6.75 8.75 6.75H14.25C14.802 6.75 15.25 7.198 15.25 7.75V16.25"></path> <path d="M2.75 16.25V4.412C2.75 4.01 2.99 3.64701 3.36 3.49101L7.86 1.58802C8.519 1.30902 9.25 1.79301 9.25 2.50901V3.75001"></path> <path d="M1.75 16.25H16.25"></path> <path d="M10.25 10.25V9.75"></path> <path d="M12.75 10.25V9.75"></path> <path d="M10.25 13.25V12.75"></path> <path d="M12.75 13.25V12.75"></path></g></svg> 3684 </div> 3685 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 3686 <div class="truncate">Companies</div> 3687 </div> 3688 </div> 3689 <div class="text-neutral-500 dark:text-neutral-400"> 3690 <div class="hidden sm:block"> 3691 <div class="hidden ml-auto group-hover:flex text-xs"> 3692 â3 3693 </div> 3694 </div> 3695 </div> 3696 </a> 3697 </aside> 3698 3699 <div class="grow"></div> 3700 3701 <div class="sticky bottom-0 z-30 bg-white p-1.5 empty:hidden sm:p-2 dark:bg-neutral-950"> 3702 <button class="w-full flex items-center gap-1.5 rounded-lg px-1 sm:px-1.5 py-1 sm:py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50"> 3703 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 3704 <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30"> 3705 <img alt="Profile image" class="size-4 shrink-0 object-cover" referrerpolicy="no-referrer" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100&h=100&fit=crop"> 3706 </div> 3707 </div> 3708 <div class="min-w-0"> 3709 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 3710 <div class="truncate text-xs">John Doe</div> 3711 </div> 3712 </div> 3713 </button> 3714 </div> 3715 </nav> 3716 </template> 3717 </div> 3718 </details> 3719 </div> 3720 3721 <main class="min-h-[192px] pl-1.5 md:pl-0 py-1.5 pr-1.5 grow h-auto w-auto flex flex-col justify-center items-center relative"> 3722 <div class="w-full h-full mb-[2px] flex justify-center items-center relative bg-neutral-50 dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-800"> 3723 <div class="w-full absolute top-0 z-10 flex items-center md:hidden p-2"> 3724 <button type="button" class="size-7 inline-flex items-center justify-center rounded-md focus:bg-neutral-100 focus:outline-hidden focu
3724s:ring-inset dark:focus:bg-neutral-700/50 active:opacity-50" data-action="click->sidebar#openMobile" aria-label="Open sidebar"> 3725 <span class="sr-only">Open sidebar</span> 3726 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9" x2="15.75" y2="9"></line><line x1="2.25" y1="3.75" x2="15.75" y2="3.75"></line><line x1="2.25" y1="14.25" x2="8.25" y2="14.25"></line></g></svg> 3727 </button> 3728 </div> 3729 <div class="px-6 py-4 text-xs"> 3730 Your content 3731 </div> 3732 </div> 3733 </main> 3734 </div> 3735</div> 3736 3737 </div> 3738 </div> 3739 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/sidebar" data-turbo-frame="_top"> 3740 <div class="h-48"></div> 3741 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3742 Sidebar 3743 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 3744 </p> 3745 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 3746 </a> 3747</li> 3748 3749 <li class="relative"> 3750 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3751 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3752 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3752k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 3753 <span class="text-xs">?</span> 3754 </button> 3755 3756 <template data-popover-target="content"> 3757 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3758 <div class="space-y-2"> 3759 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3760 3761 <div class="flex items-center gap-1.5 text-xs"> 3762 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 3763 <span class="flex grow gap-2">Tailwind CSS</span> 3764 </div> 3765 3766 <div class="flex items-center gap-1.5 text-xs"> 3767 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3767ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3768 <g class="fill-neutral-800 dark:fill-white"> 3769 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 3770 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 3771 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 3772 </g> 3773 </svg> 3774 <span class="flex grow gap-2">Stimulus</span> 3775 </div> 3776 </div> 3777 </div> 3778 </template> 3779 </div> 3780 3781 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 3782 <div class="flex flex-wrap gap-2 justify-center"> 3783 <button 3784 onclick="toast('Toast Notification', { type: 'success' })" 3785 class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
3785k:focus-visible:outline-neutral-200" 3786 > 3787 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="12" height="12" viewBox="0 0 12 12"><g fill="currentColor"><path d="m10.75,7.5c-.414,0-.75-.336-.75-.75v-2.75c0-2.206-1.794-4-4-4S2,1.794,2,4v2.75c0,.414-.336.75-.75.75s-.75.336-.75.75.336.75.75.75h9.5c.414,0,.75-.336.75-.75s-.336-.75-.75-.75Z" stroke-width="0"></path><path d="m6,12c1.105,0,2-.895,2-2h-4c0,1.105.895,2,2,2Z" stroke-width="0"></path></g></svg> 3788 Show Toast 3789 </button> 3790 </div> 3791 </div> 3792 </div> 3793 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/toast" data-turbo-frame="_top"> 3794 <div class="h-48"></div> 3795 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3796 Toast 3797 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 3798 </p> 3799 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p> 3800 </a> 3801</li> 3802 3803 </ul> 3804 </div> 3805 <p class="text-neutral-500 dark:text-neutral-400"> 3806 I also updated existing components: 3807 </p> 3808 <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
3808k:text-neutral-300"> 3809 <li class="flex items-start"> 3810 <span class="mr-2">â¢</span> 3811 <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> component with improved functionality</span> 3812 </li> 3813 <li class="flex items-start"> 3814 <span class="mr-2">â¢</span> 3815 <span>Enhanced <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/autocomplete">autocomplete</a> component with a better user experience</span> 3816 </li> 3817 <li class="flex items-start"> 3818 <span class="mr-2">â¢</span> 3819 <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltip</a> component with enhanced hover </span> 3820 </li> 3821 </ul> 3822 <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50"> 3823 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 3824 <div class="flex items-center h-full"> 3825 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400"> 3826 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 3827 <circle cx="9" cy="9" r="7.25"></circle> 3828 <path d="M9 5.75V9.25"></path> 3829 <path d="M9 12.25H9.0075"></path> 3830 </g> 3831 </svg> 3832 </div> 3833 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 3834 Recommendation 3835 </h3> 3836 <div></div>
3837 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 3838 If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes. 3839 </div> 3840 </div> 3841 </div> 3842 </div> 3843 </div> 3844 <!-- End Col --> 3845 </div> 3846 <!-- End Grid --> 3847 </div> 3848 <!-- End Right Content --> 3849 </div> 3850 <!-- End Item --> 3851 3852 <!-- Item - August 2025 --> 3853 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 3854 3855 <!-- Icon --> 3856 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 3857 <div class="relative z-10 size-6 flex justify-center items-center"> 3858 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 3859 </div> 3860 </div> 3861 <!-- End Icon --> 3862 3863 <!-- Right Content --> 3864 <div class="grow pb-8 relative"> 3865 <!-- Grid --> 3866 <div class="grid grid-cols-1 gap-6 md:gap-12"> 3867 <div> 3868 <div class="space-y-3"> 3869 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 3870 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 3871 August 2025 3872 </h2> 3873 </div> 3874 <p class="text-neutral-500 dark:text-neutral-400"> 3875 In August 2025, I released 8 new component sets: 3876 </p> 3877 <div class="my-4"> 3878 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 3879 <li class="relative"> 3880 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3881 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3882 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3882k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 3883 <span class="text-xs">?</span> 3884 </button> 3885 3886 <template data-popover-target="content"> 3887 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3888 <div class="space-y-2"> 3889 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3890 3891 <div class="flex items-center gap-1.5 text-xs"> 3892 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 3893 <span class="flex grow gap-2">Tailwind CSS</span> 3894 </div> 3895 3896 </div> 3897 </div> 3898 </template> 3899 </div> 3900 3901 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 3902 <div class="rounded-xl border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/50"> 3903 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 3904 <div class="flex items-center h-full"> 3905 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400"> 3906 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 3907 <circle cx="9" cy="9" r="7.25"></circle> 3908 <path d="M9 5.75V9.25"></path> 3909 <path d="M9 12.25H9.0075"></path> 3910 </g> 3911 </svg> 3912 </div> 3913 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 3914 Information 3915 </h3> 3916 <div></div>
3917 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 3918 Alert description. 3919 </div> 3920 </div> 3921 </div> 3922 </div> 3923 </div> 3924 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/alert" data-turbo-frame="_top"> 3925 <div class="h-48"></div> 3926 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3927 Alert 3928 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 3929 </p> 3930 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 3931 </a> 3932</li> 3933 3934 <li class="relative"> 3935 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 3936 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 3937 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 3938 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 3939 Pro 3940 </a> 3941 </div> 3942 </div> 3943 3944 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3945 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3946 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3946k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 3947 <span class="text-xs">?</span> 3948 </button> 3949 3950 <template data-popover-target="content"> 3951 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3952 <div class="space-y-2"> 3953 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3954 3955 <div class="flex items-center gap-1.5 text-xs"> 3956 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 3957 <span class="flex grow gap-2">Tailwind CSS</span> 3958 </div> 3959 3960 <div class="flex items-center gap-1.5 text-xs"> 3961 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3961ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3962 <g class="fill-neutral-800 dark:fill-white"> 3963 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 3964 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 3965 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 3966 </g> 3967 </svg> 3968 <span class="flex grow gap-2">Stimulus</span> 3969 </div> 3970 3971 <div class="flex items-center gap-1.5 text-xs"> 3972 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 3973 <span class="flex grow gap-2">Floating UI</span> 3974 </div> 3975 3976 </div> 3977 </div> 3978 </template> 3979 </div> 3980 3981 <div data-controller="toggle text-cycler" class="flex-col gap-2 relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 3982 3983 <!-- Search on Focus Autocomplete --> 3984<div class="max-w-xs mx-auto w-full"> 3985 <form class="relative" 3986 data-controller="autocomplete" 3987 data-autocomplete-search-on-focus-value="true" 3988 data-autocomplete-submit-on-select-value="false" 3989 data-autocomplete-show-recent-value="false" 3990 data-autocomplete-local-data-value='[{"title":"Apple","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"24\" height=\"24\"
3990 viewBox=\"0 0 24 24\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.3091 6.48971C13.8886 6.26249 14.614 6.00143 15.6913 6.00143C17.3749 6.00143 19.1523 6.89003 20.3404 8.35613L21.0976 9.29055L20.0406 9.86449C17.5093 11.2391 17.8608 14.8633 20.4912 15.8476L21.4953 16.2234L21.0506 17.199C20.5752 18.2418 20.3284 18.7499 19.6885 19.7119C18.7074 21.192 17.3565 22.9787 15.3958 22.997C14.1793 23.0084 13.2116 22.1656 12.0053 22.172C10.7909 22.1784 9.80329 23 8.57946 22.9999L8.57073 22.9999C6.64549 22.9829 5.31146 21.3315 4.3393 19.8664C1.80437 16.0461 1.46451 11.568 3.19812 8.92508C4.43251 7.04322 6.3164 6.00413 8.20878 6.00413C9.15354 6.00413 9.91949 6.26847 10.5172 6.47873C11.1502 6.70144 11.5462 6.84 11.9823 6.84C12.4376 6.84 12.7407 6.71256 13.3091 6.48971Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M15.3653 3.793C16.0815 2.87425 16.5703 1.63176 16.373 0.305766C15.203 0.386016 13.89 1.07576 13.0913 2.0455C12.3668 2.92525 11.7675 4.231 12 5.5C13.2765 5.53975 14.598 4.77775 15.3653 3.793Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Behance","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
3990 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M10.144,7.203c.808,0,1.554,.062,2.238,.249,.684,.124,1.243,.373,1.741,.684s.87,.746,1.119,1.306c.249,.56,.373,1.243,.373,1.989,0,.87-.187,1.616-.622,2.176-.373,.56-.995,1.057-1.741,1.43,1.057,.311,1.865,.87,2.362,1.616s.808,1.679,.808,2.735c0,.87-.187,1.616-.497,2.238s-.808,1.181-1.368,1.554c-.56,.373-1.243,.684-1.989,.87-.746,.187-1.492,.311-2.238,.311H2V7.203H10.144Zm-.497,6.963c.684,0,1.243-.187,1.679-.497s.622-.87,.622-1.554c0-.373-.062-.746-.187-.995s-.311-.435-.56-.622c-.249-.124-.497-.249-.808-.311s-.622-.062-.995-.062h-3.606v4.041h3.854Zm.187,7.336c.373,0,.746-.062,1.057-.124s.622-.187,.87-.373c.249-.187,.435-.373,.622-.684,.124-.311,.249-.684,.249-1.119,0-.87-.249-1.492-.746-1.927-.497-.373-1.181-.56-1.989-.56H5.792v4.787h4.041Zm11.998-.062c.497,.497,1.243,.746,2.238,.746,.684,0,1.306-.187,1.803-.497,.497-.373,.808-.746,.933-1.119h3.046c-.497,1.492-1.243,2.549-2.238,3.233-.995,.622-2.176,.995-3.606,.995-.995,0-1.865-.187-2.673-.497s-1.43-.746-1.989-1.368c-.56-.56-.995-1.243-1.243-2.052-.311-.808-.435-1.679-.435-2.673,0-.933,.124-1.803,.435-2.611s.746-1.492,1.306-2.114c.56-.56,1.243-1.057,1.989-1.368,.808-.311,1.616-.497,2.611-.497,1.057,0,1.989,.187,2.798,.622s1.43,.933,1.927,1.679c.497,.684,.87,1.492,1.119,2.362,.124,.87,.187,1.741,.124,2.735h-9.014c0,.995,.373,1.927,.87,2.425Zm3.917-6.528c-.435-.435-1.119-.684-1.927-.684-.56,0-.995,.124-1.368,.311-.373,.187-.622,.435-.87,.684-.249,.249-.373,.56-.435,.87s-.124,.56-.124,.808h5.595c-.124-.933-.435-1.554-.87-1.989Zm-5.471-6.528h6.963v1.679h-6.963v-1.679Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Discord","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
3990 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M26.413,6.536c-1.971-.902-4.052-1.543-6.189-1.904-.292,.523-.557,1.061-.793,1.612-2.277-.343-4.592-.343-6.869,0-.236-.551-.5-1.089-.793-1.612-2.139,.365-4.221,1.006-6.194,1.909C1.658,12.336,.596,17.987,1.127,23.558h0c2.294,1.695,4.861,2.984,7.591,3.811,.615-.827,1.158-1.704,1.626-2.622-.888-.332-1.744-.741-2.56-1.222,.215-.156,.425-.316,.628-.472,4.806,2.26,10.37,2.26,15.177,0,.205,.168,.415,.328,.628,.472-.817,.483-1.676,.892-2.565,1.225,.467,.918,1.011,1.794,1.626,2.619,2.732-.824,5.301-2.112,7.596-3.808h0c.623-6.461-1.064-12.06-4.46-17.025Zm-15.396,13.596c-1.479,0-2.702-1.343-2.702-2.994s1.18-3.006,2.697-3.006,2.73,1.354,2.704,3.006-1.192,2.994-2.699,2.994Zm9.967,0c-1.482,0-2.699-1.343-2.699-2.994s1.18-3.006,2.699-3.006,2.723,1.354,2.697,3.006-1.189,2.994-2.697,2.994Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Framer","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"24\" height=\"24\"
3990 viewBox=\"0 0 24 24\"\u003e\u003cg fill=\"none\"\u003e\u003cpath d=\"M5.55502 3.61569C5.12664 3.18731 4.91245 2.97312 4.89798 2.78923C4.88542 2.62967 4.95001 2.47374 5.07171 2.3698C5.21198 2.25 5.51489 2.25 6.1207 2.25H16.35C17.1901 2.25 17.6101 2.25 17.931 2.41349C18.2132 2.5573 18.4427 2.78677 18.5865 3.06901C18.75 3.38988 18.75 3.80992 18.75 4.65V7.35C18.75 8.19008 18.75 8.61012 18.5865 8.93099C18.4427 9.21323 18.2132 9.4427 17.931 9.58651C17.6101 9.75 17.1901 9.75 16.35 9.75H15.2249L14.1308 8.65589C13.6119 8.13703 13.3525 7.87761 13.0497 7.69208C12.7813 7.52759 12.4887 7.40638 12.1826 7.33289C11.8373 7.25 11.4704 7.25 10.7366 7.25H9.18933L5.55502 3.61569Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M11.3843 21.445C11.8127 21.8734 12.0269 22.0875 12.2108 22.102C12.3703 22.1146 12.5262 22.05 12.6302 21.9283C12.75 21.788 12.75 21.4851 12.75 20.8793V16.75H6.68933L11.3843 21.445Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M5.25 10.65C5.25 9.80992 5.25 9.38988 5.41349 9.06901C5.5573 8.78677 5.78677 8.5573 6.06901 8.41349C6.38988 8.25 6.80992 8.25 7.65 8.25H10.9852C11.4744 8.25 11.7189 8.25 11.9491 8.30526C12.1532 8.35425 12.3483 8.43506 12.5272 8.54472C12.7291 8.6684 12.902 8.84136 13.2479 9.18726L18.445 14.3843C18.8734 14.8127 19.0875 15.0269 19.102 15.2108C19.1146 15.3703 19.05 15.5263 18.9283 15.6302C18.788 15.75 18.4851 15.75 17.8793 15.75H5.68934V15.75C5.40804 15.4687 5.25 15.0872 5.25 14.6893V10.65Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"LinkedIn","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
3990 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Microsoft","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M3,3H15.381V15.381H3V3Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16.619,3h12.381V15.381h-12.381V3Z\"\u003e\u003c/path\u003e\u003cpath d=\"M3,16.619H15.381v12.381H3v-12.381Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16.619,16.619h12.381v12.381h-12.381v-12.381Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Patreon","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
3990 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M28.783,10.412c-.005-3.575-2.789-6.505-6.056-7.563-4.057-1.313-9.407-1.123-13.281,.705C4.75,5.77,3.275,10.623,3.22,15.464c-.045,3.98,.352,14.461,6.264,14.536,4.393,.056,5.047-5.605,7.08-8.331,1.446-1.94,3.308-2.487,5.6-3.055,3.939-.975,6.624-4.084,6.619-8.203Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Pinterest","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M16,2C8.268,2,2,8.268,2,16c0,5.931,3.69,11.001,8.898,13.041-.122-1.108-.233-2.811,.049-4.02,.254-1.093,1.642-6.959,1.642-6.959,0,0-.419-.839-.419-2.079,0-1.947,1.128-3.4,2.533-3.4,1.194,0,1.771,.897,1.771,1.972,0,1.201-.765,2.997-1.16,4.661-.33,1.393,.699,2.53,2.073,2.53,2.488,0,4.401-2.624,4.401-6.411,0-3.352-2.409-5.696-5.848-5.696-3.983,0-6.322,2.988-6.322,6.076,0,1.203,.464,2.494,1.042,3.195,.114,.139,.131,.26,.097,.402-.106,.442-.342,1.393-.389,1.588-.061,.256-.203,.311-.468,.187-1.749-.814-2.842-3.37-2.842-5.424,0-4.416,3.209-8.472,9.25-8.472,4.857,0,8.631,3.461,8.631,8.086,0,4.825-3.042,8.708-7.265,8.708-1.419,0-2.752-.737-3.209-1.608,0,0-.702,2.673-.872,3.328-.316,1.216-1.169,2.74-1.74,3.67,1.31,.406,2.702,.624,4.145,.624,7.732,0,14-6.268,14-14S23.732,2,16,2Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Slack","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
3990 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M8.463,19.43c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731,1.228-2.731,2.731-2.731h2.731v2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M9.839,19.43c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731c0,0,0-6.839,0-6.839Z\"\u003e\u003c/path\u003e\u003cpath d=\"M12.57,8.463c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731,2.731,1.228,2.731,2.731v2.731h-2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M12.57,9.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731H5.731c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731c0,0,6.839,0,6.839,0Z\"\u003e\u003c/path\u003e\u003cpath d=\"M23.537,12.57c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731-1.228,2.731-2.731,2.731h-2.731v-2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M22.161,12.57c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731V5.731c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839Z\"\u003e\u003c/path\u003e\u003cpath d=\"M19.43,23.537c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731-2.731-1.228-2.731-2.731v-2.731h2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M19.43,22.161c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731h6.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731h-6.839Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Spotify","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"24\" height=\"24\"
3990 viewBox=\"0 0 24 24\"\u003e\u003cg fill=\"none\"\u003e\u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM7.24064 10.243C6.84845 10.3756 6.42251 10.1654 6.28965 9.77326C6.15675 9.38095 6.36704 8.95518 6.75936 8.82227L6.76064 8.82184C7.11822 8.70159 7.48582 8.61304 7.85391 8.53176C8.52557 8.38345 9.47301 8.22053 10.5843 8.1602C12.7986 8.03998 15.7214 8.32449 18.3991 10.0073C18.7498 10.2277 18.8554 10.6906 18.635 11.0413C18.4146 11.3921 17.9516 11.4977 17.6009 11.2773C15.2786 9.81778 12.7014 9.54747 10.6657 9.65799C9.65199 9.71302 8.78693 9.86187 8.17734 9.99648C7.86261 10.066 7.54712 10.1423 7.24064 10.243ZM7.24011 11.7965L7.23879 11.7969C6.85051 11.9412 6.65269 12.3729 6.79696 12.7612C6.94116 13.1493 7.37306 13.3469 7.76121 13.203C8.01105 13.1136 8.26893 13.0456 8.52676 12.9836C9.03189 12.8623 9.75307 12.7275 10.6068 12.677C12.318 12.5758 14.5214 12.8144 16.5979 14.1331C16.9476 14.3552 17.4111 14.2517 17.6331 13.9021C17.8552 13.5524 17.7517 13.0889 17.4021 12.8669C14.9786 11.3278 12.432 11.0664 10.5182 11.1797C9.55943 11.2364 8.74936 11.3875 8.17636 11.5251C7.86123 11.6008 7.54651 11.6843 7.2419 11.7958L7.24011 11.7965ZM8.24708 16.1038C7.85613 16.24 7.42827 16.0337 7.29187 15.6428C7.15541 15.2517 7.36183 14.824 7.75292 14.6876C8.60177 14.3947 9.50664 14.2708 10.4004 14.2265C11.9342 14.1505 13.9791 14.3679 15.9019 15.5885C16.2516 15.8105 16.3552 16.2739 16.1332 16.6236C15.9112 16.9733 15.4478 17.0769 15.0981 16.8549C13.5209 15.8538 11.8158 15.6582 10.4746 15.7246C9.72314 15.7619 8.96309 15.8652 8.24708 16.1038Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Trello","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
3990 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M25.906,3H6.089c-1.707,.002-3.089,1.387-3.089,3.094V25.911c0,1.706,1.383,3.089,3.089,3.089H25.906c1.707,0,3.091-1.383,3.094-3.089V6.094c-.002-1.708-1.386-3.091-3.094-3.094ZM14.197,21.729c.002,.566-.454,1.026-1.02,1.028-.001,0-.003,0-.004,0h-4.348c-.566,0-1.024-.459-1.024-1.024,0-.001,0-.003,0-.004V8.829c-.002-.566,.454-1.026,1.02-1.028,.001,0,.003,0,.004,0h4.348c.566,0,1.024,.459,1.024,1.024,0,.001,0,.003,0,.004v12.9Zm10.002-5.923c0,.568-.46,1.028-1.028,1.028h-4.344c-.568,0-1.028-.46-1.028-1.028v-6.977c0-.568,.46-1.028,1.028-1.028h4.344c.568,0,1.028,.46,1.028,1.028v6.977Z\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"YouTube","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M31.331,8.248c-.368-1.386-1.452-2.477-2.829-2.848-2.496-.673-12.502-.673-12.502-.673,0,0-10.007,0-12.502,.673-1.377,.37-2.461,1.462-2.829,2.848-.669,2.512-.669,7.752-.669,7.752,0,0,0,5.241,.669,7.752,.368,1.386,1.452,2.477,2.829,2.847,2.496,.673,12.502,.673,12.502,.673,0,0,10.007,0,12.502-.673,1.377-.37,2.461-1.462,2.829-2.847,.669-2.512,.669-7.752,.669-7.752,0,0,0-5.24-.669-7.752ZM12.727,20.758V11.242l8.364,4.758-8.364,4.758Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"}]'> 3991 3992 <div class="relative"> 3993 <input id="search_on_focus_basic_autocomplete" 3994 required 3995 data-autocomplete-target="input" 3996 placeholder="Search brands..." 3997 class="form-control !px-9"> 3998 3999 <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-2.5 top-2.5 size-5 text-neutral-400 pointer-events-none" width="20" height="20" viewBox="0 0 20 20"> 4000 <g fill="currentColor"> 4001 <path d="M16.906,17.966c-.256,0-.512-.098-.707-.293l-4.817-4.817c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l4.817,4.817c.391,.391,.391,1.023,0,1.414-.195,.195-.451,.293-.707,.293Z"></path> 4002 <path d="M8.5,15c-3.584,0-6.5-2.916-6.5-6.5S4.916,2,8.5,2s6.5,2.916,6.5,6.5-2.916,6.5-6.5,6.5Zm0-11c-2.481,0-4.5,2.019-4.5,4.5s2.019,4.5,4.5,4.5,4.5-2.019,4.5-4.5-2.019-4.5-4.5-4.5Z"></path> 4003 </g> 4004 </svg> 4005 4006 <button type="button" data-autocomplete-target="clearButton" data-action="click->autocomplete#clearInput" class="hidden absolute flex items-center justify-center size-5 right-2.5 top-2.5 rounded-full text-neutral-400 hover:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
4006k:focus-visible:outline-neutral-200"> 4007 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg> 4008 </button> 4009 </div> 4010 4011 <div data-autocomplete-target="results" 4012 class="small-scrollbar absolute z-50 w-full bg-white dark:bg-neutral-900 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden hidden opacity-0 max-h-[250px] overflow-y-auto" 4013 role="listbox" 4014 tabindex="-1"> 4015 </div> 4016 </form> 4017</div> 4018 4019 </div> 4020 </div> 4021 <a href="/docs/autocomplete" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4022 <div class="h-48"></div> 4023 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4024 Autocomplete Search 4025 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4026 </p> 4027 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center"> 4028 View 10 components 4029 </p> 4030 </a> 4031</li> 4032 4033 <li class="relative"> 4034 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4035 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4036 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4036k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4037 <span class="text-xs">?</span> 4038 </button> 4039 4040 <template data-popover-target="content"> 4041 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4042 <div class="space-y-2"> 4043 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4044 4045 <div class="flex items-center gap-1.5 text-xs"> 4046 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4047 <span class="flex grow gap-2">Tailwind CSS</span> 4048 </div> 4049 4050 </div> 4051 </div> 4052 </template> 4053 </div> 4054 4055 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4056 <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span> 4057 </div> 4058 </div> 4059 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/badge" data-turbo-frame="_top"> 4060 <div class="h-48"></div> 4061 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4062 Badge 4063 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4064 </p> 4065 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 4066 </a> 4067</li> 4068 4069 <li class="relative"> 4070 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4071 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4072 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4072k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4073 <span class="text-xs">?</span> 4074 </button> 4075 4076 <template data-popover-target="content"> 4077 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4078 <div class="space-y-2"> 4079 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4080 4081 <div class="flex items-center gap-1.5 text-xs"> 4082 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4083 <span class="flex grow gap-2">Tailwind CSS</span> 4084 </div> 4085 </div> 4086 </div> 4087 </template> 4088 </div> 4089 4090 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4091 <div class="w-full max-w-xs"> 4092 <div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden"> 4093 <div class="p-3"> 4094 <h3 class="text-sm font-medium leading-6 text-neutral-900 dark:text-neutral-100">Card Preview</h3> 4095 <div class="mt-1.5 text-xs text-neutral-500 dark:text-neutral-400"> 4096 <p>Simple card components with multiple variations.</p> 4097 </div> 4098 </div> 4099 </div> 4100 </div> 4101 </div> 4102 </div> 4103 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/card" data-turbo-frame="_top"> 4104 <div class="h-48"></div> 4105 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4106 Card 4107 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4108 </p> 4109 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p> 4110 </a> 4111</li> 4112 4113 <li class="relative"> 4114 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 4115 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 4116 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 4117 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
41176,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 4118 Pro 4119 </a> 4120 </div> 4121 </div> 4122 4123 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4124 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4125 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4126 <span class="text-xs">?</span> 4127 </button> 4128 4129 <template data-popover-target="content"> 4130 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4131 <div class="space-y-2"> 4132 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4133 4134 <div class="flex items-center gap-1.5 text-xs"> 4135 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4136 <span class="flex grow gap-2">Tailwind CSS</span> 4137 </div> 4138 4139 <div class="flex items-center gap-1.5 text-xs"> 4140 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4140ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4141 <g class="fill-neutral-800 dark:fill-white"> 4142 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4143 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4144 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4145 </g> 4146 </svg> 4147 <span class="flex grow gap-2">Stimulus</span> 4148 </div> 4149 4150 <div class="flex items-center gap-1.5 text-xs"> 4151 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 4152 <span class="flex grow gap-2">Floating UI</span> 4153 </div> 4154 </div> 4155 </div> 4156 </template> 4157 </div> 4158 4159 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4160 <div class="w-full max-w-xs flex justify-center"> 4161 <div data-controller="modal"> 4162 <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" data-action="click->
4162modal#open:prevent"> 4163 Search brands 4164 </button> 4165 4166 <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose"> 4167 <div class="sm:max-w-md w-full"> 4168 4169 <div class="sm:max-w-md mx-auto w-full"> 4170 <form class="relative" 4171 data-controller="autocomplete" 4172 data-autocomplete-submit-on-select-value="false" 4173 data-autocomplete-highlight-matches-value="false" 4174 data-autocomplete-suggestion-class-value="border-l-3 border-transparent" 4175 data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected" 4176 data-autocomplete-anchor-value="form" 4177 data-autocomplete-render-mode-value="inline" 4178 data-autocomplete-always-show-value="true" 4179 data-autocomplete-auto-select-first-value="true" 4180 data-autocomplete-preserve-search-on-select-value="true" 4181 data-autocomplete-select-action-value="modal#close:prevent" 4182 data-autocomplete-local-data-value='[{"title":"Apple","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"24\" height=\"24\"
4182 viewBox=\"0 0 24 24\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.3091 6.48971C13.8886 6.26249 14.614 6.00143 15.6913 6.00143C17.3749 6.00143 19.1523 6.89003 20.3404 8.35613L21.0976 9.29055L20.0406 9.86449C17.5093 11.2391 17.8608 14.8633 20.4912 15.8476L21.4953 16.2234L21.0506 17.199C20.5752 18.2418 20.3284 18.7499 19.6885 19.7119C18.7074 21.192 17.3565 22.9787 15.3958 22.997C14.1793 23.0084 13.2116 22.1656 12.0053 22.172C10.7909 22.1784 9.80329 23 8.57946 22.9999L8.57073 22.9999C6.64549 22.9829 5.31146 21.3315 4.3393 19.8664C1.80437 16.0461 1.46451 11.568 3.19812 8.92508C4.43251 7.04322 6.3164 6.00413 8.20878 6.00413C9.15354 6.00413 9.91949 6.26847 10.5172 6.47873C11.1502 6.70144 11.5462 6.84 11.9823 6.84C12.4376 6.84 12.7407 6.71256 13.3091 6.48971Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M15.3653 3.793C16.0815 2.87425 16.5703 1.63176 16.373 0.305766C15.203 0.386016 13.89 1.07576 13.0913 2.0455C12.3668 2.92525 11.7675 4.231 12 5.5C13.2765 5.53975 14.598 4.77775 15.3653 3.793Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Behance","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
4182 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M10.144,7.203c.808,0,1.554,.062,2.238,.249,.684,.124,1.243,.373,1.741,.684s.87,.746,1.119,1.306c.249,.56,.373,1.243,.373,1.989,0,.87-.187,1.616-.622,2.176-.373,.56-.995,1.057-1.741,1.43,1.057,.311,1.865,.87,2.362,1.616s.808,1.679,.808,2.735c0,.87-.187,1.616-.497,2.238s-.808,1.181-1.368,1.554c-.56,.373-1.243,.684-1.989,.87-.746,.187-1.492,.311-2.238,.311H2V7.203H10.144Zm-.497,6.963c.684,0,1.243-.187,1.679-.497s.622-.87,.622-1.554c0-.373-.062-.746-.187-.995s-.311-.435-.56-.622c-.249-.124-.497-.249-.808-.311s-.622-.062-.995-.062h-3.606v4.041h3.854Zm.187,7.336c.373,0,.746-.062,1.057-.124s.622-.187,.87-.373c.249-.187,.435-.373,.622-.684,.124-.311,.249-.684,.249-1.119,0-.87-.249-1.492-.746-1.927-.497-.373-1.181-.56-1.989-.56H5.792v4.787h4.041Zm11.998-.062c.497,.497,1.243,.746,2.238,.746,.684,0,1.306-.187,1.803-.497,.497-.373,.808-.746,.933-1.119h3.046c-.497,1.492-1.243,2.549-2.238,3.233-.995,.622-2.176,.995-3.606,.995-.995,0-1.865-.187-2.673-.497s-1.43-.746-1.989-1.368c-.56-.56-.995-1.243-1.243-2.052-.311-.808-.435-1.679-.435-2.673,0-.933,.124-1.803,.435-2.611s.746-1.492,1.306-2.114c.56-.56,1.243-1.057,1.989-1.368,.808-.311,1.616-.497,2.611-.497,1.057,0,1.989,.187,2.798,.622s1.43,.933,1.927,1.679c.497,.684,.87,1.492,1.119,2.362,.124,.87,.187,1.741,.124,2.735h-9.014c0,.995,.373,1.927,.87,2.425Zm3.917-6.528c-.435-.435-1.119-.684-1.927-.684-.56,0-.995,.124-1.368,.311-.373,.187-.622,.435-.87,.684-.249,.249-.373,.56-.435,.87s-.124,.56-.124,.808h5.595c-.124-.933-.435-1.554-.87-1.989Zm-5.471-6.528h6.963v1.679h-6.963v-1.679Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Discord","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
4182 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M26.413,6.536c-1.971-.902-4.052-1.543-6.189-1.904-.292,.523-.557,1.061-.793,1.612-2.277-.343-4.592-.343-6.869,0-.236-.551-.5-1.089-.793-1.612-2.139,.365-4.221,1.006-6.194,1.909C1.658,12.336,.596,17.987,1.127,23.558h0c2.294,1.695,4.861,2.984,7.591,3.811,.615-.827,1.158-1.704,1.626-2.622-.888-.332-1.744-.741-2.56-1.222,.215-.156,.425-.316,.628-.472,4.806,2.26,10.37,2.26,15.177,0,.205,.168,.415,.328,.628,.472-.817,.483-1.676,.892-2.565,1.225,.467,.918,1.011,1.794,1.626,2.619,2.732-.824,5.301-2.112,7.596-3.808h0c.623-6.461-1.064-12.06-4.46-17.025Zm-15.396,13.596c-1.479,0-2.702-1.343-2.702-2.994s1.18-3.006,2.697-3.006,2.73,1.354,2.704,3.006-1.192,2.994-2.699,2.994Zm9.967,0c-1.482,0-2.699-1.343-2.699-2.994s1.18-3.006,2.699-3.006,2.723,1.354,2.697,3.006-1.189,2.994-2.697,2.994Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Framer","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"24\" height=\"24\"
4182 viewBox=\"0 0 24 24\"\u003e\u003cg fill=\"none\"\u003e\u003cpath d=\"M5.55502 3.61569C5.12664 3.18731 4.91245 2.97312 4.89798 2.78923C4.88542 2.62967 4.95001 2.47374 5.07171 2.3698C5.21198 2.25 5.51489 2.25 6.1207 2.25H16.35C17.1901 2.25 17.6101 2.25 17.931 2.41349C18.2132 2.5573 18.4427 2.78677 18.5865 3.06901C18.75 3.38988 18.75 3.80992 18.75 4.65V7.35C18.75 8.19008 18.75 8.61012 18.5865 8.93099C18.4427 9.21323 18.2132 9.4427 17.931 9.58651C17.6101 9.75 17.1901 9.75 16.35 9.75H15.2249L14.1308 8.65589C13.6119 8.13703 13.3525 7.87761 13.0497 7.69208C12.7813 7.52759 12.4887 7.40638 12.1826 7.33289C11.8373 7.25 11.4704 7.25 10.7366 7.25H9.18933L5.55502 3.61569Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M11.3843 21.445C11.8127 21.8734 12.0269 22.0875 12.2108 22.102C12.3703 22.1146 12.5262 22.05 12.6302 21.9283C12.75 21.788 12.75 21.4851 12.75 20.8793V16.75H6.68933L11.3843 21.445Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M5.25 10.65C5.25 9.80992 5.25 9.38988 5.41349 9.06901C5.5573 8.78677 5.78677 8.5573 6.06901 8.41349C6.38988 8.25 6.80992 8.25 7.65 8.25H10.9852C11.4744 8.25 11.7189 8.25 11.9491 8.30526C12.1532 8.35425 12.3483 8.43506 12.5272 8.54472C12.7291 8.6684 12.902 8.84136 13.2479 9.18726L18.445 14.3843C18.8734 14.8127 19.0875 15.0269 19.102 15.2108C19.1146 15.3703 19.05 15.5263 18.9283 15.6302C18.788 15.75 18.4851 15.75 17.8793 15.75H5.68934V15.75C5.40804 15.4687 5.25 15.0872 5.25 14.6893V10.65Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"LinkedIn","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
4182 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Microsoft","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M3,3H15.381V15.381H3V3Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16.619,3h12.381V15.381h-12.381V3Z\"\u003e\u003c/path\u003e\u003cpath d=\"M3,16.619H15.381v12.381H3v-12.381Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16.619,16.619h12.381v12.381h-12.381v-12.381Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Patreon","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
4182 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M28.783,10.412c-.005-3.575-2.789-6.505-6.056-7.563-4.057-1.313-9.407-1.123-13.281,.705C4.75,5.77,3.275,10.623,3.22,15.464c-.045,3.98,.352,14.461,6.264,14.536,4.393,.056,5.047-5.605,7.08-8.331,1.446-1.94,3.308-2.487,5.6-3.055,3.939-.975,6.624-4.084,6.619-8.203Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Pinterest","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M16,2C8.268,2,2,8.268,2,16c0,5.931,3.69,11.001,8.898,13.041-.122-1.108-.233-2.811,.049-4.02,.254-1.093,1.642-6.959,1.642-6.959,0,0-.419-.839-.419-2.079,0-1.947,1.128-3.4,2.533-3.4,1.194,0,1.771,.897,1.771,1.972,0,1.201-.765,2.997-1.16,4.661-.33,1.393,.699,2.53,2.073,2.53,2.488,0,4.401-2.624,4.401-6.411,0-3.352-2.409-5.696-5.848-5.696-3.983,0-6.322,2.988-6.322,6.076,0,1.203,.464,2.494,1.042,3.195,.114,.139,.131,.26,.097,.402-.106,.442-.342,1.393-.389,1.588-.061,.256-.203,.311-.468,.187-1.749-.814-2.842-3.37-2.842-5.424,0-4.416,3.209-8.472,9.25-8.472,4.857,0,8.631,3.461,8.631,8.086,0,4.825-3.042,8.708-7.265,8.708-1.419,0-2.752-.737-3.209-1.608,0,0-.702,2.673-.872,3.328-.316,1.216-1.169,2.74-1.74,3.67,1.31,.406,2.702,.624,4.145,.624,7.732,0,14-6.268,14-14S23.732,2,16,2Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Slack","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
4182 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M8.463,19.43c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731,1.228-2.731,2.731-2.731h2.731v2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M9.839,19.43c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731c0,0,0-6.839,0-6.839Z\"\u003e\u003c/path\u003e\u003cpath d=\"M12.57,8.463c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731,2.731,1.228,2.731,2.731v2.731h-2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M12.57,9.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731H5.731c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731c0,0,6.839,0,6.839,0Z\"\u003e\u003c/path\u003e\u003cpath d=\"M23.537,12.57c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731-1.228,2.731-2.731,2.731h-2.731v-2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M22.161,12.57c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731V5.731c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839Z\"\u003e\u003c/path\u003e\u003cpath d=\"M19.43,23.537c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731-2.731-1.228-2.731-2.731v-2.731h2.731Z\"\u003e\u003c/path\u003e\u003cpath d=\"M19.43,22.161c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731h6.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731h-6.839Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Spotify","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"24\" height=\"24\"
4182 viewBox=\"0 0 24 24\"\u003e\u003cg fill=\"none\"\u003e\u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM7.24064 10.243C6.84845 10.3756 6.42251 10.1654 6.28965 9.77326C6.15675 9.38095 6.36704 8.95518 6.75936 8.82227L6.76064 8.82184C7.11822 8.70159 7.48582 8.61304 7.85391 8.53176C8.52557 8.38345 9.47301 8.22053 10.5843 8.1602C12.7986 8.03998 15.7214 8.32449 18.3991 10.0073C18.7498 10.2277 18.8554 10.6906 18.635 11.0413C18.4146 11.3921 17.9516 11.4977 17.6009 11.2773C15.2786 9.81778 12.7014 9.54747 10.6657 9.65799C9.65199 9.71302 8.78693 9.86187 8.17734 9.99648C7.86261 10.066 7.54712 10.1423 7.24064 10.243ZM7.24011 11.7965L7.23879 11.7969C6.85051 11.9412 6.65269 12.3729 6.79696 12.7612C6.94116 13.1493 7.37306 13.3469 7.76121 13.203C8.01105 13.1136 8.26893 13.0456 8.52676 12.9836C9.03189 12.8623 9.75307 12.7275 10.6068 12.677C12.318 12.5758 14.5214 12.8144 16.5979 14.1331C16.9476 14.3552 17.4111 14.2517 17.6331 13.9021C17.8552 13.5524 17.7517 13.0889 17.4021 12.8669C14.9786 11.3278 12.432 11.0664 10.5182 11.1797C9.55943 11.2364 8.74936 11.3875 8.17636 11.5251C7.86123 11.6008 7.54651 11.6843 7.2419 11.7958L7.24011 11.7965ZM8.24708 16.1038C7.85613 16.24 7.42827 16.0337 7.29187 15.6428C7.15541 15.2517 7.36183 14.824 7.75292 14.6876C8.60177 14.3947 9.50664 14.2708 10.4004 14.2265C11.9342 14.1505 13.9791 14.3679 15.9019 15.5885C16.2516 15.8105 16.3552 16.2739 16.1332 16.6236C15.9112 16.9733 15.4478 17.0769 15.0981 16.8549C13.5209 15.8538 11.8158 15.6582 10.4746 15.7246C9.72314 15.7619 8.96309 15.8652 8.24708 16.1038Z\" fill=\"currentColor\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"Trello","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
4182 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M25.906,3H6.089c-1.707,.002-3.089,1.387-3.089,3.094V25.911c0,1.706,1.383,3.089,3.089,3.089H25.906c1.707,0,3.091-1.383,3.094-3.089V6.094c-.002-1.708-1.386-3.091-3.094-3.094ZM14.197,21.729c.002,.566-.454,1.026-1.02,1.028-.001,0-.003,0-.004,0h-4.348c-.566,0-1.024-.459-1.024-1.024,0-.001,0-.003,0-.004V8.829c-.002-.566,.454-1.026,1.02-1.028,.001,0,.003,0,.004,0h4.348c.566,0,1.024,.459,1.024,1.024,0,.001,0,.003,0,.004v12.9Zm10.002-5.923c0,.568-.46,1.028-1.028,1.028h-4.344c-.568,0-1.028-.46-1.028-1.028v-6.977c0-.568,.46-1.028,1.028-1.028h4.344c.568,0,1.028,.46,1.028,1.028v6.977Z\" fill-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"},{"title":"YouTube","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"32\" height=\"32\"
4182 viewBox=\"0 0 32 32\"\u003e\u003cg fill=\"currentColor\"\u003e\u003cpath d=\"M31.331,8.248c-.368-1.386-1.452-2.477-2.829-2.848-2.496-.673-12.502-.673-12.502-.673,0,0-10.007,0-12.502,.673-1.377,.37-2.461,1.462-2.829,2.848-.669,2.512-.669,7.752-.669,7.752,0,0,0,5.241,.669,7.752,.368,1.386,1.452,2.477,2.829,2.847,2.496,.673,12.502,.673,12.502,.673,0,0,10.007,0,12.502-.673,1.377-.37,2.461-1.462,2.829-2.847,.669-2.512,.669-7.752,.669-7.752,0,0,0-5.24-.669-7.752ZM12.727,20.758V11.242l8.364,4.758-8.364,4.758Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e","url":"javascript:void(0)"}]'> 4183 4184 <div class="relative"> 4185 <input id="basic_command_palette" 4186 autofocus 4187 required 4188 data-autocomplete-target="input" 4189 placeholder="Select a brand..." 4190 class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4"> 4191 4192 <!-- Clear Button --> 4193 <button type="button" 4194 data-autocomplete-target="clearButton" 4195 data-action="click->autocomplete#clearInput" 4196 class="hidden absolute right-2 top-1/2 -translate-y-1/2 items-center justify-center size-8 mr-1 rounded-full hover:bg-neutral-100 transition-colors text-neutral-400 hover:text-neutral-500 dark:hover:bg-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
4196k:focus-visible:outline-neutral-200"> 4197 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg> 4198 </button> 4199 </div> 4200 4201 <div data-autocomplete-target="results" 4202 class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto" 4203 role="listbox" 4204 tabindex="-1"> 4205 </div> 4206 </form> 4207 </div> 4208 4209 <!-- Footer --> 4210 <div class="hidden sm:flex flex-wrap gap-1 items-center bg-neutral-50 px-4 py-3 text-xs text-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-t border-black/10 dark:border-white/10"> 4211 <div class="flex items-center gap-1"> 4212 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd> 4213 <span>to close,</span> 4214 </div> 4215 <div class="flex items-center gap-1"> 4216 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd> 4217 <span>to select,</span> 4218 </div> 4219 <div class="flex items-center gap-1"> 4220 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 4221 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.391,8.448L9.398,1.867c-.2-.264-.597-.264-.797,0L3.609,8.448c-.25,.329-.015,.802,.398,.802h2.743v6c0,.552,.448,1,1,1h2.5c.552,0,1-.448,1-1v-6h2.743c.413,0,.648-.473,.398-.802Z"></path></g></svg> 4222 </kbd> 4223 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 4224 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.609,9.552l4.993,6.581c.2,.264,.597,.264,.797,0l4.993-6.581c.25-.329,.015-.802-.398-.802h-2.743V2.75c0-.552-.448-1-1-1h-2.5c-.552,0-1,.448-1,1v6h-2.743c-.413,0-.648,.473-.398,.802Z"></path></g></svg> 4225 </kbd> 4226 <span>to navigate.</span> 4227 </div> 4228 </div> 4229 </div> 4230 </dialog> 4231</div> 4232 4233 </div> 4234 </div> 4235 </div> 4236 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/command-palette" data-turbo-frame="_top"> 4237 <div class="h-48"></div> 4238 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4239 Command Palette 4240 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4241 </p> 4242 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 4243 </a> 4244</li> 4245 4246 <li class="relative"> 4247 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4248 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4249 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4249k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4250 <span class="text-xs">?</span> 4251 </button> 4252 4253 <template data-popover-target="content"> 4254 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4255 <div class="space-y-2"> 4256 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4257 4258 <div class="flex items-center gap-1.5 text-xs"> 4259 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4260 <span class="flex grow gap-2">Tailwind CSS</span> 4261 </div> 4262 4263 <div class="flex items-center gap-1.5 text-xs"> 4264 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4264ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4265 <g class="fill-neutral-800 dark:fill-white"> 4266 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4267 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4268 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4269 </g> 4270 </svg> 4271 <span class="flex grow gap-2">Stimulus</span> 4272 </div> 4273 </div> 4274 </div> 4275 </template> 4276 </div> 4277 4278 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4279 <div class="max-w-md mx-auto"> 4280 <div data-controller="modal"> 4281 4282 <button class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
4282k:focus-visible:outline-neutral-200" 4283 data-action="click->modal#open:prevent"> 4284 Create Workspace 4285 </button> 4286 4287 <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full lg:rounded-2xl z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-800 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" 4288 data-modal-target="dialog" 4289 data-action="mousedown->modal#backdropClose"> 4290 4291 <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rounded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline"> 4292 <button type="button" 4293 data-action="modal#close:prevent" 4294 class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none"> 4295 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 4296 <line x1="18" x2="6" y1="6" y2="18"></line> 4297 <line x1="6" x2="18" y1="6" y2="18"></line> 4298 </svg> 4299 <span class="sr-only">Close</span> 4300 </button> 4301 4302 <div class="mb-4"> 4303 <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Create Workspace</h2> 4304 </div> 4305 4306 <form data-controller="confirmation" 4307 data-confirmation-confirm-text-value="CREATE"> 4308 <div class="mb-6"> 4309 <label for="workspace-creation-confirmation" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"> 4310 Type <span class="inline rounded-md border border-black/10 bg-white px-1 py-0.5 font-mono text-neutral-800 dark:border-white/10 dark:bg-neutral-900 dark:text-neutral-200">CREATE</span> to confirm: 4311 </label> 4312 <input type="text" 4313 id="workspace-creation-confirmation" 4314 data-confirmation-target="input" 4315 class="form-control" 4316 autocomplete="off" 4317 placeholder="Type CREATE to confirm" 4318 autofocus> 4319 </div> 4320 4321 <div class="flex gap-3 justify-end"> 4322 <button type="button" 4323 data-action="click->modal#close:prevent click->confirmation#cancel" 4324 class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 4325 Cancel 4326 </button> 4327 <button type="button" 4328 data-confirmation-target="confirmButton" 4329 data-action="click->confirmation#confirm click->modal#close:prevent" 4330 disabled 4331 class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"> 4332 Create Workspace 4333 </button> 4334 </div> 4335 </form> 4336 </div> 4337 </dialog> 4338 </div> 4339</div> 4340 4341 </div> 4342 </div> 4343 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/confirmation" data-turbo-frame="_top"> 4344 <div class="h-48"></div> 4345 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4346 Confirmation 4347 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4348 </p> 4349 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 4350 </a> 4351</li> 4352 4353 <li class="relative"> 4354 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4355 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4356 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4356k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4357 <span class="text-xs">?</span> 4358 </button> 4359 4360 <template data-popover-target="content"> 4361 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4362 <div class="space-y-2"> 4363 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4364 4365 <div class="flex items-center gap-1.5 text-xs"> 4366 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4367 <span class="flex grow gap-2">Tailwind CSS</span> 4368 </div> 4369 4370 <div class="flex items-center gap-1.5 text-xs"> 4371 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4371ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4372 <g class="fill-neutral-800 dark:fill-white"> 4373 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4374 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4375 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4376 </g> 4377 </svg> 4378 <span class="flex grow gap-2">Stimulus</span> 4379 </div> 4380 4381 <div class="flex items-center gap-1.5 text-xs"> 4382 <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c400aafdebbd.webp" /> 4383 <span class="flex grow gap-2">Motion.dev</span> 4384 </div> 4385 </div> 4386 </div> 4387 </template> 4388 </div> 4389 4390 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4391 <div class="w-full max-w-xs"> 4392 <div class="w-fit mx-auto flex items-center justify-center relative" data-controller="feedback" data-feedback-expanded-value="false" data-feedback-position-value="center" data-feedback-target="container"> 4393 <!-- Button --> 4394 <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" data-feedback-target="button" data-action="click->
4394feedback#toggle"> 4395 <span class="flex items-center gap-1.5" data-feedback-target="buttonText"> 4396 Feedback 4397 </span> 4398 </button> 4399 4400 <!-- Form --> 4401 <div class="absolute hidden h-24 w-48 overflow-hidden rounded-lg border border-black/5 bg-neutral-100 p-1 shadow-xs outline-none dark:border-white/10 dark:bg-neutral-800 dark:shadow-neutral-900/50" data-feedback-target="form"> 4402 <form class="relative flex h-full flex-col overflow-hidden rounded-lg border border-[#E6E7E8] bg-white dark:border-neutral-600 dark:bg-neutral-700" data-action="submit->feedback#submit"> 4403 4404 <textarea class="small-scrollbar text-xs w-full flex-1 resize-none rounded-t-lg bg-white p-3 text-black placeholder-neutral-500 !outline-none dark:bg-neutral-700 dark:text-neutral-100 dark:placeholder-neutral-400" 4405 required 4406 placeholder="Tell us what you think..." 4407 data-feedback-target="textarea"></textarea> 4408 4409 <div class="absolute bottom-1.5 right-1.5"> 4410 <button type="submit" class="ml-auto flex items-center justify-center rounded-md bg-neutral-800 py-1 px-2 text-xs font-medium text-white transition-colors duration-200 hover:bg-neutral-700 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100"> 4411 <span> 4412 Send 4413 </span> 4414 </button> 4415 </div> 4416 4417 </form> 4418 </div> 4419 </div> 4420 </div> 4421 </div> 4422 </div> 4423 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/feedback" data-turbo-frame="_top"> 4424 <div class="h-48"></div> 4425 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4426 Feedback 4427 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4428 </p> 4429 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 9 components</p> 4430 </a> 4431</li> 4432 4433 <li class="relative"> 4434 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4435 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4436 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4436k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4437 <span class="text-xs">?</span> 4438 </button> 4439 4440 <template data-popover-target="content"> 4441 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4442 <div class="space-y-2"> 4443 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4444 4445 <div class="flex items-center gap-1.5 text-xs"> 4446 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4447 <span class="flex grow gap-2">Tailwind CSS</span> 4448 </div> 4449 4450 </div> 4451 </div> 4452 </template> 4453 </div> 4454 4455 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4456 <div class="max-w-md w-full flex items-center justify-center"> 4457 <div class="animate-pulse max-w-md w-full"> 4458 <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-full mb-2"></div> 4459 <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2"></div> 4460</div> 4461 4462 </div> 4463 </div> 4464 </div> 4465 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/skeleton" data-turbo-frame="_top"> 4466 <div class="h-48"></div> 4467 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4468 Skeleton 4469 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4470 </p> 4471 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 4472 </a> 4473</li> 4474 4475 </ul> 4476 </div> 4477 </div> 4478 </div> 4479 <!-- End Col --> 4480 </div> 4481 <!-- End Grid --> 4482 </div> 4483 <!-- End Right Content --> 4484 </div> 4485 <!-- End Item --> 4486 4487 <!-- Item - July 2025 --> 4488 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 4489 4490 <!-- Icon --> 4491 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 4492 <div class="relative z-10 size-6 flex justify-center items-center"> 4493 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 4494 </div> 4495 </div> 4496 <!-- End Icon --> 4497 4498 <!-- Right Content --> 4499 <div class="grow pb-8 relative"> 4500 <!-- Grid --> 4501 <div class="grid grid-cols-1 gap-6 md:gap-12"> 4502 <div> 4503 <div class="space-y-3"> 4504 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 4505 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 4506 July 2025 4507 </h2> 4508 </div> 4509 <p class="text-neutral-500 dark:text-neutral-400"> 4510 In July 2025, I released 12 new component sets: 4511 </p> 4512 <div class="my-4"> 4513 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6"> 4514 <li class="relative"> 4515 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4516 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4517 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4517k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4518 <span class="text-xs">?</span> 4519 </button> 4520 4521 <template data-popover-target="content"> 4522 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4523 <div class="space-y-2"> 4524 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4525 4526 <div class="flex items-center gap-1.5 text-xs"> 4527 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4528 <span class="flex grow gap-2">Tailwind CSS</span> 4529 </div> 4530 4531 <div class="flex items-center gap-1.5 text-xs"> 4532 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4532ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4533 <g class="fill-neutral-800 dark:fill-white"> 4534 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4535 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4536 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4537 </g> 4538 </svg> 4539 <span class="flex grow gap-2">Stimulus</span> 4540 </div> 4541 </div> 4542 </div> 4543 </template> 4544 </div> 4545 4546 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4547 <div class="w-full max-w-xs"> 4548 <textarea 4549 id="autogrow" 4550 rows="2" 4551 class="form-control min-h-16 max-h-32 small-scrollbar" 4552 placeholder="Start typing and watch the textarea grow..." 4553 data-controller="autogrow" 4554 data-action="input->autogrow#autogrow" 4555 ></textarea> 4556 </div> 4557 </div> 4558 </div> 4559 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/autogrow" data-turbo-frame="_top"> 4560 <div class="h-48"></div> 4561 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4562 Autogrow 4563 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4564 </p> 4565 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 4566 </a> 4567</li> 4568 4569 <li class="relative"> 4570 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4571 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4572 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4572k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4573 <span class="text-xs">?</span> 4574 </button> 4575 4576 <template data-popover-target="content"> 4577 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4578 <div class="space-y-2"> 4579 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4580 4581 <div class="flex items-center gap-1.5 text-xs"> 4582 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4583 <span class="flex grow gap-2">Tailwind CSS</span> 4584 </div> 4585 4586 <div class="flex items-center gap-1.5 text-xs"> 4587 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4587ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4588 <g class="fill-neutral-800 dark:fill-white"> 4589 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4590 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4591 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4592 </g> 4593 </svg> 4594 <span class="flex grow gap-2">Stimulus</span> 4595 </div> 4596 </div> 4597 </div> 4598 </template> 4599 </div> 4600 4601 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4602 <div class="flex justify-center w-full whitespace-nowrap"> 4603 <ol class="flex justify-center items-center space-x-2 text-sm w-full"> 4604 <li> 4605 <a href="javascript:void(0)" class="flex items-center text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors"> 4606 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor">
4606<path d="M7.94127 1.36281C8.56694 0.887445 9.4333 0.886569 10.0591 1.36312L15.3088 5.35287C15.7448 5.68398 16 6.20008 16 6.746V14.25C16 15.7692 14.7692 17 13.25 17H10.75V13.251C10.75 12.699 10.302 12.251 9.75 12.251H8.25C7.698 12.251 7.25 12.699 7.25 13.251V17H4.75C3.23079 17 2 15.7692 2 14.25V6.746C2 6.19867 2.2559 5.68346 2.69155 5.3526L7.94127 1.36281Z"></path></g></svg> 4607 </a> 4608 </li> 4609 <li class="flex items-center space-x-2"> 4610 <span class="text-neutral-400 dark:text-neutral-600">/</span> 4611 4612 <!-- Dropdown for hidden breadcrumb items --> 4613 <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-placement-value="bottom-start"> 4614 <button 4615 class="flex outline-none items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700/50" 4616 data-dropdown-popover-target="button" 4617 data-action="dropdown-popover#toggle" 4618 aria-label="Show more breadcrumb items" 4619 > 4620 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 20 20" fill="currentColor"> 4621 <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /> 4622 </svg> 4623 </button> 4624 4625 <dialog 4626 class="absolute z-10 w-fit rounded-lg border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100" 4627 data-controller="menu" 4628 data-dropdown-popover-target="menu" 4629 autofocus="false" 4630 data-action="click@document->dropdown-popover#closeOnClickOutside 4631 close->menu#reset 4632 keydown.up->menu#prev keydown.down->menu#next 4633 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 4634 > 4635 <div class="flex flex-col p-1" role="menu"> 4636 <a href="javascript:void(0)" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1"> 4637 Getting started 4638 </a> 4639 <a href="javascript:void(0)" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1"> 4640 Components 4641 </a> 4642 </div> 4643 </dialog> 4644 </div> 4645 </li> 4646 <li class="flex items-center space-x-2"> 4647 <span class="text-neutral-400 dark:text-neutral-600">/</span> 4648 <a href="javascript:void(0)" class="flex items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors"> 4649 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.75,12h-3.625c-.896,0-1.625-.729-1.625-1.625s.729-1.625,1.625-1.625h7.75c1.723,0,3.125-1.402,3.125-3.125s-1.402-3.125-3.125-3.125H5.25c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.625c.896,0,1.625,.729,1.625,1.625s-.729,1.625-1.625,1.625H5.125c-1.723,0-3.125,1.402-3.125,3.125s1.402,3.125,3.125,3.125h3.625c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"></path><circle cx="13.25" cy="12.75" r="2.75"></circle></g></svg> 4650 <span class="hidden sm:block">Breadcrumb</span> 4651 </a> 4652 </li> 4653 </ol> 4654 </div> 4655 4656 </div> 4657 </div> 4658 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/breadcrumb" data-turbo-frame="_top"> 4659 <div class="h-48"></div> 4660 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4661 Breadcrumb 4662 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4663 </p> 4664 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 4665 </a> 4666</li> 4667 4668 <li class="relative"> 4669 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4670 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4671 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4671k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4672 <span class="text-xs">?</span> 4673 </button> 4674 4675 <template data-popover-target="content"> 4676 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4677 <div class="space-y-2"> 4678 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4679 4680 <div class="flex items-center gap-1.5 text-xs"> 4681 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4682 <span class="flex grow gap-2">Tailwind CSS</span> 4683 </div> 4684 4685 </div> 4686 </div> 4687 </template> 4688 </div> 4689 4690 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4691 <div class="flex items-center gap-x-3"> 4692 <input type="checkbox" id="checked-checkbox"> 4693 <label for="checked-checkbox" class="inline-block select-none">Checkbox input</label> 4694 </div> 4695 </div> 4696 </div> 4697 <a href="/docs/checkbox" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4698 <div class="h-48"></div> 4699 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4700 Checkbox 4701 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4702 </p> 4703 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 4704 </a> 4705</li> 4706 4707 <li class="relative"> 4708 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4709 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4710 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4710k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4711 <span class="text-xs">?</span> 4712 </button> 4713 4714 <template data-popover-target="content"> 4715 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4716 <div class="space-y-2"> 4717 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4718 4719 <div class="flex items-center gap-1.5 text-xs"> 4720 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4721 <span class="flex grow gap-2">Tailwind CSS</span> 4722 </div> 4723 4724 <div class="flex items-center gap-1.5 text-xs"> 4725 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4725ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4726 <g class="fill-neutral-800 dark:fill-white"> 4727 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4728 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4729 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4730 </g> 4731 </svg> 4732 <span class="flex grow gap-2">Stimulus</span> 4733 </div> 4734 </div> 4735 </div> 4736 </template> 4737 </div> 4738 4739 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4740 <div data-controller="collapsible" data-collapsible-open-value="false" data-state="closed" class="w-[350px] space-y-2"> 4741 <!-- Header with toggle button --> 4742 <div class="flex items-center justify-between space-x-4"> 4743 <h4 class="text-xs font-semibold">You starred 2 repositories</h4> 4744 4745 <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-1.5 -sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200" data-action="click->
4745collapsible#toggle"> 4746 <!-- Collapsed state icon (visible by default) --> 4747 4748 <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute transition-opacity duration-200 ease-in-out size-3.5" style="opacity: 0;"> 4749 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 4750 <polyline points="12.5 6.25 9 2.75 5.5 6.25"></polyline> 4751 <polyline points="12.5 11.75 9 15.25 5.5 11.75"></polyline> 4752 </g> 4753 </svg> 4754 4755 <!-- Expanded state icon (hidden by default) --> 4756 <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="transition-opacity duration-200 ease-in-out size-3.5" style="opacity: 0;"> 4757 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 4758 <polyline points="5.5 3.5 9 7 12.5 3.5"></polyline> 4759 <polyline points="5.5 14.5 9 11 12.5 14.5"></polyline> 4760 </g> 4761 </svg> 4762 4763 <span class="sr-only">Toggle</span> 4764 </button> 4765 </div> 4766 4767 <!-- Always visible content --> 4768 <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-3 py-2 font-mono text-xs">rails/rails</div> 4769 4770 <!-- Collapsible content --> 4771 <div data-collapsible-target="content" data-state="closed" class="space-y-2 overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0; opacity: 0;"> 4772 <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-3 py-2 font-mono text-xs">hotwired/stimulus</div> 4773 </div> 4774 </div> 4775 </div> 4776 </div> 4777 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/collapsible" data-turbo-frame="_top"> 4778 <div class="h-48"></div> 4779 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4780 Collapsible 4781 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4782 </p> 4783 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p> 4784 </a> 4785</li> 4786 4787 <li class="relative"> 4788 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 4789 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 4790 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 4791 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
47916,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 4792 Pro 4793 </a> 4794 </div> 4795 </div> 4796 4797 <div class="pointer-events-none absolute inset-0 top-0 left-0"> 4798 <div class="pointer-events-auto absolute top-4 right-4 z-10 inline-block" data-controller="popover"> 4799 <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm leading-5 font-semibold text-neutral-800 hover:text-neutral-900 focus:outline-offset-2 focus:outline-neutral-500 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200"> 4800 <span class="text-xs">?</span> 4801 </button> 4802 4803 <template data-popover-target="content"> 4804 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4805 <div class="space-y-2"> 4806 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 4807 4808 <div class="flex items-center gap-1.5 text-xs"> 4809 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4810 <span class="flex grow gap-2">Tailwind CSS</span> 4811 </div> 4812 4813 <div class="flex items-center gap-1.5 text-xs"> 4814 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4814ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4815 <g class="fill-neutral-800 dark:fill-white"> 4816 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4817 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4818 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4819 </g> 4820 </svg> 4821 <span class="flex grow gap-2">Stimulus</span> 4822 </div> 4823 </div> 4824 </div> 4825 </template> 4826 </div> 4827 4828 <div class="pointer-events-auto relative flex h-48 items-center justify-center rounded-t-xl border border-black/10 bg-white p-8 md:p-10 dark:border-white/20 dark:bg-black/80">
4829 <div id="drawer-preview" class="group"> 4830 <a class="hidden p-1 align-middle group-hover:inline-block" href="#drawer-preview"> 4831 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500" viewBox="0 0 24 24" fill="currentColor"> 4832 <path fill-rule="evenodd" d="M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z" clip-rule="evenodd"></path> 4833 </svg> 4834 </a> 4835 </div> 4836 <div class="not-prose"> 4837 <div data-controller="drawer" data-drawer-snap-points-value='["auto"]'> 4838 <button data-action="drawer#show:prevent" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Open Drawer</button> 4839 4840 <dialog data-drawer-target="dialog" data-action="mousedown->drawer#backdropClose" class="drawer mx-auto w-full max-w-2xl border-x border-t border-black/10 dark:border-white/10"> 4841 <div class="rounded-t-xl bg-white dark:bg-neutral-800"> 4842 <div data-drawer-target="handle" class="cursor-grab select-none active:cursor-grabbing group"> 4843 <div class="flex h-8 w-full items-center justify-center"> 4844 <div class="mx-auto my-4 h-1.5 w-10 rounded-full bg-neutral-200 group-hover:bg-neutral-300 group-active:bg-neutral-400 dark:bg-neutral-700 dark:group-hover:bg-neutral-600 dar
4844k:group-active:bg-neutral-500"></div> 4845 </div> 4846 4847 <div class="border-b border-neutral-200 px-6 pb-4 dark:border-neutral-700"> 4848 <h2 class="text-xl font-semibold text-neutral-900 dark:text-white">Drawer Example</h2> 4849 </div> 4850 </div> 4851 4852 <div class="px-6 pt-4 pb-6"> 4853 <div class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-neutral-200 p-5 dark:border-neutral-700/75"> 4854 <p class="text-sm text-neutral-600 dark:text-neutral-400">Drag down to dismiss or click the button below</p> 4855 </div> 4856 <div class="mt-4 flex gap-2"> 4857 <button data-action="drawer#hide:prevent" type="button" class="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Close Drawer</button> 4858 </div> 4859 </div> 4860 </div> 4861 </dialog> 4862 </div> 4863 </div> 4864 </div> 4865 </div> 4866 <a href="/docs/drawer" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-offset-2 focus:outline-neutral-500 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200"> 4867 <div class="h-48"></div> 4868 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 4869 Drawer 4870 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4871 </p> 4872 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 8 components</p> 4873 </a> 4874</li> 4875 4876 <li class="relative"> 4877 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4878 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4879 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4879k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4880 <span class="text-xs">?</span> 4881 </button> 4882 4883 <template data-popover-target="content"> 4884 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4885 <div class="space-y-2"> 4886 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4887 4888 <div class="flex items-center gap-1.5 text-xs"> 4889 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4890 <span class="flex grow gap-2">Tailwind CSS</span> 4891 </div> 4892 4893 <div class="flex items-center gap-1.5 text-xs"> 4894 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4894ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4895 <g class="fill-neutral-800 dark:fill-white"> 4896 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4897 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4898 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4899 </g> 4900 </svg> 4901 <span class="flex grow gap-2">Stimulus</span> 4902 </div> 4903 </div> 4904 </div> 4905 </template> 4906 </div> 4907 4908 <div data-controller="os-detect" class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4909 <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" 4910 data-controller="tooltip hotkey" 4911 data-tooltip-content="Action performed!" 4912 data-tooltip-placement-value="top" 4913 data-tooltip-trigger-value="focus" 4914 data-action="keydown.meta+shift+o@document->hotkey#click keydown.ctrl+shift+o@document->hotkey#click"> 4915 <kbd data-os-detect-target="mac" class="hidden">â</kbd> 4916 <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd>
4917 <span>+</span> 4918 <kbd>Shift</kbd> 4919 <span>+</span> 4920 <kbd>O</kbd> 4921 </button> 4922 </div> 4923 </div> 4924 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/kbd" data-turbo-frame="_top"> 4925 <div class="h-48"></div> 4926 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4927 KBD & Hotkey 4928 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 4929 </p> 4930 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 4931 </a> 4932</li> 4933 4934 <li class="relative"> 4935 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4936 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4937 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4937k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 4938 <span class="text-xs">?</span> 4939 </button> 4940 4941 <template data-popover-target="content"> 4942 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4943 <div class="space-y-2"> 4944 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4945 4946 <div class="flex items-center gap-1.5 text-xs"> 4947 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 4948 <span class="flex grow gap-2">Tailwind CSS</span> 4949 </div> 4950 4951 <div class="flex items-center gap-1.5 text-xs"> 4952 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4952ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4953 <g class="fill-neutral-800 dark:fill-white"> 4954 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 4955 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 4956 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 4957 </g> 4958 </svg> 4959 <span class="flex grow gap-2">Stimulus</span> 4960 </div> 4961 4962 <div class="flex items-center gap-1.5 text-xs"> 4963 <img alt="PhotoSwipe" class="size-3.5 rounded-sm" src="/assets/photoswipe-logo-b3e92230fc472dfc24be0c4c595b1988efbbfdc9db889d7e9e9fc4f02c5c41c6.webp" /> 4964 <span class="flex grow gap-2">PhotoSwipe</span> 4965 </div> 4966 </div> 4967 </div> 4968 </template> 4969 </div> 4970 4971 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-14 md:py-16 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 4972 <div data-controller="lightbox" data-lightbox-target="gallery" class="max-w-[150px] flex gap-2 flex-wrap justify-center"> 4973 <!-- First 3 visible thumbnails --> 4974 <a href="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe" 4975 data-pswp-src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe" 4976 data-pswp-caption="new-background-v2.png" 4977 class="group relative"> 4978 <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400"
4979 alt="Thumbnail 1" 4980 class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all"> 4981 </a> 4982 4983 <a href="https://images.unsplash.com/photo-1611162617474-5b21e879e113" 4984 data-pswp-src="https://images.unsplash.com/photo-1611162617474-5b21e879e113" 4985 data-pswp-caption="netflix-logo.png" 4986 class="group relative"> 4987 <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=400" 4988 alt="Thumbnail 2" 4989 class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all"> 4990 </a> 4991 4992 <a href="https://images.unsplash.com/photo-1551650975-87deedd944c3" 4993 data-pswp-src="https://images.unsplash.com/photo-1551650975-87deedd944c3" 4994 data-pswp-caption="mobile-responsive.png" 4995 class="group relative"> 4996 <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=400" 4997 alt="Thumbnail 3" 4998 class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all"> 4999 </a> 5000 5001 <!-- +2 more indicator --> 5002 <a href="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900" 5003 data-pswp-src="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900" 5004 data-pswp-caption="dashboard-analytics.jpg" 5005 class="group relative cursor-pointer"> 5006 <div class="size-12 rounded bg-neutral-100 dark:bg-neutral-800 ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all flex items-center justify-center"> 5007 <span class="text-base font-medium text-neutral-600 dar
5007k:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">+2</span> 5008 </div> 5009 </a> 5010 5011 <!-- Hidden last image --> 5012 <a href="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900" 5013 data-pswp-src="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900" 5014 data-pswp-caption="person-typing.png" 5015 class="hidden"> 5016 </a> 5017 </div> 5018 </div> 5019 </div> 5020 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/lightbox" data-turbo-frame="_top"> 5021 <div class="h-48"></div> 5022 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5023 Lightbox 5024 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 5025 </p> 5026 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 5027 </a> 5028</li> 5029 5030 <li class="relative"> 5031 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5032 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5033 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5033k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5034 <span class="text-xs">?</span> 5035 </button> 5036 5037 <template data-popover-target="content"> 5038 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5039 <div class="space-y-2"> 5040 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5041 5042 <div class="flex items-center gap-1.5 text-xs"> 5043 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 5044 <span class="flex grow gap-2">Tailwind CSS</span> 5045 </div> 5046 5047 <div class="flex items-center gap-1.5 text-xs"> 5048 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5048ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5049 <g class="fill-neutral-800 dark:fill-white"> 5050 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 5051 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 5052 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 5053 </g> 5054 </svg> 5055 <span class="flex grow gap-2">Stimulus</span> 5056 </div> 5057 </div> 5058 </div> 5059 </template> 5060 </div> 5061 5062 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center overflow-hidden"> 5063 <div class="w-full"> 5064 <div 5065 data-controller="marquee" 5066 data-marquee-speed-value="15" 5067 class="relative overflow-hidden bg-transparent py-4 [--marquee-fade-size:1.25rem] [mask-image:linear-gradient(to_right,transparent,black_var(--marquee-fade-size),black_calc(100%-var(--marquee-fade-size)),transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_var(--marquee-fade-size),black_calc(100%-var(--marquee-fade-size)),transparent)]" 5068 data-action="mouseenter->marquee#pauseAnimation mouseleave->marquee#resumeAnimation" 5069 > 5070 <div data-marquee-target="track" class="relative flex w-full"> 5071 <div data-marquee-target="list" class="flex w-full shrink-0 flex-nowrap items-center justify-around ga
5071p-8"> 5072 <div class="flex items-center space-x-2"> 5073 <svg xmlns="http://www.w3.org/2000/svg" fill="#d30001" viewBox="0 0 235 155" class="h-5"> 5074 <g> 5075 <path d="M180 17.8c-.9-.5-3.4-1.7-9.7-3.5l-.4 6.6c3.3 1.1 6.5 2.3 9.7 3.6l.4-6.7Z"></path> 5076 <path d="M124.9 18.9c-29.2 2.6-65 29.1-86 64.1S15 147.6 15 147.6h79s-15.1-68.9 34.9-96.8c10.9-5.3 45.6-25.1 102.4 16.9 1.8-1.5 3.5-2.7 3.5-2.7s-52-51.9-109.9-46.1Z"></path> 5077 <path d="m54.7 54.7-7.1-6.2c-2.6 2.5-5.1 5-7.4 7.5l7.7 6.6c2.1-2.7 4.4-5.4 6.8-7.9Z"></path> 5078 <path d="M92.5 25 88 18.1c-2.5 1.3-5.1 2.7-7.8 4.3l4.6 7c2.6-1.6 5.1-3.1 7.7-4.4Z"></path> 5079 <path d="M24.5 99.4 13 95.2c-1.9 4.3-4 9.3-5 12l11.5 4.2c1.3-3.4 3.4-8.3 5-12Z"></path> 5080 <path d="M133.1 14.5h1l-2-6.1c-3.1 0-6.3.2-9.6.6l1.9 5.9c2.9-.3 5.8-.4 8.7-.4Z"></path> 5081 <path d="M97 127.6c.2 5.3.7 9.6 1.2 12.6l12 4.3c-.9-3.9-1.8-8.3-2.4-13L97 127.6Z"></path> 5082 <path d="m137.9 51.3 2.3 6.9c2.9-1.4 5.8-2.6 8.7-3.5l-2.2-6.6c-3.4 1-6.3 2.1-8.8 3.2Z"></path> 5083 <path d="M169.7 52c3.3.1 6.6.5 9.9 1.2l.4-6.2c-3.4-.7-6.7-1.1-9.9-1.3l-.4 6.3Z"></path> 5084 <path d="M101.5 91.2c-1.3 3.7-2.2 7.4-3 11l8.1 6.4c.4-3.9 1.1-7.8 2.1-11.7l-7.2-5.7Z"></path> 5085 <path d="m113 70 4.8 7.2c1.7-2.5 3.7-4.8 5.9-7.1l-4.5-6.8c-2.3 2.1-4.4 4.4-6.2 6.7Z"></path> 5086 </g> 5087 </svg> 5088 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Ruby on Rails</span> 5089 </div> 5090 <div class="flex items-center space-x-2"> 5091 <svg class="size-4 rounded-sm" width="60" height="60" viewB
5091ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5092 <g class="fill-neutral-800 dark:fill-white"> 5093 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 5094 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 5095 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 5096 </g> 5097 </svg> 5098 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Stimulus</span> 5099 </div> 5100 <div class="flex items-center space-x-2"> 5101 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="h-5"><path fill="#23B2E7" fill-rule="evenodd" d="M10 5Q6 5 5 8.334q1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C11.386 9.041 12.522 10 15 10q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C13.614 5.96 12.479 5 10 5m-5 5q-4 0-5 3.334 1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C6.386 14.041 7.521 15 10 15q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C8.614 10.96 7.478 10 5 10" clip-rule="evenodd"></path></svg>
5102 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Tailwind CSS</span> 5103 </div> 5104 <div class="flex items-center space-x-2"> 5105 <img class="size-5" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" /> 5106 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Rails Blocks</span> 5107 </div> 5108 </div> 5109 </div> 5110 </div> 5111 </div> 5112 </div> 5113 </div> 5114 <a href="/docs/marquee" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5115 <div class="h-48"></div> 5116 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5117 Marquee 5118 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 5119 </p> 5120 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 5121 </a> 5122</li> 5123 5124 <li class="relative"> 5125 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5126 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5127 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5127k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5128 <span class="text-xs">?</span> 5129 </button> 5130 5131 <template data-popover-target="content"> 5132 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5133 <div class="space-y-2"> 5134 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5135 5136 <div class="flex items-center gap-1.5 text-xs"> 5137 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 5138 <span class="flex grow gap-2">Tailwind CSS</span> 5139 </div> 5140 5141 <div class="flex items-center gap-1.5 text-xs"> 5142 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5142ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5143 <g class="fill-neutral-800 dark:fill-white"> 5144 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 5145 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 5146 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 5147 </g> 5148 </svg> 5149 <span class="flex grow gap-2">Stimulus</span> 5150 </div> 5151 </div> 5152 </div> 5153 </template> 5154 </div> 5155 5156 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 5157 <div class="w-full max-w-sm"> 5158 <div class="relative" data-controller="password"> 5159 <input type="password" 5160 id="preview_password" 5161 name="password" 5162 class="form-control !pr-12" 5163 placeholder="Enter your password" 5164 value="SecurePass123!" 5165 data-password-target="input"> 5166 <button type="button" 5167 class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors" 5168 data-action="click->
5168password#toggle" 5169 aria-label="Toggle password visibility"> 5170 <span data-password-target="toggleIcon"> 5171 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 11.75C10.5188 11.75 11.75 10.5188 11.75 9C11.75 7.48122 10.5188 6.25 9 6.25C7.48122 6.25 6.25 7.48122 6.25 9C6.25 10.5188 7.48122 11.75 9 11.75Z"></path> <path d="M15.9557 7.88669C16.3481 8.57939 16.3481 9.42049 15.9557 10.1132C15.0087 11.7849 12.7944 14.4999 9 14.4999C5.2056 14.4999 2.9912 11.7849 2.0443 10.1132C1.6519 9.42049 1.6519 8.57939 2.0443 7.88669C2.9913 6.21499 5.2056 3.5 9 3.5C12.7944 3.5 15.0088 6.21499 15.9557 7.88669Z"></path></g></svg> 5172 </span> 5173 </button> 5174 </div> 5175 </div> 5176 </div> 5177 </div> 5178 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/password" data-turbo-frame="_top"> 5179 <div class="h-48"></div> 5180 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5181 Password 5182 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 5183 </p> 5184 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 5185 </a> 5186</li> 5187 5188 <li class="relative"> 5189 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5190 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5191 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5191k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5192 <span class="text-xs">?</span> 5193 </button> 5194 5195 <template data-popover-target="content"> 5196 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5197 <div class="space-y-2"> 5198 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5199 5200 <div class="flex items-center gap-1.5 text-xs"> 5201 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 5202 <span class="flex grow gap-2">Tailwind CSS</span> 5203 </div> 5204 5205 </div> 5206 </div> 5207 </template> 5208 </div> 5209 5210 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 5211 <div class="flex items-center gap-x-3"> 5212 <input name="radio" type="radio" id="checked-radio"> 5213 <label for="checked-radio" class="inline-block select-none">Radio input</label> 5214 </div> 5215 </div> 5216 </div> 5217 <a href="/docs/radio" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5218 <div class="h-48"></div> 5219 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5220 Radio 5221 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 5222 </p> 5223 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 5224 </a> 5225</li> 5226 5227 <li class="relative"> 5228 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5229 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5230 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5230k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5231 <span class="text-xs">?</span> 5232 </button> 5233 5234 <template data-popover-target="content"> 5235 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5236 <div class="space-y-2"> 5237 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5238 5239 <div class="flex items-center gap-1.5 text-xs"> 5240 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 5241 <span class="flex grow gap-2">Tailwind CSS</span> 5242 </div> 5243 5244 </div> 5245 </div> 5246 </template> 5247 </div> 5248 5249 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 5250 <label class="group flex items-center cursor-pointer"> 5251 <div class="relative"> 5252 <input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch"> 5253 <!-- Background element --> 5254 <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dar
5254k:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div> 5255 <!-- Round element with icons inside --> 5256 <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800"> 5257 <!-- X icon for unchecked state --> 5258 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0 dark:text-neutral-500" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g></svg> 5259 <!-- Checkmark icon for checked state --> 5260 <svg xmlns="http://www.w3.org/2000/svg" class="absolute size-4 text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100 dark:text-neutral-100" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline></g></svg> 5261 </div> 5262 </div> 5263 </label> 5264 </div> 5265 </div> 5266 <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/switch" data-turbo-frame="_top"> 5267 <div class="h-48"></div> 5268 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5269 Switch 5270 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 5271 </p> 5272 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 5273 </a> 5274</li> 5275 5276 <li class="relative"> 5277 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5278 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5279 <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5279k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5280 <span class="text-xs">?</span> 5281 </button> 5282 5283 <template data-popover-target="content"> 5284 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5285 <div class="space-y-2"> 5286 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5287 5288 <div class="flex items-center gap-1.5 text-xs"> 5289 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 5290 <span class="flex grow gap-2">Tailwind CSS</span> 5291 </div> 5292 5293 </div> 5294 </div> 5295 </template> 5296 </div> 5297 5298 <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center"> 5299 <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-4 text-center"> 5300 <!-- Star Rating --> 5301 <div class="flex justify-center mb-2"> 5302 <div class="flex items-center space-x-1"> 5303 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 5304 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 5305 </svg> 5306 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 5307 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 5308 </svg> 5309 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 5310 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 5311 </svg> 5312 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 5313 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 5314 </svg> 5315 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 5316 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> 5317 </svg> 5318 </div> 5319 </div> 5320 5321 <blockquote class="text-sm text-neutral-700 dark:text-neutral-300 mb-2"> 5322 "Outstanding quality!" 5323 </blockquote> 5324 5325 <footer> 5326 <div class="flex items-center justify-center"> 5327 <img class="size-8 rounded-full object-cover shrink-0" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Michael Rodriguez"> 5328 <div class="ml-3 text-left"> 5329 <div class="text-sm font-semibold text-neutral-900 dark:text-white truncate">Michael Rodriguez</div> 5330 <div class="text-xs text-neutral-500 dark:text-neutral-400 truncate">Verified Customer</div> 5331 </div> 5332 </div> 5333 </footer> 5334 </div> 5335 </div> 5336 </div> 5337 <a href="/docs/testimonial" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200"> 5338 <div class="h-48"></div> 5339 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5340 Testimonial 5341 <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg> 5342 </p> 5343 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p> 5344 </a> 5345</li> 5346 5347 </ul> 5348 </div> 5349 </div> 5350 </div> 5351 <!-- End Col --> 5352 </div> 5353 <!-- End Grid --> 5354 </div> 5355 <!-- End Right Content --> 5356 </div> 5357 <!-- End Item --> 5358 5359 <!-- Item - First half of 2025 --> 5360 <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8"> 5361 5362 <!-- Icon --> 5363 <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600"> 5364 <div class="relative z-10 size-6 flex justify-center items-center">
5365 <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div> 5366 </div> 5367 </div> 5368 <!-- End Icon --> 5369 5370 <!-- Right Content --> 5371 <div class="grow pb-8"> 5372 <!-- Grid --> 5373 <div class="grid grid-cols-1 gap-6 md:gap-12"> 5374 <div> 5375 <div class="space-y-3"> 5376 <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md"> 5377 <h2 class="font-mono text-neutral-800 dark:text-neutral-200"> 5378 First half of 2025 5379 </h2> 5380 </div> 5381 <p class="text-neutral-500 dark:text-neutral-400"> 5382 During the first half of 2025, I built the initial version of Rails Blocks. It launched with 20 components after months of work. 5383 </p> 5384 </div> 5385 </div> 5386 <!-- End Col --> 5387 </div> 5388 <!-- End Grid --> 5389 </div> 5390 <!-- End Right Content --> 5391 </div> 5392 <!-- End Item --> 5393 </div> 5394 <!-- End Timeline --> 5395 </div> 5396 </div> 5397 5398 <div class="relative mt-24"> 5399 <div class="mx-auto"> 5400 <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800"> 5401 <div data-controller="newsletter" 5402 class="max-w-xs"> 5403 <div data-newsletter-target="form"> 5404 <form data-action="submit->newsletter#submit" 5405 class="space-y-3"> 5406 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 5407 <input type="email" 5408 data-newsletter-target="email" 5409 placeholder="Enter your email..." 5410 class="form-control" 5411 5412 required> 5413 <div class="flex justify-center"> 5414 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 5415 </div> 5416 <button type="submit" 5417 data-newsletter-target="submitButton" 5418 class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"> 5419 Subscribe to the newsletter 5420 </button> 5421 </form> 5422 <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]"> 5423 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 5424 </div> 5425 </div> 5426 5427 <div data-newsletter-target="successMessage" 5428 class="text-center py-4" 5429 style="display: none;"> 5430 <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50"> 5431 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 5432 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 5433 </svg> 5434 </div> 5435 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
5436 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 5437 </div> 5438 </div> 5439 </div> 5440 </div> 5441</div> 5442 5443 <div class="mt-4 flex justify-center"> 5444 <a href="/feeds/documentation.xml" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 5445 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></g></svg> 5446 Subscribe via RSS 5447 </a> 5448 </div> 5449</div> 5450 5451 </main> 5452 5453<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> 5454 5455<footer class="mt-24 bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700"> 5456 <div class="max-w-5xl mx-auto w-full pb-8 pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8"> 5457 5458 <!-- Grid --> 5459 <div class="flex flex-col justify-between md:flex-row gap-5 mb-14"> 5460 5461 <div> 5462 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Popular Components</h4> 5463 5464 <ul class="grid space-y-2"> 5465 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/combobox">Combobox</a></li> 5466 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/toast">Toast</a></li> 5467 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/sidebar">Sidebar</a></li> 5468 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/datatable">Datatable</a></li> 5469 </ul> 5470 </div> 5471 <!-- End Col --> 5472 5473 <div> 5474 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Company</h4> 5475 5476 <ul class="grid space-y-2"> 5477 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/changelog">Changelog</a></li> 5478 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/themes">Themes</a></li> 5479 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" target="_blank" href="https://railsblocks.featurebase.app/roadmap">Roadmap</a></li> 5480 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focu
5480s:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/authors-note">About</a></li> 5481 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://github.com/Rails-Blocks/components" target="_blank">Open Source</a></li> 5482 <li><a class="hidden text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/blog">Blog</a></li> 5483 </ul> 5484 </div> 5485 <!-- End Col --> 5486 5487 <div> 5488 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Pricing</h4> 5489 5490 <ul class="grid space-y-2"> 5491 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/pro">Pro Access</a></li> 5492 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/discount">Student Discount</a></li> 5493 </ul> 5494 </div> 5495 <!-- End Col --> 5496 5497 <div> 5498 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Legal</h4> 5499 5500 <ul class="grid space-y-2"> 5501 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/terms">Terms</a></li> 5502 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/privacy">Privacy</a></li> 5503 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/license">License</a></li> 5504 </ul> 5505 </div> 5506 <!-- End Col --> 5507 </div> 5508 5509 <div class="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800"> 5510 <div class="flex flex-col md:flex-row-reverse md:justify-between md:items-center gap-6 items-center text-center md:text-left"> 5511 5512 <nav class="flex flex-col sm:flex-row items-center gap-3"> 5513 <div class="flex items-center"> 5514 <div class="text-sm group relative bg-neutral-50 text-neutral-700 border border-neutral-200 px-2.5 py-1.5 rounded-md dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-100"> 5515 <div class="absolute w-full pr-8 pointer-events-none opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out transform -translate-y-6 group-hover:-translate-y-8"> 5516 <img class="rounded-full mx-auto size-8" alt="Sandu" src="/assets/founder-avatar-da341a93ca736fdd7217be943b75af4bdf1bf0c14ee149b5f11324eb98a5c6dc.webp" /> 5517 </div> 5518 Built by 5519 <a href="https://alexglv.com" target="_blank" class="text-neutral-700 hover:opacity-80 transition font-semibold dark:text-neutral-50 hover:text-neutral-800 dark:hover:text-neutral-50"> 5520 Sandu 5521 </a> 5522 in Paris ð¥ 5523 </div> 5524 </div> 5525 5526 <div class="flex items-center gap-3"> 5527 <a href="https://x.com/alexandruglv" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my ð account" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on X (formerly Twitter)">
5528 <span class="sr-only">Follow Sandu on X (formerly Twitter)</span> 5529 <svg class="inline-block size-5 pb-0.5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"> 5530 <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"> 5531 </svg> 5532 </a> 5533 <a href="https://www.youtube.com/channel/UCNRPTZcDwaEkoPQsLURm6WQ" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my YouTube channel" data-tooltip-delay-value="500" target="_blank" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on YouTube"> 5534 <span class="sr-only">Follow Sandu on YouTube</span> 5535 <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z"></path><circle cx="9" cy="9" r="7.25"></circle></g></svg> 5536 </a> 5537 <a class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Send me an email" data-tooltip-delay-value="500" href="mailto:[email protected]" aria-label="Send me an email"> 5538 <span class="sr-only">Send me an email</span> 5539 <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733"></path><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg> 5540 </a> 5541 <a href="/feeds/documentation.xml" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Subscribe to RSS feed" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="RSS Feed"> 5542 <span class="sr-only">RSS Feed</span> 5543 <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.5 3.5a11 11 0 0 1 11 11M3.5 7.5a7 7 0 0 1 7 7M4.5 13.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path></g></svg> 5544 </a> 5545 </div> 5546 </nav> 5547
5548 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 5549 © 2026 Rails Blocks 5550 </div> 5551 </div> 5552 </div> 5553 <!-- End Grid --> 5554 </div> 5555</footer> 5556 5557
5557<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"dd73a264958e4d48a84300a88963d377","r":1,"spa":2}' crossorigin="anonymous"></script>
5557 5558</body> 5559</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.