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 | Ruby on Rails UI components using Tailwind CSS and Stimulus</title> 5<meta name="description" content="Ruby on Rails UI components built with Stimulus and Tailwind CSS, simply copy and paste the RoR code into your app or use our CLI & MCP server." /> 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/"> 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/"> 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/"> 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="lWJ_m4ouELxvnwHm2P0nwImWsLXEXLXlXJrPzq28yS1ExrDz1eXWNSt-77MPTI8AWFD0aQbAwiJVU-zCfKUZog" /> 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="43a27dff224a4484b2c31ba2747ce47d-370901ec0a354ecc-1"> 370<meta name="baggage" content="sentry-trace_id=43a27dff224a4484b2c31ba2747ce47d,sentry-sample_rate=1.0,sentry-sample_rand=0.659744,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 mt-14 px-4 sm:px-6 max-w-7xl"> 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"> 733 <div class="mx-auto"> 734 <div class="text-center max-w-xl mx-auto"> 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">UI components</span> 737 <span class="block text-red-600 dark:text-red-500">for your Rails app</span> 738 </h1> 739 <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"> 740 A ready-to-use collection of 300+ UI components with minimal dependencies and a focus on simplicity 741 </p> 742 </div> 743 744 <div class="my-4 flex flex-col md:flex-row items-center justify-center whitespace-nowrap gap-1.5"> 745 <div class="flex items-center gap-1.5 lg:gap-2.5"> 746 <svg xmlns="http://www.w3.org/2000/svg" fill="#d30001" viewBox="0 0 235 155" class="h-4"> 747 <g> 748 <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"/> 749 <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"/> 750 <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"/> 751 <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"/> 752 <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"/> 753 <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"/> 754 <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"/> 755 <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"/> 756 <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"/> 757 <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"/> 758 <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"/> 759 </g> 760 </svg>
761 <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base"> 762 Built for <span class="font-medium">Rails</span> v7+ 763 </span> 764 </div> 765 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 hidden md:block"><path fill="currentColor" d="M10.003 11.108a1.183 1.183 0 0 1-1.176-1.176c0-.644.532-1.176 1.176-1.176s1.176.532 1.176 1.176-.532 1.176-1.176 1.176"></path></svg> 766 <div class="flex items-center gap-1.5 lg:gap-2.5"> 767 <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>
768 <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base"> 769 Styled with <span class="font-medium">TailwindCSS</span> v4+ 770 </span> 771 </div> 772 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 hidden md:block"><path fill="currentColor" d="M10.003 11.108a1.183 1.183 0 0 1-1.176-1.176c0-.644.532-1.176 1.176-1.176s1.176.532 1.176 1.176-.532 1.176-1.176 1.176"></path></svg> 773 <div class="flex items-center gap-1.5 lg:gap-2.5"> 774 <svg class="size-3.5 rounded-sm" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 775 <g class="fill-neutral-800 dark:fill-white"> 776 <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> 777 <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> 778 <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> 779 </g> 780 </svg>
781 <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base"> 782 Interactive with <span class="font-medium">Stimulus</span> 783 </span> 784 </div> 785 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 hidden md:block"><path fill="currentColor" d="M10.003 11.108a1.183 1.183 0 0 1-1.176-1.176c0-.644.532-1.176 1.176-1.176s1.176.532 1.176 1.176-.532 1.176-1.176 1.176"></path></svg> 786 <div class="flex items-center gap-1.5 lg:gap-2.5"> 787 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-neutral-800 dark:text-neutral-200" viewBox="0 0 97 84" fill="none"> 788 <path fill-rule="evenodd" clip-rule="evenodd" d="M49.4814 0C48.7181 0 48.2362 0.820805 48.6082 1.48737L70.8119 41.269C71.0655 41.7233 71.0655 42.2767 70.8119 42.731L48.6082 82.5126C48.2362 83.1792 48.7181 84 49.4814 84H71.8975C72.4412 84 72.9423 83.7058 73.2073 83.231L95.8119 42.731C96.0655 42.2767 96.0655 41.7233 95.8119 41.2689L73.2073 0.76895C72.9423 0.2942 72.4412 0 71.8975 0H49.4814ZM47.3741 41.269C47.6278 41.7233 47.6278 42.2767 47.3741 42.731L24.6554 83.4355C24.2739 84.119 23.2905 84.119 22.909 83.4355L0.190204 42.731C-0.063401 42.2767 -0.0634013 41.7233 0.190203 41.269L22.909 0.564484C23.2905 -0.119028 24.2739 -0.119029 24.6554 0.564482L47.3741 41.269Z" fill="currentColor"></path> 789 </svg>
790 <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base"> 791 <span class="font-medium">ViewComponent</span> support 792 </span> 793 </div> 794 </div> 795 796 <div class="my-6 bg-white rounded-xl p-4 md:p-6 w-full max-w-3xl mx-auto border dark:bg-neutral-800 border-black/10 dark:border-white/10"> 797 <form data-controller="autosubmit component-search" data-turbo-frame="component_list" action="/" accept-charset="UTF-8" method="get"> 798 <div class="flex flex-col gap-1 items-start w-full"> 799 <div class="flex items-center justify-between w-full"> 800 <label for="search_query" class="block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1">Search Components</label> 801 <a class="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200" onclick="var input = document.getElementById('search_query'); if(input) { input.value = ''; input.focus(); var form = input.closest('form'); if (form) { form.requestSubmit(); } } return false;" href="#">Clear search</a> 802 </div> 803 <div class="relative flex items-center w-full"> 804 <div class="pointer-events-none absolute inset-y-0 left-0 my-px ml-px flex w-10 items-center justify-center rounded-l text-neutral-500 dark:text-neutral-400"> 805 <svg class="hi-mini hi-magnifying-glass inline-block size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 806 <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path> 807 </svg> 808 </div> 809 <input type="text" name="search" id="search_query" placeholder="Search for components..." class="!pl-10 w-full form-control" data-action="input->component-search#trackSearch" data-component-search-target="searchInput" autocomplete="off" /> 810 </div> 811 </div> 812</form> </div> 813 814 <turbo-frame id="component_list"> 815 <div class="mt-12"> 816 817 818 <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6"> 819 <li class="relative"> 820 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 821 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 822 <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
822k: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"> 823 <span class="text-xs">?</span> 824 </button> 825 826 <template data-popover-target="content"> 827 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 828 <div class="space-y-2"> 829 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 830 831 <div class="flex items-center gap-1.5 text-xs"> 832 <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> 833 <span class="flex grow gap-2">Tailwind CSS</span> 834 </div> 835 836 <div class="flex items-center gap-1.5 text-xs"> 837 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
837ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 838 <g class="fill-neutral-800 dark:fill-white"> 839 <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> 840 <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> 841 <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> 842 </g> 843 </svg> 844 <span class="flex grow gap-2">Stimulus</span> 845 </div> 846 </div> 847 </div> 848 </template> 849 </div> 850 851 <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"> 852 853 <div class="w-full" data-controller="accordion" data-orientation="vertical"> 854 855 <div data-accordion-target="item" data-state="closed" data-orientation="vertical" class="border-b pb-2 border-neutral-200 dark:border-neutral-700"> 856 <p data-orientation="vertical" data-state="closed" class="flex text-base font-semibold mt-2 mb-0"> 857 <button 858 type="button" 859 data-accordion-target="trigger" 860 data-action="click->
860accordion#toggle" 861 aria-controls="accordion-content-0" 862 aria-expanded="false" 863 data-state="closed" 864 data-orientation="vertical" 865 id="accordion-trigger-0" 866 tabindex="0" 867 class="text-xs flex flex-1 items-center text-left justify-between py-1 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:outline-offset-2 px-2" 868 > 869 Is the accordion accessible? 870 <svg 871 data-accordion-target="icon" 872 xmlns="http://www.w3.org/2000/svg" 873 width="24" 874 height="24" 875 viewBox="0 0 24 24" 876 fill="none" 877 stroke="currentColor" 878 stroke-width="2" 879 stroke-linecap="round" 880 stroke-linejoin="round" 881 class="size-4 shrink-0 transition-transform duration-300" 882 > 883 <path d="m6 9 6 6 6-6"></path> 884 </svg> 885 </button> 886 </p> 887 <div 888 data-accordion-target="content" 889 data-state="closed" 890 id="accordion-content-0" 891 role="region" 892 aria-labelledby="accordion-trigger-0" 893 data-orientation="vertical" 894 class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" 895 hidden 896 > 897 <div class="overflow-hidden min-h-0"> 898 <div class="text-xs opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 899 <p class="my-2 px-2">Yes, just press the <kbd>â</kbd> <kbd>â</kbd> <kbd>Tab</kbd> <kbd>âµ</kbd> & <kbd>Space</kbd> keys ð.</p> 900 </div> 901 </div> 902 </div> 903 </div> 904 <div data-accordion-target="item" data-state="closed" data-orientation="vertical" class="border-b pb-2 border-neutral-200 dark:border-neutral-700"> 905 <p data-orientation="vertical" data-state="closed" class="flex text-base font-semibold mt-2 mb-0"> 906 <button 907 type="button" 908 data-accordion-target="trigger" 909 data-action="click->accordion#toggle" 910 aria-controls="accordion-content-1" 911 aria-expanded="false" 912 data-state="closed" 913 data-orientation="vertical" 914 id="accordion-trigger-1" 915 tabindex="0" 916 class="text-xs flex flex-1 items-center text-left justify-between py-1 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:outline-offset-2 px-2" 917 > 918 Is it styled? 919 <svg 920 data-accordion-target="icon" 921 xmlns="http://www.w3.org/2000/svg" 922 width="24" 923 height="24"
924 viewBox="0 0 24 24" 925 fill="none" 926 stroke="currentColor" 927 stroke-width="2" 928 stroke-linecap="round" 929 stroke-linejoin="round" 930 class="size-4 shrink-0 transition-transform duration-300" 931 > 932 <path d="m6 9 6 6 6-6"></path> 933 </svg> 934 </button> 935 </p> 936 <div 937 data-accordion-target="content" 938 data-state="closed" 939 id="accordion-content-1" 940 role="region" 941 aria-labelledby="accordion-trigger-1" 942 data-orientation="vertical" 943 class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" 944 hidden 945 > 946 <div class="overflow-hidden min-h-0"> 947 <div class="text-xs opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 948 <p class="my-2 px-2">Yep, it comes Tailwind CSS styles that you can easily customize.</p> 949 </div> 950 </div> 951 </div> 952 </div> 953 <div data-accordion-target="item" data-state="closed" data-orientation="vertical" class="border-b pb-2 border-neutral-200 dark:border-neutral-700"> 954 <p data-orientation="vertical" data-state="closed" class="flex text-base font-semibold mt-2 mb-0"> 955 <button 956 type="button" 957 data-accordion-target="trigger" 958 data-action="click->accordion#toggle" 959 aria-controls="accordion-content-2" 960 aria-expanded="false" 961 data-state="closed" 962 data-orientation="vertical" 963 id="accordion-trigger-2" 964 tabindex="0" 965 class="text-xs flex flex-1 items-center text-left justify-between py-1 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:outline-offset-2 px-2" 966 > 967 Does it have animations? 968 <svg 969 data-accordion-target="icon" 970 xmlns="http://www.w3.org/2000/svg" 971 width="24" 972 height="24"
973 viewBox="0 0 24 24" 974 fill="none" 975 stroke="currentColor" 976 stroke-width="2" 977 stroke-linecap="round" 978 stroke-linejoin="round" 979 class="size-4 shrink-0 transition-transform duration-300" 980 > 981 <path d="m6 9 6 6 6-6"></path> 982 </svg> 983 </button> 984 </p> 985 <div 986 data-accordion-target="content" 987 data-state="closed" 988 id="accordion-content-2" 989 role="region" 990 aria-labelledby="accordion-trigger-2" 991 data-orientation="vertical" 992 class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" 993 hidden 994 > 995 <div class="overflow-hidden min-h-0"> 996 <div class="text-xs opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 997 <p class="my-2 px-2">Yes, with smooth animations for opening and closing.</p> 998 </div> 999 </div> 1000 </div> 1001 </div> 1002 </div> 1003 </div> 1004 </div> 1005 <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/accordion" data-turbo-frame="_top"> 1006 <div class="h-48"></div> 1007 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1008 Accordion 1009 <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> 1010 </p> 1011 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 11 components</p> 1012 </a> 1013</li> 1014 1015 1016 <li class="relative"> 1017 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1018 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1019 <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
1019k: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"> 1020 <span class="text-xs">?</span> 1021 </button> 1022 1023 <template data-popover-target="content"> 1024 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1025 <div class="space-y-2"> 1026 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1027 1028 <div class="flex items-center gap-1.5 text-xs"> 1029 <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> 1030 <span class="flex grow gap-2">Tailwind CSS</span> 1031 </div> 1032 1033 </div> 1034 </div> 1035 </template> 1036 </div> 1037 1038 <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"> 1039 <div class="rounded-xl border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/50"> 1040 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 1041 <div class="flex items-center h-full"> 1042 <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"> 1043 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 1044 <circle cx="9" cy="9" r="7.25"></circle> 1045 <path d="M9 5.75V9.25"></path> 1046 <path d="M9 12.25H9.0075"></path> 1047 </g> 1048 </svg> 1049 </div> 1050 <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200"> 1051 Information 1052 </h3> 1053 <div></div>
1054 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 1055 Alert description. 1056 </div> 1057 </div> 1058 </div> 1059 </div> 1060 </div> 1061 <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"> 1062 <div class="h-48"></div> 1063 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1064 Alert 1065 <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> 1066 </p> 1067 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 1068 </a> 1069</li> 1070 1071 1072 <li class="relative"> 1073 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1074 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1075 <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
1075k: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"> 1076 <span class="text-xs">?</span> 1077 </button> 1078 1079 <template data-popover-target="content"> 1080 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1081 <div class="space-y-2"> 1082 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1083 1084 <div class="flex items-center gap-1.5 text-xs"> 1085 <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> 1086 <span class="flex grow gap-2">Tailwind CSS</span> 1087 </div> 1088 1089 <div class="flex items-center gap-1.5 text-xs"> 1090 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1090ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1091 <g class="fill-neutral-800 dark:fill-white"> 1092 <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> 1093 <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> 1094 <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> 1095 </g> 1096 </svg> 1097 <span class="flex grow gap-2">Stimulus</span> 1098 </div> 1099 1100 <div class="flex items-center gap-1.5 text-xs"> 1101 <img alt="Number flow" class="size-3.5" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" /> 1102 <span class="flex grow gap-2">Number flow</span> 1103 </div> 1104 </div> 1105 </div> 1106 </template> 1107 </div> 1108 1109 <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"> 1110 <div 1111 data-controller="clickable-animated-number" 1112 data-clickable-animated-number-initial-value="42" 1113 data-clickable-animated-number-min-value="0" 1114 data-clickable-animated-number-max-value="999" 1115 data-clickable-animated-number-duration-value="1000" 1116 data-action="click->
1116clickable-animated-number#changeNumber" 1117 class="cursor-pointer text-6xl font-bold text-neutral-800 dark:text-white active:scale-90 transition-transform duration-150 ease-out select-none" 1118 > 1119 </div> 1120 </div> 1121 </div> 1122 <a href="/docs/animated-number" 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"> 1123 <div class="h-48"></div> 1124 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1125 Animated Number 1126 <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> 1127 </p> 1128 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 11 components</p> 1129 </a> 1130</li> 1131 1132 1133 <li class="relative"> 1134 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 1135 <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"> 1136 <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"> 1137 <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> 1138 Pro 1139 </a> 1140 </div> 1141 </div> 1142 1143 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1144 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1145 <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
1145k: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"> 1146 <span class="text-xs">?</span> 1147 </button> 1148 1149 <template data-popover-target="content"> 1150 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1151 <div class="space-y-2"> 1152 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1153 1154 <div class="flex items-center gap-1.5 text-xs"> 1155 <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> 1156 <span class="flex grow gap-2">Tailwind CSS</span> 1157 </div> 1158 1159 <div class="flex items-center gap-1.5 text-xs"> 1160 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1160ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1161 <g class="fill-neutral-800 dark:fill-white"> 1162 <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> 1163 <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> 1164 <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> 1165 </g> 1166 </svg> 1167 <span class="flex grow gap-2">Stimulus</span> 1168 </div> 1169 1170 <div class="flex items-center gap-1.5 text-xs"> 1171 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 1172 <span class="flex grow gap-2">Floating UI</span> 1173 </div> 1174 1175 </div> 1176 </div> 1177 </template> 1178 </div> 1179 1180 <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"> 1181 1182 <!-- Search on Focus Autocomplete --> 1183<div class="max-w-xs mx-auto w-full"> 1184 <form class="relative" 1185 data-controller="autocomplete" 1186 data-autocomplete-search-on-focus-value="true" 1187 data-autocomplete-submit-on-select-value="false" 1188 data-autocomplete-show-recent-value="false" 1189 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\"
1189 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\"
1189 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\"
1189 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\"
1189 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\"
1189 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\"
1189 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\"
1189 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\"
1189 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\"
1189 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"}]'> 1190 1191 <div class="relative"> 1192 <input id="search_on_focus_basic_autocomplete" 1193 required 1194 data-autocomplete-target="input" 1195 placeholder="Search brands..." 1196 class="form-control !px-9"> 1197 1198 <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"> 1199 <g fill="currentColor"> 1200 <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> 1201 <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> 1202 </g> 1203 </svg> 1204 1205 <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
1205k:focus-visible:outline-neutral-200"> 1206 <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> 1207 </button> 1208 </div> 1209 1210 <div data-autocomplete-target="results" 1211 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" 1212 role="listbox" 1213 tabindex="-1"> 1214 </div> 1215 </form> 1216</div> 1217 1218 </div> 1219 </div> 1220 <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"> 1221 <div class="h-48"></div> 1222 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1223 Autocomplete Search 1224 <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> 1225 </p> 1226 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center"> 1227 View 10 components 1228 </p> 1229 </a> 1230</li> 1231 1232 1233 <li class="relative"> 1234 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1235 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1236 <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
1236k: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"> 1237 <span class="text-xs">?</span> 1238 </button> 1239 1240 <template data-popover-target="content"> 1241 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1242 <div class="space-y-2"> 1243 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1244 1245 <div class="flex items-center gap-1.5 text-xs"> 1246 <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> 1247 <span class="flex grow gap-2">Tailwind CSS</span> 1248 </div> 1249 1250 <div class="flex items-center gap-1.5 text-xs"> 1251 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1251ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1252 <g class="fill-neutral-800 dark:fill-white"> 1253 <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> 1254 <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> 1255 <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> 1256 </g> 1257 </svg> 1258 <span class="flex grow gap-2">Stimulus</span> 1259 </div> 1260 </div> 1261 </div> 1262 </template> 1263 </div> 1264 1265 <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"> 1266 <div class="w-full max-w-xs"> 1267 <textarea 1268 id="autogrow" 1269 rows="2" 1270 class="form-control min-h-16 max-h-32 small-scrollbar" 1271 placeholder="Start typing and watch the textarea grow..." 1272 data-controller="autogrow" 1273 data-action="input->autogrow#autogrow" 1274 ></textarea> 1275 </div> 1276 </div> 1277 </div> 1278 <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"> 1279 <div class="h-48"></div> 1280 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1281 Autogrow 1282 <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> 1283 </p> 1284 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 1285 </a> 1286</li> 1287 1288 1289 <li class="relative"> 1290 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 1291 <div class="inline relative"> 1292 <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"> 1293 <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"> 1294 <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">
1294<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> 1295 New 1296 </div> 1297 </div> 1298</div> 1299 1300 </div> 1301 1302 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1303 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1304 <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"> 1305 <span class="text-xs">?</span> 1306 </button> 1307 1308 <template data-popover-target="content"> 1309 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1310 <div class="space-y-2"> 1311 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1312 1313 <div class="flex items-center gap-1.5 text-xs"> 1314 <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> 1315 <span class="flex grow gap-2">Tailwind CSS</span> 1316 </div> 1317 </div> 1318 </div> 1319 </template> 1320 </div> 1321 1322 <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"> 1323 <!-- Recommended group overlap: xs -space-x-2, sm -space-x-3, md -space-x-4, lg -space-x-5, xl -space-x-6 --> 1324<div class="flex w-fit -space-x-4 [&>*]:isolate" role="group" aria-label="Project members"> 1325 <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%)]"> 1326 <img 1327 class="size-full rounded-full object-cover" 1328 src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop&crop=face&auto=format&q=80" 1329 alt="Olivia Martin"> 1330 </span> 1331 <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%)]"> 1332 <img 1333 class="size-full rounded-full object-cover" 1334 src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&h=160&fit=crop&crop=face&auto=format&q=80" 1335 alt="Noah Williams"> 1336 </span> 1337 <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%)]"> 1338 <img 1339 class="size-full rounded-full object-cover" 1340 src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=160&h=160&fit=crop&crop=face&auto=format&q=80"
1341 alt="Emma Davis"> 1342 </span> 1343 <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"> 1344 +3 1345 </span> 1346</div> 1347 1348 </div> 1349 </div> 1350 <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"> 1351 <div class="h-48"></div> 1352 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1353 Avatar 1354 <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> 1355 </p> 1356 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 1357 </a> 1358</li> 1359 1360 1361 <li class="relative"> 1362 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1363 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1364 <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
1364k: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"> 1365 <span class="text-xs">?</span> 1366 </button> 1367 1368 <template data-popover-target="content"> 1369 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1370 <div class="space-y-2"> 1371 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1372 1373 <div class="flex items-center gap-1.5 text-xs"> 1374 <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> 1375 <span class="flex grow gap-2">Tailwind CSS</span> 1376 </div> 1377 1378 </div> 1379 </div> 1380 </template> 1381 </div> 1382 1383 <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"> 1384 <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> 1385 </div> 1386 </div> 1387 <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"> 1388 <div class="h-48"></div> 1389 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1390 Badge 1391 <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> 1392 </p> 1393 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 1394 </a> 1395</li> 1396 1397 1398 <li class="relative"> 1399 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1400 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1401 <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
1401k: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"> 1402 <span class="text-xs">?</span> 1403 </button> 1404 1405 <template data-popover-target="content"> 1406 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1407 <div class="space-y-2"> 1408 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1409 1410 <div class="flex items-center gap-1.5 text-xs"> 1411 <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> 1412 <span class="flex grow gap-2">Tailwind CSS</span> 1413 </div> 1414 1415 <div class="flex items-center gap-1.5 text-xs"> 1416 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1416ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1417 <g class="fill-neutral-800 dark:fill-white"> 1418 <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> 1419 <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> 1420 <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> 1421 </g> 1422 </svg> 1423 <span class="flex grow gap-2">Stimulus</span> 1424 </div> 1425 </div> 1426 </div> 1427 </template> 1428 </div> 1429 1430 <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"> 1431 <div class="h-12 w-full absolute top-0 left-0 right-0 bg-neutral-100 dar
1431k:bg-neutral-800"></div> 1432<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"> 1433 <div class="container mx-auto px-4"> 1434 <div class="flex items-center justify-between gap-2 sm:gap-4 py-3"> 1435 <div class="flex items-center gap-3 flex-1"> 1436 <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"> 1437 <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"> 1438 <path d="M12 2L2 7l10 5 10-5-10-5z"></path> 1439 <path d="m2 17 10 5 10-5"></path> 1440 <path d="m2 12 10 5 10-5"></path> 1441 </svg> 1442 </div> 1443 <div class="space-y-1"> 1444 <p class="text-sm font-semibold">New Feature Launch! ð</p> 1445 </div> 1446 </div> 1447 <div class="flex items-center gap-2"> 1448 <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"> 1449 <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> 1450 </button> 1451 </div> 1452 </div> 1453 </div> 1454</div> 1455 1456 </div> 1457 </div> 1458 <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"> 1459 <div class="h-48"></div> 1460 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1461 Banner 1462 <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> 1463 </p> 1464 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 1465 </a> 1466</li> 1467 1468 1469 <li class="sm:hidden col-span-1"> 1470 <div class="relative mt-8 mb-6"> 1471 <div class="mx-auto"> 1472 <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"> 1473 <div data-controller="newsletter" 1474 class="max-w-xs"> 1475 <div data-newsletter-target="form"> 1476 <form data-action="submit->newsletter#submit" 1477 class="space-y-3"> 1478 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 1479 <input type="email" 1480 data-newsletter-target="email" 1481 placeholder="Enter your email..." 1482 class="form-control" 1483 1484 required> 1485 <div class="flex justify-center"> 1486 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 1487 </div> 1488 <button type="submit" 1489 data-newsletter-target="submitButton" 1490 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 dar
1490k:focus-visible:outline-neutral-200"> 1491 Subscribe to the newsletter 1492 </button> 1493 </form> 1494 <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]"> 1495 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 1496 </div> 1497 </div> 1498 1499 <div data-newsletter-target="successMessage" 1500 class="text-center py-4" 1501 style="display: none;"> 1502 <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"> 1503 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1504 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 1505 </svg> 1506 </div> 1507 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
1508 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 1509 </div> 1510 </div> 1511 </div> 1512 </div> 1513</div> 1514 1515 </li> 1516 <li class="relative"> 1517 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1518 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1519 <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"> 1520 <span class="text-xs">?</span> 1521 </button> 1522 1523 <template data-popover-target="content"> 1524 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1525 <div class="space-y-2"> 1526 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1527 1528 <div class="flex items-center gap-1.5 text-xs"> 1529 <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> 1530 <span class="flex grow gap-2">Tailwind CSS</span> 1531 </div> 1532 1533 <div class="flex items-center gap-1.5 text-xs"> 1534 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1534ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1535 <g class="fill-neutral-800 dark:fill-white"> 1536 <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> 1537 <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> 1538 <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> 1539 </g> 1540 </svg> 1541 <span class="flex grow gap-2">Stimulus</span> 1542 </div> 1543 </div> 1544 </div> 1545 </template> 1546 </div> 1547 1548 <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"> 1549 <div class="flex justify-center w-full whitespace-nowrap"> 1550 <ol class="flex justify-center items-center space-x-2 text-sm w-full"> 1551 <li> 1552 <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"> 1553 <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">
1553<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> 1554 </a> 1555 </li> 1556 <li class="flex items-center space-x-2"> 1557 <span class="text-neutral-400 dark:text-neutral-600">/</span> 1558 1559 <!-- Dropdown for hidden breadcrumb items --> 1560 <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-placement-value="bottom-start"> 1561 <button 1562 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" 1563 data-dropdown-popover-target="button" 1564 data-action="dropdown-popover#toggle" 1565 aria-label="Show more breadcrumb items" 1566 > 1567 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 20 20" fill="currentColor"> 1568 <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" /> 1569 </svg> 1570 </button> 1571 1572 <dialog 1573 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" 1574 data-controller="menu" 1575 data-dropdown-popover-target="menu" 1576 autofocus="false" 1577 data-action="click@document->dropdown-popover#closeOnClickOutside 1578 close->menu#reset 1579 keydown.up->menu#prev keydown.down->menu#next 1580 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 1581 > 1582 <div class="flex flex-col p-1" role="menu"> 1583 <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"> 1584 Getting started 1585 </a> 1586 <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"> 1587 Components 1588 </a> 1589 </div> 1590 </dialog> 1591 </div> 1592 </li> 1593 <li class="flex items-center space-x-2"> 1594 <span class="text-neutral-400 dark:text-neutral-600">/</span> 1595 <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"> 1596 <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> 1597 <span class="hidden sm:block">Breadcrumb</span> 1598 </a> 1599 </li> 1600 </ol> 1601 </div> 1602 1603 </div> 1604 </div> 1605 <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"> 1606 <div class="h-48"></div> 1607 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1608 Breadcrumb 1609 <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> 1610 </p> 1611 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 1612 </a> 1613</li> 1614 1615 1616 <li class="relative"> 1617 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1618 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1619 <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
1619k: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"> 1620 <span class="text-xs">?</span> 1621 </button> 1622 1623 <template data-popover-target="content"> 1624 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1625 <div class="space-y-2"> 1626 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1627 1628 <div class="flex items-center gap-1.5 text-xs"> 1629 <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> 1630 <span class="flex grow gap-2">Tailwind CSS</span> 1631 </div> 1632 1633 </div> 1634 </div> 1635 </template> 1636 </div> 1637 1638 <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"> 1639 1640 <button data-action="toggle#toggle text-cycler#toggle" 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"> 1641 Button 1642 </button> 1643 1644 <p data-toggle-target="toggleable" data-text-cycler-target="toggleable" class="hidden text-xs text-neutral-500 dark:text-neutral-400 text-center"></p> 1645 </div> 1646 </div> 1647 <a href="/docs/buttons" 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"> 1648 <div class="h-48"></div> 1649 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1650 Buttons 1651 <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> 1652 </p> 1653 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 14 components</p> 1654 </a> 1655</li> 1656 1657 1658 <li class="relative"> 1659 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1660 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1661 <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
1661k: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"> 1662 <span class="text-xs">?</span> 1663 </button> 1664 1665 <template data-popover-target="content"> 1666 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1667 <div class="space-y-2"> 1668 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1669 1670 <div class="flex items-center gap-1.5 text-xs"> 1671 <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> 1672 <span class="flex grow gap-2">Tailwind CSS</span> 1673 </div> 1674 </div> 1675 </div> 1676 </template> 1677 </div> 1678 1679 <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"> 1680 <div class="w-full max-w-xs"> 1681 <div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden"> 1682 <div class="p-3"> 1683 <h3 class="text-sm font-medium leading-6 text-neutral-900 dark:text-neutral-100">Card Preview</h3> 1684 <div class="mt-1.5 text-xs text-neutral-500 dark:text-neutral-400"> 1685 <p>Simple card components with multiple variations.</p> 1686 </div> 1687 </div> 1688 </div> 1689 </div> 1690 </div> 1691 </div> 1692 <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"> 1693 <div class="h-48"></div> 1694 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1695 Card 1696 <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> 1697 </p> 1698 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p> 1699 </a> 1700</li> 1701 1702 1703 <li class="relative"> 1704 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1705 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1706 <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
1706k: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"> 1707 <span class="text-xs">?</span> 1708 </button> 1709 1710 <template data-popover-target="content"> 1711 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1712 <div class="space-y-2"> 1713 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1714 1715 <div class="flex items-center gap-1.5 text-xs"> 1716 <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> 1717 <span class="flex grow gap-2">Tailwind CSS</span> 1718 </div> 1719 1720 <div class="flex items-center gap-1.5 text-xs"> 1721 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1721ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1722 <g class="fill-neutral-800 dark:fill-white"> 1723 <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> 1724 <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> 1725 <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> 1726 </g> 1727 </svg> 1728 <span class="flex grow gap-2">Stimulus</span> 1729 </div> 1730 1731 <div class="flex items-center gap-1.5 text-xs"> 1732 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-5 -5 160 160"><defs><linearGradient id="light-theme-gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#2f71c1"/><stop offset="100%" stop-color="#7561c3"/></linearGradient><path id="light-theme-logo" d="M93 .03l.46.06.47.08.24.05.23.05.23.07.24.07.47.16.23.1.24.1.45.2.23.1.44.24.44.26L98 2l.6.48.38.34.36.36.17.2.1.12.1.13.1.12.1.14.1.12.2.26.1.14.1.13.17.27.18.3.16.3.16.32.08.17.15.36.07.2.1.2.07.2.08.2.07.23.08.23.07.23.16.5.
173208.26.08.28.1.3.63 2.35.1.4.14.54.13.55.24 1.13.1.58.12.57.1.6.18 1.2.1.6.08.63.07.62.07.64.06.64.06.65.05.65.04.67.05.67.1 2.06.04 2.87-.03 2.23-.06 1.53-.02.78-.05.78-.04.8-.1 1.6-.07.82-.06.82-.26 2.8-.02.26-.03.26-.02.27-.04.52-.04.5-.02.24-.03.48-.02.22-.01.23v.23l-.02.2-.01.22v.4l-.03.37v.17l-.01.18-.02.32v.3.13.25l-.01.2.01.1V46v.08.06.05.05l.01.03.01.02h.01.02l.03.01h.67l.13-.01h.14.15.16l.34-.02.37-.02.2-.01h.42l.46-.04h.24l.23-.02.25-.02.26-.02.27-.02h.27l.26-.02.28-.02.3-.03.3-.02h.28l.6-.04.3-.03.62-.05.3-.03 1.4-.1 1.37-.1 1.36-.08 2.64-.1 1.3-.03 1.26-.02h1.25 1.22l1.2.02 1.17.03 2.27.1 1.1.08 1.07.08 1.05.1 1.03.1 1 .12.97.13.94.15.93.16.88.17.87.2.83.2.8.2.78.22.75.24.72.24.7.26.67.27.63.28.6.3.58.3.54.32.5.33.5.35.45.35.42.36.38.38.36.4.14.17.27.33.12.16.12.17.1.17.1.16.2.3.1.17.25.47.08.16.07.15.06.17.16.47.1.33.06.33.03.16.02.18.02.16v.17l.02.36v.18l-.02.36-.01.2-.02.2-.01.2-.06.4-.04.2-.04.22-.03.2-.08.35-.1.35-.12.36-.13.36-.15.37-.17.38-.18.37-.2.4-.22.38-.24.4-.25.4-.26.4-.6.8-.64.82-.36.4-.35.42-1.18 1.24-.42.43-.88.84-.46.43-.96.84-.5.43-1.03.84-.53.43-.55.4-1.7 1.25-.6.4-1.22.8-.62.4-.63.4-.38.24-.4.24-.42.25-.42.26-.45.26-.46.26-.96.54-.5.3-.5.27-.5.28-.5.3-1.03.56-.52.27-.5.28-.52.27-1 .53-.5.26-.5.25-.48.25-.92.46-.86.42-.42.2-.38.2-.37.17-.35.17-.32.15-.3.13-.27.1-.26.1-.2.1-.2.06-.17.06-.12.03-.1.02-.05-.02-.04-.04-.04-.06-.03-.08-.03-.1-.02-.1-.01-.13-.02-.14v-.15l.01-.17v-.2l.01-.18.02-.2.01-.2.05-.44.03-.22.1-.7.04-.24.1-.47.05-.24.1-.45.06-.22.05-.22.07-.2.05-.2.07-.2.07-.18.12-.32.06-.15.07-.13.07-.12.06-.1.07-.1.06-.06.06-.05.1-.04.1-.05.05-.04.07-.04.06-.03.07-.03.08-.04.16-.1.18-.08.1-.06.1-.04.2-.12.32-.16.22-.12.23-.13.24-.12.37-.2.12-.07.25-.13.13-.07.25-.13.14-.06.12-.07.13-.06.13-.07.13-.06 1.37-.7.67-.36.67-.38.66-.36.65-.36.64-.37 1.26-.75.6-.36 1.2-.75.58-.38.57-.36.57-.38.55-.37.54-.38.53-.36.52-.37 1-.74.47-.35.46-.37.45-.36.44-.36.84-.7.4-.35.74-.68.67-.67.6-.65.28-.32.27-.3.24-.3.23-.3.2-.3.36-.58.14-.28.14-.3.12-.27.1-.27.08-.27.06-.26.04-.26.02-.26v-.5l-.03-.25-.05-.24-.07-.22-.08-.23-.1-.23-.12-.22-.14-.2-.32-.42-.4-.4-.48-.38-.26-.18-.28-.18-.6-.34-.68-.33-.37-.15-.4-.15-.4-.14-.42-.14-.43-.14-.46-.14-.47-.13-.5-.12-.5-.1-.52-.1-.47-.1-.5-.1-.53-.08-.58-.06-.6-.08-.63-.06-.65-.06-.67-.05-.7-.05-.72-.05-.74-.04-1.52-.06-.8-.03-.8-.02h-.8l-1.67-.02-.83.01h-.85l-2.57.03-.85.03-.86.03-.86.02-.84.05-.85.03-.84.06-.82.05-.83.06-.8.05-1.57.14-.76.07-.75.08-.72.08-1.4.2-.65.1-3.42.52-1.4 7.83-1.46 7.83 6.8 7.94 1.04 1.25 1.03 1.23 1 1.2.98 1.2.95 1.2.93 1.18.9 1.16.88 1.15.87 1.13.84 1.13.82 1.1.8 1.1.78 1.1.75 1.07.73 1.07 1.4 2.1.67 1.03.65 1.02.62 1 .6 1 .58.98.56.98.54.95.52.96.5.95.48.93.45.92.43.9.42.9.4.9.37.88.36.9.33.86.32.86.3.86.28.84.25.83.23.83.15.52.12.5.14.5.1.48.1.46.1.45.1.44.08.44.08.4.06.4.07.4.04.4.04.37.03.37.02.36.02.34v.67l-.03.64-.03.3-.04.3-.05.3-.12.58-.08.27-.1.28-.2.52-.12.26-.12.25-.13.26-.14.25-.3.5-.17.24-.18.24-.2.24-.2.23-.2.24-.3.33-.3.3-.32.3-.34.26-.35.24-.36.23-.38.2-.4.2-.4.17-.42.14-.43.13-.92.2-.5.07-.5.05h-.5-1.08l-.56-.04-.57-.04-.6-.08-.6-.1-.62-.1-.66-.13-.65-.15-.68-.16-1.4-.4-.73-.22-.75-.25-.77-.26-.78-.3-.8-.3-.82-.32-.84-.34-.86-.37-1.8-.8-.92-.43-.93-.45-.33-.15-.34-.17-.37-.2-.4-.2-.42-.22-.43-.25-.45-.25-.46-.26-.48-.28-1.5-.9-.5-.32-.53-.3-1.04-.65-.53-.32-.53-.33-.5-.34-.52-.32-1-.64-.5-.33-.47-.3-.46-.3-.45-.3-.42-.3-.4-.28-.4-.27-.36-.24-.34-.25-.3-.23-.3-.2-.25-.2-.22-.17-.18-.17-.16-.13-.1-.12-.08-.1-.04-.07h0l.01-.04.02-.06.05-.05v-.04l.06-.06.1-.07.2-.16.06-.04.07-.05.06-.04.07-.04.07-.05.08-.05.08-.04.07-.05.16-.1.1-.05.1-.04.08-.06.4-.2.1-.06.1-.05.1-.04.22-.1.2-.1 2.62-1.1 9.13 5.35.92.52.9.5.88.5.87.47.84.44.83.43 1.6.8.78.37.74.34.74.33.72.3.7.28.68.27.66.24.63.22.63.2.6.18.58.16.56.14.54.12.52.1.5.08.48.07.46.03h.43.43l.4-.03.38-.04.35-.06.34-.1.32-.1.3-.13.27-.15.25-.17.23-.18.2-.22.18-.23.16-.26.22-.44.16-.5.1-.53.06-.6.02-.63-.03-.7-.08-.72-.12-.78-.18-.8-.2-.86-.26-.9-.3-.93-.35-.97-.38-1-.43-1.04-.47-1.07-.5-1.1-.55-1.14-.6-1.17-.63-1.18-.66-1.23-.7-1.24-.74-1.27-.77-1.3-1.64-2.65-.87-1.35-.9-1.37-.93-1.4-.97-1.4-2.03-2.84-1.
173205-1.43-1.1-1.46-1.1-1.45-1.15-1.48-1.16-1.47-1.2-1.48-1.22-1.48-1.23-1.5-4.17-4.9-2.05 7.54-.74 2.67-.76 2.65-.78 2.62-.8 2.57-.8 2.55-.84 2.5-.84 2.46-.87 2.43-.88 2.38-.88 2.35-.9 2.3-.9 2.25-.92 2.2-.94 2.14-.93 2.1-.95 2.05-.96 1.98-.96 1.93-.98 1.88-.96 1.82-.98 1.74-.98 1.7-.98 1.63-.98 1.56-1 1.5-.97 1.42-.98 1.35-.97 1.28-.98 1.2-.97 1.13-.96 1.05-.95.97-.96.88-.94.8-.93.73-.92.64-.92.55-.9.46-.88.37-.88.28-.2.05-.42.08-.22.02-.43.04h-.68l-.23-.02-.24-.02-.23-.03-.23-.04-.47-.1-.23-.06-.24-.06-.23-.08-.23-.07-.47-.18-.7-.3-.44-.22-.23-.12-.65-.4-.2-.14-.6-.45-.57-.5-.18-.17-.34-.38-.18-.2-.2-.25-.18-.26-.17-.28-.2-.3-.17-.32-.18-.33-.18-.36-.34-.76-.34-.82-.16-.43-.32-.9-.32-.94-.14-.5-.15-.5-.28-1.02-.26-1.06-.13-.54-.23-1.1-.22-1.12-.1-.56-.18-1.12-.08-.57-.14-1.12-.05-.56-.1-1.13-.08-1.1-.01-.54-.02-.4-.02-.44v-4.98l.03-1.26.01-.64.02-.64.01-.65.06-1.92.05-1.25.03-.6.02-.6.03-.58.02-.56.04-.54.06-1 .03-.47.03-.43.03-.4.03-.37.04-.34.03-.3.03-.26.04-.22.03-.18.03-.13.03-.08.03-.04.02.01.02-.01.03.02h.03l.03.02.03.01.1.05.03.03.16.1.05.03.12.08.07.04.07.05.3.2.1.06.07.05.1.06.1.07.08.05.2.14.1.06.3.2.3.22.2.14.2.16 2.5 1.85-.24 5.9-.03.64-.01.66v.65l-.02 1.3v1.3l.03 1.93.04 1.28.03.63.02.62.04.6.04.62.12 1.8.1 1.14.06.56.05.55.13 1.06.14 1.02.08.48.07.47.08.46.08.43.1.44.1.4.08.4.1.37.1.36.1.34.2.6.2.55.22.52.2.5.22.45.23.42.24.38.24.36.24.32.26.3.26.26.28.22.27.2.28.15.3.13.3.08.3.06.3.02h.33l.33-.05.34-.08.36-.12.35-.14.38-.18.38-.22.4-.24.4-.3.42-.32.42-.35.44-.4.44-.42.45-.46.47-.5.48-.53.5-.56.5-.6.5-.63.53-.67.55-.7.55-.73.57-.77.6-.87.63-.9.62-.95.63-.97.62-1.02.63-1.05.64-1.1.63-1.13.64-1.15.63-1.2.63-1.23.64-1.26 1.25-2.6.63-1.35.63-1.37.63-1.4.63-1.42.62-1.46.62-1.47.6-1.5.6-1.52.6-1.54.6-1.56 1.2-3.2.6-1.62.57-1.64.58-1.64.57-1.67.56-1.67.55-1.7.54-1.7.53-1.7.52-1.73.52-1.74.5-1.74.5-1.75.96-3.52 2.2-8.17-5.1-5.15-2.6-2.6-.4-.38-.18-.2-.2-.18-.2-.2-.18-.17-.18-.2-.36-.35-.16-.17-.66-.62-.14-.14-.14-.15-.28-.26-.12-.13-.12-.12-.12-.1-.3-.3-.1-.08-2.14-1.95-18.45 5.42-1.48.46-1.46.44-1.43.46-1.4.44-1.38.45-1.36.44-1.34.45-1.32.45-1.3.45-2.52.88-1.23.46-1.2.44-1.2.45-1.18.46-1.15.45-1.14.46-1.13.47-2.2.92-1.08.47-1.06.47-1.05.47-2.06.96-2 1-1.96 1-1.92 1.02-.95.52-.93.5-.93.54-1.97.98-.9.55-.9.56-.86.53-.82.53-.8.53-.76.52-.72.5-.7.5-.68.5-.63.5-.6.48-.58.5-.54.48-.5.46-.48.47-.45.45-.4.45-.4.44-.35.43-.32.43-.3.42-.26.4-.22.4-.2.4-.16.4-.13.38-.1.36-.07.36-.04.35v.35l.03.33.07.33.1.3.13.3.17.3.2.3.23.28.26.26.3.25.33.25.36.24.4.22.3.16.32.15.35.15.36.15.37.13.4.14.42.13.42.12.45.13.47.12.48.1 1 .2.52.1.54.1.56.1.57.08.58.08.6.08.6.07 1.25.13.64.05 1.32.1.67.04.68.03.7.04.7.02.72.02 1.44.02h2.22l.75-.02.76-.01.76-.02.77-.03.78-.04.14-.01.15-.01h.14l.15-.01.28-.02.28-.01h.15.56.13l.14-.01.52-.01.12-.01h.26l.1-.01h.24l.1-.01h.1l.2-.01.1-.01.1.01h.08l.08-.01h.5l.1.03.1.04.1.06.1.07.12.08.12.1.14.1.15.1.14.12.15.14.16.15.63.63.16.17.48.54.16.2.3.37.14.18.28.35.12.18.12.17.22.32.1.16.1.14.13.26.05.12.04.1.03.1.01.1v.07l-.02.06-.03.03-.25.07h-.08l-.2.02-.3.06h-.13l-.28.03-.14.02-.16.01-.16.02h-.17l-.35.03-.37.04-.2.01-.2.03-.62.04-.22.02-.45.04h-.23l-.23.02-.72.04h-.25l-.23.01-.25.02-1.03.05-1 .06-1 .03-.98.04-.97.03-1.9.02H26.3l-.9-.02h-.9l-.87-.04-.87-.03-1.67-.1-.82-.07-.8-.06-.8-.08-1.54-.18-1.48-.2-.7-.1-1.4-.26-.67-.14-.66-.15-.63-.15-.63-.17-1.2-.34-.58-.2-.55-.2-.54-.2-.53-.2-.52-.22-.5-.23-.48-.22-.46-.24-.45-.26-.4-.23-.4-.25-.38-.25-.35-.25-.34-.25-.33-.27-.6-.52-.28-.27-.25-.27-.24-.28-.23-.28-.4-.6-.18-.3-.16-.3-.14-.3-.13-.3-.1-.3-.17-.63-.05-.32-.05-.33-.03-.34-.01-.33.01-.35.02-.35.04-.34.05-.36.07-.36.08-.37.1-.37.12-.37.13-.38.15-.4.17-.4.18-.4.4-.8.22-.4.74-1.17.4-.57.44-.6.47-.58.5-.6.53-.6 1.14-1.18.62-.6.64-.6.68-.6.7-.6.73-.6.76-.6 1.6-1.2.84-.6.9-.6 1.83-1.2.96-.6 1-.6 1.02-.6 1.04-.6 1.08-.6 1.1-.6 1.13-.6 1.15-.6 1.2-.6 1.22-.6 1.23-.6 1.27-.6 1.3-.6 1.32-.6 1.35-.6 1.38-.6 1.4-.6 1.43-.6 1.46-.6.65-.27.7-.28.77-.3 1.67-.62.9-.34 1.9-.7 1-.35 1.03-.37 1.07-.37 1.07-.38 1.1-.37 1.1-.38 1.12-.38 1.14-.38 1.13-.38 2.26-.75 5.45-1.76 1.04-.32 1-.3.96-.3 1.83-.55.85-.25.8-.23.75-.2.7-.2.63-.17.58-.14.5-.13.44-.1.37-.08.3-.05.22-.01 1.55-.03-1.57-1.52-.26-.24-.3-.28-.32-.28-.36-.3-.38-.34-.4-.35-.45-.38-.46-.4-.5-.4-.5-.42-.54-.43-.54-.45-.58-.46-1.2-.94-.6-.48-1.28-1-.65-.5-1.32-1.02-1.34-1.02-.7-.5-.67-.5-.68-.5-1.34-1-.66-.5-.66-.48-.65-.47-.64-.46-.63-.46-.6-.43-.6-.42-.58-.42-.56-.4-.56-.38-.52-.36-.52-.34-1.54-1-.78-.5-.76-.48-1.54-.92-.77-.45-.76-.43-1.52-.84-.75-.4-.74-.4-.74-.38-.72-.36-1.44-.68-.7-.32-1.38-.6-.67-.27-.66-.27-.65-.25-.64-.23-.6-.22-1.2-.4-.58-.17-.55-.15-.54-.14-.53-.12-.5-.1-.48-.08-.48-.07-.44-.05-.43-.03h-.78l-.36.03-.34.04-.3.07-.35.1-.33.14-.3.2-.27.22-.23.25-.2.28-.18.32-.15.35-.13.38-.1.42-.06.44-.04.48-.01.5.02.53.05.56.06.6.1.62.12.63.15.67.18.7.2.73.22.73.55 1.57.3.8.33.83.36.86.4.88.4.9.43.9.47.94.48.94.5.97.53.98.56 1 .58 1.02.6 1.03.64 1.04.65 1.06.67 1.07 2.8 4.43-1.25 2.8
17326-.05.12-.1.22-.05.13-.1.23-.06.1-.05.12-.05.1-.05.12-.04.1-.1.2-.04.1-.1.2-.03.1-.05.1-.1.24-.05.08-.03.07-.13.26-.1.16-.02.04-.03.04-.05.1-.07.07h-.05l-.16-.16-.12-.13-.13-.18-.16-.2-.18-.24-.2-.28-.22-.3-.23-.33-.5-.75-.27-.4-.28-.43-.3-.45L30 56l-.63-1-.66-1.03-1-1.6-.34-.56-.33-.55-.34-.54-.65-1.1-.33-.54-.3-.53-.32-.53-.58-1-.28-.5-.27-.47-.25-.46-.25-.43-.22-.4-.4-.76-.26-.48-.25-.5-.24-.5-.48-1.02-.22-.52-.45-1.05-.6-1.6-.2-.54-.18-.53-.2-.53-.34-1.06-.16-.54-.3-1.04-.28-1.03-.24-1-.1-.5-.2-.96-.08-.47-.14-.9-.06-.43-.04-.42-.04-.4-.02-.4v-.38l-.01-.36.01-.36v-.33l.06-.62.05-.27.1-.5.07-.24.08-.24.08-.25.08-.23.2-.48.2-.46.24-.46.12-.2.27-.44.14-.2.44-.6.16-.2.32-.37.17-.17.17-.18.17-.16.18-.17.37-.3.18-.14.2-.14L22 19l.38-.24.6-.3.4-.16.4-.13.73-.15.77-.1.8-.07.86-.01.9.03.94.1.96.13 1 .2 1.04.22 1.07.27 1.12.33 1.14.36 1.17.42 1.2.44 1.24.5 1.26.54 1.3.6 1.3.63 1.34.66 1.37.7 1.38.74 1.4.78 1.43.83 1.45.86 1.46.9 1.48.94 1.5.98 1.5 1 1.53 1.05 1.54 1.08 1.55 1.12 1.56 1.15 1.58 1.17 1.58 1.22 1.6 1.25 1.6 1.28 1.6 1.3 1.6 1.34 1.6 1.37 1.6 1.4 5.42 4.82L88.7 49l1.12-.2 1.07-.2.52-.1.75-.15.24-.03.46-.1.22-.04.43-.07.4-.07.2-.03.18-.03.35-.05.16-.02.15-.03.15-.02.27-.04.12-.01h.1.56l.08-.02.1-.04.08-.04.1-.06.16-.16.07-.1.08-.1.07-.13.07-.15.06-.16.08-.18.07-.2.06-.22.06-.23.06-.25.06-.27.07-.28.05-.3.06-.32.05-.34.06-.36.05-.4.06-.4.05-.43.05-.44.06-.47.05-.5.04-.5.05-.53.05-.56.05-.58.05-.6.05-.63.04-.65.05-.68.05-.7.05-.73.04-.75.06-1.1.05-1.1.04-1.06.06-2.1v-3l-.02-.97-.02-.96-.08-1.85-.05-.9-.07-.88-.07-.86-.08-.84-.1-.82-.1-.8-.1-.77-.1-.75-.13-.72-.12-.7-.14-.67-.15-.65-.15-.62-.16-.6-.17-.57-.17-.54-.2-.52-.2-.48-.2-.47-.2-.42-.22-.4-.22-.37-.23-.34-.23-.3-.24-.27-.25-.24-.25-.2-.27-.17-.26-.13-.3-.1-.3-.11-.3-.05-.3-.02-.3.01L92 6l-.33.05-.34.1-.34.12-.35.14-.72.4-.37.24-.38.26-.38.3-.4.32-.4.35-.4.38-.4.4-.4.44-.44.46-.43.48-.44.5-.45.55-.46.56-.45.6-.47.62-.48.64-.47.7-.5.7-.5.72-.5.77-.5.78-.5.8-.5.84-.53.86-1.06 1.8-.54.95-4.72 8.25-3.1.4-.1.01-.12.01h-.1-.12-.1-.1-.1-.8-.08-.07l-.1-.01h-.07l-.07-.01-.2-.04h-.1l-.1-.04h-.04l-.1-.06-.03-.02-.01-.03-.02-.02-.01-.04v-.03l.02-.12.03-.15.06-.2.07-.22.1-.24.1-.28.12-.3.15-.32L68 29l.17-.37.18-.4.2-.4.2-.43.2-.44.22-.45.24-.47.47-.98.5-1 .26-.5.26-.52.8-1.52.28-.5.27-.5.26-.5.28-.5.52-.94.26-.45.25-.44.25-.42.25-.4.23-.4.22-.36.22-.34.2-.33.2-.3.44-.65.88-1.27.43-.6.86-1.18.83-1.1.42-.54 1.22-1.53.4-.48.4-.46.4-.45.4-.43.78-.82.4-.4.76-.74.38-.34.74-.66.74-.6.37-.28.36-.27L87 2l.7-.45.36-.2.35-.2.35-.18.34-.16.36-.15.33-.15.34-.12.34-.1.33-.1.42-.1.22-.04.2-.02.22-.02.44-.02h.23l.23.01.22.02zM93.4 54l-1.16.23-1.25.3-1.2.35-1 .34-.76.3-.45.26-.08.2 1.14 1.27 1.7 1.75 1.82 1.78 1.48 1.37.7.54.16-.26.22-.63.26-.95.3-1.2.28-1.37.28-1.57.15-1.23v-.87l-.13-.56-.27-.24-.44-.04-.75.06-1 .15zm-48.7-.1l-4.34 1.68 1.3-2.42c1.68-3.17 5.8-7.83 9.24-10.44.18-.15 1.08-.86 2.72-2.15l2.32 1.64c1.27.9 2.35 1.77 2.4 2 .05.18-.83 1-1.94 1.7-1.16.76-3.28 2.5-4.73 3.86-1.84 1.8-3.86 2.98-6.97 4.14zm24.9 58.64c-10.8-1.44-21.16-8-27.37-17.4-2.63-4.02-5.8-12.95-6-16.85-.12-2.35.07-2.6 2.43-3.7 1.4-.63 2.62-1.1 2.76-1.06.1.1.5 2.38.8 5.16 1.1 8.96 6.72 17.88 14.56 22.95 4.32 2.86 10.6 5 15.18 5.26 1.78.1 3.3.4 3.33.6.07.25-.43 1.54-1.1 2.95l-1.18 2.6-3.43-.5zm4.3-76.72c-1.95-1.94 9.3-.5 15.27 2 3.42 1.4 3.68 1.6 3.44 3.15-.18 1.3-5.97 1.87-9.46.92-2.5-.68-6.43-3.26-9.25-6.06zm24.78 60.43c1.57-1.66 3.27-3.8 3.7-4.6 1.06-2.1 1.5-2.1 2.76-.36.56.88 1.35 1.9 1.74 2.45.5.64.01 1.67-1.63 3.8-3.97 5.2-13.04 12.18-12.28 9.44 1.38-4.5 3.2-8.05 5.72-10.72zm11.5-24.45c-1.94-2.4-2.9-4.28-3.57-6.82-1.68-6.27.9-12.08 3.24-7.47 1.32 2.5 3.28 10.33 3.57 14.07.17 1.83.08 3.4-.1 3.46-.24.06-1.6-1.45-3.13-3.24z"/></defs><g fill="url(#light-theme-gradient)"><use xlink:href="#light-theme-logo"/></g></svg> 1733 <span class="flex grow gap-2">Embla Carousel</span> 1734 </div> 1735 </div> 1736 </div> 1737 </template> 1738 </div> 1739 1740 <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"> 1741 <section class="overflow-hidden mx-auto" data-controller="carousel" 1742 data-carousel-loop-value="true" 1743 data-carousel-drag-free-value="false" 1744 data-carousel-dots-value="true" 1745 data-carousel-buttons-value="true"> 1746 <div class="overflow-hidden outline-hidden pt-1 cursor-grab active:cursor-grabbing md:[--carousel-fade-size:1.25rem] md:[mask-image:linear-gradient(to_right,transparent,black_var(--carousel-fade-size),black_calc(100%-var(--carousel-fade-size)),transparent)] md:[-webkit-mask-image:linear-gradient(to_right,transparent,black_var(--carousel-fade-size),black_calc(100%-var(--carousel-fade-size)),transparent)]" data-carousel-target="viewport"> 1747 <div class="flex"> 1748 <div class="mr-2 text-xs flex-shrink-0 flex-grow-0 basis-full sm:basis-3/4 md:basis-2/3 min-w-0 px-3 sm:px-4 py-6 sm:py-8 text-center rounded-xl border border-neutral-200 bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 relative select-none"> 1749 Slide 1 1750 </div> 1751 <div class="mr-2 text-xs flex-shrink-0 flex-grow-0 basis-full sm:basis-3/4 md:basis-2/3 min-w-0 px-3 sm:px-4 py-6 sm:py-8 text-center rounded-xl border border-neutral-200 bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 relative select-none"> 1752 Slide 2 1753 </div> 1754 <div class="mr-2 text-xs flex-shrink-0 flex-grow-0 basis-full sm:basis-3/4 md:basis-2/3 min-w-0 px-3 sm:px-4 py-6 sm:py-8 text-center rounded-xl border border-neutral-200 bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 relative select-none"> 1755 Slide 3 1756 </div> 1757 </div> 1758 </div> 1759 1760 <div class="flex justify-between items-center mt-4 pb-1"> 1761 <div class="grid grid-cols-2 gap-1 items-center z-20"> 1762 <button class="flex items-center justify-center size-6 rounded-full bg-white p-1 text-sm font-semibold text-neutral-800 shadow-xs hover:bg-neutral-50 outline-hidden border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/75" type="button" data-carousel-target="prevButton" aria-label="Previous"> 1763 <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-700 dark:text-neutral-300 size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M11.5 16C11.308 16 11.116 15.9271 10.97 15.7801L4.71999 9.53005C4.42699 9.23705 4.42699 8.76202 4.71999 8.46902L10.97 2.21999C11.263 1.92699 11.738 1.92699 12.031 2.21999C12.324 2.51299 12.324 2.98803 12.031 3.28103L6.311 9.001L12.031 14.721C12.324 15.014 12.324 15.489 12.031 15.782C11.885 15.928 11.693 16.002 11.501 16.002L11.5 16Z"></path></g></svg> 1764 </button> 1765 1766 <button class="flex items-center justify-center size-6 rounded-full bg-white p-1 text-sm font-semibold text-neutral-800 shadow-xs hover:bg-neutral-50 outline-hidden border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/75" type="button" data-carousel-target="nextButton" aria-label="Next"> 1767 <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-700 dark:text-neutral-300 size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.28 8.46999L7.03 2.21999C6.737 1.92699 6.262 1.92699 5.969 2.21999C5.676 2.51299 5.676 2.98803 5.969 3.28103L11.689 9.001L5.969 14.721C5.676 15.014 5.676 15.489 5.969 15.782C6.115 15.928 6.307 16.002 6.499 16.002C6.691 16.002 6.883 15.929 7.029 15.782L13.279 9.53201C13.572 9.23901 13.572 8.76403 13.279 8.47103L13.28 8.46999Z"></path></g></svg> 1768 </button> 1769 </div> 1770 1771 <div class="flex flex-wrap justify-end items-center gap-1.5 z-20" data-carousel-target="dotsContainer"></div> 1772 </div> 1773 </section> 1774 </div> 1775 </div>
1776 <a href="/docs/carousel" 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"> 1777 <div class="h-48"></div> 1778 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1779 Carousel 1780 <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> 1781 </p> 1782 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p> 1783 </a> 1784</li> 1785 1786 1787 <li class="relative"> 1788 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1789 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1790 <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
1790k: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"> 1791 <span class="text-xs">?</span> 1792 </button> 1793 1794 <template data-popover-target="content"> 1795 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1796 <div class="space-y-2"> 1797 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1798 1799 <div class="flex items-center gap-1.5 text-xs"> 1800 <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> 1801 <span class="flex grow gap-2">Tailwind CSS</span> 1802 </div> 1803 1804 </div> 1805 </div> 1806 </template> 1807 </div> 1808 1809 <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"> 1810 <div class="flex items-center gap-x-3"> 1811 <input type="checkbox" id="checked-checkbox"> 1812 <label for="checked-checkbox" class="inline-block select-none">Checkbox input</label> 1813 </div> 1814 </div> 1815 </div> 1816 <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"> 1817 <div class="h-48"></div> 1818 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1819 Checkbox 1820 <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> 1821 </p> 1822 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 1823 </a> 1824</li> 1825 1826 1827 <li class="relative"> 1828 <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 1829 <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"> 1830 <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"> 1831 <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> 1832 New 1833 </div> 1834 </div> 1835</div> 1836 1837 1838 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1839 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1840 <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
1840k: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"> 1841 <span class="text-xs">?</span> 1842 </button> 1843 1844 <template data-popover-target="content"> 1845 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1846 <div class="space-y-2"> 1847 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1848 1849 <div class="flex items-center gap-1.5 text-xs"> 1850 <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> 1851 <span class="flex grow gap-2">Tailwind CSS</span> 1852 </div> 1853 1854 <div class="flex items-center gap-1.5 text-xs"> 1855 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1855ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1856 <g class="fill-neutral-800 dark:fill-white"> 1857 <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> 1858 <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> 1859 <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> 1860 </g> 1861 </svg> 1862 <span class="flex grow gap-2">Stimulus</span> 1863 </div> 1864 </div> 1865 </div> 1866 </template> 1867 </div> 1868 1869 <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"> 1870 <div class="w-fit mx-auto" data-controller="checkbox-select-all" data-checkbox-select-all-toggle-key-value="x"> 1871 <div class="space-y-1.5"> 1872 <!-- Select All --> 1873 <div class="flex items-center gap-x-3"> 1874 <input 1875 type="checkbox" 1876 id="preview-select-all" 1877 tabindex="0" 1878 data-checkbox-select-all-target="selectAll" 1879 data-action="click->
1879checkbox-select-all#toggleAll"> 1880 <label for="preview-select-all" class="inline-block text-sm font-medium cursor-pointer select-none"> 1881 Select All 1882 </label> 1883 </div> 1884 1885 <!-- Checkbox List --> 1886 <div class="space-y-1.5 pl-7"> 1887 <div class="flex items-center gap-x-3"> 1888 <input 1889 type="checkbox" 1890 id="preview-item-1" 1891 tabindex="0" 1892 data-checkbox-select-all-target="checkbox" 1893 data-action="click->checkbox-select-all#toggle"> 1894 <label for="preview-item-1" class="inline-block text-sm cursor-pointer select-none"> 1895 Product Design 1896 </label> 1897 </div> 1898 1899 <div class="flex items-center gap-x-3"> 1900 <input 1901 type="checkbox" 1902 id="preview-item-2" 1903 tabindex="0" 1904 data-checkbox-select-all-target="checkbox" 1905 data-action="click->checkbox-select-all#toggle"> 1906 <label for="preview-item-2" class="inline-block text-sm cursor-pointer select-none"> 1907 Development 1908 </label> 1909 </div> 1910 1911 <div class="flex items-center gap-x-3"> 1912 <input 1913 type="checkbox" 1914 id="preview-item-3" 1915 tabindex="0" 1916 data-checkbox-select-all-target="checkbox" 1917 data-action="click->checkbox-select-all#toggle"> 1918 <label for="preview-item-3" class="inline-block text-sm cursor-pointer select-none"> 1919 Marketing 1920 </label> 1921 </div> 1922 </div> 1923 </div> 1924</div> 1925 1926 1927 </div> 1928 </div> 1929 <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"> 1930 <div class="h-48"></div> 1931 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1932 Checkbox Select All 1933 <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> 1934 </p> 1935 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 1936 </a> 1937</li> 1938 1939 1940 1941 <li class="relative"> 1942 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 1943 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 1944 <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
1944k: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"> 1945 <span class="text-xs">?</span> 1946 </button> 1947 1948 <template data-popover-target="content"> 1949 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 1950 <div class="space-y-2"> 1951 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 1952 1953 <div class="flex items-center gap-1.5 text-xs"> 1954 <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> 1955 <span class="flex grow gap-2">Tailwind CSS</span> 1956 </div> 1957 1958 <div class="flex items-center gap-1.5 text-xs"> 1959 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1959ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1960 <g class="fill-neutral-800 dark:fill-white"> 1961 <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> 1962 <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> 1963 <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> 1964 </g> 1965 </svg> 1966 <span class="flex grow gap-2">Stimulus</span> 1967 </div> 1968 1969 <div class="flex items-center gap-1.5 text-xs"> 1970 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 1971 <span class="flex grow gap-2">Floating UI</span> 1972 </div> 1973 </div> 1974 </div> 1975 </template> 1976 </div> 1977 1978 <div class="relative 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"> 1979 1980 <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
1980k:focus-visible:outline-neutral-200" 1981 data-controller="clipboard" 1982 data-clipboard-text="https://railsblocks.com" 1983 data-clipboard-show-tooltip-value="true" 1984 data-clipboard-success-message-value="Share it with friends ð"> 1985 <div data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1986 <span>Copy URL</span> 1987 <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 d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm4.75,10.25H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Zm0-3H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path></g></svg> 1988 </div> 1989 <div data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5"> 1990 <span>Copied</span> 1991 <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 d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm5.35,5.45l-3.75,5c-.136,.181-.346,.291-.572,.299-.009,0-.019,0-.028,0-.216,0-.422-.093-.564-.256l-1.75-2c-.273-.312-.241-.785,.071-1.058s.785-.242,1.058,.071l1.141,1.303,3.195-4.26c.249-.331,.719-.397,1.05-.15,.331,.249,.398,.719,.15,1.05Z"></path></g></svg> 1992 </div> 1993 </button> 1994 </div> 1995 </div> 1996 <a href="/docs/clipboard" 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"> 1997 <div class="h-48"></div> 1998 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 1999 Clipboard 2000 <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> 2001 </p> 2002 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p> 2003 </a> 2004</li> 2005 2006 2007 <li class="relative"> 2008 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2009 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2010 <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
2010k: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"> 2011 <span class="text-xs">?</span> 2012 </button> 2013 2014 <template data-popover-target="content"> 2015 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2016 <div class="space-y-2"> 2017 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2018 2019 <div class="flex items-center gap-1.5 text-xs"> 2020 <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> 2021 <span class="flex grow gap-2">Tailwind CSS</span> 2022 </div> 2023 2024 <div class="flex items-center gap-1.5 text-xs"> 2025 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2025ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2026 <g class="fill-neutral-800 dark:fill-white"> 2027 <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> 2028 <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> 2029 <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> 2030 </g> 2031 </svg> 2032 <span class="flex grow gap-2">Stimulus</span> 2033 </div> 2034 </div> 2035 </div> 2036 </template> 2037 </div> 2038 2039 <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"> 2040 <div data-controller="collapsible" data-collapsible-open-value="false" data-state="closed" class="w-[350px] space-y-2"> 2041 <!-- Header with toggle button --> 2042 <div class="flex items-center justify-between space-x-4"> 2043 <h4 class="text-xs font-semibold">You starred 2 repositories</h4> 2044 2045 <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->
2045collapsible#toggle"> 2046 <!-- Collapsed state icon (visible by default) --> 2047 2048 <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;"> 2049 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 2050 <polyline points="12.5 6.25 9 2.75 5.5 6.25"></polyline> 2051 <polyline points="12.5 11.75 9 15.25 5.5 11.75"></polyline> 2052 </g> 2053 </svg> 2054 2055 <!-- Expanded state icon (hidden by default) --> 2056 <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;"> 2057 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 2058 <polyline points="5.5 3.5 9 7 12.5 3.5"></polyline> 2059 <polyline points="5.5 14.5 9 11 12.5 14.5"></polyline> 2060 </g> 2061 </svg> 2062 2063 <span class="sr-only">Toggle</span> 2064 </button> 2065 </div> 2066 2067 <!-- Always visible content --> 2068 <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> 2069 2070 <!-- Collapsible content --> 2071 <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;"> 2072 <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> 2073 </div> 2074 </div> 2075 </div> 2076 </div> 2077 <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"> 2078 <div class="h-48"></div> 2079 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2080 Collapsible 2081 <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> 2082 </p> 2083 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p> 2084 </a> 2085</li> 2086 2087 2088 <li class="sm:hidden col-span-1"> 2089 <div class="relative mt-8 mb-6"> 2090 <div class="mx-auto"> 2091 <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"> 2092 <div data-controller="newsletter" 2093 class="max-w-xs"> 2094 <div data-newsletter-target="form"> 2095 <form data-action="submit->newsletter#submit" 2096 class="space-y-3"> 2097 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 2098 <input type="email" 2099 data-newsletter-target="email" 2100 placeholder="Enter your email..." 2101 class="form-control" 2102 2103 required> 2104 <div class="flex justify-center"> 2105 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 2106 </div> 2107 <button type="submit" 2108 data-newsletter-target="submitButton" 2109 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 dar
2109k:focus-visible:outline-neutral-200"> 2110 Subscribe to the newsletter 2111 </button> 2112 </form> 2113 <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]"> 2114 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 2115 </div> 2116 </div> 2117 2118 <div data-newsletter-target="successMessage" 2119 class="text-center py-4" 2120 style="display: none;"> 2121 <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"> 2122 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2123 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 2124 </svg> 2125 </div> 2126 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
2127 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 2128 </div> 2129 </div> 2130 </div> 2131 </div> 2132</div> 2133 2134 </li> 2135 <li class="z-20 relative"> 2136 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2137 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2138 <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"> 2139 <span class="text-xs">?</span> 2140 </button> 2141 2142 <template data-popover-target="content"> 2143 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2144 <div class="space-y-2"> 2145 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2146 2147 <div class="flex items-center gap-1.5 text-xs"> 2148 <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> 2149 <span class="flex grow gap-2">Tailwind CSS</span> 2150 </div> 2151 2152 <div class="flex items-center gap-1.5 text-xs"> 2153 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2153ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2154 <g class="fill-neutral-800 dark:fill-white"> 2155 <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> 2156 <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> 2157 <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> 2158 </g> 2159 </svg> 2160 <span class="flex grow gap-2">Stimulus</span> 2161 </div> 2162 2163 <div class="flex items-center gap-1.5 text-xs"> 2164 <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 127 141" version="1.1"> 2165 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 2166 <g fill-rule="nonzero" fill="#0ea5e9"> 2167 <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.7
21675,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"/> 2168 </g> 2169 </g> 2170 </svg> 2171 <span class="flex grow gap-2">Shoelace</span> 2172 </div> 2173 </div> 2174 </div> 2175 </template> 2176 </div> 2177 2178 <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"> 2179 2180 <div> 2181 <sl-color-picker 2182 value="#fff" 2183 class="z-50" 2184 opacity 2185 label="Select a color" 2186 format="hex" 2187 swatches=" 2188 #fb2c36 ; #ff6900 ; #fe9a00 ; #f0b100 ; #7ccf00 ; #00c950 ; #00bc7d ; #00bba7 ; #00b8db ; #00a6f4 ; #2b7fff ; #615fff ; #8e51ff ; #ad46ff ; #e12afb ; #f6339a 2189 " 2190 ></sl-color-picker> 2191 2192 </div> 2193 2194 </div> 2195 </div> 2196 <a href="/docs/color-picker" data-turbo-frame="_top" class="group z-20 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"> 2197 <div class="h-48"></div> 2198 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2199 Color picker 2200 <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> 2201 </p> 2202 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 2203 </a> 2204</li> 2205 2206 2207 <li class="relative"> 2208 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2209 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2210 <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
2210k: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"> 2211 <span class="text-xs">?</span> 2212 </button> 2213 2214 <template data-popover-target="content"> 2215 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2216 <div class="space-y-2"> 2217 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2218 2219 <div class="flex items-center gap-1.5 text-xs"> 2220 <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> 2221 <span class="flex grow gap-2">Tailwind CSS</span> 2222 </div> 2223 2224 <div class="flex items-center gap-1.5 text-xs"> 2225 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2225ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2226 <g class="fill-neutral-800 dark:fill-white"> 2227 <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> 2228 <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> 2229 <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> 2230 </g> 2231 </svg> 2232 <span class="flex grow gap-2">Stimulus</span> 2233 </div> 2234 2235 <div class="flex items-center gap-1.5 text-xs"> 2236 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.25,13H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,16H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,2H3.75c-1.517,0-2.75,1.233-2.75,2.75v2.5c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75v-2.5c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,6.5H3.75c-.689,0-1.25-.561-1.25-1.25v-2.5c0-.689,.561-1.25,1.25-1.25h4.75v5Zm5.833-2.833l-1.25,1.667c-.078,.105-.202,.167-.333,.167s-.255-.062-.333-.167l-1.25-1.667c-.095-.126-.11-.295-.039-.436,.071-.141,.215-.23,.373-.23h2.5c.158,0,.302,.089,.373,.23,.07,.141,.055,.31-.039,.436Z"></path></g></svg>
2237 <span class="flex grow gap-2">Tom select</span> 2238 </div> 2239 2240 <div class="flex items-center gap-1.5 text-xs"> 2241 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 2242 <span class="flex grow gap-2">Floating UI</span> 2243 </div> 2244 2245 </div> 2246 </div> 2247 </template> 2248 </div> 2249 2250 <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 *:w-full"> 2251 2252 <select name="frameworks_with_icons[]" id="frameworks_with_icons" multiple="multiple" data-controller="select" data-autocomplete="off" data-class="w-full" data-select-dropdown-input-value="true"><option value="">Select framework...</option><option value="rails">{"icon":"\u003cimg class='size-5 my-0 dark:invert' src='https://cdn.prod.website-files.com/61d14fa88c31332eb4187c19/62af9b63d93f763db776358d_Tech-Rails-Black.png'\u003e","name":"Rails","side":"\u003cspan class='ml-auto text-xs border border-neutral-200 bg-white px-1 py-0.5 rounded-md dark:bg-neutral-900/50 dark:border-neutral-700'\u003e42\u003c/span\u003e"}</option> 2253<option value="laravel">{"icon":"\u003cimg class='size-5 my-0 dark:invert' src='https://cdn.prod.website-files.com/61d14fa88c31332eb4187c19/62af928c450de106001471fd_Tech-Laravel-Black.png'\u003e","name":"Laravel","side":"\u003cspan class='ml-auto text-xs border border-neutral-200 bg-white px-1 py-0.5 rounded-md dark:bg-neutral-900/50 dark:border-neutral-700'\u003e21\u003c/span\u003e"}</option> 2254<option value="django">{"icon":"\u003cimg class='size-5 my-0 dark:invert' src='https://cdn.prod.website-files.com/61d14fa88c31332eb4187c19/62af943503138202b88a1ef6_Tech-Django-Black.png'\u003e","name":"Django","side":"\u003cspan class='ml-auto text-xs border border-neutral-200 bg-white px-1 py-0.5 rounded-md dark:bg-neutral-900/50 dark:border-neutral-700'\u003e12\u003c/span\u003e"}</option></select> 2255 </div> 2256 </div> 2257 <a href="/docs/combobox" 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"> 2258 <div class="h-48"></div> 2259 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2260 Combobox (Multi-select) 2261 <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> 2262 </p> 2263 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 10 components</p> 2264 </a> 2265</li> 2266 2267 2268 <li class="relative"> 2269 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 2270 <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"> 2271 <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"> 2272 <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
22726,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> 2273 Pro 2274 </a> 2275 </div> 2276 </div> 2277 2278 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2279 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2280 <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"> 2281 <span class="text-xs">?</span> 2282 </button> 2283 2284 <template data-popover-target="content"> 2285 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2286 <div class="space-y-2"> 2287 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2288 2289 <div class="flex items-center gap-1.5 text-xs"> 2290 <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> 2291 <span class="flex grow gap-2">Tailwind CSS</span> 2292 </div> 2293 2294 <div class="flex items-center gap-1.5 text-xs"> 2295 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2295ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2296 <g class="fill-neutral-800 dark:fill-white"> 2297 <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> 2298 <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> 2299 <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> 2300 </g> 2301 </svg> 2302 <span class="flex grow gap-2">Stimulus</span> 2303 </div> 2304 2305 <div class="flex items-center gap-1.5 text-xs"> 2306 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 2307 <span class="flex grow gap-2">Floating UI</span> 2308 </div> 2309 </div> 2310 </div> 2311 </template> 2312 </div> 2313 2314 <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"> 2315 <div class="w-full max-w-xs flex justify-center"> 2316 <div data-controller="modal"> 2317 <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->
2317modal#open:prevent"> 2318 Search brands 2319 </button> 2320 2321 <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"> 2322 <div class="sm:max-w-md w-full"> 2323 2324 <div class="sm:max-w-md mx-auto w-full"> 2325 <form class="relative" 2326 data-controller="autocomplete" 2327 data-autocomplete-submit-on-select-value="false" 2328 data-autocomplete-highlight-matches-value="false" 2329 data-autocomplete-suggestion-class-value="border-l-3 border-transparent" 2330 data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected" 2331 data-autocomplete-anchor-value="form" 2332 data-autocomplete-render-mode-value="inline" 2333 data-autocomplete-always-show-value="true" 2334 data-autocomplete-auto-select-first-value="true" 2335 data-autocomplete-preserve-search-on-select-value="true" 2336 data-autocomplete-select-action-value="modal#close:prevent" 2337 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\"
2337 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\"
2337 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\"
2337 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\"
2337 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\"
2337 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\"
2337 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\"
2337 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\"
2337 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\"
2337 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\"
2337 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)"}]'> 2338 2339 <div class="relative"> 2340 <input id="basic_command_palette" 2341 autofocus 2342 required 2343 data-autocomplete-target="input" 2344 placeholder="Select a brand..." 2345 class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4"> 2346 2347 <!-- Clear Button --> 2348 <button type="button" 2349 data-autocomplete-target="clearButton" 2350 data-action="click->autocomplete#clearInput" 2351 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
2351k:focus-visible:outline-neutral-200"> 2352 <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> 2353 </button> 2354 </div> 2355 2356 <div data-autocomplete-target="results" 2357 class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto" 2358 role="listbox" 2359 tabindex="-1"> 2360 </div> 2361 </form> 2362 </div> 2363 2364 <!-- Footer --> 2365 <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"> 2366 <div class="flex items-center gap-1"> 2367 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd> 2368 <span>to close,</span> 2369 </div> 2370 <div class="flex items-center gap-1"> 2371 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd> 2372 <span>to select,</span> 2373 </div> 2374 <div class="flex items-center gap-1"> 2375 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 2376 <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> 2377 </kbd> 2378 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 2379 <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> 2380 </kbd> 2381 <span>to navigate.</span> 2382 </div> 2383 </div> 2384 </div> 2385 </dialog> 2386</div> 2387 2388 </div> 2389 </div> 2390 </div> 2391 <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"> 2392 <div class="h-48"></div> 2393 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2394 Command Palette 2395 <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> 2396 </p> 2397 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 2398 </a> 2399</li> 2400 2401 2402 <li class="relative"> 2403 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2404 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2405 <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
2405k: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"> 2406 <span class="text-xs">?</span> 2407 </button> 2408 2409 <template data-popover-target="content"> 2410 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2411 <div class="space-y-2"> 2412 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2413 2414 <div class="flex items-center gap-1.5 text-xs"> 2415 <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> 2416 <span class="flex grow gap-2">Tailwind CSS</span> 2417 </div> 2418 2419 <div class="flex items-center gap-1.5 text-xs"> 2420 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2420ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2421 <g class="fill-neutral-800 dark:fill-white"> 2422 <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> 2423 <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> 2424 <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> 2425 </g> 2426 </svg> 2427 <span class="flex grow gap-2">Stimulus</span> 2428 </div> 2429 </div> 2430 </div> 2431 </template> 2432 </div> 2433 2434 <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"> 2435 <div class="max-w-md mx-auto"> 2436 <div data-controller="modal"> 2437 2438 <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
2438k:focus-visible:outline-neutral-200" 2439 data-action="click->modal#open:prevent"> 2440 Create Workspace 2441 </button> 2442 2443 <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" 2444 data-modal-target="dialog" 2445 data-action="mousedown->modal#backdropClose"> 2446 2447 <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"> 2448 <button type="button" 2449 data-action="modal#close:prevent" 2450 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"> 2451 <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"> 2452 <line x1="18" x2="6" y1="6" y2="18"></line> 2453 <line x1="6" x2="18" y1="6" y2="18"></line> 2454 </svg> 2455 <span class="sr-only">Close</span> 2456 </button> 2457 2458 <div class="mb-4"> 2459 <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Create Workspace</h2> 2460 </div> 2461 2462 <form data-controller="confirmation" 2463 data-confirmation-confirm-text-value="CREATE"> 2464 <div class="mb-6"> 2465 <label for="workspace-creation-confirmation" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"> 2466 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: 2467 </label> 2468 <input type="text" 2469 id="workspace-creation-confirmation" 2470 data-confirmation-target="input" 2471 class="form-control" 2472 autocomplete="off" 2473 placeholder="Type CREATE to confirm" 2474 autofocus> 2475 </div> 2476 2477 <div class="flex gap-3 justify-end"> 2478 <button type="button" 2479 data-action="click->modal#close:prevent click->confirmation#cancel" 2480 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"> 2481 Cancel 2482 </button> 2483 <button type="button" 2484 data-confirmation-target="confirmButton" 2485 data-action="click->confirmation#confirm click->modal#close:prevent" 2486 disabled 2487 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"> 2488 Create Workspace 2489 </button> 2490 </div> 2491 </form> 2492 </div> 2493 </dialog> 2494 </div> 2495</div> 2496 2497 </div> 2498 </div> 2499 <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"> 2500 <div class="h-48"></div> 2501 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2502 Confirmation 2503 <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> 2504 </p> 2505 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 2506 </a> 2507</li> 2508 2509 2510 <li class="relative"> 2511 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 2512 <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"> 2513 <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"> 2514 <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
25146,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> 2515 Pro 2516 </a> 2517 </div> 2518 </div> 2519 2520 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2521 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2522 <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"> 2523 <span class="text-xs">?</span> 2524 </button> 2525 2526 <template data-popover-target="content"> 2527 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2528 <div class="space-y-2"> 2529 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2530 2531 <div class="flex items-center gap-1.5 text-xs"> 2532 <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> 2533 <span class="flex grow gap-2">Tailwind CSS</span> 2534 </div> 2535 2536 <div class="flex items-center gap-1.5 text-xs"> 2537 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2537ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2538 <g class="fill-neutral-800 dark:fill-white"> 2539 <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> 2540 <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> 2541 <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> 2542 </g> 2543 </svg> 2544 <span class="flex grow gap-2">Stimulus</span> 2545 </div> 2546 2547 <div class="flex items-center gap-1.5 text-xs"> 2548 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 2549 <span class="flex grow gap-2">Floating UI</span> 2550 </div> 2551 </div> 2552 </div> 2553 </template> 2554 </div> 2555 2556 <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 *:w-full"> 2557 2558 <div data-controller="context-menu"> 2559 <div class="cursor-context-menu select-none py-8 px-4 lg:px-8 border-2 border-dashed border-neutral-200 dark:border-neutral-700 text-xs lg:text-sm text-center text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 rounded-md">
2560 <span class="hidden lg:inline">Right click to open the context menu</span> 2561 <span class="inline lg:hidden">Long press to open the context menu</span> 2562 </div> 2563 2564 <dialog 2565 class="outline-hidden fixed z-50 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 dark:border-neutral-700/50" 2566 style="margin: 0;" 2567 data-context-menu-target="menu" 2568 data-controller="menu" 2569 data-action="click@document->dropdown-popover#closeOnClickOutside 2570 keydown.up->menu#prev keydown.down->menu#next 2571 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 2572 > 2573 <div class="flex flex-col p-1" role="menu"> 2574 <button 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"> 2575 Cut 2576 <span class="ml-auto text-xs text-neutral-500">âX</span> 2577 </button> 2578 <button 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"> 2579 Copy 2580 <span class="ml-auto text-xs text-neutral-500">âC</span> 2581 </button> 2582 <button disabled 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"> 2583 Duplicate 2584 <span class="ml-auto text-xs text-neutral-500">âD</span> 2585 </button> 2586 <button 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"> 2587 Paste 2588 <span class="ml-auto text-xs text-neutral-500">âV</span> 2589 </button> 2590 <div class="flex flex-col" role="menu"> 2591 <div class="relative w-full" 2592 data-controller="dropdown-popover" 2593 data-dropdown-popover-nested-value="true" 2594 data-dropdown-popover-flip-class="translate-y-full"> 2595 <button class="text-left w-full text-sm flex items-center justify-between 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-[state=open]:!bg-neutral-400/20" 2596 data-dropdown-popover-target="button" 2597 data-action="dropdown-popover#toggle" 2598 data-menu-target="item" 2599 role="menuitem"> 2600 Share 2601 <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g></svg> 2602 </button> 2603 2604 <dialog 2605 class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md 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 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100" 2606 data-controller="menu" 2607 data-dropdown-popover-target="menu" 2608 data-action="click@document->dropdown-popover#closeOnClickOutside 2609 keydown.up->menu#prev keydown.down->menu#next 2610 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 2611 > 2612 <div class="flex flex-col p-1" role="menu"> 2613 <button 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 dar
2613k:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 2614 Email link 2615 </button> 2616 <button 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"> 2617 Messages 2618 </button> 2619 <button 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"> 2620 Notes 2621 </button> 2622 </div> 2623 </dialog> 2624 </div> 2625 </div> 2626 </div> 2627 </dialog> 2628 </div> 2629 2630 </div> 2631 </div> 2632 <a href="/docs/context-menu" 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"> 2633 <div class="h-48"></div> 2634 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2635 Context menu 2636 <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> 2637 </p> 2638 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 2639 </a> 2640</li> 2641 2642 2643 <li class="relative"> 2644 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 2645 <div class="inline relative"> 2646 <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"> 2647 <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"> 2648 <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> 2649 Pro 2650 </a> 2651 </div> 2652 </div> 2653 2654 </div> 2655 2656 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2657 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2658 <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
2658k: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"> 2659 <span class="text-xs">?</span> 2660 </button> 2661 2662 <template data-popover-target="content"> 2663 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2664 <div class="space-y-2"> 2665 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2666 2667 <div class="flex items-center gap-1.5 text-xs"> 2668 <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> 2669 <span class="flex grow gap-2">Tailwind CSS</span> 2670 </div> 2671 2672 <div class="flex items-center gap-1.5 text-xs"> 2673 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2673ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2674 <g class="fill-neutral-800 dark:fill-white"> 2675 <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> 2676 <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> 2677 <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> 2678 </g> 2679 </svg> 2680 <span class="flex grow gap-2">Stimulus</span> 2681 </div> 2682 2683 <div class="flex items-center gap-1.5 text-xs"> 2684 <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" /> 2685 <span class="flex grow gap-2">Pagy</span> 2686 </div> 2687 </div> 2688 </div> 2689 </template> 2690 </div> 2691 2692 <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"> 2693 2694 2695<div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4"> 2696 <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" 2697 data-controller="datatable-preview" 2698 data-datatable-preview-sort-column-value="name" 2699 data-datatable-preview-sort-direction-value="asc" 2700 data-datatable-preview-page-value="1" 2701 data-datatable-preview-per-page-value="3" 2702 data-datatable-preview-total-value="9"> 2703 <table class="w-full text-[10px]">
2704 <thead class="bg-neutral-100 dark:bg-neutral-800"> 2705 <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)]"> 2706 <th scope="col" 2707 class="group pl-3 pr-2 cursor-pointer select-none" 2708 data-datatable-preview-target="header" 2709 data-column="name" 2710 data-action="click->datatable-preview#sort"> 2711 <div class="inline-flex items-center gap-1"> 2712 <span class="font-semibold text-neutral-900 dark:text-neutral-50">Name</span> 2713 2714<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"> 2715 <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5"> 2716 <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 2717 <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> 2718 </svg> 2719 </span> 2720 2721 <span data-datatable-target="loader" class="hidden p-0.5"> 2722 <div class="flex items-center justify-center size-2.5"> 2723 <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2724 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> 2725 <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> 2726 </svg> 2727 </div> 2728 </span> 2729</span> 2730 2731 2732 </div> 2733 </th> 2734 2735 <th scope="col" 2736 class="group px-2 cursor-pointer select-none" 2737 data-datatable-preview-target="header" 2738 data-column="role" 2739 data-action="click->datatable-preview#sort"> 2740 <div class="inline-flex items-center gap-1"> 2741 <span class="font-semibold text-neutral-900 dark:text-neutral-50">Role</span> 2742 2743<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"> 2744 <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5"> 2745 <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"> 2746 <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> 2747 </svg> 2748 </span> 2749 2750 <span data-datatable-target="loader" class="hidden p-0.5"> 2751 <div class="flex items-center justify-center size-2.5"> 2752 <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2753 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> 2754 <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> 2755 </svg> 2756 </div> 2757 </span> 2758</span> 2759 2760 2761 </div> 2762 </th> 2763 2764 <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50"> 2765 Status 2766 </th> 2767 </tr> 2768 </thead> 2769 <tbody data-datatable-preview-target="body" class="*:*:py-1"> 2770 <tr data-name="Alex Johnson" 2771 data-role="Admin" 2772 data-status-color="green" 2773 data-status="Active" 2774 data-index="0" 2775 class=""> 2776 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2777 Alex Johnson 2778 </td> 2779 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2780 Admin 2781 </td> 2782 <td class="pl-2 pr-3">
2783 <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"> 2784 Active 2785 </span> 2786 </td> 2787 </tr> 2788 <tr data-name="Sarah Miller" 2789 data-role="Editor" 2790 data-status-color="green" 2791 data-status="Active" 2792 data-index="1" 2793 class=""> 2794 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2795 Sarah Miller 2796 </td> 2797 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2798 Editor 2799 </td> 2800 <td class="pl-2 pr-3"> 2801 <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"> 2802 Active 2803 </span> 2804 </td> 2805 </tr> 2806 <tr data-name="Michael Chen" 2807 data-role="Viewer" 2808 data-status-color="yellow" 2809 data-status="Pending" 2810 data-index="2" 2811 class=""> 2812 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2813 Michael Chen 2814 </td> 2815 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2816 Viewer 2817 </td> 2818 <td class="pl-2 pr-3"> 2819 <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"> 2820 Pending 2821 </span> 2822 </td> 2823 </tr> 2824 <tr data-name="Emily Davis" 2825 data-role="Editor" 2826 data-status-color="green" 2827 data-status="Active" 2828 data-index="3" 2829 class="hidden"> 2830 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2831 Emily Davis 2832 </td> 2833 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2834 Editor 2835 </td> 2836 <td class="pl-2 pr-3"> 2837 <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"> 2838 Active 2839 </span> 2840 </td> 2841 </tr> 2842 <tr data-name="James Wilson" 2843 data-role="Viewer" 2844 data-status-color="green" 2845 data-status="Active" 2846 data-index="4" 2847 class="hidden"> 2848 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2849 James Wilson 2850 </td> 2851 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2852 Viewer 2853 </td> 2854 <td class="pl-2 pr-3"> 2855 <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"> 2856 Active 2857 </span> 2858 </td> 2859 </tr> 2860 <tr data-name="Lisa Anderson" 2861 data-role="Admin" 2862 data-status-color="green" 2863 data-status="Active" 2864 data-index="5" 2865 class="hidden"> 2866 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2867 Lisa Anderson 2868 </td> 2869 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2870 Admin 2871 </td> 2872 <td class="pl-2 pr-3"> 2873 <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"> 2874 Active 2875 </span> 2876 </td> 2877 </tr> 2878 <tr data-name="Robert Brown" 2879 data-role="Viewer" 2880 data-status-color="green" 2881 data-status="Active" 2882 data-index="6" 2883 class="hidden"> 2884 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2885 Robert Brown 2886 </td> 2887 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2888 Viewer 2889 </td> 2890 <td class="pl-2 pr-3">
2891 <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"> 2892 Active 2893 </span> 2894 </td> 2895 </tr> 2896 <tr data-name="Patricia Taylor" 2897 data-role="Editor" 2898 data-status-color="yellow" 2899 data-status="Pending" 2900 data-index="7" 2901 class="hidden"> 2902 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2903 Patricia Taylor 2904 </td> 2905 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2906 Editor 2907 </td> 2908 <td class="pl-2 pr-3"> 2909 <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"> 2910 Pending 2911 </span> 2912 </td> 2913 </tr> 2914 <tr data-name="David Martinez" 2915 data-role="Admin" 2916 data-status-color="green" 2917 data-status="Active" 2918 data-index="8" 2919 class="hidden"> 2920 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 2921 David Martinez 2922 </td> 2923 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 2924 Admin 2925 </td> 2926 <td class="pl-2 pr-3"> 2927 <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"> 2928 Active 2929 </span> 2930 </td> 2931 </tr> 2932 </tbody> 2933 </table> 2934 2935 <div class="border-t border-black/10 dark:border-white/10 px-3 py-1 flex items-center justify-between gap-2"> 2936 <p class="text-[9px] text-neutral-500 dark:text-neutral-400" data-datatable-preview-target="info"> 2937 1â3 of 9 2938 </p> 2939 <div class="inline-flex items-center gap-1"> 2940 <button type="button" 2941 data-datatable-preview-target="prevBtn" 2942 data-action="click->datatable-preview#prevPage" 2943 disabled 2944 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"> 2945 <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 2946 <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" /> 2947 </svg> 2948 </button> 2949 <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"> 2950 1 / 3 2951 </span> 2952 <button type="button" 2953 data-datatable-preview-target="nextBtn" 2954 data-action="click->datatable-preview#nextPage" 2955 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"> 2956 <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 2957 <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" /> 2958 </svg> 2959 </button> 2960 </div> 2961 </div> 2962 </div> 2963</div> 2964 2965 </div> 2966 </div> 2967 <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"> 2968 <div class="h-48"></div> 2969 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 2970 Datatable 2971 <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> 2972 </p> 2973 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 2974 </a> 2975</li> 2976 2977 2978 <li class="relative"> 2979 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 2980 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 2981 <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
2981k: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"> 2982 <span class="text-xs">?</span> 2983 </button> 2984 2985 <template data-popover-target="content"> 2986 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 2987 <div class="space-y-2"> 2988 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 2989 2990 <div class="flex items-center gap-1.5 text-xs"> 2991 <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> 2992 <span class="flex grow gap-2">Tailwind CSS</span> 2993 </div> 2994 2995 <div class="flex items-center gap-1.5 text-xs"> 2996 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2996ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 2997 <g class="fill-neutral-800 dark:fill-white"> 2998 <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> 2999 <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> 3000 <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> 3001 </g> 3002 </svg> 3003 <span class="flex grow gap-2">Stimulus</span> 3004 </div> 3005 3006 <div class="flex items-center gap-1.5 text-xs"> 3007 <img alt="Air Datepicker" class="size-3.5" src="/assets/air-datepicker-logo-dd6584168d2424bb14484ea9e38af898c268776ac0ecacca5e8937f5c4b5966e.webp" /> 3008 <span class="flex grow gap-2">Air Datepicker</span> 3009 </div> 3010 3011 <div class="flex items-center gap-1.5 text-xs"> 3012 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
3013 <span class="flex grow gap-2">Floating UI</span> 3014 </div> 3015 </div> 3016 </div> 3017 </template> 3018 </div> 3019 3020 <div data-controller="date-picker" 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 *:w-full"> 3021 <div class="w-full flex items-center justify-center relative"> 3022 <input class="form-control" readonly data-date-picker-target="input" placeholder="Select date..."> 3023 <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center opacity-80"> 3024 <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="M5.75,3.5c-.414,0-.75-.336-.75-.75V.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V2.75c0,.414-.336,.75-.75,.75Z"></path><path d="M12.25,3.5c-.414,0-.75-.336-.75-.75V.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V2.75c0,.414-.336,.75-.75,.75Z"></path><path d="M13.75,2H4.25c-1.517,0-2.75,1.233-2.75,2.75V13.25c0,1.517,1.233,2.75,2.75,2.75H13.75c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm0,12.5H4.25c-.689,0-1.25-.561-1.25-1.25V7H15v6.25c0,.689-.561,1.25-1.25,1.25Z"></path></g></svg> 3025 </div> 3026 </div> 3027 </div> 3028 3029 </div> 3030 <a href="/docs/date-picker" 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"> 3031 <div class="h-48"></div> 3032 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3033 Date picker 3034 <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> 3035 </p> 3036 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 10 components</p> 3037 </a> 3038</li> 3039 3040 3041 <li class="relative"> 3042 <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 3043 <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"> 3044 <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"> 3045 <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> 3046 New 3047 </div> 3048 </div> 3049</div> 3050 3051 3052 <div class="pointer-events-none absolute inset-0 left-0 top-0"> 3053 <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover"> 3054 <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
3054k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200"> 3055 <span class="text-xs">?</span> 3056 </button> 3057 3058 <template data-popover-target="content"> 3059 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3060 <div class="space-y-2"> 3061 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 3062 3063 <div class="flex items-center gap-1.5 text-xs"> 3064 <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> 3065 <span>Tailwind CSS</span> 3066 </div> 3067 3068 <div class="flex items-center gap-1.5 text-xs"> 3069 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3069ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3070 <g class="fill-neutral-800 dark:fill-white"> 3071 <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> 3072 <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> 3073 <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> 3074 </g> 3075 </svg> 3076 <span class="flex grow gap-2">Stimulus</span> 3077 </div> 3078 <div class="flex items-center gap-1.5 text-xs"> 3079 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 3080 <span>Floating UI</span> 3081 </div> 3082 </div> 3083 </div> 3084 </template> 3085 </div> 3086 3087 <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]"> 3088 <div 3089 data-controller="theme" 3090 data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20" 3091 data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5">
3092 <div 3093 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" 3094 data-theme-target="picker" 3095 role="radiogroup" 3096 aria-label="Theme selection"> 3097 <button 3098 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" 3099 aria-label="System theme" 3100 data-controller="tooltip" 3101 data-tooltip-content="System" 3102 data-tooltip-animation-value="fade origin" 3103 data-tooltip-delay-value="500" 3104 data-theme-target="option" 3105 data-action="click->theme#choose keydown->theme#navigate" 3106 data-theme-mode="system" 3107 type="button" 3108 role="radio" 3109 aria-checked="true" 3110 tabindex="0"> 3111 <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> 3112 </button> 3113 <button 3114 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" 3115 aria-label="Light theme" 3116 data-controller="tooltip" 3117 data-tooltip-content="Light mode" 3118 data-tooltip-animation-value="fade origin" 3119 data-tooltip-delay-value="500" 3120 data-theme-target="option" 3121 data-action="click->theme#choose keydown->theme#navigate" 3122 data-theme-mode="light" 3123 type="button" 3124 role="radio" 3125 aria-checked="false" 3126 tabindex="-1"> 3127 <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> 3128 </button> 3129 <button 3130 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" 3131 aria-label="Dark theme" 3132 data-controller="tooltip" 3133 data-tooltip-content="Dark mode" 3134 data-tooltip-animation-value="fade origin" 3135 data-tooltip-delay-value="500" 3136 data-theme-target="option" 3137 data-action="click->theme#choose keydown->theme#navigate" 3138 data-theme-mode="dark" 3139 type="button" 3140 role="radio" 3141 aria-checked="false" 3142 tabindex="-1"> 3143 <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> 3144 </button> 3145 </div> 3146</div> 3147 3148 </div> 3149 </div> 3150 3151 <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"> 3152 <div class="h-48"></div> 3153 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 3154 Dark Mode Switcher 3155 <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> 3156 </p> 3157 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p> 3158 </a> 3159</li> 3160 3161 3162 <li class="sm:hidden col-span-1"> 3163 <div class="relative mt-8 mb-6"> 3164 <div class="mx-auto"> 3165 <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"> 3166 <div data-controller="newsletter" 3167 class="max-w-xs"> 3168 <div data-newsletter-target="form"> 3169 <form data-action="submit->newsletter#submit" 3170 class="space-y-3"> 3171 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 3172 <input type="email" 3173 data-newsletter-target="email" 3174 placeholder="Enter your email..." 3175 class="form-control" 3176 3177 required> 3178 <div class="flex justify-center"> 3179 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 3180 </div> 3181 <button type="submit" 3182 data-newsletter-target="submitButton" 3183 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 dar
3183k:focus-visible:outline-neutral-200"> 3184 Subscribe to the newsletter 3185 </button> 3186 </form> 3187 <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]"> 3188 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 3189 </div> 3190 </div> 3191 3192 <div data-newsletter-target="successMessage" 3193 class="text-center py-4" 3194 style="display: none;"> 3195 <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"> 3196 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 3197 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 3198 </svg> 3199 </div> 3200 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
3201 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 3202 </div> 3203 </div> 3204 </div> 3205 </div> 3206</div> 3207 3208 </li> 3209 <li class="relative"> 3210 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3211 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3212 <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"> 3213 <span class="text-xs">?</span> 3214 </button> 3215 3216 <template data-popover-target="content"> 3217 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3218 <div class="space-y-2"> 3219 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3220 3221 <div class="flex items-center gap-1.5 text-xs"> 3222 <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> 3223 <span class="flex grow gap-2">Tailwind CSS</span> 3224 </div> 3225 3226 <div class="flex items-center gap-1.5 text-xs"> 3227 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3227ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3228 <g class="fill-neutral-800 dark:fill-white"> 3229 <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> 3230 <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> 3231 <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> 3232 </g> 3233 </svg> 3234 <span class="flex grow gap-2">Stimulus</span> 3235 </div> 3236 3237 <div class="flex items-center gap-1.5 text-xs"> 3238 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 3239 <span class="flex grow gap-2">Floating UI</span> 3240 </div> 3241 3242 <div class="flex items-center gap-1.5 text-xs"> 3243 <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c4
324300aafdebbd.webp" /> 3244 <span class="flex grow gap-2">Motion.dev</span> 3245 </div> 3246 </div> 3247 </div> 3248 </template> 3249 </div> 3250 3251 <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"> 3252 3253 3254 <div class=""> 3255 <div class="rounded-xl flex items-center justify-center"> 3256 <div class="flex w-fit mx-auto items-center justify-center" data-controller="dock"> 3257 <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"> 3258 <a href="#" class="rounded-full" data-dock-target="icon" data-tooltip="Home" data-tooltip-placement="top" > 3259 <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"> 3260 <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%"> 3261 <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> 3262 </div> 3263 </div> 3264 </a> 3265 <a href="/?articles=true" class="rounded-full" data-dock-target="icon" data-tooltip="Articles" data-tooltip-placement="top" > 3266 <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"> 3267 <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%"> 3268 <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> 3269 </div> 3270 </div> 3271 </a> 3272 <a href="/?projects=true" class="rounded-full" data-dock-target="icon" data-tooltip="Projects" data-tooltip-placement="top" > 3273 <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"> 3274 <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%"> 3275 <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> 3276 </div> 3277 </div> 3278 </a> 3279 </div> 3280 <div class="absolute right-5 bottom-17 flex items-end flex-col gap-2 hidden md:hidden" data-dock-target="mobileMenu"> 3281 <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
3281k:active:bg-neutral-700"> 3282 <span class="text-sm">Home</span> 3283 <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> 3284 </a> 3285 <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"> 3286 <span class="text-sm">Articles</span> 3287 <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> 3288 </a> 3289 <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"> 3290 <span class="text-sm">Projects</span> 3291 <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> 3292 </a> 3293 </div> 3294 <div class="flex items-center gap-2 md:hidden"> 3295 <span class="text-sm max-w-[175px]">The dock is replaced by a drop-up menu on mobile</span> 3296 <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> 3297 </div> 3298 <div class="absolute right-5 bottom-5 block md:hidden" 3299 data-action="click->dock#toggleMobile"> 3300 <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"> 3301 <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> 3302 </button> 3303 </div> 3304 </div> 3305 </div> 3306 </div> 3307 3308 </div> 3309 </div> 3310 <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"> 3311 <div class="h-48"></div> 3312 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3313 Dock Menu 3314 <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> 3315 </p> 3316 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 1 component</p> 3317 </a> 3318</li> 3319 3320 3321 <li class="relative"> 3322 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 3323 <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"> 3324 <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"> 3325 <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
33256,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> 3326 Pro 3327 </a> 3328 </div> 3329 </div> 3330 3331 <div class="pointer-events-none absolute inset-0 top-0 left-0"> 3332 <div class="pointer-events-auto absolute top-4 right-4 z-10 inline-block" data-controller="popover"> 3333 <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"> 3334 <span class="text-xs">?</span> 3335 </button> 3336 3337 <template data-popover-target="content"> 3338 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3339 <div class="space-y-2"> 3340 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 3341 3342 <div class="flex items-center gap-1.5 text-xs"> 3343 <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> 3344 <span class="flex grow gap-2">Tailwind CSS</span> 3345 </div> 3346 3347 <div class="flex items-center gap-1.5 text-xs"> 3348 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3348ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3349 <g class="fill-neutral-800 dark:fill-white"> 3350 <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> 3351 <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> 3352 <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> 3353 </g> 3354 </svg> 3355 <span class="flex grow gap-2">Stimulus</span> 3356 </div> 3357 </div> 3358 </div> 3359 </template> 3360 </div> 3361 3362 <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">
3363 <div id="drawer-preview" class="group"> 3364 <a class="hidden p-1 align-middle group-hover:inline-block" href="#drawer-preview"> 3365 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500" viewBox="0 0 24 24" fill="currentColor"> 3366 <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> 3367 </svg> 3368 </a> 3369 </div> 3370 <div class="not-prose"> 3371 <div data-controller="drawer" data-drawer-snap-points-value='["auto"]'> 3372 <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> 3373 3374 <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"> 3375 <div class="rounded-t-xl bg-white dark:bg-neutral-800"> 3376 <div data-drawer-target="handle" class="cursor-grab select-none active:cursor-grabbing group"> 3377 <div class="flex h-8 w-full items-center justify-center"> 3378 <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
3378k:group-active:bg-neutral-500"></div> 3379 </div> 3380 3381 <div class="border-b border-neutral-200 px-6 pb-4 dark:border-neutral-700"> 3382 <h2 class="text-xl font-semibold text-neutral-900 dark:text-white">Drawer Example</h2> 3383 </div> 3384 </div> 3385 3386 <div class="px-6 pt-4 pb-6"> 3387 <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"> 3388 <p class="text-sm text-neutral-600 dark:text-neutral-400">Drag down to dismiss or click the button below</p> 3389 </div> 3390 <div class="mt-4 flex gap-2"> 3391 <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> 3392 </div> 3393 </div> 3394 </div> 3395 </dialog> 3396 </div> 3397 </div> 3398 </div> 3399 </div> 3400 <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"> 3401 <div class="h-48"></div> 3402 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 3403 Drawer 3404 <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> 3405 </p> 3406 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 8 components</p> 3407 </a> 3408</li> 3409 3410 3411 <li class="relative"> 3412 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 3413 <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"> 3414 <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"> 3415 <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> 3416 Pro 3417 </a> 3418 </div> 3419 </div> 3420 3421 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3422 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3423 <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
3423k: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"> 3424 <span class="text-xs">?</span> 3425 </button> 3426 3427 <template data-popover-target="content"> 3428 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3429 <div class="space-y-2"> 3430 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3431 3432 <div class="flex items-center gap-1.5 text-xs"> 3433 <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> 3434 <span class="flex grow gap-2">Tailwind CSS</span> 3435 </div> 3436 3437 <div class="flex items-center gap-1.5 text-xs"> 3438 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3438ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3439 <g class="fill-neutral-800 dark:fill-white"> 3440 <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> 3441 <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> 3442 <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> 3443 </g> 3444 </svg> 3445 <span class="flex grow gap-2">Stimulus</span> 3446 </div> 3447 3448 <div class="flex items-center gap-1.5 text-xs"> 3449 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 3450 <span class="flex grow gap-2">Floating UI</span> 3451 </div> 3452 </div> 3453 </div> 3454 </template> 3455 </div> 3456 3457 <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"> 3458 3459 <div class="flex gap-1 border-b border-neutral-200 dark:border-neutral-700"> 3460 <!-- File Menu --> 3461 <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full"> 3462 <button class="mb-1 rounded-md px-2.5 py-1.5 text-sm outline-hidden hover:bg-neutral-100 dar
3462k:hover:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle">Menu</button> 3463 3464 <dialog 3465 class="absolute z-10 w-48 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" 3466 data-controller="menu" 3467 data-dropdown-popover-target="menu" 3468 data-action="click@document->dropdown-popover#closeOnClickOutside 3469 keydown.up->menu#prev keydown.down->menu#next 3470 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 3471 > 3472 <div class="flex flex-col p-1" role="menu"> 3473 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem"> 3474 New File 3475 <span class="ml-auto text-xs text-neutral-500">âN</span> 3476 </button> 3477 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem"> 3478 Open... 3479 <span class="ml-auto text-xs text-neutral-500">âO</span> 3480 </button> 3481 <div class="flex flex-col" role="menu"> 3482 <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-auto-close-value="false" data-dropdown-popover-flip-class="translate-y-full"> 3483 <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu"> 3484 Options 3485 <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12"> 3486 <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g> 3487 </svg> 3488 </button> 3489 3490 <dialog 3491 class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md 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 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100" 3492 data-controller="menu" 3493 data-dropdown-popover-target="menu" 3494 data-action="click@document->dropdown-popover#closeOnClickOutside 3495 keydown.up->menu#prev keydown.down->menu#next 3496 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 3497 > 3498 <div class="flex flex-col p-1.5" role="listbox"> 3499 <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1"> 3500 <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500">
3501 <span class="text-sm font-normal">Option 1</span> 3502 </label> 3503 <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1"> 3504 <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500"> 3505 <span class="text-sm font-normal">Option 2</span> 3506 </label> 3507 <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1"> 3508 <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500"> 3509 <span class="text-sm font-normal">Option 3</span> 3510 </label> 3511 </div> 3512 </dialog> 3513 </div> 3514 </div> 3515 <div class="flex flex-col" role="menu"> 3516 <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-flip-class="translate-y-full"> 3517 <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu"> 3518 Share 3519 <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12"> 3520 <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g> 3521 </svg> 3522 </button> 3523 3524 <dialog 3525 class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md 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 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100" 3526 data-controller="menu" 3527 data-dropdown-popover-target="menu" 3528 data-action="keydown.up->menu#prev keydown.down->menu#next 3529 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 3530 > 3531 <div class="flex flex-col p-1" role="menu"> 3532 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Email link</button> 3533 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Messages</button> 3534 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Notes</button> 3535 </div> 3536 </dialog> 3537 </div> 3538 </div>
3539 <div class="my-1 border-t border-neutral-100 dark:border-neutral-700"></div> 3540 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem"> 3541 Save 3542 <span class="ml-auto text-xs text-neutral-500">âS</span> 3543 </button> 3544 </div> 3545 </dialog> 3546 </div> 3547 3548 <!-- Hover Menu --> 3549 <div class="relative hidden md:block" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full" data-dropdown-popover-hover-value="true"> 3550 <button class="mb-1 rounded-md px-2.5 py-1.5 text-sm outline-hidden hover:bg-neutral-100 dark:hover:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle">Hover</button> 3551 3552 <dialog 3553 class="absolute z-10 w-48 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" 3554 data-controller="menu" 3555 data-dropdown-popover-target="menu" 3556 data-action="click@document->dropdown-popover#closeOnClickOutside 3557 keydown.up->menu#prev keydown.down->menu#next 3558 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 3559 > 3560 <div class="flex flex-col p-1" role="menu"> 3561 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem"> 3562 New File 3563 <span class="ml-auto text-xs text-neutral-500">âN</span> 3564 </button> 3565 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem"> 3566 Open... 3567 <span class="ml-auto text-xs text-neutral-500">âO</span> 3568 </button> 3569 <div class="flex flex-col" role="menu"> 3570 <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-hover-value="true" data-dropdown-popover-auto-close-value="false" data-dropdown-popover-flip-class="translate-y-full"> 3571 <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu"> 3572 Options 3573 <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12"> 3574 <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g> 3575 </svg> 3576 </button> 3577 3578 <dialog 3579 class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md 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 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100" 3580 data-controller="menu" 3581 data-dropdown-popover-target="menu" 3582 data-action="click@document->dropdown-popover#closeOnClickOutside 3583 keydown.up->menu#prev keydown.down->menu#next 3584 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 3585 > 3586 <div class="flex flex-col p-1.5" role="listbox"> 3587 <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dar
3587k:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1"> 3588 <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500"> 3589 <span class="text-sm font-normal">Option 1</span> 3590 </label> 3591 <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1"> 3592 <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500"> 3593 <span class="text-sm font-normal">Option 2</span> 3594 </label> 3595 <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1"> 3596 <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500"> 3597 <span class="text-sm font-normal">Option 3</span> 3598 </label> 3599 </div> 3600 </dialog> 3601 </div> 3602 </div> 3603 <div class="flex flex-col" role="menu"> 3604 <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-hover-value="true" data-dropdown-popover-flip-class="translate-y-full"> 3605 <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu"> 3606 Share 3607 <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12"> 3608 <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g> 3609 </svg> 3610 </button> 3611 3612 <dialog 3613 class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md 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 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100" 3614 data-controller="menu" 3615 data-dropdown-popover-target="menu" 3616 data-action="keydown.up->menu#prev keydown.down->menu#next 3617 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 3618 > 3619 <div class="flex flex-col p-1" role="menu"> 3620 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Email link</button> 3621 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Messages</button> 3622 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dar
3622k:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Notes</button> 3623 </div> 3624 </dialog> 3625 </div> 3626 </div> 3627 <div class="my-1 border-t border-neutral-100 dark:border-neutral-700"></div> 3628 <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem"> 3629 Save 3630 <span class="ml-auto text-xs text-neutral-500">âS</span> 3631 </button> 3632 </div> 3633 </dialog> 3634 </div> 3635 </div> 3636 </div> 3637 </div> 3638 <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/dropdown" data-turbo-frame="_top"> 3639 <div class="h-48"></div> 3640 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3641 Dropdown 3642 <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> 3643 </p> 3644 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p> 3645 </a> 3646</li> 3647 3648 3649 <li class="relative"> 3650 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3651 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3652 <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
3652k: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"> 3653 <span class="text-xs">?</span> 3654 </button> 3655 3656 <template data-popover-target="content"> 3657 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3658 <div class="space-y-2"> 3659 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3660 3661 <div class="flex items-center gap-1.5 text-xs"> 3662 <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> 3663 <span class="flex grow gap-2">Tailwind CSS</span> 3664 </div> 3665 3666 <div class="flex items-center gap-1.5 text-xs"> 3667 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3667ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3668 <g class="fill-neutral-800 dark:fill-white"> 3669 <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> 3670 <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> 3671 <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> 3672 </g> 3673 </svg> 3674 <span class="flex grow gap-2">Stimulus</span> 3675 </div> 3676 3677 <div class="flex items-center gap-1.5 text-xs"> 3678 <img alt="Emoji Mart by Missive" class="size-3.5" src="/assets/missive-logo-96e2465ff6c400fbfc640f66b1bd8db700e2e9b5115026543035b7afb534a531.webp" /> 3679 <span class="flex grow gap-2">Emoji Mart</span> 3680 </div> 3681 </div> 3682 </div> 3683 </template> 3684 </div> 3685 3686 <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 *:w-full"> 3687 3688 <form action=""> 3689 <div data-controller="emoji-picker" data-emoji-picker-auto-submit-value="false"> 3690 <div class="flex items-center justify-center"> 3691 <button type="button" class="outline-hidden size-8 mr-1 text-xl shrink-0 flex items-center justify-center rounded-md text-neutral-700 hover:bg-neutral-100 hover:text-neutral-800 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-neutral-200" data-action="click->
3691emoji-picker#toggle" data-emoji-picker-target="button"> 3692 <svg xmlns="http://www.w3.org/2000/svg" class="size-6" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm-4,7c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Zm4,6c-1.531,0-2.859-1.14-3.089-2.651-.034-.221,.039-.444,.193-.598,.151-.15,.358-.217,.572-.185,1.526,.24,3.106,.24,4.638,.001h0c.217-.032,.428,.036,.583,.189,.153,.153,.225,.373,.192,.589-.229,1.513-1.557,2.654-3.089,2.654Zm3-5c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Z"></path></g></svg> 3693 </button> 3694 <input type="text" name="emoji" class="form-control !hidden" data-emoji-picker-target="input"> 3695 </div> 3696 <div data-emoji-picker-target="pickerContainer" class="hidden absolute z-50 mt-2 flex justify-center inset-x-0"></div> 3697 </div> 3698 </form> 3699 3700 </div> 3701 </div> 3702 <a href="/docs/emoji-picker" 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"> 3703 <div class="h-48"></div> 3704 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3705 Emoji picker 3706 <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> 3707 </p> 3708 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 3709 </a> 3710</li> 3711 3712 3713 <li class="relative"> 3714 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3715 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3716 <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
3716k: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"> 3717 <span class="text-xs">?</span> 3718 </button> 3719 3720 <template data-popover-target="content"> 3721 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3722 <div class="space-y-2"> 3723 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3724 3725 <div class="flex items-center gap-1.5 text-xs"> 3726 <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> 3727 <span class="flex grow gap-2">Tailwind CSS</span> 3728 </div> 3729 3730 <div class="flex items-center gap-1.5 text-xs"> 3731 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3731ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3732 <g class="fill-neutral-800 dark:fill-white"> 3733 <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> 3734 <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> 3735 <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> 3736 </g> 3737 </svg> 3738 <span class="flex grow gap-2">Stimulus</span> 3739 </div> 3740 3741 <div class="flex items-center gap-1.5 text-xs"> 3742 <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c400aafdebbd.webp" /> 3743 <span class="flex grow gap-2">Motion.dev</span> 3744 </div> 3745 </div> 3746 </div> 3747 </template> 3748 </div> 3749 3750 <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"> 3751 <div class="w-full max-w-xs"> 3752 <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"> 3753 <!-- Button --> 3754 <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->
3754feedback#toggle"> 3755 <span class="flex items-center gap-1.5" data-feedback-target="buttonText"> 3756 Feedback 3757 </span> 3758 </button> 3759 3760 <!-- Form --> 3761 <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"> 3762 <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"> 3763 3764 <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" 3765 required 3766 placeholder="Tell us what you think..." 3767 data-feedback-target="textarea"></textarea> 3768 3769 <div class="absolute bottom-1.5 right-1.5"> 3770 <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"> 3771 <span> 3772 Send 3773 </span> 3774 </button> 3775 </div> 3776 3777 </form> 3778 </div> 3779 </div> 3780 </div> 3781 </div> 3782 </div> 3783 <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"> 3784 <div class="h-48"></div> 3785 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3786 Feedback 3787 <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> 3788 </p> 3789 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 9 components</p> 3790 </a> 3791</li> 3792 3793 3794 <li class="relative"> 3795 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3796 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3797 <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
3797k: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"> 3798 <span class="text-xs">?</span> 3799 </button> 3800 3801 <template data-popover-target="content"> 3802 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3803 <div class="space-y-2"> 3804 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3805 3806 <div class="flex items-center gap-1.5 text-xs"> 3807 <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> 3808 <span class="flex grow gap-2">Tailwind CSS</span> 3809 </div> 3810 3811 </div> 3812 </div> 3813 </template> 3814 </div> 3815 3816 <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"> 3817 <input type="text" placeholder="Enter your name..." class="form-control lg:flex-1"> 3818 </div> 3819 </div> 3820 <a href="/docs/forms" 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"> 3821 <div class="h-48"></div> 3822 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 3823 Forms 3824 <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> 3825 </p> 3826 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 3827 </a> 3828</li> 3829 3830 3831 <li class="relative"> 3832 <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 3833 <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"> 3834 <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"> 3835 <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> 3836 New 3837 </div> 3838 </div> 3839</div> 3840 3841 3842 <div class="pointer-events-none absolute inset-0 left-0 top-0"> 3843 <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover"> 3844 <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
3844k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200"> 3845 <span class="text-xs">?</span> 3846 </button> 3847 3848 <template data-popover-target="content"> 3849 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3850 <div class="space-y-2"> 3851 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 3852 3853 <div class="flex items-center gap-1.5 text-xs"> 3854 <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> 3855 <span>Tailwind CSS</span> 3856 </div> 3857 3858 <div class="flex items-center gap-1.5 text-xs"> 3859 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3859ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3860 <g class="fill-neutral-800 dark:fill-white"> 3861 <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> 3862 <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> 3863 <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> 3864 </g> 3865 </svg> 3866 <span class="flex grow gap-2">Stimulus</span> 3867 </div> 3868 3869 <div class="flex items-center gap-1.5 text-xs"> 3870 <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" /> 3871 <span>Pagy</span> 3872 </div> 3873 </div> 3874 </div> 3875 </template> 3876 </div> 3877 3878 <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]"> 3879 3880<div 3881 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" 3882 data-controller="infinite-scroll" 3883 data-infinite-scroll-url-value="/docs/infinite-scroll/items?page=2&preview=home" 3884 data-infinite-scroll-scroll-root-value="container" 3885 data-infinite-scroll-root-margin-value="0px 0px 20px" 3886 data-infinite-scroll-manual-value="false" 3887 data-infinite-scroll-loading-label-value="Loading..."> 3888 <div class="flex items-center justify-between border-b border-neutral-100 px-3 py-2 dark:border-neutral-800"> 3889 <div> 3890 <p class="text-[10px] font-semibold leading-none text-neutral-900 dark:text-white">Recent activity</p> 3891 <p class="mt-1 text-[8px] leading-none text-neutral-400">Workspace updates</p> 3892 </div> 3893 <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">
3894 <span class="size-1 rounded-full bg-emerald-500"></span> 3895 Live 3896 </span> 3897 </div> 3898 3899 <div class="small-scrollbar h-[7.35rem] overflow-y-auto overscroll-contain pb-2" data-infinite-scroll-target="viewport"> 3900 <div class="divide-y divide-neutral-100 px-2 dark:divide-neutral-800" data-infinite-scroll-target="list"> 3901 3902 <div id="home_preview_activity_1" class="flex items-center gap-2 px-1 py-2"> 3903 <span class="size-5 shrink-0 rounded-full bg-violet-100 dark:bg-violet-400/20"></span> 3904 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Olivia shipped a release</p> 3905 <span class="text-[7px] tabular-nums text-neutral-400">2m</span> 3906 </div> 3907 <div id="home_preview_activity_2" class="flex items-center gap-2 px-1 py-2"> 3908 <span class="size-5 shrink-0 rounded-full bg-sky-100 dark:bg-sky-400/20"></span> 3909 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Noah left feedback</p> 3910 <span class="text-[7px] tabular-nums text-neutral-400">4m</span> 3911 </div> 3912 <div id="home_preview_activity_3" class="flex items-center gap-2 px-1 py-2"> 3913 <span class="size-5 shrink-0 rounded-full bg-amber-100 dark:bg-amber-400/20"></span> 3914 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Mia uploaded files</p> 3915 <span class="text-[7px] tabular-nums text-neutral-400">6m</span> 3916 </div> 3917 <div id="home_preview_activity_4" class="flex items-center gap-2 px-1 py-2"> 3918 <span class="size-5 shrink-0 rounded-full bg-emerald-100 dark:bg-emerald-400/20"></span> 3919 <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Ethan completed a task</p> 3920 <span class="text-[7px] tabular-nums text-neutral-400">8m</span> 3921 </div> 3922 3923 </div> 3924 3925 <div class="h-9 [overflow-anchor:none]" data-infinite-scroll-target="sentinel"></div> 3926 3927 <div class="pointer-events-none sticky bottom-1 z-10 -mt-9 flex h-9 items-center justify-center" data-infinite-scroll-target="controls"> 3928 <button 3929 type="button" 3930 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" 3931 data-infinite-scroll-target="button" 3932 data-action="infinite-scroll#load" 3933 hidden> 3934 <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"> 3935 <circle class="opacity-25" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3"></circle> 3936 <path class="opacity-80" fill="currentColor" d="M21 12a9 9 0 0 0-9-9v3a6 6 0 0 1 6 6h3Z"></path> 3937 </svg> 3938 <span class="motion-reduce:animate-none" data-infinite-scroll-target="label">Load more</span> 3939 </button> 3940 <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> 3941 </div> 3942 </div> 3943 3944 <p class="sr-only" aria-live="polite" data-infinite-scroll-target="status"></p> 3945</div> 3946 3947 </div> 3948 </div> 3949 3950 <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"> 3951 <div class="h-48"></div> 3952 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 3953 Infinite Scroll 3954 <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> 3955 </p> 3956 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 1 component</p> 3957 </a> 3958</li> 3959 3960 3961 <li class="relative"> 3962 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 3963 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 3964 <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
3964k: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"> 3965 <span class="text-xs">?</span> 3966 </button> 3967 3968 <template data-popover-target="content"> 3969 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 3970 <div class="space-y-2"> 3971 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 3972 3973 <div class="flex items-center gap-1.5 text-xs"> 3974 <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> 3975 <span class="flex grow gap-2">Tailwind CSS</span> 3976 </div> 3977 3978 <div class="flex items-center gap-1.5 text-xs"> 3979 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3979ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 3980 <g class="fill-neutral-800 dark:fill-white"> 3981 <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> 3982 <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> 3983 <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> 3984 </g> 3985 </svg> 3986 <span class="flex grow gap-2">Stimulus</span> 3987 </div> 3988 </div> 3989 </div> 3990 </template> 3991 </div> 3992 3993 <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"> 3994 <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" 3995 data-controller="tooltip hotkey" 3996 data-tooltip-content="Action performed!" 3997 data-tooltip-placement-value="top" 3998 data-tooltip-trigger-value="focus" 3999 data-action="keydown.meta+shift+o@document->hotkey#click keydown.ctrl+shift+o@document->hotkey#click"> 4000 <kbd data-os-detect-target="mac" class="hidden">â</kbd> 4001 <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd>
4002 <span>+</span> 4003 <kbd>Shift</kbd> 4004 <span>+</span> 4005 <kbd>O</kbd> 4006 </button> 4007 </div> 4008 </div> 4009 <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"> 4010 <div class="h-48"></div> 4011 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4012 KBD & Hotkey 4013 <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> 4014 </p> 4015 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 4016 </a> 4017</li> 4018 4019 4020 <li class="sm:hidden col-span-1"> 4021 <div class="relative mt-8 mb-6"> 4022 <div class="mx-auto"> 4023 <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"> 4024 <div data-controller="newsletter" 4025 class="max-w-xs"> 4026 <div data-newsletter-target="form"> 4027 <form data-action="submit->newsletter#submit" 4028 class="space-y-3"> 4029 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 4030 <input type="email" 4031 data-newsletter-target="email" 4032 placeholder="Enter your email..." 4033 class="form-control" 4034 4035 required> 4036 <div class="flex justify-center"> 4037 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 4038 </div> 4039 <button type="submit" 4040 data-newsletter-target="submitButton" 4041 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"> 4042 Subscribe to the newsletter 4043 </button> 4044 </form> 4045 <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]"> 4046 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 4047 </div> 4048 </div> 4049 4050 <div data-newsletter-target="successMessage" 4051 class="text-center py-4" 4052 style="display: none;"> 4053 <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"> 4054 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 4055 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 4056 </svg> 4057 </div> 4058 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
4059 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 4060 </div> 4061 </div> 4062 </div> 4063 </div> 4064</div> 4065 4066 </li> 4067 <li class="relative"> 4068 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4069 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4070 <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"> 4071 <span class="text-xs">?</span> 4072 </button> 4073 4074 <template data-popover-target="content"> 4075 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4076 <div class="space-y-2"> 4077 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4078 4079 <div class="flex items-center gap-1.5 text-xs"> 4080 <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> 4081 <span class="flex grow gap-2">Tailwind CSS</span> 4082 </div> 4083 4084 <div class="flex items-center gap-1.5 text-xs"> 4085 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4085ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4086 <g class="fill-neutral-800 dark:fill-white"> 4087 <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> 4088 <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> 4089 <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> 4090 </g> 4091 </svg> 4092 <span class="flex grow gap-2">Stimulus</span> 4093 </div> 4094 4095 <div class="flex items-center gap-1.5 text-xs"> 4096 <img alt="PhotoSwipe" class="size-3.5 rounded-sm" src="/assets/photoswipe-logo-b3e92230fc472dfc24be0c4c595b1988efbbfdc9db889d7e9e9fc4f02c5c41c6.webp" /> 4097 <span class="flex grow gap-2">PhotoSwipe</span> 4098 </div> 4099 </div> 4100 </div> 4101 </template> 4102 </div> 4103 4104 <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"> 4105 <div data-controller="lightbox" data-lightbox-target="gallery" class="max-w-[150px] flex gap-2 flex-wrap justify-center"> 4106 <!-- First 3 visible thumbnails --> 4107 <a href="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe" 4108 data-pswp-src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe" 4109 data-pswp-caption="new-background-v2.png" 4110 class="group relative"> 4111 <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400"
4112 alt="Thumbnail 1" 4113 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"> 4114 </a> 4115 4116 <a href="https://images.unsplash.com/photo-1611162617474-5b21e879e113" 4117 data-pswp-src="https://images.unsplash.com/photo-1611162617474-5b21e879e113" 4118 data-pswp-caption="netflix-logo.png" 4119 class="group relative"> 4120 <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=400" 4121 alt="Thumbnail 2" 4122 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"> 4123 </a> 4124 4125 <a href="https://images.unsplash.com/photo-1551650975-87deedd944c3" 4126 data-pswp-src="https://images.unsplash.com/photo-1551650975-87deedd944c3" 4127 data-pswp-caption="mobile-responsive.png" 4128 class="group relative"> 4129 <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=400" 4130 alt="Thumbnail 3" 4131 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"> 4132 </a> 4133 4134 <!-- +2 more indicator --> 4135 <a href="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900" 4136 data-pswp-src="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900" 4137 data-pswp-caption="dashboard-analytics.jpg" 4138 class="group relative cursor-pointer"> 4139 <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"> 4140 <span class="text-base font-medium text-neutral-600 dar
4140k:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">+2</span> 4141 </div> 4142 </a> 4143 4144 <!-- Hidden last image --> 4145 <a href="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900" 4146 data-pswp-src="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900" 4147 data-pswp-caption="person-typing.png" 4148 class="hidden"> 4149 </a> 4150 </div> 4151 </div> 4152 </div> 4153 <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"> 4154 <div class="h-48"></div> 4155 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4156 Lightbox 4157 <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> 4158 </p> 4159 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 4160 </a> 4161</li> 4162 4163 4164 <li class="relative"> 4165 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4166 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4167 <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
4167k: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"> 4168 <span class="text-xs">?</span> 4169 </button> 4170 4171 <template data-popover-target="content"> 4172 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4173 <div class="space-y-2"> 4174 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4175 4176 <div class="flex items-center gap-1.5 text-xs"> 4177 <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> 4178 <span class="flex grow gap-2">Tailwind CSS</span> 4179 </div> 4180 4181 </div> 4182 </div> 4183 </template> 4184 </div> 4185 4186 <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"> 4187 <div class="flex flex-row"> 4188 <div class="flex items-center justify-center p-8"> 4189 <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"> 4190 <g fill="currentColor"> 4191 <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> 4192 <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> 4193 </g> 4194 </svg> 4195</div> 4196 4197 <div class="flex items-center justify-center p-8"> 4198 <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"> 4199 <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"> 4200 <line x1="9" y1="1.75" x2="9" y2="4.25" opacity=".13"></line> 4201 <line x1="14.127" y1="3.873" x2="12.359" y2="5.641" opacity=".25"></line> 4202 <line x1="16.25" y1="9" x2="13.75" y2="9" opacity=".38"></line> 4203 <line x1="14.127" y1="14.127" x2="12.359" y2="12.359" opacity=".5"></line> 4204 <line x1="9" y1="16.25" x2="9" y2="13.75" opacity=".63"></line> 4205 <line x1="3.873" y1="14.127" x2="5.641" y2="12.359" opacity=".75"></line> 4206 <line x1="1.75" y1="9" x2="4.25" y2="9" opacity=".88"></line> 4207 <line x1="3.873" y1="3.873" x2="5.641" y2="5.641"></line> 4208 </g> 4209 </svg> 4210</div> 4211 4212 <div class="flex items-center justify-center p-8"> 4213 <div class="flex space-x-1.5"> 4214 <div class="size-1.5 bg-neutral-800 dark:bg-neutral-200 rounded-full animate-bounce" style="animation-delay: 0ms;"></div> 4215 <div class="size-1.5 bg-neutral-800/80 dark:bg-neutral-200/80 rounded-full animate-bounce" style="animation-delay: 150ms;"></div> 4216 <div class="size-1.5 bg-neutral-800/60 dark:bg-neutral-200/60 rounded-full animate-bounce" style="animation-delay: 300ms;"></div> 4217 </div> 4218</div> 4219 4220</div> 4221 4222 </div> 4223 </div> 4224 <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"> 4225 <div class="h-48"></div> 4226 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4227 Loading Indicator 4228 <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> 4229 </p> 4230 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 4231 </a> 4232</li> 4233 4234 4235 <li class="relative"> 4236 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4237 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4238 <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
4238k: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"> 4239 <span class="text-xs">?</span> 4240 </button> 4241 4242 <template data-popover-target="content"> 4243 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4244 <div class="space-y-2"> 4245 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4246 4247 <div class="flex items-center gap-1.5 text-xs"> 4248 <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> 4249 <span class="flex grow gap-2">Tailwind CSS</span> 4250 </div> 4251 4252 <div class="flex items-center gap-1.5 text-xs"> 4253 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4253ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4254 <g class="fill-neutral-800 dark:fill-white"> 4255 <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> 4256 <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> 4257 <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> 4258 </g> 4259 </svg> 4260 <span class="flex grow gap-2">Stimulus</span> 4261 </div> 4262 </div> 4263 </div> 4264 </template> 4265 </div> 4266 4267 <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"> 4268 <div class="w-full"> 4269 <div 4270 data-controller="marquee" 4271 data-marquee-speed-value="15" 4272 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)]" 4273 data-action="mouseenter->marquee#pauseAnimation mouseleave->marquee#resumeAnimation" 4274 > 4275 <div data-marquee-target="track" class="relative flex w-full"> 4276 <div data-marquee-target="list" class="flex w-full shrink-0 flex-nowrap items-center justify-around ga
4276p-8"> 4277 <div class="flex items-center space-x-2"> 4278 <svg xmlns="http://www.w3.org/2000/svg" fill="#d30001" viewBox="0 0 235 155" class="h-5"> 4279 <g> 4280 <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> 4281 <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> 4282 <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> 4283 <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> 4284 <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> 4285 <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> 4286 <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> 4287 <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> 4288 <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> 4289 <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> 4290 <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> 4291 </g> 4292 </svg> 4293 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Ruby on Rails</span> 4294 </div> 4295 <div class="flex items-center space-x-2"> 4296 <svg class="size-4 rounded-sm" width="60" height="60" viewB
4296ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4297 <g class="fill-neutral-800 dark:fill-white"> 4298 <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> 4299 <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> 4300 <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> 4301 </g> 4302 </svg> 4303 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Stimulus</span> 4304 </div> 4305 <div class="flex items-center space-x-2"> 4306 <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>
4307 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Tailwind CSS</span> 4308 </div> 4309 <div class="flex items-center space-x-2"> 4310 <img class="size-5" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" /> 4311 <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Rails Blocks</span> 4312 </div> 4313 </div> 4314 </div> 4315 </div> 4316 </div> 4317 </div> 4318 </div> 4319 <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"> 4320 <div class="h-48"></div> 4321 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4322 Marquee 4323 <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> 4324 </p> 4325 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 4326 </a> 4327</li> 4328 4329 4330 <li class="relative"> 4331 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 4332 <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"> 4333 <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"> 4334 <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> 4335 Pro 4336 </a> 4337 </div> 4338 </div> 4339 4340 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4341 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4342 <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
4342k: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"> 4343 <span class="text-xs">?</span> 4344 </button> 4345 4346 <template data-popover-target="content"> 4347 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4348 <div class="space-y-2"> 4349 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4350 4351 <div class="flex items-center gap-1.5 text-xs"> 4352 <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> 4353 <span class="flex grow gap-2">Tailwind CSS</span> 4354 </div> 4355 4356 <div class="flex items-center gap-1.5 text-xs"> 4357 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4357ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4358 <g class="fill-neutral-800 dark:fill-white"> 4359 <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> 4360 <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> 4361 <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> 4362 </g> 4363 </svg> 4364 <span class="flex grow gap-2">Stimulus</span> 4365 </div> 4366 </div> 4367 </div> 4368 </template> 4369 </div> 4370 4371 <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"> 4372 <div class="not-prose"> 4373 <div data-controller="modal"> 4374 <button data-action="click->
4374modal#open: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"> 4375 Open Small Modal 4376 </button> 4377 4378 <dialog class="modal max-w-[100vw-2rem] sm:max-w-sm 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"> 4379 <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"> 4380 <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"> 4381 <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> 4382 <span class="sr-only">Close</span> 4383 </button> 4384 4385 <p class="mb-2 text-lg font-semibold text-neutral-900 dark:text-white">Are you sure?</p>
4386 <p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400"> 4387 Are you sure you want to do that? 4388 </p> 4389 4390 <div class="flex justify-end items-center flex-wrap gap-2 mt-4"> 4391 <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->modal#close:prevent"> 4392 Close 4393 </button> 4394 <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 dark:focus-visible:outline-neutral-200" data-action="click->modal#close:prevent"> 4395 Continue 4396 </button> 4397 </div> 4398 </div> 4399 </dialog> 4400 </div> 4401 </div> 4402 </div> 4403 </div> 4404 <a href="/docs/modal" 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"> 4405 <div class="h-48"></div> 4406 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4407 Modal 4408 <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> 4409 </p> 4410 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 10 components</p> 4411 </a> 4412</li> 4413 4414 4415 <li class="relative"> 4416 <div class="absolute left-4 top-4 z-10 text-xs text-neutral-500 dark:text-neutral-400"> 4417 <div class="inline relative"> 4418 <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"> 4419 <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"> 4420 <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> 4421 Pro 4422 </a> 4423 </div> 4424 </div> 4425 4426 </div> 4427 4428 <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover"> 4429 <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
4429k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200"> 4430 <span class="text-xs">?</span> 4431 </button> 4432 4433 <template data-popover-target="content"> 4434 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4435 <div class="space-y-2"> 4436 <div class="w-full text-center text-xs font-semibold">Dependencies</div> 4437 4438 <div class="flex items-center gap-1.5 text-xs"> 4439 <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> 4440 <span>Tailwind CSS</span> 4441 </div> 4442 4443 <div class="flex items-center gap-1.5 text-xs"> 4444 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4444ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4445 <g class="fill-neutral-800 dark:fill-white"> 4446 <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> 4447 <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> 4448 <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> 4449 </g> 4450 </svg> 4451 <span class="flex grow gap-2">Stimulus</span> 4452 </div> 4453 <div class="flex items-center gap-1.5 text-xs"> 4454 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 4455 <span>Floating UI</span> 4456 </div> 4457 4458 <div class="flex items-center gap-1.5 text-xs"> 4459 <img alt="Number Flow" class="size-3.5 rounded" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" />
4460 <span>Number Flow</span> 4461 </div> 4462 </div> 4463 </div> 4464 </template> 4465 </div> 4466 4467 <div class="pointer-events-none absolute inset-0"> 4468 <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"> 4469 <div class="w-full max-w-[320px]"> 4470 4471<div 4472 class="relative w-full" 4473 data-controller="onboarding-checklist" 4474 data-action="click@window->onboarding-checklist#close keydown.esc@window->onboarding-checklist#escape" 4475 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}]}" 4476 data-onboarding-checklist-mode-value="overlay-below" 4477 data-onboarding-checklist-open-value="false" 4478 data-onboarding-checklist-compact-value="true" 4479> 4480 <div data-onboarding-checklist-target="surface" class="relative mx-auto w-full max-w-[280px]"> 4481 <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%)]"> 4482 <button 4483 type="button" 4484 data-onboarding-checklist-target="trigger" 4485 data-action="click->onboarding-checklist#toggle" 4486 aria-expanded="false" 4487 aria-controls="changelog-onboarding-checklist" 4488 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" 4489 > 4490 <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"> 4491 <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> 4492 <svg class="size-9 -rotate-90" viewBox="0 0 40 40" aria-hidden="true"> 4493 <circle cx="20" cy="20" r="17" fill="none" stroke="currentColor" stroke-width="2.75" class="text-neutral-200 dark:text-neutral-700" /> 4494 <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" /> 4495 </svg> 4496 <number-flow data-onboarding-checklist-target="progress" class="absolute text-[8px] font-semibold tabular-nums text-neutral-700
4496will-change-transform transition-colors duration-300 motion-reduce:transition-none dark:text-neutral-200"></number-flow> 4497 </span> 4498 <span class="min-w-0 flex-1"> 4499 <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> 4500 <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> 4501 </span> 4502 <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"> 4503 <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> 4504 </span> 4505 </button> 4506 </div> 4507 4508 <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%)]"> 4509 <div class="flex items-start justify-between border-b border-neutral-200/70 px-5 py-4 dark:border-white/8"> 4510 <div> 4511 <p data-onboarding-checklist-target="panelTitle" class="text-xs font-semibold text-neutral-900 dark:text-white">Your quick start</p> 4512 <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> 4513 </div> 4514 </div> 4515 <ol data-onboarding-checklist-target="taskList"></ol> 4516 </div> 4517 </div> 4518 4519 <p data-onboarding-checklist-target="liveRegion" class="sr-only" aria-live="polite"></p> 4520</div> 4521 4522 </div> 4523 </div> 4524 </div> 4525 4526 <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"> 4527 <div class="h-48"></div> 4528 <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight"> 4529 Onboarding Checklist 4530 <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> 4531 </p> 4532 <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p> 4533 </a> 4534</li> 4535 4536 4537 <li class="relative"> 4538 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4539 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4540 <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
4540k: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"> 4541 <span class="text-xs">?</span> 4542 </button> 4543 4544 <template data-popover-target="content"> 4545 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4546 <div class="space-y-2"> 4547 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4548 4549 <div class="flex items-center gap-1.5 text-xs"> 4550 <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> 4551 <span class="flex grow gap-2">Tailwind CSS</span> 4552 </div> 4553 4554 <div class="flex items-center gap-1.5 text-xs"> 4555 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4555ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4556 <g class="fill-neutral-800 dark:fill-white"> 4557 <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> 4558 <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> 4559 <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> 4560 </g> 4561 </svg> 4562 <span class="flex grow gap-2">Stimulus</span> 4563 </div> 4564 </div> 4565 </div> 4566 </template> 4567 </div> 4568 4569 <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"> 4570 <nav class="flex w-fit justify-center" data-controller="navbar"> 4571 <div class="relative"> 4572 <!-- Menu List --> 4573 <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"> 4574 <li> 4575 <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
4575k: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"> 4576 <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> 4577 </a> 4578 </li> 4579 4580 <!-- Components Dropdown --> 4581 <li class="relative hidden sm:block"> 4582 <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"> 4583 Blocks 4584 <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> 4585 </button> 4586 </li> 4587 4588 <!-- Resources Dropdown --> 4589 <li class="relative hidden sm:block"> 4590 <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"> 4591 Resources 4592 <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> 4593 </button> 4594 </li> 4595 4596 <li class="relative sm:hidden"> 4597 <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"> 4598 <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> 4599 </button> 4600 </li> 4601 </ul> 4602 4603 <!-- Viewport Container --> 4604 <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"> 4605 <!-- Indicator Arrow --> 4606 <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"> 4607 <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> 4608 </div> 4609 4610 <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"> 4611 <!-- Components Content --> 4612 <div id="components-content" data-navbar-target="content" data-state="closed" class="hidden"> 4613 <div class="grid grid-cols-1 gap-1.5 p-4 w-[300px] sm:w-[420px] sm:grid-cols-[0.75fr_1fr]"> 4614 <!-- Featured Callout --> 4615 <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
4615k:from-red-500 dark:to-red-800 dark:focus-visible:outline-neutral-200 hover:opacity-90"> 4616 <img class="size-9 mb-4" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" /> 4617 <div class="mb-1 text-base font-medium text-white">Rails Blocks</div> 4618 <p class="m-0 text-xs text-neutral-100">Delightful Rails components.</p> 4619 </a> 4620 4621 <!-- Menu Items --> 4622 <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"> 4623 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Modal</div> 4624 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Dialog boxes for user interactions and confirmations.</p> 4625 </a> 4626 4627 <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
4627k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 4628 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Dropdown</div> 4629 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Contextual menus with keyboard navigation.</p> 4630 </a> 4631 4632 <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"> 4633 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Tooltip</div> 4634 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Helpful hints that appear on hover or focus.</p> 4635 </a> 4636 </div> 4637 </div> 4638 4639 <!-- Resources Content --> 4640 <div id="resources-content" data-navbar-target="content" data-state="closed" class="hidden"> 4641 <div class="grid grid-cols-1 gap-2 p-5 w-[300px] sm:w-[420px] sm:grid-cols-2"> 4642 <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
4642k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 4643 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Installation</div> 4644 <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> 4645 </a> 4646 4647 <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"> 4648 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Author's Note</div> 4649 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Learn about the philosophy behind Rails Blocks.</p> 4650 </a> 4651 4652 <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
4652k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 4653 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Roadmap</div> 4654 <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> 4655 </a> 4656 4657 <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"> 4658 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Changelog</div> 4659 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Latest updates and new component releases.</p> 4660 </a> 4661 4662 <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
4662k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200"> 4663 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Rails Blocks Pro</div> 4664 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Unlock premium components and features.</p> 4665 </a> 4666 4667 <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"> 4668 <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Create an account</div> 4669 <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">And get notified when new components are released.</p> 4670 </a> 4671 </div> 4672 </div> 4673 4674 <!-- Mobile Menu Content --> 4675 <div id="mobile-menu-content" data-navbar-target="content" data-state="closed" class="hidden"> 4676 <div class="grid grid-cols-1 gap-1.5 p-4 w-[280px] sm:w-[420px] sm:grid-cols-2"> 4677 <div class="relative"> 4678 <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
4678k:focus-visible:outline-neutral-200"> 4679 Blocks 4680 <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> 4681 </button> 4682 </div> 4683 4684 <!-- Resources Dropdown --> 4685 <div class="relative"> 4686 <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
4686k:focus-visible:outline-neutral-200"> 4687 Resources 4688 <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> 4689 </button> 4690 </div> 4691 </div> 4692 </div> 4693 </div> 4694 </div> 4695 </div> 4696 </nav> 4697 </div> 4698 </div> 4699 <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"> 4700 <div class="h-48"></div> 4701 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4702 Navbar 4703 <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> 4704 </p> 4705 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p> 4706 </a> 4707</li> 4708 4709 4710 <li class="relative"> 4711 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4712 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4713 <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
4713k: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"> 4714 <span class="text-xs">?</span> 4715 </button> 4716 4717 <template data-popover-target="content"> 4718 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4719 <div class="space-y-2"> 4720 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4721 4722 <div class="flex items-center gap-1.5 text-xs"> 4723 <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> 4724 <span class="flex grow gap-2">Tailwind CSS</span> 4725 </div> 4726 4727 <div class="flex items-center gap-1.5 text-xs"> 4728 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4728ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4729 <g class="fill-neutral-800 dark:fill-white"> 4730 <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> 4731 <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> 4732 <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> 4733 </g> 4734 </svg> 4735 <span class="flex grow gap-2">Stimulus</span> 4736 </div> 4737 </div> 4738 </div> 4739 </template> 4740 </div> 4741 4742 <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"> 4743 <div class="w-full max-w-sm"> 4744 <div class="relative" data-controller="password"> 4745 <input type="password" 4746 id="preview_password" 4747 name="password" 4748 class="form-control !pr-12" 4749 placeholder="Enter your password" 4750 value="SecurePass123!" 4751 data-password-target="input"> 4752 <button type="button" 4753 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" 4754 data-action="click->
4754password#toggle" 4755 aria-label="Toggle password visibility"> 4756 <span data-password-target="toggleIcon"> 4757 <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> 4758 </span> 4759 </button> 4760 </div> 4761 </div> 4762 </div> 4763 </div> 4764 <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"> 4765 <div class="h-48"></div> 4766 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4767 Password 4768 <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> 4769 </p> 4770 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 4771 </a> 4772</li> 4773 4774 4775 <li class="relative"> 4776 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4777 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4778 <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
4778k: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"> 4779 <span class="text-xs">?</span> 4780 </button> 4781 4782 <template data-popover-target="content"> 4783 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4784 <div class="space-y-2"> 4785 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4786 4787 <div class="flex items-center gap-1.5 text-xs"> 4788 <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> 4789 <span class="flex grow gap-2">Tailwind CSS</span> 4790 </div> 4791 4792 <div class="flex items-center gap-1.5 text-xs"> 4793 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4793ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4794 <g class="fill-neutral-800 dark:fill-white"> 4795 <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> 4796 <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> 4797 <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> 4798 </g> 4799 </svg> 4800 <span class="flex grow gap-2">Stimulus</span> 4801 </div> 4802 4803 <div class="flex items-center gap-1.5 text-xs"> 4804 <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" /> 4805 <span class="flex grow gap-2">Pagy</span> 4806 </div> 4807 </div> 4808 </div> 4809 </template> 4810 </div> 4811 4812 <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"> 4813 4814<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"> 4815 <span class="select-none inline-flex items-center gap-1 text-sm font-medium text-neutral-400 cursor-not-allowed dark:text-neutral-600" 4816 aria-label="Previous page (disabled)"> 4817 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"> 4818 <g fill="currentColor"> 4819 <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> 4820 </g> 4821 </svg> 4822 Previous 4823 </span> 4824
4825 <span class="text-sm text-neutral-600 dark:text-neutral-400"> 4826 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> 4827 </span> 4828 4829 <a href="/?preview_page=2" 4830 data-turbo-frame="pagy-preview" 4831 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" 4832 aria-label="Next page"> 4833 Next 4834 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"> 4835 <g fill="currentColor"> 4836 <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> 4837 </g> 4838 </svg> 4839 </a> 4840</turbo-frame> 4841 4842 4843 4844 4845 4846 4847 4848 4849 4850 4851 </div> 4852 </div> 4853 <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"> 4854 <div class="h-48"></div> 4855 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4856 Pagination 4857 <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> 4858 </p> 4859 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p> 4860 </a> 4861</li> 4862 4863 4864 <li class="sm:hidden col-span-1"> 4865 <div class="relative mt-8 mb-6"> 4866 <div class="mx-auto"> 4867 <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"> 4868 <div data-controller="newsletter" 4869 class="max-w-xs"> 4870 <div data-newsletter-target="form"> 4871 <form data-action="submit->newsletter#submit" 4872 class="space-y-3"> 4873 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 4874 <input type="email" 4875 data-newsletter-target="email" 4876 placeholder="Enter your email..." 4877 class="form-control" 4878 4879 required> 4880 <div class="flex justify-center"> 4881 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 4882 </div> 4883 <button type="submit" 4884 data-newsletter-target="submitButton" 4885 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"> 4886 Subscribe to the newsletter 4887 </button> 4888 </form> 4889 <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]"> 4890 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 4891 </div> 4892 </div> 4893 4894 <div data-newsletter-target="successMessage" 4895 class="text-center py-4" 4896 style="display: none;"> 4897 <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"> 4898 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 4899 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 4900 </svg> 4901 </div> 4902 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
4903 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 4904 </div> 4905 </div> 4906 </div> 4907 </div> 4908</div> 4909 4910 </li> 4911 <li class="relative"> 4912 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4913 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4914 <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"> 4915 <span class="text-xs">?</span> 4916 </button> 4917 4918 <template data-popover-target="content"> 4919 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4920 <div class="space-y-2"> 4921 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 4922 4923 <div class="flex items-center gap-1.5 text-xs"> 4924 <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> 4925 <span class="flex grow gap-2">Tailwind CSS</span> 4926 </div> 4927 4928 <div class="flex items-center gap-1.5 text-xs"> 4929 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4929ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 4930 <g class="fill-neutral-800 dark:fill-white"> 4931 <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> 4932 <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> 4933 <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> 4934 </g> 4935 </svg> 4936 <span class="flex grow gap-2">Stimulus</span> 4937 </div> 4938 4939 <div class="flex items-center gap-1.5 text-xs"> 4940 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 4941 <span class="flex grow gap-2">Floating UI</span> 4942 </div> 4943 </div> 4944 </div> 4945 </template> 4946 </div> 4947 4948 <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"> 4949 <div class="inline-block relative" data-controller="popover" data-popover-interactive-value="true" data-popover-animation-value="fade origin"> 4950 <button type="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
4950k:focus-visible:outline-neutral-200"> 4951 Share 4952 </button> 4953 <template data-popover-target="content"> 4954 <div class="p-4"> 4955 <div class="flex flex-col gap-3 text-center"> 4956 <div class="text-sm font-medium">Share Rails Blocks</div> 4957 <div class="flex flex-wrap justify-center gap-2"> 4958 <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Frailsblocks.com&text=Check%20out%20Rails%20Blocks" target="_blank" rel="noopener noreferrer" class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8" aria-label="Share on Twitter"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z"></path></svg></a> 4959 <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Frailsblocks.com" target="_blank" rel="noopener noreferrer" class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4959k:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8" aria-label="Share on Facebook"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M14 13.5H16.5L17.5 9.5H14V7.5C14 6.47062 14 5.5 16 5.5H17.5V2.1401C17.1743 2.09685 15.943 2 14.6429 2C11.9284 2 10 3.65686 10 6.69971V9.5H7V13.5H10V22H14V13.5Z"></path></svg></a> 4960 <a href="mailto:?subject=Check%20out%20Rails%20Blocks&body=I%20thought%20you%20might%20be%20interested%20in%20this%3A%20https%3A%2F%2Frailsblocks.com" class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8" aria-label="Share via email"><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.88,8.827c.074,.042,.166,.042,.24,0l7.777-4.283c-.314-1.173-1.376-2.044-2.647-2.044H3.75c-1.267,0-2.326,.865-2.643,2.033l7.773,4.293Z"></path><path d="M9.845,10.14c-.264,.146-.554,.219-.844,.219s-.582-.073-.846-.22L1,6.188v6.562c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75V6.2l-7.155,3.94Z"></path></g></svg></a> 4961 <button class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4961k:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8" 4962 data-controller="clipboard" 4963 data-clipboard-text="https://railsblocks.com" 4964 data-clipboard-show-tooltip-value="false"> 4965 <div data-clipboard-target="copyContent" class="flex items-center gap-2"> 4966 <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="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm4.75,10.25H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Zm0-3H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path></g></svg> 4967 </div> 4968 <div data-clipboard-target="copiedContent" class="hidden flex items-center gap-2"> 4969 <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="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm5.35,5.45l-3.75,5c-.136,.181-.346,.291-.572,.299-.009,0-.019,0-.028,0-.216,0-.422-.093-.564-.256l-1.75-2c-.273-.312-.241-.785,.071-1.058s.785-.242,1.058,.071l1.141,1.303,3.195-4.26c.249-.331,.719-.397,1.05-.15,.331,.249,.398,.719,.15,1.05Z"></path></g></svg> 4970 </div> 4971 </button> 4972 </div> 4973 </div> 4974 </div> 4975 </template> 4976 </div> 4977 </div> 4978 </div> 4979 <a href="/docs/popover" 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"> 4980 <div class="h-48"></div> 4981 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 4982 Popover 4983 <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> 4984 </p> 4985 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 4986 </a> 4987</li> 4988 4989 4990 <li class="relative"> 4991 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 4992 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 4993 <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
4993k: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"> 4994 <span class="text-xs">?</span> 4995 </button> 4996 4997 <template data-popover-target="content"> 4998 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 4999 <div class="space-y-2"> 5000 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5001 5002 <div class="flex items-center gap-1.5 text-xs"> 5003 <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> 5004 <span class="flex grow gap-2">Tailwind CSS</span> 5005 </div> 5006 5007 </div> 5008 </div> 5009 </template> 5010 </div> 5011 5012 <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"> 5013 <div class="flex items-center gap-x-3"> 5014 <input name="radio" type="radio" id="checked-radio"> 5015 <label for="checked-radio" class="inline-block select-none">Radio input</label> 5016 </div> 5017 </div> 5018 </div> 5019 <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"> 5020 <div class="h-48"></div> 5021 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5022 Radio 5023 <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> 5024 </p> 5025 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 5026 </a> 5027</li> 5028 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] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center"> 5063 <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"> 5064 <!-- Viewport --> 5065 <div data-scroll-area-target="viewport" data-action="scroll->scroll-area#onViewportScroll" class="h-full overflow-auto scrollbar-hide scroll-fade-y pr-1"> 5066 <div class="flex flex-col gap-3 text-xs leading-relaxed text-neutral-900 dark:text-neutral-100"> 5067 <p> 5068 Rails Blocks is a modern component library for Ruby on Rails applications. It provides 5069 production-ready UI components that integrate seamlessly with Hotwire, Stimulus, and Tailwind CSS. 5070 </p> 5071 <p> 5072 Built with Rails conventions in mind, each component works perfectly with Turbo Drive, 5073 Turbo Frames, and Turbo Streams. All components are fully responsive and support both 5074 light and dark modes out of the box. 5075 </p> 5076 <p> 5077 Build modern, interactive web applications without extensive JavaScript. The library leverages 5078 Stimulus controllers for interactivity while keeping your Rails application fast and native. 5079 </p> 5080 <p> 5081 Every component is copy-and-paste friendly, giving you full control. Customize styles, 5082 behavior, and markup to fit your needs while maintaining consistency across your application. 5083 </p> 5084 </div> 5085 </div> 5086 5087 <!-- Vertical Scrollbar --> 5088 <div data-scroll-area-target="scrollbar" data-scroll-area-orientation-value="vertical" data-action="click->
5088scroll-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"> 5089 <!-- Thumb --> 5090 <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> 5091 </div> 5092</div> 5093 5094 </div> 5095 </div> 5096 <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"> 5097 <div class="h-48"></div> 5098 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5099 Scroll Area 5100 <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> 5101 </p> 5102 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 5103 </a> 5104</li> 5105 5106 5107 <li class="relative"> 5108 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5109 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5110 <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
5110k: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"> 5111 <span class="text-xs">?</span> 5112 </button> 5113 5114 <template data-popover-target="content"> 5115 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5116 <div class="space-y-2"> 5117 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5118 5119 <div class="flex items-center gap-1.5 text-xs"> 5120 <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> 5121 <span class="flex grow gap-2">Tailwind CSS</span> 5122 </div> 5123 5124 <div class="flex items-center gap-1.5 text-xs"> 5125 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5125ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5126 <g class="fill-neutral-800 dark:fill-white"> 5127 <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> 5128 <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> 5129 <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> 5130 </g> 5131 </svg> 5132 <span class="flex grow gap-2">Stimulus</span> 5133 </div> 5134 5135 <div class="flex items-center gap-1.5 text-xs"> 5136 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.25,13H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,16H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,2H3.75c-1.517,0-2.75,1.233-2.75,2.75v2.5c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75v-2.5c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,6.5H3.75c-.689,0-1.25-.561-1.25-1.25v-2.5c0-.689,.561-1.25,1.25-1.25h4.75v5Zm5.833-2.833l-1.25,1.667c-.078,.105-.202,.167-.333,.167s-.255-.062-.333-.167l-1.25-1.667c-.095-.126-.11-.295-.039-.436,.071-.141,.215-.23,.373-.23h2.5c.158,0,.302,.089,.373,.23,.07,.141,.055,.31-.039,.436Z"></path></g></svg>
5137 <span class="flex grow gap-2">Tom select</span> 5138 </div> 5139 5140 <div class="flex items-center gap-1.5 text-xs"> 5141 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 5142 <span class="flex grow gap-2">Floating UI</span> 5143 </div> 5144 5145 </div> 5146 </div> 5147 </template> 5148 </div> 5149 5150 <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 *:w-full"> 5151 5152 <select name="frameworks" id="frameworks" class="w-full max-h-[40px] flex [&>*:first-child]:!cursor-pointer" autocomplete="off" data-controller="select" data-select-dropdown-input-value="false" data-select-disable-typing-value="true" data-select-scroll-buttons-value="true"><option value="">Select an option...</option><option value="rails">Ruby on Rails</option> 5153<option value="laravel">Laravel</option> 5154<option value="django">Django</option> 5155<option value="python">Python</option> 5156<option value="js">JavaScript</option> 5157<option value="php">PHP</option> 5158<option value="java">Java</option> 5159<option value="csharp">C#</option> 5160<option value="go">Go</option> 5161<option value="rust">Rust</option> 5162<option value="cpp">C++</option> 5163<option value="swift">Swift</option> 5164<option value="kotlin">Kotlin</option> 5165<option value="typescript">TypeScript</option></select> 5166 5167 </div> 5168 </div> 5169 <a href="/docs/select" 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"> 5170 <div class="h-48"></div> 5171 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5172 Select 5173 <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> 5174 </p> 5175 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 5176 </a> 5177</li> 5178 5179 5180 <li class="relative"> 5181 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5182 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5183 <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
5183k: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"> 5184 <span class="text-xs">?</span> 5185 </button> 5186 5187 <template data-popover-target="content"> 5188 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5189 <div class="space-y-2"> 5190 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5191 5192 <div class="flex items-center gap-1.5 text-xs"> 5193 <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> 5194 <span class="flex grow gap-2">Tailwind CSS</span> 5195 </div> 5196 5197 <div class="flex items-center gap-1.5 text-xs"> 5198 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5198ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5199 <g class="fill-neutral-800 dark:fill-white"> 5200 <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> 5201 <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> 5202 <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> 5203 </g> 5204 </svg> 5205 <span class="flex grow gap-2">Stimulus</span> 5206 </div> 5207 </div> 5208 </div> 5209 </template> 5210 </div> 5211 5212 <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"> 5213 <!-- Note: You will likely need to replace all the min-h-[192px] with a min-h-screen --> 5214 5215<div class="flex h-full w-full flex-col relative" data-controller="sidebar" data-sidebar-storage-key-value="previewSidebar"> 5216 <!-- Mobile Sidebar Overlay --> 5217 <div class="absolute inset-0 z-50 md:hidden hidden" data-sidebar-target="mobileSidebar"> 5218 <!-- Backdrop --> 5219 <div class="absolute inset-0 bg-black/50 transition-opacity duration-300" data-sidebar-target="mobileBackdrop" data-action="click->
5219sidebar#closeMobile"></div> 5220 5221 <!-- Sidebar Panel --> 5222 <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"> 5223 <div data-sidebar-target="sharedContent"></div> 5224 </div> 5225 </div> 5226 5227 <div class="relative z-0 flex h-full w-full"> 5228 <div class="relative flex h-full flex-row"> 5229 <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"> 5230 <!-- Tiny Sidebar (shown when closed) --> 5231 <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"> 5232 <div class="flex h-13 w-full items-center justify-start"> 5233 <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"> 5234 <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> 5235 </button> 5236 </div> 5237 5238 <div class="flex w-full flex-col items-start"> 5239 <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"> 5240 <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> 5241 </a> 5242 <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"> 5243 <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
524374,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg> 5244 </a> 5245 <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"> 5246 <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> 5247 </a> 5248 </div> 5249 5250 <div class="grow"></div> 5251 5252 <div class="sticky bottom-0 z-30 bg-white py-1.5 empty:hidden dark:bg-neutral-950"> 5253 <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"> 5254 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 5255 <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30"> 5256 <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"> 5257 </div> 5258 </div> 5259 </button> 5260 </div> 5261 </summary> 5262 5263 <!-- Full Sidebar (shown when open) --> 5264 <div class="h-full w-32 overflow-x-clip overflow-y-auto text-clip whitespace-nowrap" data-sidebar-target="desktopContent"> 5265 <!-- Shared Sidebar Content Template --> 5266 <template data-sidebar-target="contentTemplate"> 5267 <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"> 5268 <div class="sticky top-0 z-30"> 5269 <div class="px-1.5 sm:px-2"> 5270 <div class="flex h-13 items-center justify-between"> 5271 <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"> 5272 <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> 5273 </a> 5274 <div class="flex"> 5275 <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"> 5276 <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> 5277 </button> 5278 </div> 5279 </div> 5280 </div> 5281 </div> 5282 5283 <aside class="relative px-1.5 last:mb-5 sm:px-2"> 5284 <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
5284k:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50"> 5285 <div class="flex min-w-0 items-center gap-1.5"> 5286 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 5287 <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> 5288 </div> 5289 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 5290 <div class="truncate">Dashboard</div> 5291 </div> 5292 </div> 5293 <div class="text-neutral-500 dark:text-neutral-400"> 5294 <div class="hidden sm:block"> 5295 <div class="hidden ml-auto group-hover:flex text-xs"> 5296 â1 5297 </div> 5298 </div> 5299 </div> 5300 </a> 5301 <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"> 5302 <div class="flex min-w-0 items-center gap-1.5"> 5303 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 5304 <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
530474,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg> 5305 </div> 5306 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 5307 <div class="truncate">Contacts</div> 5308 </div> 5309 </div> 5310 <div class="text-neutral-500 dark:text-neutral-400"> 5311 <div class="hidden sm:block"> 5312 <div class="hidden ml-auto group-hover:flex text-xs"> 5313 â2 5314 </div> 5315 </div> 5316 </div> 5317 </a> 5318 <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"> 5319 <div class="flex min-w-0 items-center gap-1.5"> 5320 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 5321 <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> 5322 </div> 5323 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 5324 <div class="truncate">Companies</div> 5325 </div> 5326 </div> 5327 <div class="text-neutral-500 dark:text-neutral-400"> 5328 <div class="hidden sm:block"> 5329 <div class="hidden ml-auto group-hover:flex text-xs"> 5330 â3 5331 </div> 5332 </div> 5333 </div> 5334 </a> 5335 </aside> 5336 5337 <div class="grow"></div> 5338 5339 <div class="sticky bottom-0 z-30 bg-white p-1.5 empty:hidden sm:p-2 dark:bg-neutral-950"> 5340 <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"> 5341 <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50"> 5342 <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30"> 5343 <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"> 5344 </div> 5345 </div> 5346 <div class="min-w-0"> 5347 <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs"> 5348 <div class="truncate text-xs">John Doe</div> 5349 </div> 5350 </div> 5351 </button> 5352 </div> 5353 </nav> 5354 </template> 5355 </div> 5356 </details> 5357 </div> 5358 5359 <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"> 5360 <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"> 5361 <div class="w-full absolute top-0 z-10 flex items-center md:hidden p-2"> 5362 <button type="button" class="size-7 inline-flex items-center justify-center rounded-md focus:bg-neutral-100 focus:outline-hidden focu
5362s:ring-inset dark:focus:bg-neutral-700/50 active:opacity-50" data-action="click->sidebar#openMobile" aria-label="Open sidebar"> 5363 <span class="sr-only">Open sidebar</span> 5364 <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> 5365 </button> 5366 </div> 5367 <div class="px-6 py-4 text-xs"> 5368 Your content 5369 </div> 5370 </div> 5371 </main> 5372 </div> 5373</div> 5374 5375 </div> 5376 </div> 5377 <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"> 5378 <div class="h-48"></div> 5379 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5380 Sidebar 5381 <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> 5382 </p> 5383 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 5384 </a> 5385</li> 5386 5387 5388 <li class="relative"> 5389 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5390 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5391 <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
5391k: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"> 5392 <span class="text-xs">?</span> 5393 </button> 5394 5395 <template data-popover-target="content"> 5396 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5397 <div class="space-y-2"> 5398 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5399 5400 <div class="flex items-center gap-1.5 text-xs"> 5401 <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> 5402 <span class="flex grow gap-2">Tailwind CSS</span> 5403 </div> 5404 5405 </div> 5406 </div> 5407 </template> 5408 </div> 5409 5410 <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"> 5411 <div class="max-w-md w-full flex items-center justify-center"> 5412 <div class="animate-pulse max-w-md w-full"> 5413 <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-full mb-2"></div> 5414 <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2"></div> 5415</div> 5416 5417 </div> 5418 </div> 5419 </div> 5420 <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"> 5421 <div class="h-48"></div> 5422 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5423 Skeleton 5424 <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> 5425 </p> 5426 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p> 5427 </a> 5428</li> 5429 5430 5431 <li class="relative"> 5432 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 5433 <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"> 5434 <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"> 5435 <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
54356,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> 5436 Pro 5437 </a> 5438 </div> 5439 </div> 5440 5441 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5442 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5443 <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"> 5444 <span class="text-xs">?</span> 5445 </button> 5446 5447 <template data-popover-target="content"> 5448 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5449 <div class="space-y-2"> 5450 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5451 5452 <div class="flex items-center gap-1.5 text-xs"> 5453 <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> 5454 <span class="flex grow gap-2">Tailwind CSS</span> 5455 </div> 5456 5457 <div class="flex items-center gap-1.5 text-xs"> 5458 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5458ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5459 <g class="fill-neutral-800 dark:fill-white"> 5460 <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> 5461 <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> 5462 <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> 5463 </g> 5464 </svg> 5465 <span class="flex grow gap-2">Stimulus</span> 5466 </div> 5467 5468 </div> 5469 </div> 5470 </template> 5471 </div> 5472 5473 <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"> 5474 <div id="right-slideover" class="group"> 5475 <a class="hidden p-1 align-middle group-hover:inline-block" href="#right-slideover"> 5476 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500" viewB
5476ox="0 0 24 24" fill="currentColor"> 5477 <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> 5478 </svg> 5479 </a> 5480 </div> 5481 <!-- BEGIN lib/jumpstart/app/views/jumpstart/docs/_snippet.html.erb --> 5482 <div class="not-prose"> 5483 <!-- BEGIN app/views/components/_slideover.html.erb --> 5484 <div data-controller="slideover"> 5485 <button data-action="slideover#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"> 5486 Open Right Slideover 5487 </button> 5488 5489 <dialog data-slideover-target="dialog" data-action="mousedown->slideover#backdropClose" class="slideover slideover-right fixed inset-0 m-0 ml-auto h-dvh max-h-full border-l border-black/10 outline-hidden dark:border-white/10"> 5490 <div class="inset-y-0 flex h-dvh w-80 flex-col bg-white shadow-lg outline-hidden sm:w-96 lg:w-[420px] dark:bg-neutral-800 dark:text-neutral-100 dark:shadow-neutral-950"> 5491 <button type="button" data-action="slideover#hide:prevent" class="ring-offset-background absolute top-4 right-4 mt-1 rounded-full p-1.5 opacity-70 transition-opacity hover:bg-neutral-500/15 hover:opacity-100 focus:outline-hidden active:bg-neutral-500/25 disabled:pointer-events-none md:top-5"> 5492 <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"> 5493 <line x1="18" x2="6" y1="6" y2="18"></line> 5494 <line x1="6" x2="18" y1="6" y2="18"></line> 5495 </svg> 5496 <span class="sr-only">Close</span> 5497 </button> 5498 5499 <p class="mt-0 border-b font-semibold border-neutral-100 p-5 pr-8 text-lg text-neutral-900 md:p-6 md:text-xl dark:border-white/5 dark:text-neutral-100">Right Slideover</p> 5500 <div class="flex grow flex-col overflow-y-auto p-5 md:p-6"> 5501 <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">Content...</div> 5502 </div> 5503 <div class="flex flex-none items-center justify-start gap-2 border-t border-neutral-100 p-5 md:p-6 md:px-7 dark:border-white/5"> 5504 <button type="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 dark:focus-visible:outline-neutral-200">Submit</button> 5505 <button data-action="slideover#hide:prevent" 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">Cancel</button> 5506 </div> 5507 </div> 5508 </dialog> 5509 </div> 5510 <!-- END app/views/components/_slideover.html.erb --> 5511 </div> 5512 </div> 5513 </div> 5514 <a href="/docs/slideover" 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"> 5515 <div class="h-48"></div> 5516 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5517 Slideover 5518 <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> 5519 </p> 5520 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p> 5521 </a> 5522</li> 5523 5524 5525 <li class="relative"> 5526 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 5527 <div class="inline relative"> 5528 <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"> 5529 <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"> 5530 <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
55306,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> 5531 Pro 5532 </a> 5533 </div> 5534 </div> 5535 5536 </div> 5537 5538 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5539 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5540 <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"> 5541 <span class="text-xs">?</span> 5542 </button> 5543 5544 <template data-popover-target="content"> 5545 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5546 <div class="space-y-2"> 5547 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5548 5549 <div class="flex items-center gap-1.5 text-xs"> 5550 <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> 5551 <span class="flex grow gap-2">Tailwind CSS</span> 5552 </div> 5553 5554 <div class="flex items-center gap-1.5 text-xs"> 5555 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5555ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5556 <g class="fill-neutral-800 dark:fill-white"> 5557 <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> 5558 <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> 5559 <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> 5560 </g> 5561 </svg> 5562 <span class="flex grow gap-2">Stimulus</span> 5563 </div> 5564 </div> 5565 </div> 5566 </template> 5567 </div> 5568 5569 <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"> 5570 <div data-controller="stepper" 5571 data-stepper-current-step-value="0" 5572 data-stepper-validate-on-next-value="true" 5573 data-stepper-save-progress-value="false" 5574 data-stepper-cloak-value="true" 5575 data-stepper-animate-entrance-value="true" 5576 style="visibility: hidden; opacity: 0;" 5577 class="w-full max-w-xs mx-auto p-4 mt-10 relative"> 5578 5579 5580 <!-- Step Indicators --> 5581 <div class="max-w-24 mx-auto absolute -top-4 inset-x-0"> 5582 <ul class="relative flex flex-row gap-x-1"> 5583 <li class="group relative shrink flex-1 last:flex-none"> 5584 <div class="w-full inline-flex items-center align-middle text-xs"> 5585 <div class="relative inline-flex flex-col items-center"> 5586 <button type="button" data-stepper-target="indicator" data-action="click->
5586stepper#goToStep" data-step="0" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold"> 5587 <span class="step-number">1</span> 5588 <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> 5589 </button> 5590 </div> 5591 <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div> 5592 </div> 5593 </li> 5594 <li class="group relative shrink flex-1 last:flex-none"> 5595 <div class="w-full inline-flex items-center align-middle text-xs"> 5596 <div class="relative inline-flex flex-col items-center"> 5597 <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"> 5598 <span class="step-number">2</span> 5599 <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> 5600 </button> 5601 </div> 5602 <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div> 5603 </div> 5604 </li> 5605 <li class="group relative shrink flex-1 last:flex-none"> 5606 <div class="w-full inline-flex items-center align-middle text-xs"> 5607 <div class="relative inline-flex flex-col items-center"> 5608 <button type="button" data-stepper-target="indicator" data-action="click->
5608stepper#goToStep" data-step="2" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold"> 5609 <span class="step-number">3</span> 5610 <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> 5611 </button> 5612 </div> 5613 <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div> 5614 </div> 5615 </li> 5616 </ul> 5617 </div> 5618 5619 <!-- Step 1: Choose Your Plan --> 5620 <div data-stepper-target="step" class="block"> 5621 <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Choose Your Plan</h3> 5622 5623 <fieldset class="flex gap-2 justify-center"> 5624 <legend class="sr-only">Select a plan</legend> 5625 5626 <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"> 5627 <input type="radio" name="preview-plan" value="free" class="sr-only" required> 5628 <div class="flex-1"> 5629 <div class="flex items-center justify-between"> 5630 <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 5631 Free 5632 </p> 5633 </div> 5634 </div> 5635 </label> 5636 5637 <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"> 5638 <input type="radio" name="preview-plan" value="lite" class="sr-only" required> 5639 <div class="flex-1"> 5640 <div class="flex items-center justify-between"> 5641 <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 5642 Lite 5643 </p> 5644 </div> 5645 </div> 5646 </label> 5647 5648 <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"> 5649 <input type="radio" name="preview-plan" value="basic" class="sr-only" required> 5650 <div class="flex-1"> 5651 <div class="flex items-center justify-between"> 5652 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 5653 Basic 5654 </p> 5655 </div> 5656 </div> 5657 </label> 5658 5659 <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"> 5660 <input type="radio" name="preview-plan" value="pro" class="sr-only" required> 5661 <div class="flex-1"> 5662 <div class="flex items-center justify-between"> 5663 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100"> 5664 Pro 5665 </p> 5666 </div> 5667 </div> 5668 </label> 5669 </fieldset> 5670 </div> 5671 5672 <!-- Step 2: What is your role? --> 5673 <div data-stepper-target="step" class="hidden"> 5674 <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">What is your role?</h3> 5675 5676 <fieldset class="flex gap-2 justify-center"> 5677 <legend class="sr-only">Select your role</legend> 5678 5679 <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"> 5680 <input type="radio" name="preview-role" value="ceo" class="sr-only" required> 5681 <div class="flex-1"> 5682 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">CEO</p> 5683 </div> 5684 </label> 5685 5686 <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"> 5687 <input type="radio" name="preview-role" value="developer" class="sr-only" required> 5688 <div class="flex-1"> 5689 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Developer</p> 5690 </div> 5691 </label> 5692 5693 <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"> 5694 <input type="radio" name="preview-role" value="designer" class="sr-only" required> 5695 <div class="flex-1"> 5696 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Designer</p> 5697 </div> 5698 </label> 5699 </fieldset> 5700 </div> 5701 5702 <!-- Step 3: Where did you learn about us? --> 5703 <div data-stepper-target="step" class="hidden"> 5704 <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Where did you learn about us?</h3> 5705 5706 <fieldset class="flex gap-2 justify-center"> 5707 <legend class="sr-only">Select how you found us</legend> 5708 5709 <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"> 5710 <input type="radio" name="preview-source" value="search" class="sr-only" required> 5711 <div class="flex-1"> 5712 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Search</p> 5713 </div> 5714 </label> 5715 5716 <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"> 5717 <input type="radio" name="preview-source" value="social" class="sr-only" required> 5718 <div class="flex-1"> 5719 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Social</p> 5720 </div> 5721 </label> 5722 5723 <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"> 5724 <input type="radio" name="preview-source" value="referral" class="sr-only" required> 5725 <div class="flex-1"> 5726 <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Referral</p> 5727 </div> 5728 </label> 5729 </fieldset> 5730 </div> 5731 5732 <!-- Navigation Buttons --> 5733 <div class="mt-4 flex items-center justify-between gap-2 mx-auto px-8"> 5734 <button type="button" data-stepper-target="prevButton" data-action="click->
5734stepper#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"> 5735 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18"> 5736 <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"> 5737 <polyline points="11.25 14.25 5.75 9 11.25 3.75"></polyline> 5738 </g> 5739 </svg> 5740 Back 5741 </button> 5742 5743 <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"> 5744 Continue 5745 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18"> 5746 <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"> 5747 <polyline points="6.75 3.75 12.25 9 6.75 14.25"></polyline> 5748 </g> 5749 </svg> 5750 </button> 5751 5752 <button type="button" data-stepper-target="submitButton" data-action="click->
5752stepper#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"> 5753 Submit 5754 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18"> 5755 <g fill="currentColor"> 5756 <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> 5757 </g> 5758 </svg> 5759 </button> 5760 </div> 5761</div> 5762 5763 </div> 5764 </div> 5765 <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"> 5766 <div class="h-48"></div> 5767 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5768 Stepper 5769 <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> 5770 </p> 5771 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 5772 </a> 5773</li> 5774 5775 5776 <li class="sm:hidden col-span-1"> 5777 <div class="relative mt-8 mb-6"> 5778 <div class="mx-auto"> 5779 <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"> 5780 <div data-controller="newsletter" 5781 class="max-w-xs"> 5782 <div data-newsletter-target="form"> 5783 <form data-action="submit->newsletter#submit" 5784 class="space-y-3"> 5785 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 5786 <input type="email" 5787 data-newsletter-target="email" 5788 placeholder="Enter your email..." 5789 class="form-control" 5790 5791 required> 5792 <div class="flex justify-center"> 5793 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 5794 </div> 5795 <button type="submit" 5796 data-newsletter-target="submitButton" 5797 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"> 5798 Subscribe to the newsletter 5799 </button> 5800 </form> 5801 <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]"> 5802 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 5803 </div> 5804 </div> 5805 5806 <div data-newsletter-target="successMessage" 5807 class="text-center py-4" 5808 style="display: none;"> 5809 <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"> 5810 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 5811 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 5812 </svg> 5813 </div> 5814 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
5815 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 5816 </div> 5817 </div> 5818 </div> 5819 </div> 5820</div> 5821 5822 </li> 5823 <li class="relative"> 5824 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5825 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5826 <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"> 5827 <span class="text-xs">?</span> 5828 </button> 5829 5830 <template data-popover-target="content"> 5831 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5832 <div class="space-y-2"> 5833 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5834 5835 <div class="flex items-center gap-1.5 text-xs"> 5836 <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> 5837 <span class="flex grow gap-2">Tailwind CSS</span> 5838 </div> 5839 5840 </div> 5841 </div> 5842 </template> 5843 </div> 5844 5845 <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"> 5846 <label class="group flex items-center cursor-pointer"> 5847 <div class="relative"> 5848 <input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch"> 5849 <!-- Background element --> 5850 <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
5850k: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> 5851 <!-- Round element with icons inside --> 5852 <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"> 5853 <!-- X icon for unchecked state --> 5854 <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> 5855 <!-- Checkmark icon for checked state --> 5856 <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> 5857 </div> 5858 </div> 5859 </label> 5860 </div> 5861 </div> 5862 <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"> 5863 <div class="h-48"></div> 5864 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5865 Switch 5866 <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> 5867 </p> 5868 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p> 5869 </a> 5870</li> 5871 5872 5873 <li class="relative"> 5874 <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400"> 5875 <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"> 5876 <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"> 5877 <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> 5878 Pro 5879 </a> 5880 </div> 5881 </div> 5882 5883 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5884 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5885 <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
5885k: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"> 5886 <span class="text-xs">?</span> 5887 </button> 5888 5889 <template data-popover-target="content"> 5890 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5891 <div class="space-y-2"> 5892 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5893 5894 <div class="flex items-center gap-1.5 text-xs"> 5895 <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> 5896 <span class="flex grow gap-2">Tailwind CSS</span> 5897 </div> 5898 5899 <div class="flex items-center gap-1.5 text-xs"> 5900 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5900ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 5901 <g class="fill-neutral-800 dark:fill-white"> 5902 <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> 5903 <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> 5904 <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> 5905 </g> 5906 </svg> 5907 <span class="flex grow gap-2">Stimulus</span> 5908 </div> 5909 5910 </div> 5911 </div> 5912 </template> 5913 </div> 5914 5915 <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"> 5916 <div data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-xs dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
5916k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 5917 <div class="opacity-0 transition-opacity duration-200 relative inline-grid gap-2 items-center justify-center w-full grid-cols-3 p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 5918 <button 5919 class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" 5920 id="first" 5921 data-tabs-target="tab" 5922 data-action="click->tabs#change:prevent" 5923 role="tab"> 5924 <span>Tab 1</span> 5925 </button> 5926 <button 5927 class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
5927k:focus-visible:outline-neutral-200" 5928 id="second" 5929 data-tabs-target="tab" 5930 data-action="click->tabs#change:prevent" 5931 role="tab"> 5932 <span>Tab 2</span> 5933 </button> 5934 <button 5935 class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" 5936 id="third" 5937 data-tabs-target="tab" 5938 data-action="click->tabs#change:prevent" 5939 role="tab"> 5940 <span>Tab 3</span> 5941 </button> 5942 </div> 5943 5944 <div class="rounded-lg mt-2 py-4 px-4 text-xs text-center border border-neutral-200 dark:border-neutral-700 border-dashed" data-tabs-target="panel" role="tabpanel"> 5945 Tab 1 content 5946 </div> 5947 <div class="rounded-lg mt-2 py-4 px-4 text-xs text-center border border-neutral-200 dark:border-neutral-700 border-dashed hidden" data-tabs-target="panel" role="tabpanel"> 5948 Tab 2 content 5949 </div> 5950 <div class="rounded-lg mt-2 py-4 px-4 text-xs text-center border border-neutral-200 dark:border-neutral-700 border-dashed hidden" data-tabs-target="panel" role="tabpanel"> 5951 Tab 3 content 5952 </div> 5953 </div> 5954 </div> 5955 </div> 5956 <a href="/docs/tabs" 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"> 5957 <div class="h-48"></div> 5958 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 5959 Tabs 5960 <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> 5961 </p> 5962 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p> 5963 </a> 5964</li> 5965 5966 5967 5968 5969 <li class="relative"> 5970 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 5971 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 5972 <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
5972k: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"> 5973 <span class="text-xs">?</span> 5974 </button> 5975 5976 <template data-popover-target="content"> 5977 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 5978 <div class="space-y-2"> 5979 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 5980 5981 <div class="flex items-center gap-1.5 text-xs"> 5982 <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> 5983 <span class="flex grow gap-2">Tailwind CSS</span> 5984 </div> 5985 5986 </div> 5987 </div> 5988 </template> 5989 </div> 5990 5991 <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"> 5992 <div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4"> 5993 <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"> 5994 <table class="w-full text-[9px]"> 5995 <thead class="bg-neutral-100 dark:bg-neutral-800"> 5996 <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)]"> 5997 <th scope="col" class="pl-3 pr-2 font-semibold text-neutral-900 dark:text-neutral-50"> 5998 Name 5999 </th> 6000 <th scope="col" class="px-2 font-semibold text-neutral-900 dark:text-neutral-50"> 6001 Role 6002 </th> 6003 <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50"> 6004 Status 6005 </th> 6006 </tr> 6007 </thead> 6008 <tbody class="*:*:py-1"> 6009 <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)]"> 6010 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 6011 Alex Johnson 6012 </td> 6013 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 6014 Admin 6015 </td> 6016 <td class="pl-2 pr-3"> 6017 <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"> 6018 Active 6019 </span> 6020 </td> 6021 </tr> 6022 <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)]"> 6023 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 6024 Sarah Miller 6025 </td> 6026 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 6027 Editor 6028 </td> 6029 <td class="pl-2 pr-3"> 6030 <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"> 6031 Active 6032 </span> 6033 </td> 6034 </tr> 6035 <tr> 6036 <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100"> 6037 Michael Chen 6038 </td> 6039 <td class="px-2 text-neutral-500 dark:text-neutral-400"> 6040 Viewer 6041 </td> 6042 <td class="pl-2 pr-3"> 6043 <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"> 6044 Pending 6045 </span> 6046 </td> 6047 </tr> 6048 </tbody> 6049 </table> 6050 </div> 6051</div> 6052 6053 </div> 6054 </div> 6055 <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"> 6056 <div class="h-48"></div> 6057 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 6058 Table 6059 <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> 6060 </p> 6061 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p> 6062 </a> 6063</li> 6064 6065 6066 <li class="relative"> 6067 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 6068 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 6069 <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
6069k: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"> 6070 <span class="text-xs">?</span> 6071 </button> 6072 6073 <template data-popover-target="content"> 6074 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 6075 <div class="space-y-2"> 6076 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 6077 6078 <div class="flex items-center gap-1.5 text-xs"> 6079 <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> 6080 <span class="flex grow gap-2">Tailwind CSS</span> 6081 </div> 6082 6083 </div> 6084 </div> 6085 </template> 6086 </div> 6087 6088 <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"> 6089 <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-4 text-center"> 6090 <!-- Star Rating --> 6091 <div class="flex justify-center mb-2"> 6092 <div class="flex items-center space-x-1"> 6093 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 6094 <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> 6095 </svg> 6096 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 6097 <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> 6098 </svg> 6099 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 6100 <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> 6101 </svg> 6102 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 6103 <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> 6104 </svg> 6105 <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> 6106 <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> 6107 </svg> 6108 </div> 6109 </div> 6110 6111 <blockquote class="text-sm text-neutral-700 dark:text-neutral-300 mb-2"> 6112 "Outstanding quality!" 6113 </blockquote> 6114 6115 <footer> 6116 <div class="flex items-center justify-center"> 6117 <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"> 6118 <div class="ml-3 text-left"> 6119 <div class="text-sm font-semibold text-neutral-900 dark:text-white truncate">Michael Rodriguez</div> 6120 <div class="text-xs text-neutral-500 dark:text-neutral-400 truncate">Verified Customer</div> 6121 </div> 6122 </div> 6123 </footer> 6124 </div> 6125 </div> 6126 </div> 6127 <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"> 6128 <div class="h-48"></div> 6129 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 6130 Testimonial 6131 <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> 6132 </p> 6133 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p> 6134 </a> 6135</li> 6136 6137 6138 <li class="relative"> 6139 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 6140 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 6141 <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
6141k: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"> 6142 <span class="text-xs">?</span> 6143 </button> 6144 6145 <template data-popover-target="content"> 6146 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 6147 <div class="space-y-2"> 6148 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 6149 6150 <div class="flex items-center gap-1.5 text-xs"> 6151 <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> 6152 <span class="flex grow gap-2">Tailwind CSS</span> 6153 </div> 6154 6155 <div class="flex items-center gap-1.5 text-xs"> 6156 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6156ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 6157 <g class="fill-neutral-800 dark:fill-white"> 6158 <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> 6159 <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> 6160 <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> 6161 </g> 6162 </svg> 6163 <span class="flex grow gap-2">Stimulus</span> 6164 </div> 6165 </div> 6166 </div> 6167 </template> 6168 </div> 6169 6170 <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"> 6171 <div class="flex flex-wrap gap-2 justify-center"> 6172 <button 6173 onclick="toast('Toast Notification', { type: 'success' })" 6174 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
6174k:focus-visible:outline-neutral-200" 6175 > 6176 <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> 6177 Show Toast 6178 </button> 6179 </div> 6180 </div> 6181 </div> 6182 <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"> 6183 <div class="h-48"></div> 6184 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 6185 Toast 6186 <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> 6187 </p> 6188 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p> 6189 </a> 6190</li> 6191 6192 6193 <li class="relative"> 6194 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 6195 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 6196 <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
6196k: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"> 6197 <span class="text-xs">?</span> 6198 </button> 6199 6200 <template data-popover-target="content"> 6201 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 6202 <div class="space-y-2"> 6203 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 6204 6205 <div class="flex items-center gap-1.5 text-xs"> 6206 <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> 6207 <span class="flex grow gap-2">Tailwind CSS</span> 6208 </div> 6209 6210 <div class="flex items-center gap-1.5 text-xs"> 6211 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6211ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 6212 <g class="fill-neutral-800 dark:fill-white"> 6213 <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> 6214 <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> 6215 <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> 6216 </g> 6217 </svg> 6218 <span class="flex grow gap-2">Stimulus</span> 6219 </div> 6220 6221 <div class="flex items-center gap-1.5 text-xs"> 6222 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 6223 <span class="flex grow gap-2">Floating UI</span> 6224 </div> 6225 </div> 6226 </div> 6227 </template> 6228 </div> 6229 6230 <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"> 6231 <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
6231k:focus-visible:outline-neutral-200" 6232 data-controller="tooltip" 6233 data-tooltip-content="This is a tooltip!" 6234 data-tooltip-placement-value="top" 6235 data-tooltip-animation-value="fade origin" 6236 data-tooltip-arrow-value="true"> 6237 Button with tooltip 6238 </button> 6239 </div> 6240 </div> 6241 <a href="/docs/tooltip" 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"> 6242 <div class="h-48"></div> 6243 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 6244 Tooltip 6245 <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> 6246 </p> 6247 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p> 6248 </a> 6249</li> 6250 6251 6252 <li class="relative"> 6253 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 6254 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 6255 <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
6255k: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"> 6256 <span class="text-xs">?</span> 6257 </button> 6258 6259 <template data-popover-target="content"> 6260 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 6261 <div class="space-y-2"> 6262 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 6263 6264 <div class="flex items-center gap-1.5 text-xs"> 6265 <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> 6266 <span class="flex grow gap-2">Tailwind CSS</span> 6267 </div> 6268 6269 <div class="flex items-center gap-1.5 text-xs"> 6270 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6270ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 6271 <g class="fill-neutral-800 dark:fill-white"> 6272 <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> 6273 <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> 6274 <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> 6275 </g> 6276 </svg> 6277 <span class="flex grow gap-2">Stimulus</span> 6278 </div> 6279 6280 <div class="flex items-center gap-1.5 text-xs"> 6281 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 6282 <span class="flex grow gap-2">Floating UI</span> 6283 </div> 6284 </div> 6285 </div> 6286 </template> 6287 </div> 6288 6289 <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"> 6290 <div data-controller="tree-view" data-tree-view-animate-value="true" class="w-full h-[200px] min-w-[100px] flex justify-center items-center max-w-md p-2"> 6291 <!-- Root folder "app" --> 6292 <div class="flex flex-col gap-y-1 w-full"> 6293 <button type="button" 6294 data-action="click->
6294tree-view#toggle" 6295 aria-controls="tree-preview-content-app" 6296 aria-expanded="true" 6297 data-state="open" 6298 class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline"> 6299 <svg data-tree-view-target="icon" class="shrink-0 size-3 folder-open" 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="M5,14.75h-.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626c1.105,0,2,.895,2,2v1"></path><path d="M16.148,13.27l.843-3.13c.257-.953-.461-1.89-1.448-1.89H6.15c-.678,0-1.272,.455-1.448,1.11l-.942,3.5c-.257,.953,.461,1.89,1.448,1.89H14.217c.904,0,1.696-.607,1.931-1.48Z"></path></g></svg> 6300 <span class="font-medium">app</span> 6301 </button> 6302 <!-- Grid wrapper for smooth animation --> 6303 <div id="tree-preview-content-app" 6304 data-state="open" 6305 role="region" 6306 class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" 6307 data-tree-view-target="content"> 6308 <div class="ml-4 pl-2 border-l border-neutral-200 dark:border-neutral-700 flex flex-col gap-y-1 overflow-hidden min-h-0"> 6309 <!-- Folder "components" --> 6310 <div class="flex flex-col gap-y-1"> 6311 <button type="button" 6312 data-action="click->tree-view#toggle" 6313 aria-controls="tree-preview-content-components" 6314 aria-expanded="true" 6315 data-state="open" 6316 class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline"> 6317 <svg data-tree-view-target="icon" class="shrink-0 size-3 folder-open" 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="M5,14.75h-.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626c1.105,0,2,.895,2,2v1"></path><path d="M16.148,13.27l.843-3.13c.257-.953-.461-1.89-1.448-1.89H6.15c-.678,0-1.272,.455-1.448,1.11l-.942,3.5c-.257,.953,.461,1.89,1.448,1.89H14.217c.904,0,1.696-.607,1.931-1.48Z"></path></g></svg> 6318 <span class="font-medium">components</span> 6319 </button> 6320 <!-- Grid wrapper for smooth animation --> 6321 <div id="tree-preview-content-components" 6322 data-state="open" 6323 role="region" 6324 class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" 6325 data-tree-view-target="content"> 6326 <div class="ml-4 pl-2 border-l border-neutral-200 dark:border-neutral-700 flex flex-col gap-y-1 overflow-hidden min-h-0"> 6327 <!-- Files in "components" --> 6328 <button type="button" data-tree-view-item class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs text-neutral-600 dar
6328k:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline"> 6329 <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="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path></g></svg> 6330 <span>_header.html.erb</span> 6331 </button> 6332 <button type="button" data-tree-view-item class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline"> 6333 <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="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path></g></svg> 6334 <span>_footer.html.erb</span> 6335 </button> 6336 </div> 6337 </div> 6338 </div> 6339 </div> 6340 </div> 6341 </div> 6342 </div> 6343 </div> 6344 </div> 6345 <a href="/docs/tree-view" 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"> 6346 <div class="h-48"></div> 6347 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 6348 Tree View 6349 <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> 6350 </p> 6351 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p> 6352 </a> 6353</li> 6354 6355 6356 <li class="relative"> 6357 <div class="absolute inset-0 top-0 left-0 pointer-events-none"> 6358 <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover"> 6359 <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
6359k: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"> 6360 <span class="text-xs">?</span> 6361 </button> 6362 6363 <template data-popover-target="content"> 6364 <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200"> 6365 <div class="space-y-2"> 6366 <div class="text-xs font-semibold w-full text-center">Dependencies</div> 6367 6368 <div class="flex items-center gap-1.5 text-xs"> 6369 <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> 6370 <span class="flex grow gap-2">Tailwind CSS</span> 6371 </div> 6372 6373 <div class="flex items-center gap-1.5 text-xs"> 6374 <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6374ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 6375 <g class="fill-neutral-800 dark:fill-white"> 6376 <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> 6377 <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> 6378 <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> 6379 </g> 6380 </svg> 6381 <span class="flex grow gap-2">Stimulus</span> 6382 </div> 6383 6384 </div> 6385 </div> 6386 </template> 6387 </div> 6388 6389 <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"> 6390 <div data-controller="two-factor" data-two-factor-autofocus-value="false"> 6391 <div class="p-5 sm:p-8 md:p-12"> 6392 <svg xmlns="http://www.w3.org/2000/svg" class="size-6 mx-auto mb-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="9" y1="11" x2="9" y2="12"></line><path d="M6.25,7.628v-3.128c0-1.519,1.231-2.75,2.75-2.75h0c1.519,0,2.75,1.231,2.75,2.75v3.129"></path><circle cx="9" cy="11.5" r="4.75"></circle></g></svg> 6393 <form 6394 data-two-factor-target="form" 6395 data-action="submit->two-factor#handleSubmit" 6396 class="space-y-6"> 6397 <div class="inline-flex items-center gap-1.5"> 6398 <input 6399 data-two-factor-target="digit" 6400 data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste" 6401 type="text" 6402 inputmode="numeric" 6403 id="num1" 6404 name="num1" 6405 maxlength="1" 6406 autocomplete="one-time-code" 6407 class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400"> 6408 <input 6409 data-two-factor-target="digit" 6410 data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste" 6411 type="text" 6412 inputmode="numeric" 6413 id="num2" 6414 name="num2" 6415 maxlength="1" 6416 autocomplete="off" 6417 class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400"> 6418 <input 6419 data-two-factor-target="digit" 6420 data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste" 6421 type="text" 6422 inputmode="numeric" 6423 id="num3" 6424 name="num3" 6425 maxlength="1" 6426 autocomplete="off" 6427 class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400">
6428 <span class="text-sm text-neutral-400 dark:text-neutral-600">-</span> 6429 <input 6430 data-two-factor-target="digit" 6431 data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste" 6432 type="text" 6433 inputmode="numeric" 6434 id="num4" 6435 name="num4" 6436 maxlength="1" 6437 autocomplete="off" 6438 class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400"> 6439 <input 6440 data-two-factor-target="digit" 6441 data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste" 6442 type="text" 6443 inputmode="numeric" 6444 id="num5" 6445 name="num5" 6446 maxlength="1" 6447 autocomplete="off" 6448 class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400"> 6449 <input 6450 data-two-factor-target="digit" 6451 data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste" 6452 type="text" 6453 inputmode="numeric" 6454 id="num6" 6455 name="num6" 6456 maxlength="1" 6457 autocomplete="off" 6458 class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400"> 6459 </div> 6460 <div class="flex justify-center"> 6461 <button 6462 data-two-factor-target="submitButton" 6463 type="submit" 6464 class="inline-flex min-w-32 justify-center 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"> 6465 <span>
6465Verify code</span> 6466 </button> 6467 </div> 6468 </form> 6469 </div> 6470 </div> 6471 6472 6473 </div> 6474 </div> 6475 <a href="/docs/two-factor" 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"> 6476 <div class="h-48"></div> 6477 <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5"> 6478 Two Factor 6479 <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> 6480 </p> 6481 <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 1 component</p> 6482 </a> 6483</li> 6484 6485 6486 </ul> 6487 </div> 6488</turbo-frame> </div> 6489 6490 6491 <div class="relative mt-24"> 6492 <div class="mx-auto"> 6493 <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"> 6494 <div data-controller="newsletter" 6495 class="max-w-xs"> 6496 <div data-newsletter-target="form"> 6497 <form data-action="submit->newsletter#submit" 6498 class="space-y-3"> 6499 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 6500 <input type="email" 6501 data-newsletter-target="email" 6502 placeholder="Enter your email..." 6503 class="form-control" 6504 6505 required> 6506 <div class="flex justify-center"> 6507 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 6508 </div> 6509 <button type="submit" 6510 data-newsletter-target="submitButton" 6511 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"> 6512 Subscribe to the newsletter 6513 </button> 6514 </form> 6515 <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]"> 6516 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 6517 </div> 6518 </div> 6519 6520 <div data-newsletter-target="successMessage" 6521 class="text-center py-4" 6522 style="display: none;"> 6523 <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"> 6524 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 6525 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 6526 </svg> 6527 </div> 6528 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
6529 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 6530 </div> 6531 </div> 6532 </div> 6533 </div> 6534</div> 6535 6536 6537 <div class="mt-4 flex flex-col gap-4 items-center"> 6538 <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" class="w-fit 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"> 6539 <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> 6540 Component roadmap 6541 </a> 6542 <a href="/changelog" class="w-fit 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"> 6543 <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> 6544 Changelog 6545 </a> 6546 </div> 6547</div> 6548 6549 </main> 6550 6551<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> 6552 6553<footer class="mt-24 bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700"> 6554 <div class="max-w-5xl mx-auto w-full pb-8 pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8"> 6555 6556 <!-- Grid --> 6557 <div class="flex flex-col justify-between md:flex-row gap-5 mb-14"> 6558 6559 <div> 6560 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Popular Components</h4> 6561 6562 <ul class="grid space-y-2"> 6563 <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> 6564 <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> 6565 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focu
6565s: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> 6566 <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> 6567 </ul> 6568 </div> 6569 <!-- End Col --> 6570 6571 <div> 6572 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Company</h4> 6573 6574 <ul class="grid space-y-2"> 6575 <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> 6576 <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> 6577 <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> 6578 <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/authors-note">About</a></li> 6579 <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> 6580 <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> 6581 </ul> 6582 </div> 6583 <!-- End Col --> 6584 6585 <div> 6586 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Pricing</h4> 6587 6588 <ul class="grid space-y-2"> 6589 <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> 6590 <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> 6591 </ul> 6592 </div> 6593 <!-- End Col --> 6594 6595 <div> 6596 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Legal</h4> 6597 6598 <ul class="grid space-y-2"> 6599 <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> 6600 <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> 6601 <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="/lice
6601nse">License</a></li> 6602 </ul> 6603 </div> 6604 <!-- End Col --> 6605 </div> 6606 6607 <div class="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800"> 6608 <div class="flex flex-col md:flex-row-reverse md:justify-between md:items-center gap-6 items-center text-center md:text-left"> 6609 6610 <nav class="flex flex-col sm:flex-row items-center gap-3"> 6611 <div class="flex items-center"> 6612 <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"> 6613 <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"> 6614 <img class="rounded-full mx-auto size-8" alt="Sandu" src="/assets/founder-avatar-da341a93ca736fdd7217be943b75af4bdf1bf0c14ee149b5f11324eb98a5c6dc.webp" /> 6615 </div> 6616 Built by 6617 <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"> 6618 Sandu 6619 </a> 6620 in Paris ð¥ 6621 </div> 6622 </div> 6623 6624 <div class="flex items-center gap-3"> 6625 <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)"> 6626 <span class="sr-only">Follow Sandu on X (formerly Twitter)</span> 6627 <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"> 6628 <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"> 6629 </svg> 6630 </a> 6631 <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"> 6632 <span class="sr-only">Follow Sandu on YouTube</span> 6633 <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> 6634 </a> 6635 <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"> 6636 <span class="sr-only">Send me an email</span> 6637 <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> 6638 </a> 6639 <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">
6640 <span class="sr-only">RSS Feed</span> 6641 <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> 6642 </a> 6643 </div> 6644 </nav> 6645 6646 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 6647 © 2026 Rails Blocks 6648 </div> 6649 </div> 6650 </div> 6651 <!-- End Grid --> 6652 </div> 6653</footer> 6654 6655
6655<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>
6655 6656</body> 6657</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.