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 | Blog posts</title> 5<meta name="description" content="Read Rails Blocks updates, component release notes, and practical Ruby on Rails UI tips for building with Tailwind CSS and Stimulus." /> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <meta charset="utf-8"> 8 9 <!-- Theme initialization script to prevent FOUC --> 10
10<script> 11 (function() { 12 function selectedPalette() { 13 const storedMode = localStorage.getItem("theme"); 14 15 if (storedMode === "light" || storedMode === "dark") return storedMode; 16 17 return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; 18 } 19 20 function paintTheme(root) { 21 const palette = selectedPalette(); 22 const dark = palette === "dark"; 23 24 root.classList.toggle("dark", dark); 25 root.classList.toggle("sl-theme-dark", dark); 26 root.style.colorScheme = palette; 27 root.dataset.theme = palette; 28 } 29 30 paintTheme(document.documentElement); 31 32 document.addEventListener("turbo:before-render", function(event) { 33 paintTheme(event.detail.newBody.ownerDocument.documentElement); 34 }); 35 36 document.addEventListener("turbo:render", function() { 37 paintTheme(document.documentElement); 38 }); 39 40 document.addEventListener("turbo:load", function() { 41 paintTheme(document.documentElement); 42 }); 43 })(); 44 </script>
44 45 46 <!-- SEO Meta Tags --> 47 <meta name="author" content="Rails Blocks"> 48 <meta name="robots" content="index, follow"> 49 50 <!-- Open Graph / Facebook --> 51 <meta property="og:type" content="website"> 52 <meta property="og:url" content="https://railsblocks.com/blog"> 53 <meta property="og:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus"> 54 <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."> 55 <meta property="og:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png"> 56 57 <!-- Twitter --> 58 <meta property="twitter:card" content="summary_large_image"> 59 <meta property="twitter:url" content="https://railsblocks.com/blog"> 60 <meta property="twitter:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus"> 61 <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."> 62 <meta property="twitter:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png"> 63 64 <!-- Canonical URL --> 65 <link rel="canonical" href="https://railsblocks.com/blog"> 66 67 <!-- RSS Feed --> 68 <link rel="alternate" type="application/rss+xml" title="Rails Blocks - Component Updates" href="https://railsblocks.com/feeds/documentation.xml"> 69 70 <meta name="csrf-param" content="authenticity_token" /> 71<meta name="csrf-token" content="fuTKWmv3qrwWvZBOutSRINDz736v0_Ep3hykOHKkizhHeSQpJ1lQms4AeBt5x-UDmstzlJIU1mP4FD5e65SIYQ" /> 72 73 74 <!-- Inter font stylesheet --> 75 <link rel="preconnect" href="https://rsms.me" crossorigin> 76 <link rel="stylesheet" href="https://rsms.me/inter/inter.css" crossorigin="anonymous"> 77 78 <!-- Preload Quincy font to prevent FOUT --> 79 <link rel="preload" href="/QuincyCF-Bold.woff" as="font" type="font/woff" crossorigin> 80 81 <!-- Geist Mono for code blocks (shadcn style) --> 82 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.min.css"> 83 84 <!-- Air Datepicker CSS --> 85 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css"> 86 87 <!-- PhotoSwipe CSS --> 88 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css"> 89 90 <!-- --> 91 <link rel="stylesheet" href="/assets/application-4e2eb78ae7afb82739067fcdf95589ec6529fc31571e977ee8fc82478ac9c706.css" /> 92
92<script type="importmap" data-turbo-track="reload">{ 93 "imports": { 94 "application": "/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js", 95 "@hotwired/stimulus": "/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js", 96 "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js", 97 "@hotwired/turbo-rails": "/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js", 98 "@rails/actioncable": "/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js", 99 "chartkick": "/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js", 100 "Chart.bundle": "/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js", 101 "@rails/activestorage": "/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js", 102 "@activeadmin/activeadmin": "https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js", 103 "@rails/ujs": "https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js", 104 "motion": "https://cdn.jsdelivr.net/npm/motion@latest/+esm", 105 "tom-select": "https://cdn.jsdelivr.net/npm/[email protected]/+esm", 106 "tailwindcss-stimulus-components": "https://cdn.jsdelivr.net/npm/[email protected]/+esm", 107 "@rails/request.js": "https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm", 108 "number-flow": "https://esm.sh/number-flow", 109 "number-flow/group": "https://esm.sh/number-flow/group", 110 "air-datepicker": "https://esm.sh/[email protected]", 111 "air-datepicker/locale/en": "https://esm.sh/[email protected]/locale/en", 112 "embla-carousel": "https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm", 113 "embla-carousel-wheel-gestures": "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm", 114 "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm", 115 "emoji-mart": "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js", 116 "@emoji-mart/data": "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm", 117 "posthog-js": "https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm", 118 "photoswipe": "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js", 119 "prism": "/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js", 120 "lexxy_extensions": "/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js", 121 "lucide_callout_icons": "/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js", 122 "controllers/accordion_controller": "/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js", 123 "controllers/activity_stats_controller": "/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js", 124 "controllers/analytics_controller": "/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js", 125 "controllers/animated_number_controller": "/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js", 126 "controllers/animated_number_controller_basic": "/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js", 127 "controllers/application": "/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js", 128 "controllers/autocomplete_controller": "/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js", 129 "controllers/autocomplete_fuzzy_search_controller": "/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js", 130 "controllers/autocomplete_navigation_controller": "/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js", 131 "controllers/autocomplete_recent_searches_controller": "/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js", 132 "controllers/autogrow_controller": "/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js", 133 "controllers/autosubmit_controller": "/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js",
134 "controllers/banner_controller": "/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js", 135 "controllers/black_hole_background_controller": "/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js", 136 "controllers/carousel_controller": "/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js", 137 "controllers/checkbox_select_all_controller": "/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js", 138 "controllers/clickable_animated_number_controller": "/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js", 139 "controllers/clipboard_controller": "/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js", 140 "controllers/code_filter_controller": "/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js", 141 "controllers/collapsible_controller": "/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js", 142 "controllers/component_search_controller": "/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js", 143 "controllers/conditional_field_controller": "/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js", 144 "controllers/confirmation_controller": "/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js", 145 "controllers/context_menu_controller": "/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js", 146 "controllers/datatable_controller": "/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js", 147 "controllers/datatable_preview_controller": "/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js", 148 "controllers/date_picker_controller": "/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js", 149 "controllers/dock_controller": "/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js", 150 "controllers/drawer_controller": "/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js", 151 "controllers/dropdown_popover_controller": "/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js", 152 "controllers/emoji_picker_controller": "/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js", 153 "controllers/feedback_controller": "/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js", 154 "controllers/header_controller": "/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js", 155 "controllers/hello_controller": "/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js", 156 "controllers/highlight_controller": "/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js", 157 "controllers/hotkey_controller": "/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js", 158 "controllers/increment_controller": "/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js", 159 "controllers": "/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js", 160 "controllers/infinite_scroll_controller": "/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js", 161 "controllers/inline_edit_controller": "/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js", 162 "controllers/lightbox_controller": "/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js", 163 "controllers/marquee_controller": "/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js", 164 "controllers/menu_controller": "/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js", 165 "controllers/modal_controller": "/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js", 166 "controllers/navbar_controller": "/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js", 167 "controllers/nested_form_controller": "/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js", 168 "controllers/newsletter_controller": "/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js", 169 "controllers/onboarding_checklist_controller": "/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js", 170 "controllers/os_detect_controller": "/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js", 171 "controllers/page_view_controller": "/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
1715e36d.js", 172 "controllers/password_controller": "/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js", 173 "controllers/popover_controller": "/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js", 174 "controllers/pricing_tabs_controller": "/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js", 175 "controllers/rainbow_button_controller": "/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js", 176 "controllers/read_more_controller": "/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js", 177 "controllers/scroll_area_controller": "/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js", 178 "controllers/scroll_preservation_controller": "/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js", 179 "controllers/searchable_dropdown_controller": "/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js", 180 "controllers/select_controller": "/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js", 181 "controllers/setup_code_filter_controller": "/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js", 182 "controllers/shoelace_color_picker_controller": "/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js", 183 "controllers/sidebar_controller": "/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js", 184 "controllers/slideover_controller": "/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js", 185 "controllers/slider_number_flow_controller": "/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js", 186 "controllers/snippet_controller": "/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js", 187 "controllers/stepper_controller": "/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js", 188 "controllers/table_of_contents_controller": "/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js", 189 "controllers/tabs_controller": "/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js", 190 "controllers/text_cycler_controller": "/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js", 191 "controllers/theme_builder_controller": "/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js", 192 "controllers/theme_controller": "/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js", 193 "controllers/toast_controller": "/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js", 194 "controllers/tooltip_controller": "/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js", 195 "controllers/tree_view_controller": "/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js", 196 "controllers/turnstile_controller": "/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js", 197 "controllers/two_factor_controller": "/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js", 198 "channels/consumer": "/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js", 199 "channels": "/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js" 200 } 201}</script>
201 202<link rel="modulepreload" href="/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js"> 203<link rel="modulepreload" href="/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js"> 204<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js"> 205<link rel="modulepreload" href="/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js"> 206<link rel="modulepreload" href="/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js"> 207<link rel="modulepreload" href="/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js"> 208<link rel="modulepreload" href="/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js"> 209<link rel="modulepreload" href="/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js"> 210<link rel="modulepreload" href="https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js"> 211<link rel="modulepreload" href="https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js"> 212<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/motion@latest/+esm"> 213<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm"> 214<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm"> 215<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm"> 216<link rel="modulepreload" href="https://esm.sh/number-flow"> 217<link rel="modulepreload" href="https://esm.sh/number-flow/group"> 218<link rel="modulepreload" href="https://esm.sh/[email protected]"> 219<link rel="modulepreload" href="https://esm.sh/[email protected]/locale/en"> 220<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm"> 221<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"> 222<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm"> 223<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> 224<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm"> 225<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm"> 226<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js"> 227<link rel="modulepreload" href="/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js"> 228<link rel="modulepreload" href="/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js"> 229<link rel="modulepreload" href="/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js"> 230<link rel="modulepreload" href="/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js"> 231<link rel="modulepreload" href="/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js"> 232<link rel="modulepreload" href="/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js"> 233<link rel="modulepreload" href="/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js"> 234<link rel="modulepreload" href="/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js"> 235<link rel="modulepreload" href="/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js"> 236<link rel="modulepreload" href="/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js"> 237<link rel="modulepreload" href="/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js"> 238<link rel="modulepreload" href="/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js"> 239<link rel="modulepreload" href="/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js"> 240<link rel="modulepreload" href="/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js"> 241<link rel="modulepreload" href="/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js">
242<link rel="modulepreload" href="/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js"> 243<link rel="modulepreload" href="/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js"> 244<link rel="modulepreload" href="/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js"> 245<link rel="modulepreload" href="/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js"> 246<link rel="modulepreload" href="/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js"> 247<link rel="modulepreload" href="/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js"> 248<link rel="modulepreload" href="/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js"> 249<link rel="modulepreload" href="/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js"> 250<link rel="modulepreload" href="/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js"> 251<link rel="modulepreload" href="/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js"> 252<link rel="modulepreload" href="/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js"> 253<link rel="modulepreload" href="/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js"> 254<link rel="modulepreload" href="/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js"> 255<link rel="modulepreload" href="/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js"> 256<link rel="modulepreload" href="/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js"> 257<link rel="modulepreload" href="/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js"> 258<link rel="modulepreload" href="/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js"> 259<link rel="modulepreload" href="/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js"> 260<link rel="modulepreload" href="/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js"> 261<link rel="modulepreload" href="/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js"> 262<link rel="modulepreload" href="/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js"> 263<link rel="modulepreload" href="/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js"> 264<link rel="modulepreload" href="/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js"> 265<link rel="modulepreload" href="/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js"> 266<link rel="modulepreload" href="/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js"> 267<link rel="modulepreload" href="/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js"> 268<link rel="modulepreload" href="/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js"> 269<link rel="modulepreload" href="/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js"> 270<link rel="modulepreload" href="/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js"> 271<link rel="modulepreload" href="/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js"> 272<link rel="modulepreload" href="/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js"> 273<link rel="modulepreload" href="/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js"> 274<link rel="modulepreload" href="/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js"> 275<link rel="modulepreload" href="/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js"> 276<link rel="modulepreload" href="/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js"> 277<link rel="modulepreload" href="/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js"> 278<link rel="modulepreload" href="/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js"> 279<link rel="modulepreload" href="/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
2795e36d.js"> 280<link rel="modulepreload" href="/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js"> 281<link rel="modulepreload" href="/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js"> 282<link rel="modulepreload" href="/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js"> 283<link rel="modulepreload" href="/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js"> 284<link rel="modulepreload" href="/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js"> 285<link rel="modulepreload" href="/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js"> 286<link rel="modulepreload" href="/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js"> 287<link rel="modulepreload" href="/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js"> 288<link rel="modulepreload" href="/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js"> 289<link rel="modulepreload" href="/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js"> 290<link rel="modulepreload" href="/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js"> 291<link rel="modulepreload" href="/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js"> 292<link rel="modulepreload" href="/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js"> 293<link rel="modulepreload" href="/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js"> 294<link rel="modulepreload" href="/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js"> 295<link rel="modulepreload" href="/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js"> 296<link rel="modulepreload" href="/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js"> 297<link rel="modulepreload" href="/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js"> 298<link rel="modulepreload" href="/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js"> 299<link rel="modulepreload" href="/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js"> 300<link rel="modulepreload" href="/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js"> 301<link rel="modulepreload" href="/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js"> 302<link rel="modulepreload" href="/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js"> 303<link rel="modulepreload" href="/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js"> 304<link rel="modulepreload" href="/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js"> 305<link rel="modulepreload" href="/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js"> 306<link rel="modulepreload" href="/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js"> 307<link rel="modulepreload" href="/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js">
308<script type="module">import "application"</script>
308 309
309<script type="module">import "lexxy_extensions"</script>
309 310 <meta name="lucide-callout-icons-src" content="/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js"> 311 312 <!-- Prism.js Theme loaded via application.css (shadcn style) --> 313 314
314<script type="module">import "prism"</script>
314 315 316 <!-- app styles --> 317 318 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet"> 319 320 <link rel="stylesheet" href="/assets/tailwind-8dd8a1967e9bfb39e33fd6b97de1fb9540804eb5e014bd755b551ab3b78c8f67.css" data-turbo-track="reload" /> 321 322 <!-- Shoelace --> 323
323<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script>
323 324 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"> 325 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"> 326 327 328<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 329<link rel="icon" type="image/svg+xml" href="/favicon.svg"> 330<link rel="shortcut icon" href="/favicon.ico"> 331<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 332<meta name="apple-mobile-web-app-title" content="Rails Blocks"> 333<link rel="manifest" href="/site.webmanifest"> 334 335 <!-- Fathom - beautiful, simple website analytics --> 336
336<script src="https://cdn.usefathom.com/script.js" data-site="RGMCTRCC" defer></script>
336 337
337<script> 338 // Defines the Fathom queue if it's not already defined 339 window.fathom = window.fathom || {}; 340 window.fathom.trackEvent = window.fathom.trackEvent || function() { 341 (window.fathom.q = window.fathom.q || []).push(arguments); 342 }; 343 </script>
343 344 <!-- / Fathom --> 345 346
346<script> 347 !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||[]); 348 posthog.init('phc_1peGskgJndUl9aKkfvJan2QftpxzdEl4tplxzntLjz3', { 349 api_host: 'https://f.railsblocks.com', 350 defaults: '2026-01-30', 351 person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well 352 }) 353 </script>
353 354 355 356 <!-- Cloudflare Turnstile --> 357
357<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
357 358 359 <!-- JSON-LD Structured Data --> 360
360<script type="application/ld+json"> 361 { 362 "@context": "https://schema.org", 363 "@type": "WebSite", 364 "name": "Rails Blocks", 365 "url": "https://railsblocks.com/", 366 "description": "Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI & MCP server." 367 } 368 </script>
368 369 370 <meta name="sentry-trace" content="e34233b4273a473b89444a9326ece30c-567e90d7e06441f7-1"> 371<meta name="baggage" content="sentry-trace_id=e34233b4273a473b89444a9326ece30c,sentry-sample_rate=1.0,sentry-sample_rand=0.261473,sentry-sampled=true,sentry-environment=production,sentry-release=c1339cab003834fc5d3ba9a59528fe484c754c35,sentry-public_key=75ec06e0a9c5a635bb41b06c332c1f78"> 372 </head> 373 374 <body> 375 376<header class="sticky z-50 top-0 h-14 w-full gap-3 mx-auto" data-controller="header"> 377 <nav class="flex items-center justify-center flex-wrap w-full"> 378 <div class="w-full border-b border-neutral-950/5 dark:border-white/10"> 379 <div class="bg-white dark:bg-neutral-950"> 380 <div class="flex h-14 items-center justify-between gap-2 md:gap-8 px-4 sm:px-6"> 381 <div class="flex items-center gap-4"> 382 <div class="w-full flex items-center shrink-0 justify-center gap-4"> 383 <a class="flex items-center hover:opacity-80 gap-1.5" href="/"> 384 <img class="size-6" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" /> 385 <span class="font-semibold shrink-0 text-lg md:text-xl text-neutral-900 dark:text-neutral-50">Rails Blocks</span> 386</a> <div data-controller="modal os-detect" class="hidden md:block"> 387 <button data-controller="hotkey" 388 data-action="click->modal#open:prevent keydown.meta+k@document->hotkey#click keydown.ctrl+k@document->hotkey#click" 389 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"> 390 <span class="hidden md:block">Search</span> 391 <div class="hidden md:flex items-center gap-0.5"> 392 <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> 393 <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd> 394 <span>+</span> 395 <kbd>K</kbd> 396 </div> 397 <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> 398 </button> 399 400 <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
400k:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose"> 401 <div class="sm:max-w-md w-full"> 402 403 <div class="sm:max-w-md mx-auto w-full"> 404 <div class="relative" 405 data-controller="autocomplete" 406 data-autocomplete-delay-value="50" 407 data-autocomplete-submit-on-select-value="false" 408 data-autocomplete-highlight-matches-value="false" 409 data-autocomplete-suggestion-class-value="border-l-3 border-transparent" 410 data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected" 411 data-autocomplete-anchor-value="form" 412 data-autocomplete-max-suggestions-value="50" 413 data-autocomplete-render-mode-value="inline" 414 data-autocomplete-always-show-value="true" 415 data-autocomplete-auto-select-first-value="true" 416 data-autocomplete-preserve-search-on-select-value="true" 417 data-autocomplete-select-action-value="modal#close:prevent" 418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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\"
418 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"}]"> 419 420 <div class="relative"> 421 <input id="command_palette_search" 422 autofocus 423 required 424 data-autocomplete-target="input" 425 placeholder="Search documentation..." 426 class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4"> 427 428 <!-- Clear Button --> 429 <button type="button" 430 data-autocomplete-target="clearButton" 431 data-action="click->autocomplete#clearInput" 432 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
432k:focus-visible:outline-neutral-200"> 433 <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> 434 </button> 435 </div> 436 437 <div data-autocomplete-target="results" 438 class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto" 439 role="listbox" 440 tabindex="-1"> 441 </div> 442 </div> 443 </div> 444 445 <!-- Footer --> 446 <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"> 447 <div class="flex items-center gap-1"> 448 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd> 449 <span>to close,</span> 450 </div> 451 <div class="flex items-center gap-1"> 452 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd> 453 <span>to select,</span> 454 </div> 455 <div class="flex items-center gap-1"> 456 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 457 <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> 458 </kbd> 459 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 460 <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> 461 </kbd> 462 <span>to navigate.</span> 463 </div> 464 </div> 465 </div> 466 </dialog> 467</div> 468 469 </div> 470 </div> 471 <div class="flex items-center gap-2 md:gap-6"> 472 <div class="flex items-center gap-6"> 473 <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"> 474 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-neutral-600 dar
474k: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> 475 </button> 476 477 <div data-controller="modal"> 478 <button class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" data-action="click->modal#open:prevent"> 479 Newsletter 480 </button> 481 482 <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"> 483 <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rou
483nded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline"> 484 <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"> 485 <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> 486 <span class="sr-only">Close</span> 487 </button> 488 489 <div class="relative mt-8 mb-6"> 490 <div class="mx-auto"> 491 <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"> 492 <div data-controller="newsletter" 493 class="max-w-xs"> 494 <div data-newsletter-target="form"> 495 <form data-action="submit->newsletter#submit" 496 class="space-y-3"> 497 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 498 <input type="email" 499 data-newsletter-target="email" 500 placeholder="Enter your email..." 501 class="form-control" 502 autofocus 503 required> 504 <div class="flex justify-center"> 505 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 506 </div> 507 <button type="submit" 508 data-newsletter-target="submitButton" 509 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"> 510 Subscribe to the newsletter 511 </button> 512 </form> 513 <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]"> 514 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 515 </div> 516 </div> 517 518 <div data-newsletter-target="successMessage" 519 class="text-center py-4" 520 style="display: none;"> 521 <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"> 522 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 523 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 524 </svg> 525 </div> 526 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
527 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 528 </div> 529 </div> 530 </div> 531 </div> 532</div> 533 534 535 <div class="mt-4 flex justify-center"> 536 <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"> 537 <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> 538 Component roadmap 539 </a> 540 </div> 541 542 <div class="mt-4 flex justify-center"> 543 <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"> 544 <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> 545 Changelog 546 </a> 547 </div> 548 </div> 549 </dialog> 550</div> 551 552 553 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/installation">Installation</a> 554 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/themes">Themes</a> 555 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/cli">CLI</a> 556 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/mcp">MCP</a> 557 558 <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"> 559 <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"> 560 <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
5606,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> 561 Pro 562 </a> 563 </div> 564 565 <div class="hidden md:block border-r border-neutral-200 dark:border-neutral-700 h-6"></div> 566 567 <a class="hidden" aria-label="GitHub" href="https://github.com"> 568 <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> 569 </a> 570 <div class="flex items-center gap-2 max-md:hidden"> 571 <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> 572 <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> 573 </div> 574 </div> 575 <div class="flex items-center gap-2.5 md:hidden"> 576 <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"> 577 <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> 578 </button> 579 <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"> 580 <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"> 581 <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> 582 </button> 583 584 <dialog 585 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
585k:border-neutral-700/50" 586 data-controller="menu" 587 data-dropdown-popover-target="menu" 588 data-action="click@document->dropdown-popover#closeOnClickOutside 589 keydown.up->menu#prev keydown.down->menu#next 590 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 591 > 592 <div class="flex flex-col p-1" role="menu"> 593 <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"> 594 <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> 595 Home 596 </a> 597 <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"> 598 <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> 599 Installation 600 </a> 601 <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"> 602 <span class="text-xs text-neutral-500 dark:text-neutral-400"> 603 <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> 604 </span> 605 Themes 606</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
606k:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 607 <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> 608 CLI 609 </a> 610 <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"> 611 <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> 612 MCP 613 </a> 614 <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"> 615 <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> 616 Author's note 617 </a> 618 <div class="border-t my-1 border-neutral-100 dark:border-neutral-700"></div> 619 <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">
620 <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> 621 Login 622</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"> 623 <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> 624 Signup 625</a> </div> 626 </dialog> 627 </div> 628 </div> 629 </div> 630 </div> 631 </div> 632 </div> 633 </nav> 634</header> 635 636 637<!-- smooth scroll nav links -->
638<script type="text/javascript"> 639 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 640 anchor.addEventListener('click', function (e) { 641 e.preventDefault(); 642 643 document.querySelector(this.getAttribute('href')).scrollIntoView({ 644 behavior: 'smooth' 645 }); 646 }); 647 }); 648</script>
648 649 650 <div class="fixed bottom-4 right-4 z-50" data-turbo-permanent id="theme-switcher"> 651 <div 652 data-controller="theme" 653 data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20" 654 data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5"> 655 <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"> 656 <button 657 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" 658 aria-label="System theme" 659 data-controller="tooltip" 660 data-tooltip-content="System" 661 data-tooltip-animation-value="fade origin" 662 data-tooltip-delay-value="500" 663 data-theme-target="option" 664 data-action="click->theme#choose keydown->theme#navigate" 665 data-theme-mode="system" 666 type="button" 667 role="radio" 668 aria-checked="true" 669 tabindex="0" 670 id="theme-option-system"> 671 <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> 672 </button> 673 <button 674 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" 675 aria-label="Light theme" 676 data-controller="tooltip" 677 data-tooltip-content="Light mode" 678 data-tooltip-animation-value="fade origin" 679 data-tooltip-delay-value="500" 680 data-theme-target="option" 681 data-action="click->theme#choose keydown->theme#navigate" 682 data-theme-mode="light" 683 type="button" 684 role="radio" 685 aria-checked="false" 686 tabindex="-1" 687 id="theme-option-light"> 688 <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> 689 </button> 690 <button 691 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" 692 aria-label="Dark theme" 693 data-controller="tooltip" 694 data-tooltip-content="Dark mode" 695 data-tooltip-animation-value="fade origin" 696 data-tooltip-delay-value="500" 697 data-theme-target="option" 698 data-action="click->theme#choose keydown->theme#navigate" 699 data-theme-mode="dark" 700 type="button" 701 role="radio" 702 aria-checked="false" 703 tabindex="-1" 704 id="theme-option-dark"> 705 <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.
705104,.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> 706 </button> 707 </div> 708 </div> 709</div> 710 711 712 <main class="mx-auto "> 713 714 <div data-controller="toast" 715 id="toast_triggers" 716 data-toast-position-value="top-center" 717 data-toast-layout-value="default"> 718 <ul 719 data-toast-target="container" 720 data-action="mouseenter->toast#handleMouseEnter mouseleave->toast#handleMouseLeave" 721 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" 722 style="transition: height 300ms ease;" 723 > 724 </ul> 725</div> 726 727 728 729 730 731 732 733<div class="relative sm:py-6 mt-14"> 734 <div class="mx-auto"> 735 <div class="text-center max-w-xl mx-auto px-4"> 736 <h1 class="text-4xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 font-quincy"> 737 <span class="block text-neutral-900 dark:text-neutral-50">Blog</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 Ruby on Rails, UI/UX tips, and product design notes. 741 </p> 742 </div> 743 </div> 744</div> 745 746 747<div class="font-inter antialiased text-neutral-800 tracking-tight my-16 dark:text-neutral-200"> 748 <main class="grow"> 749 <section> 750 751 <div class="mx-auto max-w-7xl lg:px-8"> 752 <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3"> 753 754 </div> 755 </div> 756 757 </section> 758 </main> 759 760</div> 761 762 </main> 763 764<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> 765 766<footer class="mt-24 bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700"> 767 <div class="max-w-5xl mx-auto w-full pb-8 pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8"> 768 769 <!-- Grid --> 770 <div class="flex flex-col justify-between md:flex-row gap-5 mb-14"> 771 772 <div> 773 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Popular Components</h4> 774 775 <ul class="grid space-y-2"> 776 <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> 777 <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> 778 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/sidebar">Sidebar</a></li> 779 <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> 780 </ul> 781 </div> 782 <!-- End Col --> 783 784 <div> 785 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Company</h4> 786 787 <ul class="grid space-y-2"> 788 <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> 789 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focu
789s:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/themes">Themes</a></li> 790 <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> 791 <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> 792 <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> 793 <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> 794 </ul> 795 </div> 796 <!-- End Col --> 797 798 <div> 799 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Pricing</h4> 800 801 <ul class="grid space-y-2"> 802 <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> 803 <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> 804 </ul> 805 </div> 806 <!-- End Col --> 807 808 <div> 809 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Legal</h4> 810 811 <ul class="grid space-y-2"> 812 <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> 813 <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> 814 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/license">License</a></li> 815 </ul> 816 </div> 817 <!-- End Col --> 818 </div> 819 820 <div class="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800"> 821 <div class="flex flex-col md:flex-row-reverse md:justify-between md:items-center gap-6 items-center text-center md:text-left"> 822 823 <nav class="flex flex-col sm:flex-row items-center gap-3"> 824 <div class="flex items-center"> 825 <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"> 826 <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"> 827 <img class="rounded-full mx-auto size-8" alt="Sandu" src="/assets/founder-avatar-da341a93ca736fdd7217be943b75af4bdf1bf0c14ee149b5f11324eb98a5c6dc.webp" /> 828 </div> 829 Built by 830 <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"> 831 Sandu 832 </a> 833 in Paris ð¥ 834 </div> 835 </div> 836 837 <div class="flex items-center gap-3"> 838 <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)">
839 <span class="sr-only">Follow Sandu on X (formerly Twitter)</span> 840 <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"> 841 <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"> 842 </svg> 843 </a> 844 <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"> 845 <span class="sr-only">Follow Sandu on YouTube</span> 846 <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> 847 </a> 848 <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"> 849 <span class="sr-only">Send me an email</span> 850 <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> 851 </a> 852 <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"> 853 <span class="sr-only">RSS Feed</span> 854 <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> 855 </a> 856 </div> 857 </nav> 858
859 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 860 © 2026 Rails Blocks 861 </div> 862 </div> 863 </div> 864 <!-- End Grid --> 865 </div> 866</footer> 867 868
868<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>
868 869</body> 870</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.