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 | Installation instructions for Ruby on Rails components</title> 5<meta name="description" content="How to install Rails Blocks for your Ruby on Rails application. Simply copy and paste the code into your application and you're good to go." /> 6<meta name="keywords" content="rails, ui, components, free, stimulus, controllers, ruby on rails, rails blocks, rails blocks ui, rails blocks components, rails blocks ui components, rails blocks free, rails blocks pro, rails blocks pro ui, rails blocks pro ui components, rails blocks pro ui components free, installation, install, how to install, how to install rails blocks, how to install rails blocks ui, how to install rails blocks components, how to install rails blocks ui components, how to install rails blocks free, how to install rails blocks pro, how to install rails blocks pro ui, how to install rails blocks pro ui components, how to install rails blocks pro ui components free" /> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <meta charset="utf-8"> 9 10 <!-- Theme initialization script to prevent FOUC --> 11
11<script> 12 (function() { 13 function selectedPalette() { 14 const storedMode = localStorage.getItem("theme"); 15 16 if (storedMode === "light" || storedMode === "dark") return storedMode; 17 18 return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; 19 } 20 21 function paintTheme(root) { 22 const palette = selectedPalette(); 23 const dark = palette === "dark"; 24 25 root.classList.toggle("dark", dark); 26 root.classList.toggle("sl-theme-dark", dark); 27 root.style.colorScheme = palette; 28 root.dataset.theme = palette; 29 } 30 31 paintTheme(document.documentElement); 32 33 document.addEventListener("turbo:before-render", function(event) { 34 paintTheme(event.detail.newBody.ownerDocument.documentElement); 35 }); 36 37 document.addEventListener("turbo:render", function() { 38 paintTheme(document.documentElement); 39 }); 40 41 document.addEventListener("turbo:load", function() { 42 paintTheme(document.documentElement); 43 }); 44 })(); 45 </script>
45 46 47 <!-- SEO Meta Tags --> 48 <meta name="author" content="Rails Blocks"> 49 <meta name="robots" content="index, follow"> 50 51 <!-- Open Graph / Facebook --> 52 <meta property="og:type" content="website"> 53 <meta property="og:url" content="https://railsblocks.com/docs/installation"> 54 <meta property="og:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus"> 55 <meta property="og:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI & MCP server."> 56 <meta property="og:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png"> 57 58 <!-- Twitter --> 59 <meta property="twitter:card" content="summary_large_image"> 60 <meta property="twitter:url" content="https://railsblocks.com/docs/installation"> 61 <meta property="twitter:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus"> 62 <meta property="twitter:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI & MCP server."> 63 <meta property="twitter:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png"> 64 65 <!-- Canonical URL --> 66 <link rel="canonical" href="https://railsblocks.com/docs/installation"> 67 68 <!-- RSS Feed --> 69 <link rel="alternate" type="application/rss+xml" title="Rails Blocks - Component Updates" href="https://railsblocks.com/feeds/documentation.xml"> 70 71 <meta name="csrf-param" content="authenticity_token" /> 72<meta name="csrf-token" content="2-zvxsarrcbOjIKhULjPauDRcrkCSYY_7XJ6-gibonuVzlQKBVg3uKS0mzKiXuGv81WzVa-3x8YJZ2qH6PdlAA" /> 73 74 75 <!-- Inter font stylesheet --> 76 <link rel="preconnect" href="https://rsms.me" crossorigin> 77 <link rel="stylesheet" href="https://rsms.me/inter/inter.css" crossorigin="anonymous"> 78 79 <!-- Preload Quincy font to prevent FOUT --> 80 <link rel="preload" href="/QuincyCF-Bold.woff" as="font" type="font/woff" crossorigin> 81 82 <!-- Geist Mono for code blocks (shadcn style) --> 83 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.min.css"> 84 85 <!-- Air Datepicker CSS --> 86 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css"> 87 88 <!-- PhotoSwipe CSS --> 89 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css"> 90 91 <!-- --> 92 <link rel="stylesheet" href="/assets/application-4e2eb78ae7afb82739067fcdf95589ec6529fc31571e977ee8fc82478ac9c706.css" /> 93
93<script type="importmap" data-turbo-track="reload">{ 94 "imports": { 95 "application": "/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js", 96 "@hotwired/stimulus": "/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js", 97 "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js", 98 "@hotwired/turbo-rails": "/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js", 99 "@rails/actioncable": "/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js", 100 "chartkick": "/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js", 101 "Chart.bundle": "/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js", 102 "@rails/activestorage": "/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js", 103 "@activeadmin/activeadmin": "https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js", 104 "@rails/ujs": "https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js", 105 "motion": "https://cdn.jsdelivr.net/npm/motion@latest/+esm", 106 "tom-select": "https://cdn.jsdelivr.net/npm/[email protected]/+esm", 107 "tailwindcss-stimulus-components": "https://cdn.jsdelivr.net/npm/[email protected]/+esm", 108 "@rails/request.js": "https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm", 109 "number-flow": "https://esm.sh/number-flow", 110 "number-flow/group": "https://esm.sh/number-flow/group", 111 "air-datepicker": "https://esm.sh/[email protected]", 112 "air-datepicker/locale/en": "https://esm.sh/[email protected]/locale/en", 113 "embla-carousel": "https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm", 114 "embla-carousel-wheel-gestures": "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm", 115 "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm", 116 "emoji-mart": "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js", 117 "@emoji-mart/data": "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm", 118 "posthog-js": "https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm", 119 "photoswipe": "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js", 120 "prism": "/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js", 121 "lexxy_extensions": "/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js", 122 "lucide_callout_icons": "/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js", 123 "controllers/accordion_controller": "/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js", 124 "controllers/activity_stats_controller": "/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js", 125 "controllers/analytics_controller": "/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js", 126 "controllers/animated_number_controller": "/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js", 127 "controllers/animated_number_controller_basic": "/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js", 128 "controllers/application": "/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js", 129 "controllers/autocomplete_controller": "/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js", 130 "controllers/autocomplete_fuzzy_search_controller": "/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js", 131 "controllers/autocomplete_navigation_controller": "/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js", 132 "controllers/autocomplete_recent_searches_controller": "/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js", 133 "controllers/autogrow_controller": "/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js", 134 "controllers/autosubmit_controller": "/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js",
135 "controllers/banner_controller": "/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js", 136 "controllers/black_hole_background_controller": "/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js", 137 "controllers/carousel_controller": "/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js", 138 "controllers/checkbox_select_all_controller": "/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js", 139 "controllers/clickable_animated_number_controller": "/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js", 140 "controllers/clipboard_controller": "/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js", 141 "controllers/code_filter_controller": "/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js", 142 "controllers/collapsible_controller": "/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js", 143 "controllers/component_search_controller": "/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js", 144 "controllers/conditional_field_controller": "/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js", 145 "controllers/confirmation_controller": "/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js", 146 "controllers/context_menu_controller": "/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js", 147 "controllers/datatable_controller": "/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js", 148 "controllers/datatable_preview_controller": "/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js", 149 "controllers/date_picker_controller": "/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js", 150 "controllers/dock_controller": "/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js", 151 "controllers/drawer_controller": "/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js", 152 "controllers/dropdown_popover_controller": "/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js", 153 "controllers/emoji_picker_controller": "/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js", 154 "controllers/feedback_controller": "/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js", 155 "controllers/header_controller": "/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js", 156 "controllers/hello_controller": "/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js", 157 "controllers/highlight_controller": "/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js", 158 "controllers/hotkey_controller": "/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js", 159 "controllers/increment_controller": "/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js", 160 "controllers": "/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js", 161 "controllers/infinite_scroll_controller": "/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js", 162 "controllers/inline_edit_controller": "/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js", 163 "controllers/lightbox_controller": "/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js", 164 "controllers/marquee_controller": "/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js", 165 "controllers/menu_controller": "/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js", 166 "controllers/modal_controller": "/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js", 167 "controllers/navbar_controller": "/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js", 168 "controllers/nested_form_controller": "/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js", 169 "controllers/newsletter_controller": "/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js", 170 "controllers/onboarding_checklist_controller": "/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js", 171 "controllers/os_detect_controller": "/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js", 172 "controllers/page_view_controller": "/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
1725e36d.js", 173 "controllers/password_controller": "/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js", 174 "controllers/popover_controller": "/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js", 175 "controllers/pricing_tabs_controller": "/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js", 176 "controllers/rainbow_button_controller": "/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js", 177 "controllers/read_more_controller": "/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js", 178 "controllers/scroll_area_controller": "/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js", 179 "controllers/scroll_preservation_controller": "/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js", 180 "controllers/searchable_dropdown_controller": "/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js", 181 "controllers/select_controller": "/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js", 182 "controllers/setup_code_filter_controller": "/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js", 183 "controllers/shoelace_color_picker_controller": "/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js", 184 "controllers/sidebar_controller": "/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js", 185 "controllers/slideover_controller": "/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js", 186 "controllers/slider_number_flow_controller": "/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js", 187 "controllers/snippet_controller": "/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js", 188 "controllers/stepper_controller": "/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js", 189 "controllers/table_of_contents_controller": "/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js", 190 "controllers/tabs_controller": "/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js", 191 "controllers/text_cycler_controller": "/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js", 192 "controllers/theme_builder_controller": "/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js", 193 "controllers/theme_controller": "/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js", 194 "controllers/toast_controller": "/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js", 195 "controllers/tooltip_controller": "/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js", 196 "controllers/tree_view_controller": "/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js", 197 "controllers/turnstile_controller": "/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js", 198 "controllers/two_factor_controller": "/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js", 199 "channels/consumer": "/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js", 200 "channels": "/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js" 201 } 202}</script>
202 203<link rel="modulepreload" href="/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js"> 204<link rel="modulepreload" href="/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js"> 205<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js"> 206<link rel="modulepreload" href="/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js"> 207<link rel="modulepreload" href="/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js"> 208<link rel="modulepreload" href="/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js"> 209<link rel="modulepreload" href="/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js"> 210<link rel="modulepreload" href="/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js"> 211<link rel="modulepreload" href="https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js"> 212<link rel="modulepreload" href="https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js"> 213<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/motion@latest/+esm"> 214<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm"> 215<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm"> 216<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm"> 217<link rel="modulepreload" href="https://esm.sh/number-flow"> 218<link rel="modulepreload" href="https://esm.sh/number-flow/group"> 219<link rel="modulepreload" href="https://esm.sh/[email protected]"> 220<link rel="modulepreload" href="https://esm.sh/[email protected]/locale/en"> 221<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm"> 222<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"> 223<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm"> 224<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"> 225<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm"> 226<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm"> 227<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js"> 228<link rel="modulepreload" href="/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js"> 229<link rel="modulepreload" href="/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js"> 230<link rel="modulepreload" href="/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js"> 231<link rel="modulepreload" href="/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js"> 232<link rel="modulepreload" href="/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js"> 233<link rel="modulepreload" href="/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js"> 234<link rel="modulepreload" href="/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js"> 235<link rel="modulepreload" href="/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js"> 236<link rel="modulepreload" href="/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js"> 237<link rel="modulepreload" href="/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js"> 238<link rel="modulepreload" href="/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js"> 239<link rel="modulepreload" href="/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js"> 240<link rel="modulepreload" href="/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js"> 241<link rel="modulepreload" href="/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js"> 242<link rel="modulepreload" href="/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js">
243<link rel="modulepreload" href="/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js"> 244<link rel="modulepreload" href="/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js"> 245<link rel="modulepreload" href="/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js"> 246<link rel="modulepreload" href="/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js"> 247<link rel="modulepreload" href="/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js"> 248<link rel="modulepreload" href="/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js"> 249<link rel="modulepreload" href="/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js"> 250<link rel="modulepreload" href="/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js"> 251<link rel="modulepreload" href="/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js"> 252<link rel="modulepreload" href="/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js"> 253<link rel="modulepreload" href="/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js"> 254<link rel="modulepreload" href="/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js"> 255<link rel="modulepreload" href="/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js"> 256<link rel="modulepreload" href="/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js"> 257<link rel="modulepreload" href="/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js"> 258<link rel="modulepreload" href="/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js"> 259<link rel="modulepreload" href="/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js"> 260<link rel="modulepreload" href="/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js"> 261<link rel="modulepreload" href="/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js"> 262<link rel="modulepreload" href="/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js"> 263<link rel="modulepreload" href="/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js"> 264<link rel="modulepreload" href="/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js"> 265<link rel="modulepreload" href="/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js"> 266<link rel="modulepreload" href="/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js"> 267<link rel="modulepreload" href="/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js"> 268<link rel="modulepreload" href="/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js"> 269<link rel="modulepreload" href="/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js"> 270<link rel="modulepreload" href="/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js"> 271<link rel="modulepreload" href="/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js"> 272<link rel="modulepreload" href="/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js"> 273<link rel="modulepreload" href="/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js"> 274<link rel="modulepreload" href="/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js"> 275<link rel="modulepreload" href="/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js"> 276<link rel="modulepreload" href="/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js"> 277<link rel="modulepreload" href="/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js"> 278<link rel="modulepreload" href="/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js"> 279<link rel="modulepreload" href="/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js"> 280<link rel="modulepreload" href="/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
2805e36d.js"> 281<link rel="modulepreload" href="/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js"> 282<link rel="modulepreload" href="/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js"> 283<link rel="modulepreload" href="/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js"> 284<link rel="modulepreload" href="/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js"> 285<link rel="modulepreload" href="/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js"> 286<link rel="modulepreload" href="/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js"> 287<link rel="modulepreload" href="/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js"> 288<link rel="modulepreload" href="/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js"> 289<link rel="modulepreload" href="/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js"> 290<link rel="modulepreload" href="/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js"> 291<link rel="modulepreload" href="/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js"> 292<link rel="modulepreload" href="/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js"> 293<link rel="modulepreload" href="/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js"> 294<link rel="modulepreload" href="/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js"> 295<link rel="modulepreload" href="/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js"> 296<link rel="modulepreload" href="/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js"> 297<link rel="modulepreload" href="/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js"> 298<link rel="modulepreload" href="/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js"> 299<link rel="modulepreload" href="/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js"> 300<link rel="modulepreload" href="/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js"> 301<link rel="modulepreload" href="/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js"> 302<link rel="modulepreload" href="/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js"> 303<link rel="modulepreload" href="/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js"> 304<link rel="modulepreload" href="/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js"> 305<link rel="modulepreload" href="/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js"> 306<link rel="modulepreload" href="/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js"> 307<link rel="modulepreload" href="/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js"> 308<link rel="modulepreload" href="/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js">
309<script type="module">import "application"</script>
309 310 311 <!-- Prism.js Theme loaded via application.css (shadcn style) --> 312 313
313<script type="module">import "prism"</script>
313 314 315 <!-- app styles --> 316 317 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet"> 318 319 <link rel="stylesheet" href="/assets/tailwind-8dd8a1967e9bfb39e33fd6b97de1fb9540804eb5e014bd755b551ab3b78c8f67.css" data-turbo-track="reload" /> 320 321 <!-- Shoelace --> 322
322<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script>
322 323 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"> 324 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"> 325 326 327<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 328<link rel="icon" type="image/svg+xml" href="/favicon.svg"> 329<link rel="shortcut icon" href="/favicon.ico"> 330<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 331<meta name="apple-mobile-web-app-title" content="Rails Blocks"> 332<link rel="manifest" href="/site.webmanifest"> 333 334 <!-- Fathom - beautiful, simple website analytics --> 335
335<script src="https://cdn.usefathom.com/script.js" data-site="RGMCTRCC" defer></script>
335 336
336<script> 337 // Defines the Fathom queue if it's not already defined 338 window.fathom = window.fathom || {}; 339 window.fathom.trackEvent = window.fathom.trackEvent || function() { 340 (window.fathom.q = window.fathom.q || []).push(arguments); 341 }; 342 </script>
342 343 <!-- / Fathom --> 344 345
345<script> 346 !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Ie Ts Ms Ee Es Rs capture Ge calculateEventProperties Os register register_once register_for_session unregister unregister_for_session js getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ds Fs createPersonProfile Ls Ps opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Cs debug I As getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); 347 posthog.init('phc_1peGskgJndUl9aKkfvJan2QftpxzdEl4tplxzntLjz3', { 348 api_host: 'https://f.railsblocks.com', 349 defaults: '2026-01-30', 350 person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well 351 }) 352 </script>
352 353 354 355 <!-- Cloudflare Turnstile --> 356
356<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
356 357 358 <!-- JSON-LD Structured Data --> 359
359<script type="application/ld+json"> 360 { 361 "@context": "https://schema.org", 362 "@type": "WebSite", 363 "name": "Rails Blocks", 364 "url": "https://railsblocks.com/", 365 "description": "Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI & MCP server." 366 } 367 </script>
367 368 369 <meta name="sentry-trace" content="6c4f43e4c43d4ab6bf3de4e62bf4738a-50b21ad057224494-1"> 370<meta name="baggage" content="sentry-trace_id=6c4f43e4c43d4ab6bf3de4e62bf4738a,sentry-sample_rate=1.0,sentry-sample_rand=0.728921,sentry-sampled=true,sentry-environment=production,sentry-release=c1339cab003834fc5d3ba9a59528fe484c754c35,sentry-public_key=75ec06e0a9c5a635bb41b06c332c1f78"> 371 </head> 372 373 <body> 374 375<header class="sticky z-50 top-0 h-14 w-full gap-3 mx-auto" data-controller="header"> 376 <nav class="flex items-center justify-center flex-wrap w-full"> 377 <div class="w-full border-b border-neutral-950/5 dark:border-white/10"> 378 <div class="bg-white dark:bg-neutral-950"> 379 <div class="flex h-14 items-center justify-between gap-2 md:gap-8 px-4 sm:px-6"> 380 <div class="flex items-center gap-4"> 381 <div class="w-full flex items-center shrink-0 justify-center gap-4"> 382 <a class="flex items-center hover:opacity-80 gap-1.5" href="/"> 383 <img class="size-6" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" /> 384 <span class="font-semibold shrink-0 text-lg md:text-xl text-neutral-900 dark:text-neutral-50">Rails Blocks</span> 385</a> <div data-controller="modal os-detect" class="hidden md:block"> 386 <button data-controller="hotkey" 387 data-action="click->modal#open:prevent keydown.meta+k@document->hotkey#click keydown.ctrl+k@document->hotkey#click" 388 class="flex items-center justify-center gap-1.5 rounded-lg bg-neutral-100/75 dark:bg-neutral-800 p-2.5 md:px-3 md:py-2 text-xs font-medium whitespace-nowrap text-neutral-500 hover:text-neutral-900 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200 border border-black/10 dark:border-white/10"> 389 <span class="hidden md:block">Search</span> 390 <div class="hidden md:flex items-center gap-0.5"> 391 <kbd data-os-detect-target="mac" class="hidden"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[0.6rem]" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.25,10.5h-1.25v-3h1.25c1.517,0,2.75-1.233,2.75-2.75s-1.233-2.75-2.75-2.75-2.75,1.233-2.75,2.75v1.25h-3v-1.25c0-1.517-1.233-2.75-2.75-2.75s-2.75,1.233-2.75,2.75,1.233,2.75,2.75,2.75h1.25v3h-1.25c-1.517,0-2.75,1.233-2.75,2.75s1.233,2.75,2.75,2.75,2.75-1.233,2.75-2.75v-1.25h3v1.25c0,1.517,1.233,2.75,2.75,2.75s2.75-1.233,2.75-2.75-1.233-2.75-2.75-2.75Zm-1.25-5.75c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25-.561,1.25-1.25,1.25h-1.25v-1.25Zm-8.5,0c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25v1.25h-1.25c-.689,0-1.25-.561-1.25-1.25Zm2.5,8.5c0,.689-.561,1.25-1.25,1.25s-1.25-.561-1.25-1.25,.561-1.25,1.25-1.25h1.25v1.25Zm1.5-5.75h3v3h-3v-3Zm5.75,7c-.689,0-1.25-.561-1.25-1.25v-1.25h1.25c.689,0,1.25,.561,1.25,1.25s-.561,1.25-1.25,1.25Z"></path></g></svg></kbd> 392 <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd> 393 <span>+</span> 394 <kbd>K</kbd> 395 </div> 396 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 md:hidden" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75 15.75L11.6386 11.6386"></path> <path d="M7.75 13.25C10.7875 13.25 13.25 10.7875 13.25 7.75C13.25 4.7125 10.7875 2.25 7.75 2.25C4.7125 2.25 2.25 4.7125 2.25 7.75C2.25 10.7875 4.7125 13.25 7.75 13.25Z"></path></g></svg> 397 </button> 398 399 <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dar
399k:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose"> 400 <div class="sm:max-w-md w-full"> 401 402 <div class="sm:max-w-md mx-auto w-full"> 403 <div class="relative" 404 data-controller="autocomplete" 405 data-autocomplete-delay-value="50" 406 data-autocomplete-submit-on-select-value="false" 407 data-autocomplete-highlight-matches-value="false" 408 data-autocomplete-suggestion-class-value="border-l-3 border-transparent" 409 data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected" 410 data-autocomplete-anchor-value="form" 411 data-autocomplete-max-suggestions-value="50" 412 data-autocomplete-render-mode-value="inline" 413 data-autocomplete-always-show-value="true" 414 data-autocomplete-auto-select-first-value="true" 415 data-autocomplete-preserve-search-on-select-value="true" 416 data-autocomplete-select-action-value="modal#close:prevent" 417 data-autocomplete-local-data-value="[{"title":"Installation","url":"/docs/installation","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"View Components","url":"/docs/view-components","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Shared Partials","url":"/docs/shared-partials","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"CLI","url":"/docs/cli","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"MCP","url":"/docs/mcp","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Author's Note","url":"/docs/authors-note","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4 shrink-0\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpath d=\"m9,15.051c.17,0,.339-.045.494-.134.643-.371,1.732-.847,3.141-.845.899.001,1.667.197,2.27.435.648.255,1.344-.24,1.344-.937V4.487c0-.354-.181-.68-.486-.86-.637-.376-1.726-.863-3.14-.863-1.89,0-3.198.872-3.624,1.182\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\"\u003e\u003c/path\u003e\u003cpath d=\"m9,15.051c-.17,0-.339-.045-.494-.134-.643-.371-1.732-.847-3.141-.845-.899.001-1.667.197-2.27.435-.648.255-1.344-.237-1.344-.933V4.484c0-.354.181-.676.486-.856.637-.376,1.726-.863,3.14-.863,1.89,0,3.198.872,3.624,1.182h0v11.104h-.001Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Accordion","url":"/docs/accordion","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Alert","url":"/docs/alert","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Animated Number","url":"/docs/animated-number","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Autocomplete Search","url":"/docs/autocomplete","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Autogrow","url":"/docs/autogrow","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Avatar","url":"/docs/avatar","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Badge","url":"/docs/badge","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Banner","url":"/docs/banner","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Breadcrumb","url":"/docs/breadcrumb","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Buttons","url":"/docs/buttons","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Card","url":"/docs/card","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Carousel","url":"/docs/carousel","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Checkbox","url":"/docs/checkbox","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Checkbox Select All","url":"/docs/checkbox-select-all","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Clipboard","url":"/docs/clipboard","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Collapsible","url":"/docs/collapsible","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Color Picker","url":"/docs/color-picker","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Combobox","url":"/docs/combobox","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Command Palette","url":"/docs/command-palette","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Confirmation","url":"/docs/confirmation","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Context Menu","url":"/docs/context-menu","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Datatable","url":"/docs/datatable","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Date Picker","url":"/docs/date-picker","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Dark Mode Switcher","url":"/docs/dark-mode-switcher","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Dock","url":"/docs/dock","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Drawer","url":"/docs/drawer","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Dropdown","url":"/docs/dropdown","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Emoji Picker","url":"/docs/emoji-picker","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Feedback","url":"/docs/feedback","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Forms","url":"/docs/forms","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Infinite Scroll","url":"/docs/infinite-scroll","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"KBD \u0026 Hotkeys","url":"/docs/kbd","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Lightbox","url":"/docs/lightbox","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Loading Indicator","url":"/docs/loading-indicator","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Marquee","url":"/docs/marquee","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Modal","url":"/docs/modal","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Onboarding Checklist","url":"/docs/onboarding-checklist","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Navbar","url":"/docs/navbar","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Password","url":"/docs/password","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Pagination","url":"/docs/pagination","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Popover","url":"/docs/popover","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Radio","url":"/docs/radio","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Scroll Area","url":"/docs/scroll-area","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Select","url":"/docs/select","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Sidebar","url":"/docs/sidebar","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Skeleton","url":"/docs/skeleton","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Slideover","url":"/docs/slideover","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Stepper","url":"/docs/stepper","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Switch","url":"/docs/switch","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Tabs","url":"/docs/tabs","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Table","url":"/docs/table","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Testimonial","url":"/docs/testimonial","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Toast","url":"/docs/toast","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Tooltip","url":"/docs/tooltip","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Tree View","url":"/docs/tree-view","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\"
417 viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"},{"title":"Two Factor","url":"/docs/two-factor","customIcon":"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-4\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\u003e\u003cg fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" stroke=\"currentColor\"\u003e\u003cpolyline points=\"14.983 5.53 9 9 3.017 5.53\"\u003e\u003c/polyline\u003e\u003cline x1=\"9\" y1=\"15.938\" x2=\"9\" y2=\"9\"\u003e\u003c/line\u003e\u003cpath d=\"M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z\"\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e"}]"> 418 419 <div class="relative"> 420 <input id="command_palette_search" 421 autofocus 422 required 423 data-autocomplete-target="input" 424 placeholder="Search documentation..." 425 class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4"> 426 427 <!-- Clear Button --> 428 <button type="button" 429 data-autocomplete-target="clearButton" 430 data-action="click->autocomplete#clearInput" 431 class="hidden absolute right-2 top-1/2 -translate-y-1/2 items-center justify-center size-8 mr-1 rounded-full hover:bg-neutral-100 transition-colors text-neutral-400 hover:text-neutral-500 dark:hover:bg-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
431k:focus-visible:outline-neutral-200"> 432 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg> 433 </button> 434 </div> 435 436 <div data-autocomplete-target="results" 437 class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto" 438 role="listbox" 439 tabindex="-1"> 440 </div> 441 </div> 442 </div> 443 444 <!-- Footer --> 445 <div class="hidden sm:flex flex-wrap gap-1 items-center bg-neutral-50 px-4 py-3 text-xs text-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-t border-black/10 dark:border-white/10"> 446 <div class="flex items-center gap-1"> 447 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd> 448 <span>to close,</span> 449 </div> 450 <div class="flex items-center gap-1"> 451 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd> 452 <span>to select,</span> 453 </div> 454 <div class="flex items-center gap-1"> 455 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 456 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.391,8.448L9.398,1.867c-.2-.264-.597-.264-.797,0L3.609,8.448c-.25,.329-.015,.802,.398,.802h2.743v6c0,.552,.448,1,1,1h2.5c.552,0,1-.448,1-1v-6h2.743c.413,0,.648-.473,.398-.802Z"></path></g></svg> 457 </kbd> 458 <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded"> 459 <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.609,9.552l4.993,6.581c.2,.264,.597,.264,.797,0l4.993-6.581c.25-.329,.015-.802-.398-.802h-2.743V2.75c0-.552-.448-1-1-1h-2.5c-.552,0-1,.448-1,1v6h-2.743c-.413,0-.648,.473-.398,.802Z"></path></g></svg> 460 </kbd> 461 <span>to navigate.</span> 462 </div> 463 </div> 464 </div> 465 </dialog> 466</div> 467 468 </div> 469 </div> 470 <div class="flex items-center gap-2 md:gap-6"> 471 <div class="flex items-center gap-6"> 472 <button type="button" class="hidden flex items-center gap-1 rounded-full bg-neutral-950/2 px-2 py-1 inset-ring inset-ring-neutral-950/8 dark:bg-white/5 dark:inset-ring-white/2"> 473 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-neutral-600 dar
473k:fill-neutral-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="[.os-macos_&]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">âK</kbd><kbd class="not-[.os-macos_&]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">Ctrl K</kbd> 474 </button> 475 476 <div data-controller="modal"> 477 <button class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" data-action="click->modal#open:prevent"> 478 Newsletter 479 </button> 480 481 <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full lg:rounded-2xl z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-800 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose"> 482 <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rou
482nded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline"> 483 <button type="button" data-action="modal#close:prevent" class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none"> 484 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg> 485 <span class="sr-only">Close</span> 486 </button> 487 488 <div class="relative mt-8 mb-6"> 489 <div class="mx-auto"> 490 <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-900"> 491 <div data-controller="newsletter" 492 class="max-w-xs"> 493 <div data-newsletter-target="form"> 494 <form data-action="submit->newsletter#submit" 495 class="space-y-3"> 496 <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2> 497 <input type="email" 498 data-newsletter-target="email" 499 placeholder="Enter your email..." 500 class="form-control" 501 autofocus 502 required> 503 <div class="flex justify-center"> 504 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 505 </div> 506 <button type="submit" 507 data-newsletter-target="submitButton" 508 class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"> 509 Subscribe to the newsletter 510 </button> 511 </form> 512 <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]"> 513 <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" /> 514 </div> 515 </div> 516 517 <div data-newsletter-target="successMessage" 518 class="text-center py-4" 519 style="display: none;"> 520 <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50"> 521 <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 522 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 523 </svg> 524 </div> 525 <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
526 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 527 </div> 528 </div> 529 </div> 530 </div> 531</div> 532 533 534 <div class="mt-4 flex justify-center"> 535 <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 536 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.792" x2="6.25" y2="13.292"></line><line x1="11.75" y1="4.708" x2="11.75" y2="15.208"></line><path d="M2.533,3.576l3.432-.763c.186-.041,.38-.029,.559,.036l4.952,1.801c.179,.065,.373,.078,.559,.036l2.998-.666c.625-.139,1.217,.336,1.217,.976V13.448c0,.469-.326,.875-.783,.976l-3.432,.763c-.186,.041-.38,.029-.559-.036l-4.952-1.801c-.179-.065-.373-.078-.559-.036l-2.998,.666c-.625,.139-1.217-.336-1.217-.976V4.552c0-.469,.326-.875,.783-.976Z"></path></g></svg> 537 Component roadmap 538 </a> 539 </div> 540 541 <div class="mt-4 flex justify-center"> 542 <a href="https://railsblocks.com/changelog" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 543 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.75 1.75V7.25"></path> <path d="M3.75 16.25V10.75"></path> <path d="M14.25 2.75H8.75C8.198 2.75 7.75 3.2 7.75 3.75V6.25C7.75 6.8 8.198 7.25 8.75 7.25H14.25C14.802 7.25 15.25 6.8 15.25 6.25V3.75C15.25 3.2 14.802 2.75 14.25 2.75Z"></path> <path d="M3.75 10.75C4.716 10.75 5.5 9.97 5.5 9C5.5 8.03 4.716 7.25 3.75 7.25C2.784 7.25 2 8.03 2 9C2 9.97 2.784 10.75 3.75 10.75Z"></path> <path d="M14.25 10.75H8.75C8.198 10.75 7.75 11.2 7.75 11.75V14.25C7.75 14.8 8.198 15.25 8.75 15.25H14.25C14.802 15.25 15.25 14.8 15.25 14.25V11.75C15.25 11.2 14.802 10.75 14.25 10.75Z"></path></g></svg> 544 Changelog 545 </a> 546 </div> 547 </div> 548 </dialog> 549</div> 550 551 552 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/installation">Installation</a> 553 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/themes">Themes</a> 554 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/cli">CLI</a> 555 <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/mcp">MCP</a> 556 557 <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 558 <a href="/pro" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 559 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
5596,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 560 Pro 561 </a> 562 </div> 563 564 <div class="hidden md:block border-r border-neutral-200 dark:border-neutral-700 h-6"></div> 565 566 <a class="hidden" aria-label="GitHub" href="https://github.com"> 567 <svg viewBox="0 0 20 20" class="size-5 fill-black/40 dark:fill-neutral-400 hover:opacity-75"><path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z"></path></svg> 568 </a> 569 <div class="flex items-center gap-2 max-md:hidden"> 570 <a href="/login" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">Login</a> 571 <a href="/signup" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Signup</a> 572 </div> 573 </div> 574 <div class="flex items-center gap-2.5 md:hidden"> 575 <button type="button" aria-label="Search" class="hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"> 576 <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg> 577 </button> 578 <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full" data-dropdown-popover-menubar-value="true" data-dropdown-popover-portal-value="false" data-dropdown-popover-placement-value="bottom-end top-end"> 579 <button type="button" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" class="outline-hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" aria-label="Navigation"> 580 <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path></svg> 581 </button> 582 583 <dialog 584 class="outline-hidden absolute top-full z-10 mt-1 w-48 rounded-lg border border-neutral-200 bg-white text-neutral-900 shadow-md transition-opacity ease-out duration-150 opacity-0 dark:bg-neutral-800 dark:text-neutral-100 dar
584k:border-neutral-700/50" 585 data-controller="menu" 586 data-dropdown-popover-target="menu" 587 data-action="click@document->dropdown-popover#closeOnClickOutside 588 keydown.up->menu#prev keydown.down->menu#next 589 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 590 > 591 <div class="flex flex-col p-1" role="menu"> 592 <a href="/" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 593 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg></span> 594 Home 595 </a> 596 <a href="/docs/installation" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 597 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M11.5 7.25L9 9.75L6.5 7.25"></path> <path d="M6 2.75H3.75C2.6454 2.75 1.75 3.645 1.75 4.75V10.75C1.75 11.855 2.6454 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.855 16.25 10.75V4.75C16.25 3.645 15.3546 2.75 14.25 2.75H12"></path> <path d="M9 9.75V2.75"></path></g></svg></span> 598 Installation 599 </a> 600 <a class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" href="/themes"> 601 <span class="text-xs text-neutral-500 dark:text-neutral-400"> 602 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m8.3034,16.217c-3.7776-.3601-6.7098-3.619-6.5469-7.5271.157-3.7659,3.3501-6.8755,7.1188-6.9388,4.0612-.0683,7.3747,3.2034,7.3747,7.2489h0c0,1.5188-1.2312,2.75-2.75,2.75h-2.963c-1.0336,0-1.6928,1.1036-1.2027,2.0137l.2374.4409c.2597.4823.2062,1.0732-.1361,1.501h0c-.2736.342-.6962.553-1.1322.5115Z"></path><circle cx="9" cy="5" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="6.1716" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="11.8284" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="5" cy="9" r="1" fill="currentColor" stroke-width="0"></circle></g></svg> 603 </span> 604 Themes 605</a> <a href="/docs/cli" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dar
605k:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 606 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg></span> 607 CLI 608 </a> 609 <a href="/docs/mcp" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 610 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" fill="currentColor" fill-rule="evenodd" height="18" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em"><title>ModelContextProtocol</title> <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path> <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg></span> 611 MCP 612 </a> 613 <a href="/docs/authors-note" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem"> 614 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M10 9.54501L5.07001 14.475"></path> <path d="M1.86329 13.6331C1.06149 12.8389 0.825792 12.1376 0.776992 11.604C0.602992 9.68 2.75199 8.65301 2.73799 6.50601C2.72899 5.12901 1.83399 4.01499 1.10399 3.30399"></path> <path d="M15.241 8.05701L13.649 12.553C13.532 12.883 13.252 13.128 12.909 13.198L5.75203 14.679C5.22403 14.788 4.75603 14.321 4.86603 13.793L6.34703 6.63599C6.41803 6.29299 6.66303 6.013 6.99203 5.896L11.488 4.30399"></path> <path d="M11.496 2.29599L11.195 2.59698C10.804 2.98798 10.804 3.62099 11.195 4.01099L13.364 6.17999L15.533 8.349C15.924 8.74 16.557 8.74 16.947 8.349L17.248 8.048"></path> <path d="M10 10.295C10.4142 10.295 10.75 9.95901 10.75 9.54501C10.75 9.13101 10.4142 8.79501 10 8.79501C9.5858 8.79501 9.25 9.13101 9.25 9.54501C9.25 9.95901 9.5858 10.295 10 10.295Z" fill="currentColor"></path></g></svg></span> 615 Author's note 616 </a> 617 <div class="border-t my-1 border-neutral-100 dark:border-neutral-700"></div> 618 <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/login">
619 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9.75,2.75h3.5c1.105,0,2,.895,2,2V13.25c0,1.105-.895,2-2,2h-3.5"></path><polyline points="6.75 12.5 10.25 9 6.75 5.5"></polyline><line x1="10.25" y1="9" x2="2.75" y2="9"></line></g></svg></span> 620 Login 621</a> <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/signup"> 622 <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 7.2505C10.5188 7.2505 11.75 6.0195 11.75 4.5005C11.75 2.9815 10.5188 1.7505 9 1.7505C7.4812 1.7505 6.25 2.9815 6.25 4.5005C6.25 6.0195 7.4812 7.2505 9 7.2505Z"></path> <path d="M17.25 14.7505H12.25"></path> <path d="M14.75 12.2505V17.2505"></path> <path d="M12.2164 10.677C11.2752 10.102 10.1839 9.7505 8.99999 9.7505C6.44899 9.7505 4.26099 11.2805 3.29099 13.4705C2.92599 14.2955 3.37799 15.2444 4.23799 15.5154C5.46299 15.9014 7.08389 16.2495 8.99999 16.2495C9.22329 16.2495 9.43029 16.2319 9.64399 16.2214"></path></g></svg></span> 623 Signup 624</a> </div> 625 </dialog> 626 </div> 627 </div> 628 </div> 629 </div> 630 </div> 631 </div> 632 </nav> 633</header> 634 635 636<!-- smooth scroll nav links -->
637<script type="text/javascript"> 638 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 639 anchor.addEventListener('click', function (e) { 640 e.preventDefault(); 641 642 document.querySelector(this.getAttribute('href')).scrollIntoView({ 643 behavior: 'smooth' 644 }); 645 }); 646 }); 647</script>
647 648 649 <div class="fixed bottom-4 right-4 z-50" data-turbo-permanent id="theme-switcher"> 650 <div 651 data-controller="theme" 652 data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20" 653 data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5"> 654 <div class="opacity-0 transition-opacity duration-200 relative z-0 inline-grid p-0.5 grid-cols-3 rounded-full bg-white/80 backdrop-blur-md text-neutral-950 border border-black/10 dark:border-white/10 dark:bg-neutral-800/80 dark:text-white shadow-xs" data-theme-target="picker" role="radiogroup" aria-label="Theme selection"> 655 <button 656 class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 657 aria-label="System theme" 658 data-controller="tooltip" 659 data-tooltip-content="System" 660 data-tooltip-animation-value="fade origin" 661 data-tooltip-delay-value="500" 662 data-theme-target="option" 663 data-action="click->theme#choose keydown->theme#navigate" 664 data-theme-mode="system" 665 type="button" 666 role="radio" 667 aria-checked="true" 668 tabindex="0" 669 id="theme-option-system"> 670 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V10.75C1.75 11.8546 2.64543 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.8546 16.25 10.75V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z"></path></g></svg> 671 </button> 672 <button 673 class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 674 aria-label="Light theme" 675 data-controller="tooltip" 676 data-tooltip-content="Light mode" 677 data-tooltip-animation-value="fade origin" 678 data-tooltip-delay-value="500" 679 data-theme-target="option" 680 data-action="click->theme#choose keydown->theme#navigate" 681 data-theme-mode="light" 682 type="button" 683 role="radio" 684 aria-checked="false" 685 tabindex="-1" 686 id="theme-option-light"> 687 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="1.25" x2="9" y2="2.25"></line><line x1="14.48" y1="3.52" x2="13.773" y2="4.227"></line><line x1="16.75" y1="9" x2="15.75" y2="9"></line><line x1="14.48" y1="14.48" x2="13.773" y2="13.773"></line><line x1="9" y1="16.75" x2="9" y2="15.75"></line><line x1="3.52" y1="14.48" x2="4.227" y2="13.773"></line><line x1="1.25" y1="9" x2="2.25" y2="9"></line><line x1="3.52" y1="3.52" x2="4.227" y2="4.227"></line><circle cx="9" cy="9" r="4.25"></circle></g></svg> 688 </button> 689 <button 690 class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20" 691 aria-label="Dark theme" 692 data-controller="tooltip" 693 data-tooltip-content="Dark mode" 694 data-tooltip-animation-value="fade origin" 695 data-tooltip-delay-value="500" 696 data-theme-target="option" 697 data-action="click->theme#choose keydown->theme#navigate" 698 data-theme-mode="dark" 699 type="button" 700 role="radio" 701 aria-checked="false" 702 tabindex="-1" 703 id="theme-option-dark"> 704 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M13,11.75c-3.452,0-6.25-2.798-6.25-6.25,0-1.352,.433-2.599,1.162-3.622-3.364,.628-5.912,3.575-5.912,7.122,0,4.004,3.246,7.25,7.25,7.25,3.372,0,6.198-2.306,7.009-5.424-.95,.583-2.063,.924-3.259,.924Z"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.
704104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-stroke="none" stroke="none"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle></g></svg> 705 </button> 706 </div> 707 </div> 708</div> 709 710 711 <main class="mx-auto "> 712 713 <div data-controller="toast" 714 id="toast_triggers" 715 data-toast-position-value="top-center" 716 data-toast-layout-value="default"> 717 <ul 718 data-toast-target="container" 719 data-action="mouseenter->toast#handleMouseEnter mouseleave->toast#handleMouseLeave" 720 class="fixed block w-full group z-[99] max-w-[300px] sm:max-w-xs left-1/2 -translate-x-1/2 top-0 overflow-visible" 721 style="transition: height 300ms ease;" 722 > 723 </ul> 724</div> 725 726 727 728 729 730 731 <div class="isolate" data-controller="scroll-preservation"> 732 <div> 733 <div class="grid min-h-dvh grid-cols-1 -mt-2 grid-rows-[1fr_1px_auto_1px_auto] lg:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem] xl:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem]"> 734 <div class="relative col-start-1 row-span-full row-start-1 max-lg:hidden"> 735 <div class="absolute inset-0"> 736 <div id="docs-sidebar" class="small-scrollbar sticky top-14.25 bottom-0 left-0 h-full max-h-[calc(100dvh-(var(--spacing)*14.25))] overflow-y-auto px-6 pr-2" data-preserve-scroll> 737 <div class="w-full -mx-6 h-6 z-10 pointer-events-none sticky top-0 inset-x-0 bg-gradient-to-b from-[#FCFBF9] dark:from-[#111111] to-transparent"></div> 738 <div> 739 <nav class="flex flex-col gap-8"> 740 <div class="flex flex-col gap-3" data-autoscroll="true"> 741 <p class="flex items-center gap-1.5 uppercase text-sm/6 text-neutral-500 sm:text-xs/6 dark:text-neutral-400"> 742 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m9,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"></path><path d="m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567"></path><path d="m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567"></path><path 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"></path></g></svg> 743 Getting started 744 </p> 745 <ul class="flex flex-col gap-2 border-l border-[color-mix(in_oklab,_var(--color-neutral-950),white_90%)] dark:border-[color-mix(in_oklab,_var(--color-neutral-950),white_20%)]"> 746 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/installation" aria-current='page'>Installation</a></li> 747 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/view-components" >View Components</a></li> 748 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/shared-partials" >Shared Partials</a></li> 749 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/cli" >CLI</a></li> 750 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/mcp" >MCP</a></li> 751 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" type="button" href="/docs/authors-note" >Author's note</a></li> 752 </ul> 753 </div> 754 <div class="flex flex-col gap-3" data-autoscroll="true"> 755 <p class="flex items-center gap-1.5 uppercase text-sm/6 text-neutral-500 sm:text-xs/6 dark:text-neutral-400"> 756 <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
7566,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> 757 Components 758 </p> 759 <ul class="flex flex-col gap-2 border-l border-[color-mix(in_oklab,_var(--color-neutral-950),white_90%)] dark:border-[color-mix(in_oklab,_var(--color-neutral-950),white_20%)]"> 760 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/accordion" >Accordion</a></li> 761 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/alert" >Alert</a></li> 762 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/animated-number" >Animated Number</a></li> 763 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/autocomplete" >Autocomplete</a> <div class="inline relative"> 764 <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"> 765 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 766 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 767 Pro 768 </a> 769 </div> 770 </div> 771</li> 772 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/autogrow" >Autogrow</a></li> 773 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/avatar" >
773Avatar</a><div class="inline relative"> 774 <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 775 <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200"> 776 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg> 777 New 778 </div> 779 </div> 780</div> 781</li> 782 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/badge" >Badge</a></li> 783 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/banner" >Banner</a></li> 784 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/breadcrumb" >Breadcrumb</a></li> 785 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/buttons" >Buttons</a></li> 786 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/card" >Card</a></li> 787 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/carou
787sel" >Carousel</a></li> 788 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/checkbox" >Checkbox</a></li> 789 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/checkbox-select-all" >Checkbox Select All</a></li> 790 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/clipboard" >Clipboard</a></li> 791 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/collapsible" >Collapsible</a></li> 792 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/color-picker" >Color Picker</a></li> 793 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/combobox" >Combobox (Multi-select)</a></li> 794 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/command-palette" >Command Palette</a> <div class="inline relative"> 795 <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"> 796 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 797 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
7976,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> 798 Pro 799 </a> 800 </div> 801 </div> 802</li> 803 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/confirmation" >Confirmation</a></li> 804 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/context-menu" >Context Menu</a> <div class="inline relative"> 805 <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"> 806 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 807 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 808 Pro 809 </a> 810 </div> 811 </div> 812</li> 813 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/datatable" >Datatable</a> <div class="inline relative"> 814 <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"> 815 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 816 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8166,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> 817 Pro 818 </a> 819 </div> 820 </div> 821</li> 822 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/date-picker" >Date Picker</a></li> 823 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/dark-mode-switcher" >Dark Mode Switcher</a><div class="inline relative"> 824 <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 825 <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200"> 826 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg> 827 New 828 </div> 829 </div> 830</div> 831</li> 832 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/dock" >Dock</a></li> 833 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/drawer" >Drawer</a> <div class="inline relative"> 834 <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"> 835 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 836 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8366,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> 837 Pro 838 </a> 839 </div> 840 </div> 841</li> 842 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/dropdown" >Dropdown</a> <div class="inline relative"> 843 <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"> 844 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 845 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 846 Pro 847 </a> 848 </div> 849 </div> 850</li> 851 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/emoji-picker" >Emoji Picker</a></li> 852 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/feedback" >Feedback</a></li> 853 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/forms" >Forms</a></li> 854 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/infinite-scroll" >Infinite Scroll</a><div class="inline relative"> 855 <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7"> 856 <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200"> 857 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
857<path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg> 858 New 859 </div> 860 </div> 861</div> 862</li> 863 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/kbd" >KBD & Hotkey</a></li> 864 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/lightbox" >Lightbox</a></li> 865 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/loading-indicator" >Loading Indicator</a></li> 866 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/marquee" >Marquee</a></li> 867 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/modal" >Modal</a> <div class="inline relative"> 868 <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"> 869 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 870 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8706,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> 871 Pro 872 </a> 873 </div> 874 </div> 875</li> 876 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/onboarding-checklist" >Onboarding Checklist</a> <div class="inline relative"> 877 <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"> 878 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 879 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 880 Pro 881 </a> 882 </div> 883 </div> 884</li> 885 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/navbar" >Navbar</a></li> 886 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/password" >Password</a></li> 887 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/pagination" >Pagination</a></li> 888 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/popover" >Popover</a></li> 889 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/radio" >Radio</a></li> 890 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/scroll-area" >Scroll Area</a></li> 891 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/select" >Select</a></li> 892 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/sidebar" >Sidebar</a></li> 893 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/skeleton" >Skeleton</a></li> 894 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/slideover" >Slideover</a> <div class="inline relative"> 895 <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"> 896 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 897 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
8976,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> 898 Pro 899 </a> 900 </div> 901 </div> 902</li> 903 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/stepper" >Stepper</a> <div class="inline relative"> 904 <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"> 905 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 906 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 907 Pro 908 </a> 909 </div> 910 </div> 911</li> 912 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/switch" >Switch</a></li> 913 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/tabs" >Tabs</a> <div class="inline relative"> 914 <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"> 915 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 916 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
9166,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> 917 Pro 918 </a> 919 </div> 920 </div> 921</li> 922 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/table" >Table</a></li> 923 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/testimonial" >Testimonial</a></li> 924 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/toast" >Toast</a></li> 925 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/tooltip" >Tooltip</a></li> 926 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/tree-view" >Tree View</a></li> 927 <li class="-ml-px flex items-start gap-2"><a class="inline-block border-l border-transparent pl-5 text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 aria-[current]:border-neutral-950 aria-[current]:text-neutral-950 sm:pl-4 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white dark:aria-[current]:border-white dark:aria-[current]:text-white" href="/docs/two-factor" >Two Factor</a></li> 928 </ul> 929 </div> 930 </nav> 931 </div> 932 <div class="w-full -mx-6 h-6 z-10 pointer-events-none sticky bottom-0 inset-x-0 bg-gradient-to-t from-[#FCFBF9] dark:from-[#111111] to-transparent"></div> 933 </div> 934 </div> 935 </div> 936 <div class="col-start-2 rounded-b-xl row-span-5 row-start-1 border-x border-b border-neutral-950/5 dark:border-white/10 max-lg:hidden relative overflow-hidden" style=" 937 background-color: rgba(200, 200, 200, 0.01); 938 background-image: radial-gradient( 939 circle at 50% 50%, 940 rgba(102, 102, 102, 0.1) 1px, 941 transparent 0 942 ), 943 linear-gradient(rgba(102, 102, 102, 0.05) 1px, transparent 0), 944 linear-gradient(90deg, rgba(102, 102, 102, 0.05) 1px, transparent 0); 945 background-size: 946 40px 40px, 947 20px 20px, 948 20px 20px; 949 "> 950 <div class="absolute top-0 left-0 w-full h-full z-[1]" style=" 951 background: repeating-linear-gradient( 952 45deg, 953 transparent, 954 transparent 10px, 955 rgba(102, 102, 102, 0.1) 10px, 956 rgba(102, 102, 102, 0.1) 20px 957 ); 958 "></div> 959 <div class="absolute top-0 left-0 w-full h-full opacity-60 z-[2]" style=" 960 background: radial-gradient( 961 circle, 962 rgba(102, 102, 102, 0.1) 1px, 963 transparent 1px 964 ); 965 background-size: 60px 60px; 966 "></div> 967 </div> 968 <div class="relative row-start-1 grid grid-cols-subgrid lg:col-start-3"> 969 <div hidden></div> 970 <div class="mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 xl:max-w-5xl xl:grid-cols-[minmax(0,1fr)_var(--container-2xs)]"> 971 <div class="px-4 pt-13 pb-12 sm:px-6 xl:pr-0" data-table-of-contents-target="content"> 972 <!-- Previous/Next navigation --> 973 974 <div class="justify-end gap-2 items-center mb-6 pb-4 border-b border-neutral-950/20 dark:border-white/20 flex"> 975 976 977 978 979 980 981 982<div class="relative flex" data-controller="dropdown-popover" data-dropdown-popover-placement-value="bottom-end top-end" data-dropdown-popover-auto-close-value="false"> 983 <button 984 type="button" 985 class="flex items-center justify-center gap-1.5 rounded-l-lg relative z-10 border border-black/10 bg-white/90 px-2 sm:px-2.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" 986 data-controller="clipboard" 987 data-clipboard-text="# Installation Documentation Index 988 989Use this index first. Load only the section markdown route you need. 990 991Full reference: `/docs/installation.md` 992Suggested first section route: `/docs/installation/1-dependencies.md` 993 994## Sections 995- [1. Dependencies](/docs/installation/1-dependencies.md) 996- [2. Stimulus Controllers](/docs/installation/2-stimulus-controllers.md) 997- [3. Custom CSS](/docs/installation/3-custom-css.md)" 998 data-clipboard-error-message-value="Copy failed" 999 data-clipboard-show-tooltip-value="false" 1000 data-clipboard-tooltip-duration-value="1500" 1001 >
1002 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1003 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1004 <span class="hidden md:inline">Copy for LLMs</span> 1005 </span> 1006 <span data-clipboard-target="copiedContent" class="flex items-center gap-1.5 text-green-500 hidden"> 1007 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1008 <span class="hidden md:inline">Copy for LLMs</span> 1009 </span> 1010 </button> 1011 1012 <button type="button" class="flex items-center justify-center gap-1.5 rounded-r-lg border border-l-0 border-black/10 bg-white/90 p-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out outline-none select-none hover:bg-neutral-50 focus-visible:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:bg-neutral-100 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus:bg-neutral-700 dark:focus-visible:bg-neutral-700/50 dark:data-[state=open]:bg-neutral-700" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" aria-haspopup="menu"> 1013 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><path fill="currentColor" d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z" /></svg> 1014 </button> 1015 1016 <dialog 1017 class="absolute z-50 min-w-[200px] rounded-lg border border-black/10 bg-white text-neutral-900 opacity-0 shadow-xs transition-opacity duration-150 ease-out outline-hidden dark:border-white/10 dark:bg-neutral-800 dark:text-neutral-100" 1018 data-controller="menu" 1019 data-dropdown-popover-target="menu" 1020 data-action="click@document->dropdown-popover#closeOnClickOutside 1021 close->menu#reset 1022 keydown.up->menu#prev keydown.down->menu#next 1023 keydown.up->menu#preventScroll keydown.down->menu#preventScroll" 1024 > 1025 <div class="flex flex-col p-1" role="menu"> 1026 <a 1027 href="/docs/installation/toc.md" 1028 target="_blank" 1029 class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" 1030 data-menu-target="item" 1031 role="menuitem" 1032 tabindex="-1" 1033 > 1034 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x=".75" y="3.75" width="16.5" height="10.5" rx="2" ry="2"></rect><polyline points="8.75 11.25 8.75 6.75 8.356 6.75 6.25 9.5 4.144 6.75 3.75 6.75 3.75 11.25"></polyline><polyline points="11.5 9.5 13.25 11.25 15 9.5"></polyline><line x1="13.25" y1="11.25" x2="13.25" y2="6.75"></line></g></svg> 1035 View TOC Markdown 1036 </a> 1037 1038 <a 1039 href="/docs/installation.md" 1040 target="_blank" 1041 class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" 1042 data-menu-target="item" 1043 role="menuitem" 1044 tabindex="-1" 1045 > 1046 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x=".75" y="3.75" width="16.5" height="10.5" rx="2" ry="2"></rect><polyline points="8.75 11.25 8.75 6.75 8.356 6.75 6.25 9.5 4.144 6.75 3.75 6.75 3.75 11.25"></polyline><polyline points="11.5 9.5 13.25 11.25 15 9.5"></polyline><line x1="13.25" y1="11.25" x2="13.25" y2="6.75"></line></g></svg> 1047 View Full Markdown 1048 </a> 1049
1050 <div class="my-1 border-t border-neutral-100 dark:border-neutral-700"></div> 1051 1052 <a 1053 href="https://chatgpt.com/?q=I%27m%20looking%20at%20this%20Rails%20Blocks%20documentation%20index%3A%20https%3A%2F%2Frailsblocks.com%2Fdocs%2Finstallation%2Ftoc.md%0A%0AStart%20with%20the%20index%20and%20only%20load%20section%20markdown%20routes%20when%20needed.%20Help%20me%20implement%20this%20component%20with%20minimal%20context." 1054 target="_blank" 1055 rel="noopener noreferrer" 1056 class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" 1057 data-menu-target="item" 1058 role="menuitem" 1059 tabindex="-1" 1060 > 1061 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24"><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"/></svg> 1062 Open in ChatGPT 1063 </a> 1064 1065 <a 1066 href="https://claude.ai/new?q=I%27m%20looking%20at%20this%20Rails%20Blocks%20documentation%20index%3A%20https%3A%2F%2Frailsblocks.com%2Fdocs%2Finstallation%2Ftoc.md%0A%0AStart%20with%20the%20index%20and%20
1066only%20load%20section%20markdown%20routes%20when%20needed.%20Help%20me%20implement%20this%20component%20with%20minimal%20context." 1067 target="_blank" 1068 rel="noopener noreferrer" 1069 class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-200 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" 1070 data-menu-target="item" 1071 role="menuitem" 1072 tabindex="-1" 1073 > 1074 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500 dark:text-neutral-400" fill="currentColor" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg> 1075 Open in Claude 1076 </a> 1077 </div> 1078 </dialog> 1079</div> 1080 1081 <div></div> 1082 1083 <a href="/docs/view-components" class="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"> 1084 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 1085 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /> 1086 </svg> 1087 </a> 1088</div> 1089 1090 1091 1092<h1 class="text-3xl font-bold mb-4">Installation</h1> 1093<p class="mb-4">Rails Blocks lets you add individual components to your v7+ Rails application by copying and pasting the code into your application.</p> 1094<p>This approach gives you full control and the ability to easily extend components.</p> 1095 1096 1097<div class="group text-2xl font-bold mb-4 mt-12 flex gap-1.5 justify-between items-center pb-4 border-b border-neutral-950/20 dark:border-white/20"> 1098 <div class="flex gap-1.5 items-center"> 1099 <h2 id="1-dependencies">1. Dependencies</h2> 1100 <a class="hidden align-middle group-hover:inline-block" href="#1-dependencies"> 1101 <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400 size-5" width="18" height="18" viewBox="0 0 18 18"><g stroke-width="1.5" fill="none" stroke="currentColor"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> 1102 </a> 1103 </div> 1104 1105</div> 1106 1107<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Rails Blocks is built with Tailwind CSS V4+ and a few other dependencies. If you want to use all components, here's how to install all dependencies.</p> 1108<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400 hidden">If you want to only use a few components, you can install them individually once Tailwind CSS & Stimulus are installed.</p> 1109 1110 1111<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1111k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 1112 <!-- Tab Controls --> 1113 <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist"> 1114 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1115 Quick dependency install 1116 </button> 1117 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1117k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1118 Granular installation 1119 </button> 1120 </div> 1121 1122 <!-- Quick install Panel --> 1123 <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl"> 1124 1125<p class="mb-2 text-lg font-semibold text-neutral-900 dark:text-white">Install all dependencies in one go</p> 1126<p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400"> 1127 Once you have <a href="https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails" target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80">Tailwind CSS</a> & <a href="https://stimulus.hotwired.dev/reference/installation" target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80">Stimulus</a> installed, you can install all dependencies easily: 1128</p> 1129 1130<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1130k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 1131 <!-- Tab Controls --> 1132 <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-900/50 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist"> 1133 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1134 Importmap 1135 </button> 1136 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1136k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1137 NPM 1138 </button> 1139 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1140 Yarn 1141 </button> 1142 </div> 1143 1144 <!-- Importmap Panel --> 1145 <div data-tabs-target="panel" role="tabpanel"> 1146 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1147 <div class="p-1 text-sm bg-neutral-900"> 1148 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 1149 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1150 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 1151 Add to config/importmap.rb 1152 </span> 1153 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1154 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1155 Add to config/importmap.rb 1156 </span> 1157 </button> 1158 </div> 1159 </div> 1160 <div class="relative"> 1161 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm" 1162pin "number-flow", to: "https://esm.sh/number-flow" 1163pin "number-flow/group", to: "https://esm.sh/number-flow/group" 1164pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js" 1165pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm" 1166pin "tom-select", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm" 1167pin "air-datepicker", to: "https://esm.sh/[email protected]" 1168pin "air-datepicker/locale/en", to: "https://esm.sh/[email protected]/locale/en" 1169pin "emoji-mart", to: "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js" 1170pin "@emoji-mart/data", to: "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm" 1171pin "photoswipe", to: "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js" 1172pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@latest/+esm" 1173</code></pre> 1174 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1175 data-controller="clipboard analytics" 1176 data-action="click->
1176analytics#track" 1177 data-analytics-event-name-value="installation copied depencency importmap code" 1178 data-clipboard-text="pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm" 1179pin "number-flow", to: "https://esm.sh/number-flow" 1180pin "number-flow/group", to: "https://esm.sh/number-flow/group" 1181pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js" 1182pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm" 1183pin "tom-select", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm" 1184pin "air-datepicker", to: "https://esm.sh/[email protected]" 1185pin "air-datepicker/locale/en", to: "https://esm.sh/[email protected]/locale/en" 1186pin "emoji-mart", to: "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js" 1187pin "@emoji-mart/data", to: "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm" 1188pin "photoswipe", to: "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js" 1189pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@latest/+esm" 1190" 1191 data-clipboard-error-message-value="Copy Failed!" 1192 data-clipboard-show-tooltip-value="false" 1193 data-clipboard-tooltip-duration-value="1500"> 1194 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1195 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1196 Copy 1197 </span> 1198 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1199 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1200 Copied! 1201 </span> 1202 </button> 1203 </div> 1204 </div> 1205 1206 <!-- NPM Panel --> 1207 <div data-tabs-target="panel" role="tabpanel"> 1208 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1209 <div class="p-1 text-sm bg-neutral-900"> 1210 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1211 <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"><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> 1212 Terminal 1213 </div> 1214 </div> 1215 </div> 1216 <div class="relative"> 1217 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion</code></pre> 1218 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1219 data-controller="clipboard analytics" 1220 data-action="click->
1220analytics#track" 1221 data-analytics-event-name-value="installation copied depencency npm code" 1222 data-clipboard-text="npm install @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion" 1223 data-clipboard-error-message-value="Copy Failed!" 1224 data-clipboard-show-tooltip-value="false" 1225 data-clipboard-tooltip-duration-value="1500"> 1226 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1227 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1228 Copy 1229 </span> 1230 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1231 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1232 Copied! 1233 </span> 1234 </button> 1235 </div> 1236 </div> 1237 1238 <!-- Yarn Panel --> 1239 <div data-tabs-target="panel" role="tabpanel"> 1240 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1241 <div class="p-1 text-sm bg-neutral-900"> 1242 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1243 <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"><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> 1244 Terminal 1245 </div> 1246 </div> 1247 </div> 1248 <div class="relative"> 1249 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion</code></pre> 1250 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1251 data-controller="clipboard analytics" 1252 data-action="click->analytics#track" 1253 data-analytics-event-name-value="installation copied depencency yarn code" 1254 data-clipboard-text="yarn add @floating-ui/dom number-flow embla-carousel embla-carousel-wheel-gestures tom-select air-datepicker emoji-mart @emoji-mart/data photoswipe motion" 1255 data-clipboard-error-message-value="Copy Failed!" 1256 data-clipboard-show-tooltip-value="false" 1257 data-clipboard-tooltip-duration-value="1500"> 1258 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1259 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1260 Copy 1261 </span>
1262 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1263 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1264 Copied! 1265 </span> 1266 </button> 1267 </div> 1268 </div> 1269</div> 1270 1271<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text"><head></code> HTML tag:</p> 1272 1273<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1274 <div class="p-1 text-sm bg-neutral-900"> 1275 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" 1276 data-controller="clipboard" 1277 data-clipboard-text="application.html.erb" 1278 data-clipboard-success-message-value="Controller Copied" 1279 data-clipboard-error-message-value="Copy Failed!" 1280 data-clipboard-show-tooltip-value="false" 1281 data-clipboard-tooltip-duration-value="1500"> 1282 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1283 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 1284 application.html.erb 1285 </span> 1286 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1287 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1288 application.html.erb 1289 </span> 1290 </button> 1291 </div> 1292</div> 1293<div class="relative"> 1294 <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar"><!-- Shoelace --> 1295<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script> 1296<link 1297 rel="stylesheet" 1298 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" 1299/> 1300<link 1301 rel="stylesheet" 1302 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css" 1303/> 1304 1305<!-- Tom Select --> 1306<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet"> 1307 1308<!-- Air Datepicker --> 1309<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css"> 1310 1311<!-- Photoswipe --> 1312<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css"> 1313</code></pre> 1314 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1315 data-controller="clipboard analytics" 1316 data-action="click->
1316analytics#track" 1317 data-analytics-event-name-value="installation copied depencency css imports copy" 1318 data-clipboard-text="<!-- Shoelace --> 1319<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script> 1320<link 1321 rel="stylesheet" 1322 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" 1323/> 1324<link 1325 rel="stylesheet" 1326 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css" 1327/> 1328 1329<!-- Tom Select --> 1330<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet"> 1331 1332<!-- Air Datepicker --> 1333<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css"> 1334 1335<!-- Photoswipe --> 1336<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css"> 1337" 1338 data-clipboard-success-message-value="CSS Copied" 1339 data-clipboard-error-message-value="Copy Failed!" 1340 data-clipboard-show-tooltip-value="false" 1341 data-clipboard-tooltip-duration-value="1500"> 1342 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1343 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1344 Copy 1345 </span> 1346 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1347 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1348 Copied! 1349 </span> 1350 </button> 1351</div> 1352 1353 </div> 1354 1355 <!-- Full install Panel --> 1356 <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl"> 1357 <p class="mb-2 text-lg font-semibold text-neutral-900 dark:text-white">Install each dependency individually</p>
1358<p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400"> 1359 If you want to install each dependency individually, you can do so here: 1360</p> 1361<div class="w-full flex flex-col gap-2" data-controller="accordion"> 1362 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 1363 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 1364 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-0" aria-expanded="false" data-state="closed" id="accordion-trigger-0" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 1365 <span class="flex items-center gap-2"> 1366 1.1. Tailwind CSS 1367 <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg> 1368 (required) 1369 </span> 1370 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 1371 </button> 1372 </p> 1373 <div data-accordion-target="content" data-state="closed" id="accordion-content-0" role="region" aria-labelledby="accordion-trigger-0" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 1374 <div class="overflow-hidden min-h-0"> 1375 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 1376 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1377 Tailwind CSS is a utility-first CSS framework that allows you to build custom designs inside your views easily. Go to the <a href="https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails" target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80">tailwindcss documentation</a> and follow the instructions to install it in your Rails application. 1378 </p> 1379 </div> 1380 </div> 1381 </div> 1382 </div> 1383 1384 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 1385 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 1386 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-1" aria-expanded="false" data-state="closed" id="accordion-trigger-1" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1">
1387 <span class="flex items-center gap-2"> 1388 1.2. Stimulus 1389 <svg class="size-3.5 rounded-sm" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> 1390 <g class="fill-neutral-800 dark:fill-white"> 1391 <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path> 1392 <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path> 1393 <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path> 1394 </g> 1395 </svg> 1396 (required) 1397 </span> 1398 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 1399 </button> 1400 </p> 1401 <div data-accordion-target="content" data-state="closed" id="accordion-content-1" role="region" aria-labelledby="accordion-trigger-1" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 1402 <div class="overflow-hidden min-h-0"> 1403 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 1404 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1405 Stimulus is a lightweight JavaScript framework for making your Rails application interactive easily. It should normally already be installed in your Rails v7+ a
1405pplication by default. 1406 </p> 1407 </div> 1408 </div> 1409 </div> 1410 </div> 1411 1412 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 1413 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 1414 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-2" aria-expanded="false" data-state="closed" id="accordion-trigger-2" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 1415 <span class="flex items-center gap-2"> 1416 1.3. Floating UI 1417 <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" /> 1418 </span> 1419 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 1420 </button> 1421 </p> 1422 <div data-accordion-target="content" data-state="closed" id="accordion-content-2" role="region" aria-labelledby="accordion-trigger-2" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 1423 <div class="overflow-hidden min-h-0"> 1424 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 1425 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1426 <a href="https://floating-ui.com/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Floating UI</a> is a library for creating floating elements in your application and positioning them. It is used to create the dropdowns, popovers, tooltips, and a few other Rails Blocks components. 1427 </p> 1428 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1429 <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1429k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 1430 <!-- Tab Controls --> 1431 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 1432 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1433 Importmap 1434 </button> 1435 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1435k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1436 NPM 1437 </button> 1438 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1439 Yarn 1440 </button> 1441 </div> 1442 1443 <!-- Importmap Panel --> 1444 <div data-tabs-target="panel" role="tabpanel"> 1445 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1446 <div class="p-1 text-sm bg-neutral-900"> 1447 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 1448 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1449 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 1450 Add to config/importmap.rb 1451 </span> 1452 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1453 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1454 Add to config/importmap.rb 1455 </span> 1456 </button> 1457 </div> 1458 </div> 1459 <div class="relative"> 1460 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm"</code></pre> 1461 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1462 data-controller="clipboard" 1463 data-clipboard-text='pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm"' 1464 data-clipboard-error-message-value="Copy Failed!" 1465 data-clipboard-show-tooltip-value="false" 1466 data-clipboard-tooltip-duration-value="1500"> 1467 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1468 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1469 Copy 1470 </span>
1471 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1472 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1473 Copied! 1474 </span> 1475 </button> 1476 </div> 1477 </div> 1478 1479 <!-- NPM Panel --> 1480 <div data-tabs-target="panel" role="tabpanel"> 1481 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1482 <div class="p-1 text-sm bg-neutral-900"> 1483 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1484 <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"><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> 1485 Terminal 1486 </div> 1487 </div> 1488 </div> 1489 <div class="relative"> 1490 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install @floating-ui/dom</code></pre> 1491 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1492 data-controller="clipboard" 1493 data-clipboard-text="npm install @floating-ui/dom" 1494 data-clipboard-error-message-value="Copy Failed!" 1495 data-clipboard-show-tooltip-value="false" 1496 data-clipboard-tooltip-duration-value="1500"> 1497 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1498 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1499 Copy 1500 </span> 1501 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1502 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1503 Copied! 1504 </span> 1505 </button> 1506 </div> 1507 </div> 1508 1509 <!-- Yarn Panel --> 1510 <div data-tabs-target="panel" role="tabpanel"> 1511 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1512 <div class="p-1 text-sm bg-neutral-900"> 1513 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1514 <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"><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> 1515 Terminal 1516 </div> 1517 </div> 1518 </div> 1519 <div class="relative"> 1520 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add @floating-ui/dom</code></pre> 1521 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1522 data-controller="clipboard" 1523 data-clipboard-text="yarn add @floating-ui/dom" 1524 data-clipboard-error-message-value="Copy Failed!" 1525 data-clipboard-show-tooltip-value="false" 1526 data-clipboard-tooltip-duration-value="1500">
1527 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1528 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1529 Copy 1530 </span> 1531 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1532 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1533 Copied! 1534 </span> 1535 </button> 1536 </div> 1537 </div> 1538</div> 1539 1540 </div> 1541 </div> 1542 </div> 1543 </div> 1544 </div> 1545 1546 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 1547 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 1548 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-3" aria-expanded="false" data-state="closed" id="accordion-trigger-4" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 1549 <span class="flex items-center gap-2"> 1550 1.4. Number Flow 1551 <img alt="Number Flow" class="size-3.5" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" /> 1552 </span> 1553 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 1554 </button> 1555 </p> 1556 <div data-accordion-target="content" data-state="closed" id="accordion-content-3" role="region" aria-labelledby="accordion-trigger-4" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 1557 <div class="overflow-hidden min-h-0"> 1558 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 1559 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1560 <a href="https://number-flow.barvian.me/vanilla" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Number Flow</a> is a library for animating numbers in your application. It is used to animate the numbers in the animated number component. 1561 </p> 1562 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1563 <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1563k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 1564 <!-- Tab Controls --> 1565 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 1566 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1567 Importmap 1568 </button> 1569 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1569k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1570 NPM 1571 </button> 1572 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1573 Yarn 1574 </button> 1575 </div> 1576 1577 <!-- Importmap Panel --> 1578 <div data-tabs-target="panel" role="tabpanel"> 1579 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1580 <div class="p-1 text-sm bg-neutral-900"> 1581 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 1582 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1583 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 1584 Add to config/importmap.rb 1585 </span> 1586 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1587 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1588 Add to config/importmap.rb 1589 </span> 1590 </button> 1591 </div> 1592 </div> 1593 <div class="relative"> 1594 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "number-flow", to: "https://esm.sh/number-flow" 1595pin "number-flow/group", to: "https://esm.sh/number-flow/group"</code></pre> 1596 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1597 data-controller="clipboard" 1598 data-clipboard-text='pin "number-flow", to: "https://esm.sh/number-flow" 1599pin "number-flow/group", to: "https://esm.sh/number-flow/group"' 1600 data-clipboard-error-message-value="Copy Failed!" 1601 data-clipboard-show-tooltip-value="false" 1602 data-clipboard-tooltip-duration-value="1500"> 1603 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1604 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1605 Copy 1606 </span>
1607 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1608 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1609 Copied! 1610 </span> 1611 </button> 1612 </div> 1613 </div> 1614 1615 <!-- NPM Panel --> 1616 <div data-tabs-target="panel" role="tabpanel"> 1617 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1618 <div class="p-1 text-sm bg-neutral-900"> 1619 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1620 <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"><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> 1621 Terminal 1622 </div> 1623 </div> 1624 </div> 1625 <div class="relative"> 1626 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install number-flow</code></pre> 1627 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1628 data-controller="clipboard" 1629 data-clipboard-text="npm install number-flow" 1630 data-clipboard-error-message-value="Copy Failed!" 1631 data-clipboard-show-tooltip-value="false" 1632 data-clipboard-tooltip-duration-value="1500"> 1633 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1634 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1635 Copy 1636 </span> 1637 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1638 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1639 Copied! 1640 </span> 1641 </button> 1642 </div> 1643 </div> 1644 1645 <!-- Yarn Panel --> 1646 <div data-tabs-target="panel" role="tabpanel"> 1647 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1648 <div class="p-1 text-sm bg-neutral-900"> 1649 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1650 <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"><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> 1651 Terminal 1652 </div> 1653 </div> 1654 </div> 1655 <div class="relative"> 1656 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add number-flow</code></pre> 1657 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1658 data-controller="clipboard" 1659 data-clipboard-text="yarn add number-flow" 1660 data-clipboard-error-message-value="Copy Failed!" 1661 data-clipboard-show-tooltip-value="false" 1662 data-clipboard-tooltip-duration-value="1500">
1663 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1664 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1665 Copy 1666 </span> 1667 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1668 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1669 Copied! 1670 </span> 1671 </button> 1672 </div> 1673 </div> 1674</div> 1675 1676 </div> 1677 </div> 1678 </div> 1679 </div> 1680 </div> 1681 1682 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 1683 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 1684 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-5" aria-expanded="false" data-state="closed" id="accordion-trigger-5" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 1685 <span class="flex items-center gap-2"> 1686 1.5. Embla Carousel 1687 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-5 -5 160 160"><defs><linearGradient id="light-theme-gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#2f71c1"/><stop offset="100%" stop-color="#7561c3"/></linearGradient><path id="light-theme-logo" d="M93 .03l.46.06.47.08.24.05.23.05.23.07.24.07.47.16.23.1.24.1.45.2.23.1.44.24.44.26L98 2l.6.48.38.34.36.36.17.2.1.12.1.13.1.12.1.14.1.12.2.26.1.14.1.13.17.27.18.3.16.3.16.32.08.17.15.36.07.2.1.2.07.2.08.2.07.23.08.23.07.23.16.5.08.26.08.28.1.3.63 2.35.1.4.14.54.13.55.24 1.13.1.58.12.57.1.6.18 1.2.1.6.08.63.07.62.07.64.06.64.06.65.05.65.04.67.05.67.1 2.06.04 2.87-.03 2.23-.06 1.53-.02.78-.05.78-.04.8-.1 1.6-.07.82-.06.82-.26 2.8-.02.26-.03.26-.02.27-.04.52-.04.5-.02.24-.03.48-.02.22-.01.23v.23l-.02.2-.01.22v.4l-.03.37v.17l-.01.18-.02.32v.3.13.25l-.01.2.01.1V46v.08.06.05.05l.01.03.01.02h.01.02l.03.01h.67l.13-.01h.14.15.16l.34-.02.37-.02.2-.01h.42l.46-.04h.24l.23-.02.25-.02.26-.02.27-.02h.27l.26-.02.28-.02.3-.03.3-.02h.28l.6-.04.3-.03.62-.05.3-.03 1.4-.1 1.37-.1 1.36-.08 2.64-.1 1.3-.03 1.26-.02h1.25 1.22l1.2.02 1.17.03 2.27.1 1.1.08 1.07.08 1.05.1 1.03.1 1 .12.97.13.94.15.93.16.88.17.87.2.83.2.8.2.78.22.75.24.72.24.7.26.67.27.63.28.6.3.58.3.54.32.5.33.5.35.45.35.42.36.38.38.36.4.14.17.27.33.12.16.12.17.1.17.1.16.2.3.1.17.25.47.08.16.07.15.06.17.16.47.1.33.06.33.03.16.02.18.02.16v.17l.02.36v.18l-.02.36-.01.2-.02.2-.01.2-.06.4-.04.2-.04.22-.03.2-.08.35-.1.35-.12.36-.13.36-.15.37-.17.38-.18.37-.2.4-.22.38-.24.4-.25.4-.26.4-.6.8-.64.82-.36.4-.35.42-1.18 1.24-.42.43-.88.84-.46.43-.96.84-.5.43-1.03.84-.53.43-.55.4-1.7 1.25-.6.4-1.22.8-.62.4-.63.4-.38.24-.4.24-.42.25-.42.26-.45.26-.46.26-.96.54-.5.3-.5.27-.5.28-.5.3-1.03.56-.52.27-.5.28-.52.27-1 .53-.5.26-.5.25-.48.25-.92.46-.86.42-.42.2-.38.2-.37.17-.35.17-.32.15-.3.13-.27.1-.26.1-.2.1-.2.06-.17.06-.12.03-.1.02-.05-.02-.04-.04-.04-.06-.03-.08-.03
1687-.1-.02-.1-.01-.13-.02-.14v-.15l.01-.17v-.2l.01-.18.02-.2.01-.2.05-.44.03-.22.1-.7.04-.24.1-.47.05-.24.1-.45.06-.22.05-.22.07-.2.05-.2.07-.2.07-.18.12-.32.06-.15.07-.13.07-.12.06-.1.07-.1.06-.06.06-.05.1-.04.1-.05.05-.04.07-.04.06-.03.07-.03.08-.04.16-.1.18-.08.1-.06.1-.04.2-.12.32-.16.22-.12.23-.13.24-.12.37-.2.12-.07.25-.13.13-.07.25-.13.14-.06.12-.07.13-.06.13-.07.13-.06 1.37-.7.67-.36.67-.38.66-.36.65-.36.64-.37 1.26-.75.6-.36 1.2-.75.58-.38.57-.36.57-.38.55-.37.54-.38.53-.36.52-.37 1-.74.47-.35.46-.37.45-.36.44-.36.84-.7.4-.35.74-.68.67-.67.6-.65.28-.32.27-.3.24-.3.23-.3.2-.3.36-.58.14-.28.14-.3.12-.27.1-.27.08-.27.06-.26.04-.26.02-.26v-.5l-.03-.25-.05-.24-.07-.22-.08-.23-.1-.23-.12-.22-.14-.2-.32-.42-.4-.4-.48-.38-.26-.18-.28-.18-.6-.34-.68-.33-.37-.15-.4-.15-.4-.14-.42-.14-.43-.14-.46-.14-.47-.13-.5-.12-.5-.1-.52-.1-.47-.1-.5-.1-.53-.08-.58-.06-.6-.08-.63-.06-.65-.06-.67-.05-.7-.05-.72-.05-.74-.04-1.52-.06-.8-.03-.8-.02h-.8l-1.67-.02-.83.01h-.85l-2.57.03-.85.03-.86.03-.86.02-.84.05-.85.03-.84.06-.82.05-.83.06-.8.05-1.57.14-.76.07-.75.08-.72.08-1.4.2-.65.1-3.42.52-1.4 7.83-1.46 7.83 6.8 7.94 1.04 1.25 1.03 1.23 1 1.2.98 1.2.95 1.2.93 1.18.9 1.16.88 1.15.87 1.13.84 1.13.82 1.1.8 1.1.78 1.1.75 1.07.73 1.07 1.4 2.1.67 1.03.65 1.02.62 1 .6 1 .58.98.56.98.54.95.52.96.5.95.48.93.45.92.43.9.42.9.4.9.37.88.36.9.33.86.32.86.3.86.28.84.25.83.23.83.15.52.12.5.14.5.1.48.1.46.1.45.1.44.08.44.08.4.06.4.07.4.04.4.04.37.03.37.02.36.02.34v.67l-.03.64-.03.3-.04.3-.05.3-.12.58-.08.27-.1.28-.2.52-.12.26-.12.25-.13.26-.14.25-.3.5-.17.24-.18.24-.2.24-.2.23-.2.24-.3.33-.3.3-.32.3-.34.26-.35.24-.36.23-.38.2-.4.2-.4.17-.42.14-.43.13-.92.2-.5.07-.5.05h-.5-1.08l-.56-.04-.57-.04-.6-.08-.6-.1-.62-.1-.66-.13-.65-.15-.68-.16-1.4-.4-.73-.22-.75-.25-.77-.26-.78-.3-.8-.3-.82-.32-.84-.34-.86-.37-1.8-.8-.92-.43-.93-.45-.33-.15-.34-.17-.37-.2-.4-.2-.42-.22-.43-.25-.45-.25-.46-.26-.48-.28-1.5-.9-.5-.32-.53-.3-1.04-.65-.53-.32-.53-.33-.5-.34-.52-.32-1-.64-.5-.33-.47-.3-.46-.3-.45-.3-.42-.3-.4-.28-.4-.27-.36-.24-.34-.25-.3-.23-.3-.2-.25-.2-.22-.17-.18-.17-.16-.13-.1-.12-.08-.1-.04-.07h0l.01-.04.02-.06.05-.05v-.04l.06-.06.1-.07.2-.16.06-.04.07-.05.06-.04.07-.04.07-.05.08-.05.08-.04.07-.05.16-.1.1-.05.1-.04.08-.06.4-.2.1-.06.1-.05.1-.04.22-.1.2-.1 2.62-1.1 9.13 5.35.92.52.9.5.88.5.87.47.84.44.83.43 1.6.8.78.37.74.34.74.33.72.3.7.28.68.27.66.24.63.22.63.2.6.18.58.16.56.14.54.12.52.1.5.08.48.07.46.03h.43.43l.4-.03.38-.04.35-.06.34-.1.32-.1.3-.13.27-.15.25-.17.23-.18.2-.22.18-.23.16-.26.22-.44.16-.5.1-.53.06-.6.02-.63-.03-.7-.08-.72-.12-.78-.18-.8-.2-.86-.26-.9-.3-.93-.35-.97-.38-1-.43-1.04-.47-1.07-.5-1.1-.55-1.14-.6-1.17-.63-1.18-.66-1.23-.7-1.24-.74-1.27-.77-1.3-1.64-2.65-.87-1.35-.9-1.37-.93-1.4-.97-1.4-2.03-2.84-1.05-1.43-1.1-1.46-1.1-1.45-1.15-1.48-1.16-1.47-1.2-1.48-1.22-1.48-1.23-1.5-4.17-4.9-2.05 7.54-.74 2.67-.76 2.65-.78 2.62-.8 2.57-.8 2.55-.84 2.5-.84 2.46-.87 2.43-.88 2.38-.88 2.35-.9 2.3-.9 2.25-.92 2.2-.94 2.14-.93 2.1-.95 2.05-.96 1.98-.96 1.93-.98 1.88-.96 1.82-.98 1.74-.98 1.7-.98 1.63-.98 1.56-1 1.5-.97 1.42-.98 1.35-.97 1.28-.98 1.2-.97 1.13-.96 1.05-.95.97-.96.88-.94.8-.93.73-.92.64-.92.55-.9.46-.88.37-.88.28-.2.05-.42.08-.22.02-.43.04h-.68l-.23-.02-.24-.02-.23-.03-.23-.04-.47-.1-.23-.06-.24-.06-.23-.08-.23-.07-.47-.18-.7-.3-.44-.22-.23-.12-.65-.4-.2-.14-.6-.45-.57-.5-.18-.17-.34-.38-.18-.2-.2-.25-.18-.26-.17-.28-.2-.3-.17-.32-.18-.33-.18-.36-.34-.76-.34-.82-.16-.43-.32-.9-.32-.94-.14-.5-.15-.5-.28-1.02-.26-1.06-.13-.54-.23-1.1-.22-1.12-.1-.56-.18-1.12-.08-.57-.14-1.12-.05-.56-.1-1.13-.08-1.1-.01-.54-.02-.4-.02-.44v-4.98l.03-1.26.01-.64.02-.64.01-.65.06-1.92.05-1.25.03-.6.02-.6.03-.58.02-.56.04-.54.06-1 .03-.47.03-.43.03-.4.03-.37.04-.34.03-.3.03-.26.04-.22.03-.18.03-.13.03-.08.03-.04.02.01.02-.01.03.02h.03l.03.02.03.01.1.05.03.03.16.1.05.03.12.08.07.04.07.05.3.2.1.06.07.05.1.06.1.07.08.05.2.14.1.06.3.2.3.22.2.14.2.16 2.5 1.85-.24 5.9-.03.64-.01.66v.65l-.02 1.3v1.3l.03 1.93.04 1.28.03.63.02.62.04.6.04.62.12 1.8.1 1.14.06.56.05.55.13 1.06.14 1.02.08.48.07.47.08.46.08.43.1.44.1.4.08.4.1.37.1.36.1.34.2.6.2.55.22.52.2.5.22.45.23.42.24.38.24.36.24.32.26.3.26.26.28.22.27.2.28.15.3.13.3.08.3.06.3.02h.33l.33-.05.34-.08.36-.12.35-.
168714.38-.18.38-.22.4-.24.4-.3.42-.32.42-.35.44-.4.44-.42.45-.46.47-.5.48-.53.5-.56.5-.6.5-.63.53-.67.55-.7.55-.73.57-.77.6-.87.63-.9.62-.95.63-.97.62-1.02.63-1.05.64-1.1.63-1.13.64-1.15.63-1.2.63-1.23.64-1.26 1.25-2.6.63-1.35.63-1.37.63-1.4.63-1.42.62-1.46.62-1.47.6-1.5.6-1.52.6-1.54.6-1.56 1.2-3.2.6-1.62.57-1.64.58-1.64.57-1.67.56-1.67.55-1.7.54-1.7.53-1.7.52-1.73.52-1.74.5-1.74.5-1.75.96-3.52 2.2-8.17-5.1-5.15-2.6-2.6-.4-.38-.18-.2-.2-.18-.2-.2-.18-.17-.18-.2-.36-.35-.16-.17-.66-.62-.14-.14-.14-.15-.28-.26-.12-.13-.12-.12-.12-.1-.3-.3-.1-.08-2.14-1.95-18.45 5.42-1.48.46-1.46.44-1.43.46-1.4.44-1.38.45-1.36.44-1.34.45-1.32.45-1.3.45-2.52.88-1.23.46-1.2.44-1.2.45-1.18.46-1.15.45-1.14.46-1.13.47-2.2.92-1.08.47-1.06.47-1.05.47-2.06.96-2 1-1.96 1-1.92 1.02-.95.52-.93.5-.93.54-1.97.98-.9.55-.9.56-.86.53-.82.53-.8.53-.76.52-.72.5-.7.5-.68.5-.63.5-.6.48-.58.5-.54.48-.5.46-.48.47-.45.45-.4.45-.4.44-.35.43-.32.43-.3.42-.26.4-.22.4-.2.4-.16.4-.13.38-.1.36-.07.36-.04.35v.35l.03.33.07.33.1.3.13.3.17.3.2.3.23.28.26.26.3.25.33.25.36.24.4.22.3.16.32.15.35.15.36.15.37.13.4.14.42.13.42.12.45.13.47.12.48.1 1 .2.52.1.54.1.56.1.57.08.58.08.6.08.6.07 1.25.13.64.05 1.32.1.67.04.68.03.7.04.7.02.72.02 1.44.02h2.22l.75-.02.76-.01.76-.02.77-.03.78-.04.14-.01.15-.01h.14l.15-.01.28-.02.28-.01h.15.56.13l.14-.01.52-.01.12-.01h.26l.1-.01h.24l.1-.01h.1l.2-.01.1-.01.1.01h.08l.08-.01h.5l.1.03.1.04.1.06.1.07.12.08.12.1.14.1.15.1.14.12.15.14.16.15.63.63.16.17.48.54.16.2.3.37.14.18.28.35.12.18.12.17.22.32.1.16.1.14.13.26.05.12.04.1.03.1.01.1v.07l-.02.06-.03.03-.25.07h-.08l-.2.02-.3.06h-.13l-.28.03-.14.02-.16.01-.16.02h-.17l-.35.03-.37.04-.2.01-.2.03-.62.04-.22.02-.45.04h-.23l-.23.02-.72.04h-.25l-.23.01-.25.02-1.03.05-1 .06-1 .03-.98.04-.97.03-1.9.02H26.3l-.9-.02h-.9l-.87-.04-.87-.03-1.67-.1-.82-.07-.8-.06-.8-.08-1.54-.18-1.48-.2-.7-.1-1.4-.26-.67-.14-.66-.15-.63-.15-.63-.17-1.2-.34-.58-.2-.55-.2-.54-.2-.53-.2-.52-.22-.5-.23-.48-.22-.46-.24-.45-.26-.4-.23-.4-.25-.38-.25-.35-.25-.34-.25-.33-.27-.6-.52-.28-.27-.25-.27-.24-.28-.23-.28-.4-.6-.18-.3-.16-.3-.14-.3-.13-.3-.1-.3-.17-.63-.05-.32-.05-.33-.03-.34-.01-.33.01-.35.02-.35.04-.34.05-.36.07-.36.08-.37.1-.37.12-.37.13-.38.15-.4.17-.4.18-.4.4-.8.22-.4.74-1.17.4-.57.44-.6.47-.58.5-.6.53-.6 1.14-1.18.62-.6.64-.6.68-.6.7-.6.73-.6.76-.6 1.6-1.2.84-.6.9-.6 1.83-1.2.96-.6 1-.6 1.02-.6 1.04-.6 1.08-.6 1.1-.6 1.13-.6 1.15-.6 1.2-.6 1.22-.6 1.23-.6 1.27-.6 1.3-.6 1.32-.6 1.35-.6 1.38-.6 1.4-.6 1.43-.6 1.46-.6.65-.27.7-.28.77-.3 1.67-.62.9-.34 1.9-.7 1-.35 1.03-.37 1.07-.37 1.07-.38 1.1-.37 1.1-.38 1.12-.38 1.14-.38 1.13-.38 2.26-.75 5.45-1.76 1.04-.32 1-.3.96-.3 1.83-.55.85-.25.8-.23.75-.2.7-.2.63-.17.58-.14.5-.13.44-.1.37-.08.3-.05.22-.01 1.55-.03-1.57-1.52-.26-.24-.3-.28-.32-.28-.36-.3-.38-.34-.4-.35-.45-.38-.46-.4-.5-.4-.5-.42-.54-.43-.54-.45-.58-.46-1.2-.94-.6-.48-1.28-1-.65-.5-1.32-1.02-1.34-1.02-.7-.5-.67-.5-.68-.5-1.34-1-.66-.5-.66-.48-.65-.47-.64-.46-.63-.46-.6-.43-.6-.42-.58-.42-.56-.4-.56-.38-.52-.36-.52-.34-1.54-1-.78-.5-.76-.48-1.54-.92-.77-.45-.76-.43-1.52-.84-.75-.4-.74-.4-.74-.38-.72-.36-1.44-.68-.7-.32-1.38-.6-.67-.27-.66-.27-.65-.25-.64-.23-.6-.22-1.2-.4-.58-.17-.55-.15-.54-.14-.53-.12-.5-.1-.48-.08-.48-.07-.44-.05-.43-.03h-.78l-.36.03-.34.04-.3.07-.35.1-.33.14-.3.2-.27.22-.23.25-.2.28-.18.32-.15.35-.13.38-.1.42-.06.44-.04.48-.01.5.02.53.05.56.06.6.1.62.12.63.15.67.18.7.2.73.22.73.55 1.57.3.8.33.83.36.86.4.88.4.9.43.9.47.94.48.94.5.97.53.98.56 1 .58 1.02.6 1.03.64 1.04.65 1.06.67 1.07 2.8 4.43-1.25 2.86-.05.12-.1.22-.05.13-.1.23-.06.1-.05.12-.05.1-.05.12-.04.1-.1.2-.04.1-.1.2-.03.1-.05.1-.1.24-.05.08-.03.07-.13.26-.1.16-.02.04-.03.04-.05.1-.07.07h-.05l-.16-.16-.12-.13-.13-.18-.16-.2-.18-.24-.2-.28-.22-.3-.23-.33-.5-.75-.27-.4-.28-.43-.3-.45L30 56l-.63-1-.66-1.03-1-1.6-.34-.56-.33-.55-.34-.54-.65-1.1-.33-.54-.3-.53-.32-.53-.58-1-.28-.5-.27-.47-.25-.46-.25-.43-.22-.4-.4-.76-.26-.48-.25-.5-.24-.5-.48-1.02-.22-.52-.45-1.05-.6-1.6-.2-.54-.18-.53-.2-.53-.34-1.06-.16-.54-.3-1.04-.28-1.03-.24-1-.1-.5-.2-.96-.08-.47-.14-.9-.06-.43-.04-.42-.04-.4-.02-.4v-.38l-.01-.36.01-.36v-.33l.06-.62.05-.27.1-.5.07-.24.08-.24.08-.25.08-.23.2-.48.2-.46.24-.46.12-.2.27-.44.14-.2.44-.6.16-.2.32-.37.17-.17.17-.18.17-.16.18-.17.37-.3.18-.14.2-.14L22 19l.38-.24.6-.3.4-.16.4-.13.73-.15.77-.1.8-.07.86-.01.9.03.94.1.96.13 1 .2 1.04.22 1.07.27 1.12.33 1.14.36 1.17.42 1.2.44 1.24.5 1.26.54 1.3.6 1.3.63 1.34.66 1.37.7 1.38.74 1.4.78 1.43.83 1.45.86 1.46.9 1.48.94 1.5.98 1.5 1 1.53 1.05 1.54 1.08 1.55 1.12 1.56 1.15 1.58 1.17 1.58 1.22 1.6 1.25 1.6 1.28 1.6 1.3 1.6 1.34 1.6 1.37 1.6 1.4 5.42 4.82L88.7 49l1.12-.2 1.07-.2.52-.1.75-.15.24-.03.46-.1.22-.04.43-.07.4-.07.2-.03.18-.03.35-.05.16-.02.15-.03.15-.02.27-.04.12-.01
1687h.1.56l.08-.02.1-.04.08-.04.1-.06.16-.16.07-.1.08-.1.07-.13.07-.15.06-.16.08-.18.07-.2.06-.22.06-.23.06-.25.06-.27.07-.28.05-.3.06-.32.05-.34.06-.36.05-.4.06-.4.05-.43.05-.44.06-.47.05-.5.04-.5.05-.53.05-.56.05-.58.05-.6.05-.63.04-.65.05-.68.05-.7.05-.73.04-.75.06-1.1.05-1.1.04-1.06.06-2.1v-3l-.02-.97-.02-.96-.08-1.85-.05-.9-.07-.88-.07-.86-.08-.84-.1-.82-.1-.8-.1-.77-.1-.75-.13-.72-.12-.7-.14-.67-.15-.65-.15-.62-.16-.6-.17-.57-.17-.54-.2-.52-.2-.48-.2-.47-.2-.42-.22-.4-.22-.37-.23-.34-.23-.3-.24-.27-.25-.24-.25-.2-.27-.17-.26-.13-.3-.1-.3-.11-.3-.05-.3-.02-.3.01L92 6l-.33.05-.34.1-.34.12-.35.14-.72.4-.37.24-.38.26-.38.3-.4.32-.4.35-.4.38-.4.4-.4.44-.44.46-.43.48-.44.5-.45.55-.46.56-.45.6-.47.62-.48.64-.47.7-.5.7-.5.72-.5.77-.5.78-.5.8-.5.84-.53.86-1.06 1.8-.54.95-4.72 8.25-3.1.4-.1.01-.12.01h-.1-.12-.1-.1-.1-.8-.08-.07l-.1-.01h-.07l-.07-.01-.2-.04h-.1l-.1-.04h-.04l-.1-.06-.03-.02-.01-.03-.02-.02-.01-.04v-.03l.02-.12.03-.15.06-.2.07-.22.1-.24.1-.28.12-.3.15-.32L68 29l.17-.37.18-.4.2-.4.2-.43.2-.44.22-.45.24-.47.47-.98.5-1 .26-.5.26-.52.8-1.52.28-.5.27-.5.26-.5.28-.5.52-.94.26-.45.25-.44.25-.42.25-.4.23-.4.22-.36.22-.34.2-.33.2-.3.44-.65.88-1.27.43-.6.86-1.18.83-1.1.42-.54 1.22-1.53.4-.48.4-.46.4-.45.4-.43.78-.82.4-.4.76-.74.38-.34.74-.66.74-.6.37-.28.36-.27L87 2l.7-.45.36-.2.35-.2.35-.18.34-.16.36-.15.33-.15.34-.12.34-.1.33-.1.42-.1.22-.04.2-.02.22-.02.44-.02h.23l.23.01.22.02zM93.4 54l-1.16.23-1.25.3-1.2.35-1 .34-.76.3-.45.26-.08.2 1.14 1.27 1.7 1.75 1.82 1.78 1.48 1.37.7.54.16-.26.22-.63.26-.95.3-1.2.28-1.37.28-1.57.15-1.23v-.87l-.13-.56-.27-.24-.44-.04-.75.06-1 .15zm-48.7-.1l-4.34 1.68 1.3-2.42c1.68-3.17 5.8-7.83 9.24-10.44.18-.15 1.08-.86 2.72-2.15l2.32 1.64c1.27.9 2.35 1.77 2.4 2 .05.18-.83 1-1.94 1.7-1.16.76-3.28 2.5-4.73 3.86-1.84 1.8-3.86 2.98-6.97 4.14zm24.9 58.64c-10.8-1.44-21.16-8-27.37-17.4-2.63-4.02-5.8-12.95-6-16.85-.12-2.35.07-2.6 2.43-3.7 1.4-.63 2.62-1.1 2.76-1.06.1.1.5 2.38.8 5.16 1.1 8.96 6.72 17.88 14.56 22.95 4.32 2.86 10.6 5 15.18 5.26 1.78.1 3.3.4 3.33.6.07.25-.43 1.54-1.1 2.95l-1.18 2.6-3.43-.5zm4.3-76.72c-1.95-1.94 9.3-.5 15.27 2 3.42 1.4 3.68 1.6 3.44 3.15-.18 1.3-5.97 1.87-9.46.92-2.5-.68-6.43-3.26-9.25-6.06zm24.78 60.43c1.57-1.66 3.27-3.8 3.7-4.6 1.06-2.1 1.5-2.1 2.76-.36.56.88 1.35 1.9 1.74 2.45.5.64.01 1.67-1.63 3.8-3.97 5.2-13.04 12.18-12.28 9.44 1.38-4.5 3.2-8.05 5.72-10.72zm11.5-24.45c-1.94-2.4-2.9-4.28-3.57-6.82-1.68-6.27.9-12.08 3.24-7.47 1.32 2.5 3.28 10.33 3.57 14.07.17 1.83.08 3.4-.1 3.46-.24.06-1.6-1.45-3.13-3.24z"/></defs><g fill="url(#light-theme-gradient)"><use xlink:href="#light-theme-logo"/></g></svg> 1688 </span> 1689 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 1690 </button> 1691 </p> 1692 <div data-accordion-target="content" data-state="closed" id="accordion-content-5" role="region" aria-labelledby="accordion-trigger-5" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 1693 <div class="overflow-hidden min-h-0"> 1694 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 1695 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1696 <a href="https://www.embla-carousel.com/get-started/cdn/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Embla Carousel</a> is a lightweight carousel library with fluid motion and swipe gestures. It is used for the carousel component. 1697 </p> 1698 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1699 <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1699k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 1700 <!-- Tab Controls --> 1701 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 1702 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1703 Importmap 1704 </button> 1705 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1705k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1706 NPM 1707 </button> 1708 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1709 Yarn 1710 </button> 1711 </div> 1712 1713 <!-- Importmap Panel --> 1714 <div data-tabs-target="panel" role="tabpanel"> 1715 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1716 <div class="p-1 text-sm bg-neutral-900"> 1717 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 1718 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1719 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 1720 Add to config/importmap.rb 1721 </span> 1722 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1723 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1724 Add to config/importmap.rb 1725 </span> 1726 </button> 1727 </div> 1728 </div> 1729 <div class="relative"> 1730 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js" 1731pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"</code></pre> 1732 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1733 data-controller="clipboard" 1734 data-clipboard-text='pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js" 1735pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"' 1736 data-clipboard-error-message-value="Copy Failed!" 1737 data-clipboard-show-tooltip-value="false" 1738 data-clipboard-tooltip-duration-value="1500"> 1739 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1740 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1741 Copy 1742 </span>
1743 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1744 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1745 Copied! 1746 </span> 1747 </button> 1748 </div> 1749 </div> 1750 1751 <!-- NPM Panel --> 1752 <div data-tabs-target="panel" role="tabpanel"> 1753 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1754 <div class="p-1 text-sm bg-neutral-900"> 1755 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1756 <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"><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> 1757 Terminal 1758 </div> 1759 </div> 1760 </div> 1761 <div class="relative"> 1762 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install embla-carousel 1763npm install embla-carousel-wheel-gestures</code></pre> 1764 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1765 data-controller="clipboard" 1766 data-clipboard-text="npm install embla-carousel 1767npm install embla-carousel-wheel-gestures" 1768 data-clipboard-error-message-value="Copy Failed!" 1769 data-clipboard-show-tooltip-value="false" 1770 data-clipboard-tooltip-duration-value="1500"> 1771 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1772 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1773 Copy 1774 </span> 1775 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1776 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1777 Copied! 1778 </span> 1779 </button> 1780 </div> 1781 </div> 1782 1783 <!-- Yarn Panel --> 1784 <div data-tabs-target="panel" role="tabpanel"> 1785 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1786 <div class="p-1 text-sm bg-neutral-900"> 1787 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1788 <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"><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> 1789 Terminal 1790 </div> 1791 </div> 1792 </div> 1793 <div class="relative"> 1794 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add embla-carousel 1795yarn add embla-carousel-wheel-gestures</code></pre> 1796 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1797 data-controller="clipboard" 1798 data-clipboard-text="yarn add embla-carousel 1799yarn add embla-carousel-wheel-gestures" 1800 data-clipboard-error-message-value="Copy Failed!" 1801 data-clipboard-show-tooltip-value="false" 1802 data-clipboard-tooltip-duration-value="1500">
1803 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1804 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1805 Copy 1806 </span> 1807 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1808 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1809 Copied! 1810 </span> 1811 </button> 1812 </div> 1813 </div> 1814</div> 1815 1816 </div> 1817 </div> 1818 </div> 1819 </div> 1820 </div> 1821 1822 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 1823 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 1824 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-6" aria-expanded="false" data-state="closed" id="accordion-trigger-6" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 1825 <span class="flex items-center gap-2"> 1826 1.6. Shoelace color picker 1827 <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 127 141" version="1.1"> 1828 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 1829 <g fill-rule="nonzero" fill="#0ea5e9"> 1830 <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.7
18305,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"/> 1831 </g> 1832 </g> 1833 </svg> 1834 </span> 1835 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 1836 </button> 1837 </p> 1838 <div data-accordion-target="content" data-state="closed" id="accordion-content-6" role="region" aria-labelledby="accordion-trigger-6" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 1839 <div class="overflow-hidden min-h-0"> 1840 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 1841 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1842 <a href="https://shoelace.style/components/color-picker" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Shoelace color picker</a> is a lightweight color picker with custom styling. We use it in the color picker component. 1843 </p> 1844 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1845 <div> 1846 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1847 <div class="p-1 text-sm bg-neutral-900"> 1848 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="app/views/layouts/application.html.erb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 1849 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1850 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 1851 Add to your layout's <head> section 1852 </span>
1853 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1854 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1855 Add to your layout's <head> section 1856 </span> 1857 </button> 1858 </div> 1859 </div> 1860 <div class="relative"> 1861 <pre data-controller="highlight" class="language-erb !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar"><!-- Shoelace --> 1862<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script> 1863<link 1864 rel="stylesheet" 1865 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" 1866/> 1867<link 1868 rel="stylesheet" 1869 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css" 1870/> 1871</code></pre> 1872 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1873 data-controller="clipboard" 1874 data-clipboard-text='<!-- Shoelace --> 1875<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script> 1876<link 1877 rel="stylesheet" 1878 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" 1879/> 1880<link 1881 rel="stylesheet" 1882 href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css" 1883/> 1884' 1885 data-clipboard-error-message-value="Copy Failed!" 1886 data-clipboard-show-tooltip-value="false" 1887 data-clipboard-tooltip-duration-value="1500"> 1888 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1889 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1890 Copy 1891 </span> 1892 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1893 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1894 Copied! 1895 </span> 1896 </button> 1897 </div> 1898</div> 1899 1900 </div> 1901 </div> 1902 </div> 1903 </div> 1904 </div> 1905 1906 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 1907 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 1908 <button type="button" data-accordion-target="trigger" data-action="click->
1908accordion#toggle" aria-controls="accordion-content-7" aria-expanded="false" data-state="closed" id="accordion-trigger-7" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 1909 <span class="flex items-center gap-2"> 1910 1.7. Tom Select 1911 <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.25,13H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,16H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,2H3.75c-1.517,0-2.75,1.233-2.75,2.75v2.5c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75v-2.5c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,6.5H3.75c-.689,0-1.25-.561-1.25-1.25v-2.5c0-.689,.561-1.25,1.25-1.25h4.75v5Zm5.833-2.833l-1.25,1.667c-.078,.105-.202,.167-.333,.167s-.255-.062-.333-.167l-1.25-1.667c-.095-.126-.11-.295-.039-.436,.071-.141,.215-.23,.373-.23h2.5c.158,0,.302,.089,.373,.23,.07,.141,.055,.31-.039,.436Z"></path></g></svg> 1912 </span> 1913 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 1914 </button> 1915 </p> 1916 <div data-accordion-target="content" data-state="closed" id="accordion-content-7" role="region" aria-labelledby="accordion-trigger-7" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 1917 <div class="overflow-hidden min-h-0"> 1918 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 1919 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1920 <a href="https://tom-select.js.org/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Tom Select</a> is a custom select component. We use it in the select & combobox components. 1921 </p> 1922 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 1923 <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
1923k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 1924 <!-- Tab Controls --> 1925 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 1926 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1927 Importmap 1928 </button> 1929 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
1929k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1930 NPM 1931 </button> 1932 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 1933 Yarn 1934 </button> 1935 </div> 1936 1937 <!-- Importmap Panel --> 1938 <div data-tabs-target="panel" role="tabpanel"> 1939 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1940 <div class="p-1 text-sm bg-neutral-900"> 1941 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 1942 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1943 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 1944 Add to config/importmap.rb 1945 </span> 1946 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1947 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1948 Add to config/importmap.rb 1949 </span> 1950 </button> 1951 </div> 1952 </div> 1953 <div class="relative"> 1954 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "tom-select", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"</code></pre> 1955 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1956 data-controller="clipboard" 1957 data-clipboard-text='pin "tom-select", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"' 1958 data-clipboard-error-message-value="Copy Failed!" 1959 data-clipboard-show-tooltip-value="false" 1960 data-clipboard-tooltip-duration-value="1500"> 1961 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1962 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1963 Copy 1964 </span>
1965 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1966 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1967 Copied! 1968 </span> 1969 </button> 1970 </div> 1971 </div> 1972 1973 <!-- NPM Panel --> 1974 <div data-tabs-target="panel" role="tabpanel"> 1975 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 1976 <div class="p-1 text-sm bg-neutral-900"> 1977 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 1978 <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"><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> 1979 Terminal 1980 </div> 1981 </div> 1982 </div> 1983 <div class="relative"> 1984 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install tom-select</code></pre> 1985 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 1986 data-controller="clipboard" 1987 data-clipboard-text="npm install tom-select" 1988 data-clipboard-error-message-value="Copy Failed!" 1989 data-clipboard-show-tooltip-value="false" 1990 data-clipboard-tooltip-duration-value="1500"> 1991 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 1992 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 1993 Copy 1994 </span> 1995 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 1996 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 1997 Copied! 1998 </span> 1999 </button> 2000 </div> 2001 </div> 2002 2003 <!-- Yarn Panel --> 2004 <div data-tabs-target="panel" role="tabpanel"> 2005 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2006 <div class="p-1 text-sm bg-neutral-900"> 2007 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2008 <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"><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> 2009 Terminal 2010 </div> 2011 </div> 2012 </div> 2013 <div class="relative"> 2014 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add tom-select</code></pre> 2015 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2016 data-controller="clipboard" 2017 data-clipboard-text="yarn add tom-select" 2018 data-clipboard-error-message-value="Copy Failed!" 2019 data-clipboard-show-tooltip-value="false" 2020 data-clipboard-tooltip-duration-value="1500">
2021 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2022 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2023 Copy 2024 </span> 2025 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2026 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2027 Copied! 2028 </span> 2029 </button> 2030 </div> 2031 </div> 2032</div> 2033 2034<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text"><head></code> HTML tag:</p> 2035 2036<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2037 <div class="p-1 text-sm bg-neutral-900"> 2038 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" 2039 data-controller="clipboard" 2040 data-clipboard-text="application.html.erb" 2041 data-clipboard-success-message-value="Controller Copied" 2042 data-clipboard-error-message-value="Copy Failed!" 2043 data-clipboard-show-tooltip-value="false" 2044 data-clipboard-tooltip-duration-value="1500"> 2045 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2046 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2047 application.html.erb 2048 </span> 2049 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2050 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2051 application.html.erb 2052 </span> 2053 </button> 2054 </div> 2055</div> 2056<div class="relative"> 2057 <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet"></code></pre> 2058 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2059 data-controller="clipboard" 2060 data-clipboard-text='<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">' 2061 data-clipboard-success-message-value="CSS Copied" 2062 data-clipboard-error-message-value="Copy Failed!" 2063 data-clipboard-show-tooltip-value="false" 2064 data-clipboard-tooltip-duration-value="1500">
2065 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2066 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2067 Copy 2068 </span> 2069 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2070 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2071 Copied! 2072 </span> 2073 </button> 2074</div> 2075 2076 </div> 2077 </div> 2078 </div> 2079 </div> 2080 </div> 2081 2082 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 2083 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 2084 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-8" aria-expanded="false" data-state="closed" id="accordion-trigger-8" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 2085 <span class="flex items-center gap-2"> 2086 1.8. Air Datepicker 2087 <img alt="Air Datepicker" class="size-3.5" src="/assets/air-datepicker-logo-dd6584168d2424bb14484ea9e38af898c268776ac0ecacca5e8937f5c4b5966e.webp" /> 2088 </span> 2089 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 2090 </button> 2091 </p> 2092 <div data-accordion-target="content" data-state="closed" id="accordion-content-8" role="region" aria-labelledby="accordion-trigger-8" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 2093 <div class="overflow-hidden min-h-0"> 2094 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 2095 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2096 <a href="https://air-datepicker.com/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Air Datepicker</a> is a date picker component. We use it in the date picker component. 2097 </p> 2098 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2099 2100<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2100k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 2101 <!-- Tab Controls --> 2102 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 2103 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2104 Importmap 2105 </button> 2106 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2106k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2107 NPM 2108 </button> 2109 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2110 Yarn 2111 </button> 2112 </div> 2113 2114 <!-- Importmap Panel --> 2115 <div data-tabs-target="panel" role="tabpanel"> 2116 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2117 <div class="p-1 text-sm bg-neutral-900"> 2118 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 2119 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2120 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2121 Add to config/importmap.rb 2122 </span> 2123 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2124 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2125 Add to config/importmap.rb 2126 </span> 2127 </button> 2128 </div> 2129 </div> 2130 <div class="relative"> 2131 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "air-datepicker", to: "https://esm.sh/[email protected]" 2132pin "air-datepicker/locale/en", to: "https://esm.sh/[email protected]/locale/en" 2133</code></pre> 2134 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2135 data-controller="clipboard" 2136 data-clipboard-text='pin "air-datepicker", to: "https://esm.sh/[email protected]" 2137pin "air-datepicker/locale/en", to: "https://esm.sh/[email protected]/locale/en" 2138' 2139 data-clipboard-error-message-value="Copy Failed!" 2140 data-clipboard-show-tooltip-value="false" 2141 data-clipboard-tooltip-duration-value="1500"> 2142 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2143 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2144 Copy 2145 </span>
2146 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2147 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2148 Copied! 2149 </span> 2150 </button> 2151 </div> 2152 </div> 2153 2154 <!-- NPM Panel --> 2155 <div data-tabs-target="panel" role="tabpanel"> 2156 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2157 <div class="p-1 text-sm bg-neutral-900"> 2158 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2159 <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"><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> 2160 Terminal 2161 </div> 2162 </div> 2163 </div> 2164 <div class="relative"> 2165 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install air-datepicker</code></pre> 2166 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2167 data-controller="clipboard" 2168 data-clipboard-text="npm install air-datepicker" 2169 data-clipboard-error-message-value="Copy Failed!" 2170 data-clipboard-show-tooltip-value="false" 2171 data-clipboard-tooltip-duration-value="1500"> 2172 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2173 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2174 Copy 2175 </span> 2176 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2177 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2178 Copied! 2179 </span> 2180 </button> 2181 </div> 2182 </div> 2183 2184 <!-- Yarn Panel --> 2185 <div data-tabs-target="panel" role="tabpanel"> 2186 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2187 <div class="p-1 text-sm bg-neutral-900"> 2188 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2189 <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"><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> 2190 Terminal 2191 </div> 2192 </div> 2193 </div> 2194 <div class="relative"> 2195 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add air-datepicker</code></pre> 2196 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2197 data-controller="clipboard" 2198 data-clipboard-text="yarn add air-datepicker" 2199 data-clipboard-error-message-value="Copy Failed!" 2200 data-clipboard-show-tooltip-value="false" 2201 data-clipboard-tooltip-duration-value="1500">
2202 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2203 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2204 Copy 2205 </span> 2206 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2207 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2208 Copied! 2209 </span> 2210 </button> 2211 </div> 2212 </div> 2213</div> 2214 2215<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text"><head></code> HTML tag:</p> 2216 2217<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2218 <div class="p-1 text-sm bg-neutral-900"> 2219 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" 2220 data-controller="clipboard" 2221 data-clipboard-text="application.html.erb" 2222 data-clipboard-success-message-value="Controller Copied" 2223 data-clipboard-error-message-value="Copy Failed!" 2224 data-clipboard-show-tooltip-value="false" 2225 data-clipboard-tooltip-duration-value="1500"> 2226 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2227 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2228 application.html.erb 2229 </span> 2230 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2231 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2232 application.html.erb 2233 </span> 2234 </button> 2235 </div> 2236</div> 2237<div class="relative"> 2238 <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css"></code></pre> 2239 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2240 data-controller="clipboard" 2241 data-clipboard-text='<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css">' 2242 data-clipboard-success-message-value="CSS Copied" 2243 data-clipboard-error-message-value="Copy Failed!" 2244 data-clipboard-show-tooltip-value="false" 2245 data-clipboard-tooltip-duration-value="1500">
2246 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2247 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2248 Copy 2249 </span> 2250 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2251 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2252 Copied! 2253 </span> 2254 </button> 2255</div> 2256 2257 </div> 2258 </div> 2259 </div> 2260 </div> 2261 </div> 2262 2263 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 2264 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 2265 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-9" aria-expanded="false" data-state="closed" id="accordion-trigger-9" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 2266 <span class="flex items-center gap-2"> 2267 1.9. Emoji Mart 2268 <img alt="Emoji Mart by Missive" class="size-3.5" src="/assets/missive-logo-96e2465ff6c400fbfc640f66b1bd8db700e2e9b5115026543035b7afb534a531.webp" /> 2269 </span> 2270 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 2271 </button> 2272 </p> 2273 <div data-accordion-target="content" data-state="closed" id="accordion-content-9" role="region" aria-labelledby="accordion-trigger-9" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 2274 <div class="overflow-hidden min-h-0"> 2275 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 2276 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2277 <a href="https://learn.missiveapp.com/open/emoji-mart" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Emoji Mart by Missive</a> is a emoji picker component. We use it in the emoji picker component. 2278 </p> 2279 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2280 <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2280k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 2281 <!-- Tab Controls --> 2282 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 2283 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2284 Importmap 2285 </button> 2286 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2286k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2287 NPM 2288 </button> 2289 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2290 Yarn 2291 </button> 2292 </div> 2293 2294 <!-- Importmap Panel --> 2295 <div data-tabs-target="panel" role="tabpanel"> 2296 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2297 <div class="p-1 text-sm bg-neutral-900"> 2298 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2299 <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"><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> 2300 config/importmap.rb 2301 </div> 2302 </div> 2303 </div> 2304 <div class="relative"> 2305 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "emoji-mart", to: "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js" 2306pin "@emoji-mart/data", to: "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm"</code></pre> 2307 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2308 data-controller="clipboard" 2309 data-clipboard-text='pin "emoji-mart", to: "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js" 2310pin "@emoji-mart/data", to: "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm"' 2311 data-clipboard-error-message-value="Copy Failed!" 2312 data-clipboard-show-tooltip-value="false" 2313 data-clipboard-tooltip-duration-value="1500"> 2314 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2315 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2316 Copy 2317 </span> 2318 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2319 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2320 Copied! 2321 </span> 2322 </button> 2323 </div> 2324 </div> 2325 2326 <!-- NPM Panel --> 2327 <div data-tabs-target="panel" role="tabpanel"> 2328 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2329 <div class="p-1 text-sm bg-neutral-900"> 2330 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2331 <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"><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> 2332 Terminal 2333 </div> 2334 </div> 2335 </div> 2336 <div class="relative"> 2337 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install emoji-mart @emoji-mart/data</code></pre> 2338 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2339 data-controller="clipboard" 2340 data-clipboard-text="npm install emoji-mart @emoji-mart/data" 2341 data-clipboard-error-message-value="Copy Failed!" 2342 data-clipboard-show-tooltip-value="false" 2343 data-clipboard-tooltip-duration-value="1500">
2344 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2345 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2346 Copy 2347 </span> 2348 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2349 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2350 Copied! 2351 </span> 2352 </button> 2353 </div> 2354 </div> 2355 2356 <!-- Yarn Panel --> 2357 <div data-tabs-target="panel" role="tabpanel"> 2358 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2359 <div class="p-1 text-sm bg-neutral-900"> 2360 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2361 <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"><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> 2362 Terminal 2363 </div> 2364 </div> 2365 </div> 2366 <div class="relative"> 2367 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add emoji-mart @emoji-mart/data</code></pre> 2368 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2369 data-controller="clipboard" 2370 data-clipboard-text="yarn add emoji-mart @emoji-mart/data" 2371 data-clipboard-error-message-value="Copy Failed!" 2372 data-clipboard-show-tooltip-value="false" 2373 data-clipboard-tooltip-duration-value="1500"> 2374 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2375 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2376 Copy 2377 </span> 2378 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2379 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2380 Copied! 2381 </span> 2382 </button> 2383 </div> 2384 </div> 2385</div> 2386 2387 </div> 2388 </div> 2389 </div> 2390 </div> 2391 </div> 2392 2393 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dar
2393k:hover:bg-neutral-700/50 rounded-lg"> 2394 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 2395 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-9" aria-expanded="false" data-state="closed" id="accordion-trigger-9" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 2396 <span class="flex items-center gap-2"> 2397 1.10. PhotoSwipe 2398 <img alt="PhotoSwipe" class="size-3.5 rounded" src="/assets/photoswipe-logo-b3e92230fc472dfc24be0c4c595b1988efbbfdc9db889d7e9e9fc4f02c5c41c6.webp" /> 2399 </span> 2400 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 2401 </button> 2402 </p> 2403 <div data-accordion-target="content" data-state="closed" id="accordion-content-9" role="region" aria-labelledby="accordion-trigger-9" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 2404 <div class="overflow-hidden min-h-0"> 2405 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 2406 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2407 <a href="https://photoswipe.com/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">PhotoSwipe</a> is a image gallery component. We use it in the lightbox component. 2408 </p> 2409 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2410 <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2410k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 2411 <!-- Tab Controls --> 2412 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 2413 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2414 Importmap 2415 </button> 2416 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2416k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2417 NPM 2418 </button> 2419 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2420 Yarn 2421 </button> 2422 </div> 2423 2424 <!-- Importmap Panel --> 2425 <div data-tabs-target="panel" role="tabpanel"> 2426 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2427 <div class="p-1 text-sm bg-neutral-900"> 2428 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Controller Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 2429 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2430 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2431 Add to config/importmap.rb 2432 </span> 2433 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2434 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2435 Add to config/importmap.rb 2436 </span> 2437 </button> 2438 </div> 2439 </div> 2440 <div class="relative"> 2441 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "photoswipe", to: "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js"</code></pre> 2442 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2443 data-controller="clipboard" 2444 data-clipboard-text='pin "photoswipe", to: "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js"' 2445 data-clipboard-error-message-value="Copy Failed!" 2446 data-clipboard-show-tooltip-value="false" 2447 data-clipboard-tooltip-duration-value="1500"> 2448 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2449 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2450 Copy 2451 </span>
2452 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2453 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2454 Copied! 2455 </span> 2456 </button> 2457 </div> 2458 </div> 2459 2460 <!-- NPM Panel --> 2461 <div data-tabs-target="panel" role="tabpanel"> 2462 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2463 <div class="p-1 text-sm bg-neutral-900"> 2464 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2465 <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"><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> 2466 Terminal 2467 </div> 2468 </div> 2469 </div> 2470 <div class="relative"> 2471 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install photoswipe</code></pre> 2472 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2473 data-controller="clipboard" 2474 data-clipboard-text="npm install photoswipe" 2475 data-clipboard-error-message-value="Copy Failed!" 2476 data-clipboard-show-tooltip-value="false" 2477 data-clipboard-tooltip-duration-value="1500"> 2478 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2479 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2480 Copy 2481 </span> 2482 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2483 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2484 Copied! 2485 </span> 2486 </button> 2487 </div> 2488 </div> 2489 2490 <!-- Yarn Panel --> 2491 <div data-tabs-target="panel" role="tabpanel"> 2492 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2493 <div class="p-1 text-sm bg-neutral-900"> 2494 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2495 <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"><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> 2496 Terminal 2497 </div> 2498 </div> 2499 </div> 2500 <div class="relative"> 2501 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add photoswipe</code></pre> 2502 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2503 data-controller="clipboard" 2504 data-clipboard-text="yarn add photoswipe" 2505 data-clipboard-error-message-value="Copy Failed!" 2506 data-clipboard-show-tooltip-value="false" 2507 data-clipboard-tooltip-duration-value="1500">
2508 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2509 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2510 Copy 2511 </span> 2512 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2513 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2514 Copied! 2515 </span> 2516 </button> 2517 </div> 2518 </div> 2519</div> 2520 2521<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">And add this to your <code class="code-inline-text"><head></code> HTML tag:</p> 2522 2523<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2524 <div class="p-1 text-sm bg-neutral-900"> 2525 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" 2526 data-controller="clipboard" 2527 data-clipboard-text="application.html.erb" 2528 data-clipboard-success-message-value="Controller Copied" 2529 data-clipboard-error-message-value="Copy Failed!" 2530 data-clipboard-show-tooltip-value="false" 2531 data-clipboard-tooltip-duration-value="1500"> 2532 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2533 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2534 application.html.erb 2535 </span> 2536 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2537 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2538 application.html.erb 2539 </span> 2540 </button> 2541 </div> 2542</div> 2543<div class="relative"> 2544 <pre data-controller="highlight" class="language-erb !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-erb !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css"></code></pre> 2545 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2546 data-controller="clipboard" 2547 data-clipboard-text='<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">' 2548 data-clipboard-success-message-value="CSS Copied" 2549 data-clipboard-error-message-value="Copy Failed!" 2550 data-clipboard-show-tooltip-value="false" 2551 data-clipboard-tooltip-duration-value="1500">
2552 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2553 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2554 Copy 2555 </span> 2556 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2557 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2558 Copied! 2559 </span> 2560 </button> 2561</div> 2562 2563 </div> 2564 </div> 2565 </div> 2566 </div> 2567 </div> 2568 2569 <div data-accordion-target="item" data-state="closed"class="overflow-hidden bg-neutral-100/60 dark:bg-neutral-700/75 border border-black/10 dark:border-white/10 items-center justify-between font-semibold transition-all hover:bg-neutral-100 dark:hover:bg-neutral-700/50 rounded-lg"> 2570 <p data-state="closed" class="flex text-base font-semibold mt-0 mb-0"> 2571 <button type="button" data-accordion-target="trigger" data-action="click->accordion#toggle" aria-controls="accordion-content-9" aria-expanded="false" data-state="closed" id="accordion-trigger-9" class="w-full rounded-lg flex flex-1 p-3 items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:-outline-offset-1"> 2572 <span class="flex items-center gap-2"> 2573 1.11. Motion.dev 2574 <img alt="PhotoSwipe" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c400aafdebbd.webp" /> 2575 </span> 2576 <svg xmlns="http://www.w3.org/2000/svg" data-accordion-target="icon" class="size-4 shrink-0 transition-transform duration-300" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path></g></svg> 2577 </button> 2578 </p> 2579 <div data-accordion-target="content" data-state="closed" id="accordion-content-9" role="region" aria-labelledby="accordion-trigger-9" class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]" hidden> 2580 <div class="overflow-hidden min-h-0"> 2581 <div class="opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed"> 2582 <p class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2583 <a href="https://motion.dev/" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Motion.dev</a> is a animation library. We use it in the feedback component. 2584 </p> 2585 <div class="px-4 py-3 bg-white dark:bg-neutral-700/50 text-sm font-normal"> 2586 <div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2586k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 2587 <!-- Tab Controls --> 2588 <div class="opacity-0 transition-opacity duration-200 relative inline-grid items-center gap-2 justify-center grid-cols-3 p-1 mb-4 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist"> 2589 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2590 Importmap 2591 </button> 2592 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2592k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2593 NPM 2594 </button> 2595 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2596 Yarn 2597 </button> 2598 </div> 2599 2600 <!-- Importmap Panel --> 2601 <div data-tabs-target="panel" role="tabpanel"> 2602 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2603 <div class="p-1 text-sm bg-neutral-900"> 2604 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" data-controller="clipboard" data-clipboard-text="config/importmap.rb" data-clipboard-success-message-value="Path Copied" data-clipboard-error-message-value="Copy Failed!" data-clipboard-show-tooltip-value="false" data-clipboard-tooltip-duration-value="1500"> 2605 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2606 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2607 Add to config/importmap.rb 2608 </span> 2609 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2610 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2611 Path Copied 2612 </span> 2613 </button> 2614 </div> 2615 </div> 2616 <div class="relative"> 2617 <pre data-controller="highlight" class="language-ruby !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@latest/+esm"</code></pre> 2618 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2619 data-controller="clipboard" 2620 data-clipboard-text='pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@latest/+esm"' 2621 data-clipboard-success-message-value="Code Copied" 2622 data-clipboard-error-message-value="Copy Failed!" 2623 data-clipboard-show-tooltip-value="false" 2624 data-clipboard-tooltip-duration-value="1500"> 2625 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2626 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2627 Copy 2628 </span>
2629 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2630 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2631 Copied! 2632 </span> 2633 </button> 2634 </div> 2635 </div> 2636 2637 <!-- NPM Panel --> 2638 <div data-tabs-target="panel" role="tabpanel"> 2639 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2640 <div class="p-1 text-sm bg-neutral-900"> 2641 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2642 <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"><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> 2643 Terminal 2644 </div> 2645 </div> 2646 </div> 2647 <div class="relative"> 2648 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">npm install motion</code></pre> 2649 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2650 data-controller="clipboard" 2651 data-clipboard-text="npm install motion" 2652 data-clipboard-success-message-value="Command Copied" 2653 data-clipboard-error-message-value="Copy Failed!" 2654 data-clipboard-show-tooltip-value="false" 2655 data-clipboard-tooltip-duration-value="1500"> 2656 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2657 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2658 Copy 2659 </span> 2660 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2661 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2662 Copied! 2663 </span> 2664 </button> 2665 </div> 2666 </div> 2667 2668 <!-- Yarn Panel --> 2669 <div data-tabs-target="panel" role="tabpanel"> 2670 <div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2671 <div class="p-1 text-sm bg-neutral-900"> 2672 <div class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1"> 2673 <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"><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> 2674 Terminal 2675 </div> 2676 </div> 2677 </div> 2678 <div class="relative"> 2679 <pre data-controller="highlight" class="language-bash !mb-6 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-bash !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">yarn add motion</code></pre> 2680 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2681 data-controller="clipboard" 2682 data-clipboard-text="yarn add motion" 2683 data-clipboard-success-message-value="Command Copied" 2684 data-clipboard-error-message-value="Copy Failed!" 2685 data-clipboard-show-tooltip-value="false" 2686 data-clipboard-tooltip-duration-value="1500">
2687 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2688 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2689 Copy 2690 </span> 2691 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2692 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2693 Copied! 2694 </span> 2695 </button> 2696 </div> 2697 </div> 2698</div> 2699 2700 </div> 2701 </div> 2702 </div> 2703 </div> 2704 </div> 2705</div> 2706 2707 </div> 2708</div> 2709 2710<h2 id="2-stimulus-controllers" class="group text-2xl font-bold mb-4 mt-12 flex gap-1.5 items-center pb-4 border-b border-neutral-950/20 dark:border-white/20"><span>2. Stimulus controllers</span><a class="hidden align-middle group-hover:inline-block" href="#2-stimulus-controllers"><svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400 size-5" width="18" height="18" viewBox="0 0 18 18"><g stroke-width="1.5" fill="none" stroke="currentColor"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> 2711</a></h2> 2712<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Rails Blocks components are powered by <a href="https://stimulus.hotwired.dev/reference/controllers" class="text-neutral-900 dark:text-white underline hover:opacity-80" target="_blank">Stimulus controllers</a>. Each component has its own controller(s) that you'll need to copy to your application.</p> 2713<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">To ensure all Stimulus controllers are automatically loaded, you need to configure your <code class="code-inline-text">app/javascript/controllers/index.js</code>:</p> 2714 2715<div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2716 <div class="p-1 text-sm bg-neutral-900"> 2717 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" 2718 data-controller="clipboard analytics" 2719 data-action="click->analytics#track" 2720 data-analytics-event-name-value="installation copied stimulus index" 2721 data-clipboard-text="app/javascript/controllers/index.js" 2722 data-clipboard-success-message-value="File Copied" 2723 data-clipboard-error-message-value="Copy Failed!" 2724 data-clipboard-show-tooltip-value="false" 2725 data-clipboard-tooltip-duration-value="1500"> 2726 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2727 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2728 app/javascript/controllers/index.js 2729 </span>
2730 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2731 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2732 app/javascript/controllers/index.js 2733 </span> 2734 </button> 2735 </div> 2736</div> 2737<div class="relative"> 2738 <pre data-controller="highlight" class="language-javascript !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-javascript !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar">// Import and register all your controllers from the importmap under controllers/* 2739 2740import { application } from "controllers/application"; 2741 2742// Eager load all controllers defined in the import map under controllers/**/*_controller 2743import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"; 2744eagerLoadControllersFrom("controllers", application); 2745</code></pre> 2746 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2747 data-controller="clipboard analytics" 2748 data-action="click->analytics#track" 2749 data-analytics-event-name-value="installation copied stimulus index code" 2750 data-clipboard-text="// Import and register all your controllers from the importmap under controllers/* 2751 2752import { application } from "controllers/application"; 2753 2754// Eager load all controllers defined in the import map under controllers/**/*_controller 2755import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"; 2756eagerLoadControllersFrom("controllers", application); 2757" 2758 data-clipboard-success-message-value="Code Copied" 2759 data-clipboard-error-message-value="Copy Failed!" 2760 data-clipboard-show-tooltip-value="false" 2761 data-clipboard-tooltip-duration-value="1500"> 2762 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2763 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2764 Copy 2765 </span> 2766 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2767 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2768 Copied! 2769 </span> 2770 </button> 2771</div> 2772 2773<p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Also update your <code class="code-inline-text">config/importmap.rb</code>:</p> 2774 2775<div class="rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2776 <div class="p-1 text-sm bg-neutral-900"> 2777 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" 2778 data-controller="clipboard analytics" 2779 data-action="click->
2779analytics#track" 2780 data-analytics-event-name-value="installation copied stimulus importmap" 2781 data-clipboard-text="config/importmap.rb" 2782 data-clipboard-success-message-value="File Copied" 2783 data-clipboard-error-message-value="Copy Failed!" 2784 data-clipboard-show-tooltip-value="false" 2785 data-clipboard-tooltip-duration-value="1500"> 2786 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2787 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2788 config/importmap.rb 2789 </span> 2790 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2791 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2792 config/importmap.rb 2793 </span> 2794 </button> 2795 </div> 2796</div> 2797<div class="relative"> 2798 <pre data-controller="highlight" class="language-ruby !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-ruby !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar"># Make sure these lines are in your importmap: 2799pin "@hotwired/stimulus-loading", to: "stimulus-loading.js" 2800pin_all_from "app/javascript/controllers", under: "controllers" 2801</code></pre> 2802 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 2803 data-controller="clipboard analytics" 2804 data-action="click->analytics#track" 2805 data-analytics-event-name-value="installation copied stimulus importmap code" 2806 data-clipboard-text="# Make sure these lines are in your importmap: 2807pin "@hotwired/stimulus-loading", to: "stimulus-loading.js" 2808pin_all_from "app/javascript/controllers", under: "controllers" 2809" 2810 data-clipboard-success-message-value="Code Copied" 2811 data-clipboard-error-message-value="Copy Failed!" 2812 data-clipboard-show-tooltip-value="false" 2813 data-clipboard-tooltip-duration-value="1500"> 2814 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2815 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 2816 Copy 2817 </span> 2818 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2819 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2820 Copied! 2821 </span> 2822 </button> 2823</div> 2824 2825<div class="mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2825k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 2826 <!-- Tab Controls --> 2827 <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist"> 2828 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2829 Quick Stimulus install 2830 </button> 2831 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2831k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2832 Granular installation 2833 </button> 2834 </div> 2835 2836 <!-- Quick install Panel --> 2837 <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl"> 2838 <div class="flex flex-col gap-6"> 2839 <div class="flex flex-col items-start gap-4"> 2840 <p class="text-sm text-neutral-500 dark:text-neutral-400"> 2841 You can download all the Stimulus controllers as a ZIP file. 2842 This includes controllers for all free components. 2843 </p> 2844 2845 <div class="flex flex-col gap-2"> 2846 <a class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200" data-turbo="false" data-controller="analytics" data-action="click->analytics#track" data-analytics-event-name-value="downloaded free stimulus controllers" href="/downloads/stimulus_controllers?type=free"> 2847 <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="M15.25 11.75V13.25C15.25 14.355 14.355 15.25 13.25 15.25H4.75C3.645 15.25 2.75 14.355 2.75 13.25V11.75"></path> <path d="M5.5 6.75L9 10.25L12.5 6.75"></path> <path d="M9 10.25V2.75"></path></g></svg> 2848 Download free controllers (ZIP) 2849</a> 2850 <div class="flex items-center gap-1 text-xs text-neutral-500 dark:text-neutral-400"> 2851 Want the pro controllers? 2852 </div> 2853 <div class="inline relative"> 2854 <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"> 2855 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 2856 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 2857 Get pro access 2858 </a> 2859 </div> 2860 </div> 2861 2862 </div> 2863 </div> 2864 2865 <div class="rounded-xl border border-blue-200/50 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200"> 2866 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 2867 <div class="flex items-center h-full"> 2868 <svg xmlns="http://www.w3.org/2000/svg" class="text-blue-500 dark:text-blue-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z"></path> <path d="M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75"></path> <path d="M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg> 2869 </div> 2870 <p class="text-sm font-semibold">
2871 How to install all controllers 2872 </p> 2873 <div></div> 2874 <div class="text-sm space-y-2"> 2875 <p>After downloading, unzip the file and copy the contents to your application's <code class="code-inline-text">app/javascript/controllers/</code> directory.</p> 2876 <p>Make sure to run <code class="code-inline-text">bin/dev</code> or restart your server to pick up the new files.</p> 2877 </div> 2878 </div> 2879 </div> 2880</div> 2881 2882 </div> 2883 2884 <!-- Full install Panel --> 2885 <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl"> 2886 <div class="rounded-xl border border-blue-200/50 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200"> 2887 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 2888 <div class="flex items-center h-full"> 2889 <svg xmlns="http://www.w3.org/2000/svg" class="text-blue-500 dark:text-blue-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z"></path> <path d="M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75"></path> <path d="M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg> 2890 </div> 2891 <p class="text-sm font-semibold"> 2892 How to install Stimulus controllers for each component 2893 </p> 2894 <div></div> 2895 <div class="text-sm space-y-2"> 2896 <ol class="list-decimal list-inside space-y-1"> 2897 <li>Navigate to the component page you want to use (e.g., <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/combobox">Combobox</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/modal">Modal</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/dropdown">Dropdown</a>, etc.)</li> 2898 <li>Look for the <strong>"Stimulus Controller Setup"</strong> section</li> 2899 <li>Copy the Stimulus controller(s) code</li> 2900 <li>Create a new file in your <code class="code-inline-text">app/javascript/controllers/</code> directory with the indicated controller name(s)</li> 2901 <li>Paste the controller code and save the file(s)</li> 2902 </ol> 2903 </div> 2904 </div> 2905</div> 2906 2907 </div> 2908</div> 2909
2910<p class="text-sm text-neutral-600 dark:text-neutral-400">Each component page includes the complete Stimulus controller code along with usage examples and configuration options.</p> 2911 2912<h2 id="3-custom-css" class="group text-2xl font-bold mb-4 mt-12 flex gap-1.5 items-center pb-4 border-b border-neutral-950/20 dark:border-white/20"><span>3. Custom CSS</span><a class="hidden align-middle group-hover:inline-block" href="#3-custom-css"><svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400 size-5" width="18" height="18" viewBox="0 0 18 18"><g stroke-width="1.5" fill="none" stroke="currentColor"><path d="M8.5,6.827c-.352,.168-.682,.398-.973,.69l-.01,.01c-1.381,1.381-1.381,3.619,0,5l2.175,2.175c1.381,1.381,3.619,1.381,5,0l.01-.01c1.381-1.381,1.381-3.619,0-5l-.931-.931" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path><path d="M9.5,11.173c.352-.168,.682-.398,.973-.69l.01-.01c1.381-1.381,1.381-3.619,0-5l-2.175-2.175c-1.381-1.381-3.619-1.381-5,0l-.01,.01c-1.381,1.381-1.381,3.619,0,5l.931,.931" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> 2913</a></h2> 2914 2915 <span class="text-sm text-neutral-500 dark:text-neutral-400">The full list of custom CSS classes is available to <div class="inline relative"> 2916 <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"> 2917 <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200"> 2918 <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg> 2919 Pro 2920 </a> 2921 </div> 2922 </div> 2923 users only. If you don't have a pro licence, you will only have access to custom CSS for free components.</span> 2924 2925<div class="mt-4 mb-6" data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
2925k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0"> 2926 <!-- Tab Controls --> 2927 <div class="opacity-0 transition-opacity duration-200 relative inline-flex items-center gap-2 justify-center p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700 mb-4" data-tabs-target="tabList" role="tablist"> 2928 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2929 Quick CSS install 2930 </button> 2931 <button class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
2931k:focus-visible:outline-neutral-200" tabindex="0" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"> 2932 Granular installation 2933 </button> 2934 </div> 2935 2936 <!-- Quick install Panel --> 2937 <div data-tabs-target="panel" data-controller="setup-code-filter" data-setup-code-filter-include-dark-value="true" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl"> 2938 <p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Here are the custom CSS classes that we used on Rails Blocks to style all the components. You can copy and paste these into your own CSS file to style & personalize your application.</p> 2939 2940<div class="mt-4 rounded-t-xl overflow-hidden border-t border-x border-[#2D2D2D] max-h-lg"> 2941 <div class="p-1 text-sm bg-neutral-900 flex items-center justify-between"> 2942 <button type="button" class="px-2 pt-2 pb-1.5 text-xs text-neutral-400 dark:text-white/50 flex items-center gap-1" 2943 data-controller="clipboard" 2944 data-clipboard-text="application.css" 2945 data-clipboard-success-message-value="Controller Copied" 2946 data-clipboard-error-message-value="Copy Failed!" 2947 data-clipboard-show-tooltip-value="false" 2948 data-clipboard-tooltip-duration-value="1500"> 2949 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 2950 <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="M8.0425 15.75H4.75C3.645 15.75 2.75 14.855 2.75 13.75V3.75C2.75 2.645 3.645 1.75 4.75 1.75H12.75C13.855 1.75 14.75 2.645 14.75 3.75V7.1048"></path> <path d="M5.75 5.75H11.75"></path> <path d="M5.75 8.75H11.75"></path> <path d="M5.75 11.75H8.25"></path> <path d="M13.7959 15.4542L16.9571 12.293C17.3476 11.9025 17.3476 11.2693 16.9571 10.8788L16.3713 10.293C15.9808 9.9025 15.3476 9.9025 14.9571 10.293L11.7959 13.4542L11.0001 16.2501L13.7959 15.4542Z"></path></g></svg> 2951 application.css 2952 </span> 2953 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 2954 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 2955 application.css 2956 </span> 2957 </button> 2958 <label class="hidden sm:flex group items-center gap-2 cursor-pointer px-2 py-1.5" title="Include dark mode classes"> 2959 <span class="text-xs text-neutral-400 hidden sm:block">Include <span class="inline items-center justify-center rounded-md border px-1 py-0.5 font-mono text-[11px] border-white/10 bg-neutral-900 text-neutral-200">:dark</span> classes</span> 2960 <div class="relative"> 2961 <input type="checkbox" class="sr-only peer" checked data-setup-code-filter-target="checkbox" data-action="change->setup-code-filter#toggle"> 2962 <!-- Background element --> 2963 <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600"></div> 2964 <!-- Round element with icons inside --> 2965 <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center"> 2966 <!-- X icon for unchecked state --> 2967 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g></svg> 2968 <!-- Checkmark icon for checked state --> 2969 <svg xmlns="http://www.w3.org/2000/svg" class="absolute size-4 text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline></g></svg> 2970 </div> 2971 </div> 2972 </label> 2973 </div> 2974</div> 2975<div class="relative"> 2976 <pre data-controller="highlight" class="language-css !mb-4 !bg-neutral-900 rounded-b-xl overflow-hidden border border-[#2D2D2D]"><code class="language-css !bg-neutral-900 max-h-[300px] !overflow-y-scroll !overflow-x-scroll text-sm small-scrollbar" data-setup-code-filter-target="code">/* Semantic theme tokens. Custom themes override the --rb-* variables. */ 2977@theme inline { 2978 --color-primary: var(--rb-primary, var(--color-neutral-800)); 2979 --color-primary-hover: var(--rb-primary-hover, var(--color-neutral-700)); 2980 --color-primary-content: var(--rb-primary-content, var(--color-neutral-800)); 2981 --color-primary-foreground: var(--rb-primary-foreground, var(--color-white)); 2982 --color-accent: var(--rb-primary, var(--color-neutral-800)); 2983} 2984 2985:root { 2986 accent-color: var(--color-accent); 2987} 2988 2989kbd { 2990 @apply rounded-md border border-black/10 bg-white px-1 font-mono text-[11px] text-neutral-800 shadow-[0px_1.5px_0px_0px_rgba(0,0,0,0.05)] dark:border-white/10 dark:bg-neutral-900 dark:text-neutral-200 dark:shadow-[0px_1px_0px_0px_rgba(255,255,255,0.1)]; 2991} 2992 2993/* Forms */ 2994 2995label, 2996.label { 2997 @apply text-sm font-medium text-neutral-700 dark:text-neutral-100; 2998} 2999 3000.form-input[disabled] { 3001 @apply cursor-not-allowed bg-neutral-200; 3002} 3003 3004/* Custom search input clear button styling */ 3005input[type="search"]::-webkit-search-cancel-button { 3006 -webkit-appearance: none; 3007 appearance: none; 3008 height: 16px; 3009 width: 16px; 3010 cursor: pointer; 3011 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'
3011 viewBox='0 0 12 12'%3E%3Cg fill='%236b7280'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3012 background-size: 12px 12px; 3013 background-repeat: no-repeat; 3014 background-position: center; 3015} 3016 3017input[type="search"]::-webkit-search-cancel-button:hover { 3018 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23374151'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3019} 3020 3021.dark input[type="search"]::-webkit-search-cancel-button { 3022 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23d1d5db'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3023} 3024 3025.dark input[type="search"]::-webkit-search-cancel-button:hover { 3026 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23f3f4f6'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3027} 3028 3029/* non-input elements (like the Stripe card form) can be styled to look like an input */ 3030div.form-control { 3031 -webkit-appearance: none; 3032 -moz-appearance: none; 3033 appearance: none; 3034 background-color: #fff; 3035 border-width: 1px; 3036 padding-top: 0.5rem; 3037 padding-right: 0.75rem; 3038 padding-bottom: 0.5rem; 3039 padding-left: 0.75rem; 3040 font-size: 1rem; 3041 line-height: 1.5rem; 3042} 3043 3044.form-control { 3045 @apply block w-full rounded-lg bg-white border-0 px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset placeholder:text-neutral-500 focus:ring-2 focus:ring-neutral-600 dar
3045k:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dark:focus:ring-neutral-500; 3046} 3047 3048@media (min-width: 640px) { 3049 .form-control { 3050 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 3051 } 3052} 3053 3054.form-control[disabled] { 3055 @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600; 3056} 3057 3058.form-control.error { 3059 @apply border-red-400 ring-red-300 focus:ring-red-500 dark:border-red-600 dark:ring-red-500; 3060} 3061 3062select:not([multiple]) { 3063 @apply w-full appearance-none rounded-lg border-0 bg-white px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset focus:ring-2 focus:ring-neutral-600; 3064 3065 /* Custom dropdown arrow */ 3066 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 3067 background-position: right 0.75rem center; 3068 background-repeat: no-repeat; 3069 background-size: 1.25em 1.25em; 3070 padding-right: 2.5rem; 3071} 3072 3073@media (min-width: 640px) { 3074 select:not([multiple]) { 3075 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 3076 } 3077} 3078 3079/* Dark mode styling for single select */ 3080.dark { 3081 select:not([multiple]) { 3082 @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
3082k:focus:ring-neutral-500; 3083 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 3084 } 3085} 3086 3087select:not([multiple])[disabled] { 3088 @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500; 3089} 3090 3091select[multiple] { 3092 @apply w-full rounded-lg rounded-r-none border-0 bg-white px-3 py-2.5 text-base/6 text-neutral-900 shadow-xs outline-1 -outline-offset-1 outline-neutral-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-600 dark:outline-neutral-600; 3093 min-height: 120px; 3094} 3095 3096select[multiple] option { 3097 @apply rounded-md; 3098} 3099 3100@media (min-width: 640px) { 3101 select[multiple] { 3102 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 3103 } 3104} 3105 3106/* Dark mode styling for multiple select */ 3107.dark { 3108 select[multiple] { 3109 @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
3109k:focus:ring-neutral-500; 3110 } 3111} 3112 3113select[multiple][disabled] { 3114 @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500; 3115} 3116 3117option { 3118 @apply bg-white px-3 py-2 text-sm text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100; 3119} 3120 3121option:checked { 3122 @apply bg-neutral-100 dark:bg-neutral-600; 3123} 3124 3125option:hover { 3126 @apply bg-neutral-50 dark:bg-neutral-600; 3127} 3128 3129.caret { 3130 @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-800; 3131} 3132 3133[type="checkbox"] { 3134 @apply size-4 cursor-pointer appearance-none rounded-sm border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto; 3135} 3136 3137.dark [type="checkbox"]:focus { 3138 outline-color: var(--color-primary-content); 3139} 3140 3141/* Default primary flips light without overwriting a generated theme. */ 3142.dark { 3143 --color-primary: var(--rb-primary, var(--color-neutral-100)); 3144 --color-primary-hover: var(--rb-primary-hover, var(--color-white)); 3145 --color-primary-content: var(--rb-primary-content, var(--color-white)); 3146 --color-primary-foreground: var(--rb-primary-foreground, var(--color-neutral-900)); 3147 --color-accent: var(--rb-primary, var(--color-neutral-100)); 3148} 3149 3150[type="checkbox"]:checked { 3151 border-color: var(--color-primary); 3152 background-color: var(--color-primary); 3153 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); 3154 background-size: 100% 100%; 3155 background-position: center; 3156 background-repeat: no-repeat; 3157} 3158 3159/* Dark marks when primary-foreground is dark (amber, yellow, white primary in dark mode). 3160 Theme preview opts out with data-primary-mark="light" for colored primaries. */ 3161:where([data-primary-mark="dark"]) [type="checkbox"]:checked, 3162.dark:where(:not([data-primary-mark="light"])) [type="checkbox"]:checked { 3163 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23171717' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); 3164} 3165 3166[type="checkbox"]:indeterminate { 3167 border-color: var(--color-primary); 3168 background-color: var(--color-primary); 3169 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' %3e%3cline x1='10.75' y1='6' x2='1.25' y2='6'%3e%3c/line%3e%3c/g%3e%3c/svg%3e"); 3170 background-size: 75% 75%; 3171 background-position: center; 3172 background-repeat: no-repeat; 3173} 3174 3175:where([data-primary-mark="dark"]) [type="checkbox"]:indeterminate, 3176.dark:where(:not([data-primary-mark="light"])) [type="checkbox"]:indeterminate { 3177 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cg fill='none' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' %3e%3cline x1='10.75' y1='6' x2='1.25' y2='6'%3e%3c/line%3e%3c/g%3e%3c/svg%3e"); 3178} 3179 3180[type="checkbox"]:disabled { 3181 @apply cursor-not-allowed border-neutral-300 bg-neutral-200 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
3181k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500; 3182} 3183 3184[type="checkbox"]:disabled:checked { 3185 @apply border-neutral-300 bg-neutral-200 dark:border-neutral-600 dark:bg-neutral-600; 3186} 3187 3188/* Anchor indicator for shift-click range selection */ 3189[type="checkbox"].checkbox-anchor { 3190 outline: 2px dashed currentColor; 3191 outline-offset: 2px; 3192 @apply outline-neutral-600 dark:outline-neutral-200; 3193} 3194 3195[type="radio"] { 3196 @apply size-4 cursor-pointer appearance-none rounded-full border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto; 3197} 3198 3199.dark [type="radio"]:focus { 3200 outline-color: var(--color-primary-content); 3201} 3202 3203[type="radio"]:checked { 3204 border-color: var(--color-primary); 3205 background-color: var(--color-primary); 3206 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); 3207 background-size: 100% 100%; 3208 background-position: center; 3209 background-repeat: no-repeat; 3210} 3211 3212:where([data-primary-mark="dark"]) [type="radio"]:checked, 3213.dark:where(:not([data-primary-mark="light"])) [type="radio"]:checked { 3214 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23171717' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); 3215} 3216 3217[type="radio"]:disabled { 3218 @apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
3218k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500; 3219} 3220 3221[type="radio"]:disabled:checked { 3222 @apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600; 3223} 3224 3225/* Datalist styling */ 3226input[list] { 3227 -webkit-appearance: none; 3228 -moz-appearance: none; 3229 appearance: none; 3230} 3231 3232/* Replace default datalist arrow in WebKit browsers */ 3233input[list].replace-default-datalist-arrow::-webkit-calendar-picker-indicator { 3234 display: none !important; 3235 -webkit-appearance: none !important; 3236} 3237 3238input[list].replace-default-datalist-arrow { 3239 padding-right: 2.5rem; 3240 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 3241 background-position: right 0.75rem center; 3242 background-repeat: no-repeat; 3243 background-size: 1.25em 1.25em; 3244} 3245 3246/* Dark mode datalist arrow */ 3247.dark { 3248 input[list].replace-default-datalist-arrow { 3249 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 3250 } 3251} 3252 3253/* Tom Select */ 3254 3255select[multiple][data-controller="select"] { 3256 @apply invisible; 3257} 3258 3259.dropdown-input { 3260 @apply !border-neutral-300 !bg-white text-base !px-3 !py-2.5 placeholder:!text-neutral-500 dark:!border-neutral-600 dar
3260k:!bg-neutral-700 dark:!placeholder-neutral-300; 3261} 3262 3263@media (min-width: 640px) { 3264 .plugin-dropdown_input .dropdown-input { 3265 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 3266 } 3267} 3268 3269.plugin-dropdown_input.focus.dropdown-active .ts-control { 3270 @apply !border-none; 3271} 3272 3273.ts-dropdown-content { 3274 @apply py-1.5 space-y-0.5; 3275 max-height: 240px; 3276 scroll-behavior: auto; 3277} 3278 3279.ts-dropdown-content { 3280 scrollbar-width: thin; 3281 scrollbar-color: #a2a2a270 #7878780b; 3282} 3283 3284.ts-dropdown-content::-webkit-scrollbar { 3285 width: 6px; 3286} 3287 3288.ts-dropdown-content::-webkit-scrollbar-track { 3289 background: #78787879; 3290} 3291 3292.ts-dropdown-content::-webkit-scrollbar-thumb { 3293 background-color: #a2a2a270; 3294 border-radius: 3px; 3295} 3296 3297.ts-control { 3298 @apply flex min-h-10 w-full px-3 py-2 cursor-default rounded-lg border-0 text-base/6 text-neutral-900 shadow-xs ring-1 placeholder:text-neutral-500 ring-neutral-300 outline-hidden ring-inset focus:ring-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dar
3298k:focus:ring-neutral-500; 3299 3300 &[disabled] { 3301 @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600; 3302 } 3303 3304 &.error { 3305 @apply border-red-400 outline-red-300 focus:outline-red-500 dark:border-red-600 dark:outline-red-500; 3306 } 3307} 3308 3309.plugin-dropdown_input .dropdown-input { 3310 @apply outline-hidden; 3311} 3312 3313/* Ensure items-placeholder is visible when no items are selected */ 3314.plugin-dropdown_input .items-placeholder { 3315 display: block !important; 3316} 3317 3318/* Only hide items-placeholder when items are actually selected */ 3319.plugin-dropdown_input.has-items .items-placeholder { 3320 display: none !important; 3321} 3322 3323/* Override the dropdown-active rule to keep placeholder visible when no items selected */ 3324.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder { 3325 display: block !important; 3326} 3327 3328.ts-dropdown .active.create { 3329 @apply cursor-pointer bg-neutral-100 text-neutral-900 dark:bg-neutral-700 dark:text-white; 3330} 3331 3332.loading-more-results { 3333 @apply !cursor-default; 3334} 3335 3336.disabled .ts-control { 3337 cursor: not-allowed !important; 3338} 3339 3340@media (min-width: 640px) { 3341 .ts-control { 3342 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 3343 } 3344} 3345 3346.full .ts-control { 3347 @apply dark:bg-neutral-700; 3348} 3349 3350.ts-wrapper.single .ts-control, 3351.ts-wrapper.single .ts-control input, 3352.ts-control, 3353.ts-wrapper.single.input-active .ts-control { 3354 @apply cursor-text; 3355} 3356 3357.ts-dropdown [data-selectable] .highlight { 3358 @apply bg-orange-500/20 dark:bg-yellow-500/20; 3359} 3360 3361.ts-control, 3362.ts-wrapper.single.input-active .ts-control { 3363 @apply bg-white dark:bg-neutral-700; 3364} 3365 3366.input-active { 3367 @apply shadow rounded-lg ring-2 ring-inset ring-neutral-600 dar
3367k:ring-neutral-500; 3368} 3369 3370.ts-wrapper { 3371 @apply bg-white dark:bg-neutral-700 rounded-lg; 3372} 3373 3374.ts-control, 3375.ts-wrapper.single.input-active .ts-control { 3376 @apply bg-transparent dark:bg-transparent; 3377} 3378 3379.ts-control input { 3380 @apply !m-0 bg-white text-base placeholder:text-neutral-500 read-only:!cursor-pointer dark:bg-neutral-800 dark:text-white dark:placeholder-neutral-300; 3381} 3382 3383@media (min-width: 640px) { 3384 .ts-control input { 3385 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 3386 } 3387} 3388 3389.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control { 3390 @apply !pr-8; 3391} 3392 3393.ts-wrapper.plugin-remove_button .item { 3394 @apply rounded-md; 3395} 3396 3397.ts-wrapper.plugin-remove_button .item .remove { 3398 @apply rounded-r-lg border-none py-1 text-lg leading-none; 3399} 3400 3401.ts-wrapper.plugin-remove_button .item .remove::before { 3402 content: ""; 3403 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23737373'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3404 @apply block size-4 bg-center bg-no-repeat; 3405} 3406 3407/* Red remove button for flagged items */ 3408.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before { 3409 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23991B1B'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3410} 3411 3412.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before { 3413 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23FCA5A5'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3414} 3415 3416/* Add separate dark mode version */ 3417.dark { 3418 .ts-wrapper.plugin-remove_button .item .remove::before { 3419 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23A1A1A1'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 3420 } 3421} 3422 3423.ts-wrapper.plugin-remove_button .item .remove { 3424 font-size: 0 !important; 3425 @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded !border-0 !p-1 !leading-none text-neutral-500 dark:text-neutral-400 dark:hover:bg-neutral-700; 3426} 3427 3428/* Red remove button styling for flagged items inside input */ 3429.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove { 3430 @apply text-red-700 hover:bg-red-200 hover:text-red-900 dark:text-[#FCA5A5] dark:hover:bg-red-100/10 dark:hover:text-red-200; 3431} 3432 3433/* Flag toggle button styling */ 3434.ts-wrapper.plugin-remove_button .item .flag-toggle { 3435 @apply text-neutral-400 dark:text-neutral-400; 3436} 3437 3438.ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle { 3439 @apply flex size-[18px] items-center justify-center rounded hover:bg-red-200 dark:hover:bg-red-100/10 text-red-800 dark:text-[#FCA5A5]; 3440} 3441 3442.ts-dropdown { 3443 @apply z-40 m-0 overflow-hidden rounded-lg border border-t border-solid border-neutral-300 shadow-xs dark:border-neutral-600 dar
3443k:bg-neutral-800 dark:text-white; 3444} 3445 3446.ts-dropdown .create { 3447 @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm dark:text-neutral-400; 3448} 3449 3450.ts-dropdown [data-selectable].option, 3451.ts-dropdown .no-results { 3452 @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm; 3453} 3454 3455.ts-dropdown .option, 3456.ts-dropdown [data-disabled], 3457.ts-dropdown [data-disabled] [data-selectable].option { 3458 @apply mx-1.5 cursor-not-allowed rounded-md px-2.5 py-2 text-sm; 3459} 3460 3461.ts-dropdown [data-selectable].option, 3462.ts-dropdown .ts-dropdown .create { 3463 @apply cursor-pointer; 3464} 3465 3466/* Focused/hover state - lighter background */ 3467.ts-dropdown .active { 3468 @apply bg-neutral-100 text-neutral-900 dark:bg-neutral-600/50 dark:text-white; 3469} 3470 3471/* Selected state - darker/more prominent */ 3472.ts-dropdown .selected { 3473 @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white; 3474} 3475 3476/* When an option is both selected AND focused, prioritize the selected styling but add a subtle ring */ 3477.ts-dropdown .selected.active { 3478 @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white; 3479} 3480 3481.ts-dropdown .spinner { 3482 @apply h-auto w-auto; 3483} 3484 3485.ts-dropdown .spinner:after { 3486 @apply mt-1 mb-0 inline-block size-4 border-2 p-0; 3487} 3488 3489.ts-wrapper:not(.form-control):not(.form-select).single .ts-control { 3490 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 3491 background-position: right 0.5rem center; 3492 background-repeat: no-repeat; 3493 background-size: 1.5em 1.5em; 3494 print-color-adjust: exact; 3495} 3496 3497/* Dark mode arrow for single select */ 3498.dark { 3499 .ts-wrapper:not(.form-control):not(.form-select).single .ts-control { 3500 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 3501 } 3502} 3503 3504/* Add dropdown arrow to multiselect elements */ 3505.ts-wrapper:not(.form-control):not(.form-select).multi .ts-control { 3506 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e"); 3507 background-position: right 0.6rem center; 3508 background-repeat: no-repeat; 3509 background-size: 1.25em 1.25em; 3510 print-color-adjust: exact; 3511 padding-right: 2rem !important; 3512} 3513 3514/* Dark mode arrow for multiselect */ 3515.dark { 3516 .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control { 3517 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e"); 3518 } 3519} 3520.ts-wrapper.multi .ts-control > div { 3521 @apply mr-1 inline-flex items-center justify-center rounded-md bg-neutral-100 px-2 text-xs leading-none font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100; 3522} 3523 3524/* Ensure items don't overlap with the dropdown arrow */ 3525.ts-wrapper.multi.has-items .ts-control { 3526 @apply !pt-[7px] !pr-8 !pb-[4px]; 3527} 3528 3529.ts-wrapper.plugin-remove_button:not(.rtl) .item { 3530 @apply cursor-default; 3531} 3532 3533.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { 3534 @apply !-ml-0.5 cursor-pointer border-none; 3535} 3536 3537.ts-wrapper.plugin-remove_button .item .remove { 3538 @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded border-0 text-lg leading-none text-neutral-900/60 hover:text-neutral-900 dark:text-neutral-100/60 dark:hover:bg-neutral-700 dark:hover:text-neutral-100; 3539} 3540 3541.ts-dropdown .optgroup-header { 3542 @apply border-t border-neutral-300 bg-white font-semibold text-neutral-900 dark:border-neutral-600 dar
3542k:bg-neutral-800 dark:text-neutral-100; 3543} 3544 3545.ts-dropdown.plugin-optgroup_columns .optgroup { 3546 height: fit-content; 3547 @apply !mt-0; 3548} 3549 3550.optgroup { 3551 @apply mt-1.5 first:mt-0; 3552} 3553 3554.dark .ts-dropdown.plugin-optgroup_columns .optgroup { 3555 border-right: 1px solid #525252; 3556} 3557 3558.ts-wrapper.multi.has-items .ts-control > input { 3559 @apply !mb-[3px]; 3560} 3561 3562.tomselect-checkbox { 3563 @apply !mr-0; 3564} 3565 3566.input-hidden.focus { 3567 @apply !rounded-lg border border-neutral-300 dark:border-neutral-600; 3568} 3569 3570/* Replace the previous attempt with this updated selector */ 3571select[data-select-disable-typing-value="true"] + .ts-wrapper .ts-control, 3572select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control, 3573select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control input, 3574select[data-select-disable-typing-value="true"] + .ts-wrapper.single.input-active .ts-control { 3575 @apply cursor-default; 3576} 3577 3578.ts-dropdown-content.is-loading-more .option { 3579 pointer-events: none !important; 3580} 3581 3582/* Count display for multi-select */ 3583.ts-count-display { 3584 @apply mr-auto !my-0.5 !bg-transparent !px-0 !text-sm !font-normal pointer-events-none; 3585 display: none; 3586} 3587 3588/* Hide count display when not active (explicit rule) */ 3589.ts-control:not(.count-active) .ts-count-display { 3590 display: none !important; 3591} 3592 3593/* Hide items and input when count is active */ 3594.ts-control.count-active .item { 3595 display: none !important; 3596 visibility: hidden !important; 3597 width: 0 !important; 3598 height: 0 !important; 3599 margin: 0 !important; 3600 padding: 0 !important; 3601} 3602 3603/* Keep input technically visible for keyboard navigation but make it invisible */ 3604.ts-control.count-active input { 3605 position: absolute !important; 3606 opacity: 0 !important; 3607 width: 0 !important; 3608 height: 0 !important; 3609 padding: 0 !important; 3610 margin: 0 !important; 3611} 3612 3613/* Ensure proper spacing when count is displayed */ 3614.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) { 3615 @apply !py-[5px]; 3616} 3617 3618/* External tags styles - hide tags inside control */ 3619.ts-control.external-tags-active .item { 3620 display: none !important; 3621 visibility: hidden !important; 3622 width: 0 !important; 3623 height: 0 !important; 3624 margin: 0 !important; 3625 padding: 0 !important; 3626} 3627 3628/* Reset padding when external tags are active */ 3629.ts-wrapper.multi.has-items .ts-control.external-tags-active { 3630 @apply !py-2; 3631} 3632 3633/* Keep placeholder visible when external tags are active */ 3634.plugin-dropdown_input.has-items .ts-control.external-tags-active .items-placeholder { 3635 display: block !important; 3636} 3637 3638/* Reset input margins when external tags are active */ 3639.ts-wrapper.multi.has-items .ts-control.external-tags-active > input { 3640 margin: 0 !important; 3641} 3642 3643/* Emoji picker */ 3644 3645em-emoji-picker { 3646 --color-border-over: rgba(0, 0, 0, 0.1); 3647 --color-border: rgba(0, 0, 0, 0.05); 3648 --font-family: "Inter", sans-serif; 3649 --rgb-accent: 155, 155, 155; 3650 3651 position: absolute; 3652 z-index: 1000; 3653 max-width: 400px; 3654 min-width: 318px; 3655 resize: horizontal; 3656 overflow: auto; 3657} 3658 3659@media (max-width: 768px) { 3660 em-emoji-picker { 3661 max-width: 80vw; 3662 } 3663} 3664 3665.dark { 3666 em-emoji-picker { 3667 border: 1px solid #353535; 3668 --color-border: rgba(255, 255, 255, 0.1); 3669 --color-border-over: rgba(255, 255, 255, 0.2); 3670 } 3671} 3672 3673/* Shoelace Neutral styles */ 3674:root { 3675 --sl-color-primary-50: var(--sl-color-neutral-50) !important; 3676 --sl-color-primary-100: var(--sl-color-neutral-100) !important; 3677 --sl-color-primary-200: var(--sl-color-neutral-200) !important; 3678 --sl-color-primary-300: var(--sl-color-neutral-300) !important; 3679 --sl-color-primary-400: var(--sl-color-neutral-400) !important; 3680 --sl-color-primary-500: var(--sl-color-neutral-500) !important; 3681 --sl-color-primary-600: var(--sl-color-neutral-600) !important; 3682 --sl-color-primary-700: var(--sl-color-neutral-700) !important; 3683 --sl-color-primary-800: var(--sl-color-neutral-800) !important; 3684 --sl-color-primary-900: var(--sl-color-neutral-900) !important; 3685 --sl-color-primary-950: var(--sl-color-neutral-950) !important; 3686 3687 --sl-input-focus-ring-color: hsla(0, 0%, 81%, 0.4) !important; 3688 3689 --sl-border-radius-medium: 0.5rem !important; 3690 --sl-border-radius-large: 0.75rem !important; 3691} 3692 3693/* air-datepicker */ 3694 3695.air-datepicker { 3696 --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 3697 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 3698 --adp-font-size: 14px; 3699 --adp-width: 246px; 3700 --adp-z-index: 40; 3701 --adp-padding: 4px; 3702 --adp-grid-areas: "nav" "body" "timepicker" "buttons"; 3703 --adp-transition-duration: 0.3s; 3704 --adp-transition-ease: ease-out; 3705 --adp-transition-offset: 8px; 3706 --adp-background-color: #fff;
3707 --adp-background-color-hover: #f0f0f0; 3708 --adp-background-color-active: #eaeaea; 3709 --adp-background-color-in-range: rgba(16, 16, 16, 0.1); 3710 --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2); 3711 --adp-background-color-selected-other-month-focused: #f1f1f1; 3712 --adp-background-color-selected-other-month: #e6e6e6; 3713 --adp-color: #4a4a4a; 3714 --adp-color-secondary: #9c9c9c; 3715 --adp-accent-color: #0a0a0a; 3716 --adp-color-current-date: var(--adp-accent-color); 3717 --adp-color-other-month: #dedede; 3718 --adp-color-disabled: #aeaeae; 3719 --adp-color-disabled-in-range: #939393; 3720 --adp-color-other-month-hover: #c5c5c5; 3721 --adp-border-color: rgba(0, 0, 0, 0.1); 3722 --adp-border-color-inner: #efefef; 3723 --adp-border-radius: 8px; 3724 --adp-border-color-inline: #d7d7d7; 3725 --adp-nav-height: 32px; 3726 --adp-nav-arrow-color: var(--adp-color-secondary); 3727 --adp-nav-action-size: 32px; 3728 --adp-nav-color-secondary: var(--adp-color-secondary); 3729 --adp-day-name-color: #464646; 3730 --adp-day-name-color-hover: #f1f1f1; 3731 --adp-day-cell-width: 1fr; 3732 --adp-day-cell-height: 32px; 3733 --adp-month-cell-height: 42px; 3734 --adp-year-cell-height: 56px; 3735 --adp-pointer-size: 10px; 3736 --adp-poiner-border-radius: 2px; 3737 --adp-pointer-offset: 14px; 3738 --adp-cell-border-radius: 4px; 3739 --adp-cell-background-color-hover: var(--adp-background-color-hover); 3740 --adp-cell-background-color-selected: #1d1d1d; 3741 --adp-cell-background-color-selected-hover: #303030; 3742 --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1); 3743 --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2); 3744 --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected); 3745 --adp-btn-height: 32px; 3746 --adp-btn-color: var(--adp-accent-color); 3747 --adp-btn-color-hover: var(--adp-color); 3748 --adp-btn-border-radius: var(--adp-border-radius); 3749 --adp-btn-background-color-hover: var(--adp-background-color-hover); 3750 --adp-btn-background-color-active: var(--adp-background-color-active); 3751 --adp-time-track-height: 1px; 3752 --adp-time-track-color: #dedede; 3753 --adp-time-track-color-hover: #b1b1b1; 3754 --adp-time-thumb-size: 12px; 3755 --adp-time-padding-inner: 10px; 3756 --adp-time-day-period-color: var(--adp-color-secondary); 3757 --adp-mobile-font-size: 16px; 3758 --adp-mobile-nav-height: 40px; 3759 --adp-mobile-width: 320px; 3760 --adp-mobile-day-cell-height: 38px; 3761 --adp-mobile-month-cell-height: 48px; 3762 --adp-mobile-year-cell-height: 64px; 3763} 3764.air-datepicker-overlay { 3765 --adp-overlay-background-color: rgba(0, 0, 0, 0.3); 3766 --adp-overlay-transition-duration: 0.3s; 3767 --adp-overlay-transition-ease: ease-out; 3768 --adp-overlay-z-index: 99; 3769} 3770 3771.air-datepicker-cell.-selected-.-day- { 3772 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 3773 background: var(--adp-cell-background-color-selected); 3774} 3775 3776.air-datepicker-cell.-selected-.-year- { 3777 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 3778 background: var(--adp-cell-background-color-selected); 3779} 3780 3781.air-datepicker-cell.-selected-.-month- { 3782 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 3783 background: var(--adp-cell-background-color-selected); 3784} 3785 3786.air-datepicker-cell.-selected- { 3787 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 3788 background: var(--adp-cell-background-color-selected); 3789} 3790 3791.air-datepicker-cell.-selected-.-current- { 3792 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 3793 background: var(--adp-cell-background-color-selected); 3794} 3795 3796.air-datepicker-cell.-current- { 3797 border: 1px solid #bdbdbd !important; 3798} 3799 3800.air-datepicker-cell.-selected-.-day-.-other-month- { 3801 color: #cccccc; /* Ensure selected cell text is also light in dark mode */ 3802 background: #7e7e7e; 3803} 3804 3805.dark { 3806 .air-datepicker { 3807 --adp-background-color: #2d2d2d; /* Dark background */ 3808 --adp-background-color-hover: #3a3a3a; 3809 --adp-background-color-active: #4a4a4a; 3810 --adp-background-color-in-range: rgba(196, 196, 196, 0.2); 3811 --adp-background-color-in-range-focused: rgba(196, 196, 196, 0.3); 3812 --adp-background-color-selected-other-month-focused: #333; 3813 --adp-background-color-selected-other-month: #444;
3814 --adp-color: #e0e0e0; /* Light text color */ 3815 --adp-color-secondary: #a0a0a0; 3816 --adp-accent-color: #ffffff; /* A light accent color for dark mode */ 3817 --adp-color-other-month: #555; 3818 --adp-color-disabled: #777; 3819 --adp-color-disabled-in-range: #888; 3820 --adp-color-other-month-hover: #666; 3821 --adp-border-color: #ffffff1a; /* Lighter border for dark mode */ 3822 --adp-border-color-inner: #444; 3823 --adp-border-color-inline: #444444; 3824 --adp-nav-arrow-color: var(--adp-color-secondary); 3825 --adp-day-name-color: #c0c0c0; 3826 --adp-day-name-color-hover: #3a3a3a; 3827 --adp-cell-background-color-hover: var(--adp-background-color-hover); 3828 --adp-cell-background-color-selected: #ffffff; 3829 --adp-cell-background-color-selected-hover: #e9e9e9; 3830 --adp-cell-background-color-in-range: rgba(175, 175, 175, 0.2); 3831 --adp-cell-background-color-in-range-hover: rgba(169, 169, 169, 0.3); 3832 --adp-btn-color: var(--adp-accent-color); 3833 --adp-btn-color-hover: var(--adp-color); 3834 --adp-btn-background-color-hover: var(--adp-background-color-hover); 3835 --adp-btn-background-color-active: var(--adp-background-color-active); 3836 --adp-time-track-color: #555; 3837 --adp-time-track-color-hover: #777; 3838 --adp-time-day-period-color: var(--adp-color-secondary); 3839 } 3840 3841 .air-datepicker-overlay { 3842 --adp-overlay-background-color: rgba(255, 255, 255, 0.1); /* Lighter overlay for dark mode */ 3843 } 3844 3845 .air-datepicker-cell.-selected-.-day- { 3846 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 3847 background: var(--adp-cell-background-color-selected); 3848 } 3849 3850 .air-datepicker-cell.-selected-.-year- { 3851 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 3852 background: var(--adp-cell-background-color-selected); 3853 } 3854 3855 .air-datepicker-cell.-selected-.-month- { 3856 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 3857 background: var(--adp-cell-background-color-selected); 3858 } 3859 3860 .air-datepicker-cell.-selected- { 3861 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 3862 background: var(--adp-cell-background-color-selected); 3863 } 3864 3865 .air-datepicker-cell.-selected-.-current- { 3866 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 3867 background: var(--adp-cell-background-color-selected); 3868 } 3869 3870 .air-datepicker-cell.-current- { 3871 border: 1px solid #505050 !important; 3872 } 3873 3874 .air-datepicker-cell.-selected-.-day-.-other-month- { 3875 color: #cccccc; /* Ensure selected cell text is also light in dark mode */ 3876 background: #7e7e7e; 3877 } 3878} 3879 3880.air-datepicker--navigation { 3881 width: 100%; 3882} 3883.air-datepicker--pointer { 3884 opacity: 0; 3885} 3886.air-datepicker { 3887 background: var(--adp-background-color); 3888 border: 1px solid var(--adp-border-color); 3889 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 3890 border-radius: var(--adp-border-radius); 3891 box-sizing: content-box; 3892 display: grid; 3893 grid-template-columns: 1fr; 3894 grid-template-rows: repeat(4, max-content); 3895 grid-template-areas: var(--adp-grid-areas); 3896 font-family: var(--adp-font-family), sans-serif; 3897 font-size: var(--adp-font-size); 3898 color: var(--adp-color); 3899 width: var(--adp-width); 3900 position: absolute; 3901 transition: opacity var(--adp-transition-duration) var(--adp-transition-ease), 3902 transform var(--adp-transition-duration) var(--adp-transition-ease); 3903 z-index: var(--adp-z-index); 3904} 3905 3906.air-datepicker-cell.-selected- { 3907 color: #1d1d1d; 3908 border: none; 3909 background: var(--adp-cell-background-color-selected); 3910} 3911 3912.air-datepicker-cell.-disabled- { 3913 cursor: not-allowed; 3914} 3915 3916/* Add a new rule for dark mode selected cells if needed, or adjust the general .air-datepicker-cell.-selected- inside the dark mode media query */ 3917.dark { 3918 .air-datepicker-cell.-selected- { 3919 color: #e0e0e0; /* Example: light text for selected cells in dark mode */ 3920 /* background: var(--adp-cell-background-color-selected); Is already set within .air-datepicker dark vars */ 3921 } 3922} 3923 3924/* Time-only picker styles */ 3925.air-datepicker.only-timepicker .air-datepicker--navigation { 3926 display: none; 3927} 3928 3929.air-datepicker.only-timepicker .air-datepicker--content { 3930 display: none; 3931} 3932 3933.air-datepicker.only-timepicker .air-datepicker--time { 3934 border-top: none; 3935} 3936 3937/* Scrollbar */ 3938 3939.small-scrollbar {
3940 scrollbar-width: thin; 3941 scrollbar-color: #a2a2a270 #7878780b; 3942} 3943 3944.small-scrollbar::-webkit-scrollbar { 3945 width: 6px; 3946} 3947 3948.small-scrollbar::-webkit-scrollbar-track { 3949 background: #7878780b; 3950} 3951 3952.small-scrollbar::-webkit-scrollbar-thumb { 3953 background-color: #a2a2a270; 3954 border-radius: 3px; 3955} 3956 3957/* Hide scrollbar for scroll area component */ 3958.scrollbar-hide { 3959 -ms-overflow-style: none; /* IE and Edge */ 3960 scrollbar-width: none; /* Firefox */ 3961} 3962 3963.scrollbar-hide::-webkit-scrollbar { 3964 display: none; /* Chrome, Safari and Opera */ 3965} 3966 3967/* Scroll Area Fade Effects - Register custom properties for animation */ 3968@property --fade-start-opacity { 3969 syntax: '<number>'; 3970 initial-value: 1; 3971 inherits: false; 3972} 3973 3974@property --fade-end-opacity { 3975 syntax: '<number>'; 3976 initial-value: 1; 3977 inherits: false; 3978} 3979 3980@property --fade-start-x-opacity { 3981 syntax: '<number>'; 3982 initial-value: 1; 3983 inherits: false; 3984} 3985 3986@property --fade-end-x-opacity { 3987 syntax: '<number>'; 3988 initial-value: 1; 3989 inherits: false; 3990} 3991 3992@property --fade-start-y-opacity { 3993 syntax: '<number>'; 3994 initial-value: 1; 3995 inherits: false; 3996} 3997 3998@property --fade-end-y-opacity { 3999 syntax: '<number>'; 4000 initial-value: 1; 4001 inherits: false; 4002} 4003 4004/* Scroll Area Fade Effects */ 4005.scroll-fade-x { 4006 --fade-start-opacity: 1; 4007 --fade-end-opacity: 1; 4008 --fade-size: 25px; 4009 4010 mask-image: 4011 linear-gradient(to right, 4012 hsl(0 0% 0% / var(--fade-start-opacity)), 4013 black var(--fade-size), 4014 black calc(100% - var(--fade-size)), 4015 hsl(0 0% 0% / var(--fade-end-opacity)) 4016 ); 4017 -webkit-mask-image: 4018 linear-gradient(to right, 4019 hsl(0 0% 0% / var(--fade-start-opacity)), 4020 black var(--fade-size), 4021 black calc(100% - var(--fade-size)), 4022 hsl(0 0% 0% / var(--fade-end-opacity)) 4023 ); 4024 4025 transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out; 4026} 4027 4028.scroll-fade-y { 4029 --fade-start-opacity: 1; 4030 --fade-end-opacity: 1; 4031 --fade-size: 40px; 4032 4033 mask-image: 4034 linear-gradient(to bottom, 4035 hsl(0 0% 0% / var(--fade-start-opacity)), 4036 black var(--fade-size), 4037 black calc(100% - var(--fade-size)), 4038 hsl(0 0% 0% / var(--fade-end-opacity)) 4039 ); 4040 -webkit-mask-image: 4041 linear-gradient(to bottom, 4042 hsl(0 0% 0% / var(--fade-start-opacity)), 4043 black var(--fade-size), 4044 black calc(100% - var(--fade-size)), 4045 hsl(0 0% 0% / var(--fade-end-opacity)) 4046 ); 4047 4048 transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out; 4049} 4050 4051.scroll-fade-both { 4052 --fade-start-x-opacity: 1; 4053 --fade-end-x-opacity: 1; 4054 --fade-start-y-opacity: 1; 4055 --fade-end-y-opacity: 1; 4056 --fade-size: 40px; 4057 --fade-top-offset: 0px; /* Offset from top to skip header areas */ 4058 --fade-left-offset: 0px; /* Offset from left to skip sticky columns */ 4059 4060 mask-image: 4061 linear-gradient(to right, 4062 black var(--fade-left-offset), 4063 hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset), 4064 black calc(var(--fade-left-offset) + var(--fade-size)), 4065 black calc(100% - var(--fade-size)), 4066 hsl(0 0% 0% / var(--fade-end-x-opacity)) 4067 ), 4068 linear-gradient(to bottom, 4069 black var(--fade-top-offset), 4070 hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset), 4071 black calc(var(--fade-top-offset) + var(--fade-size)), 4072 black calc(100% - var(--fade-size)), 4073 hsl(0 0% 0% / var(--fade-end-y-opacity)) 4074 ); 4075 -webkit-mask-image: 4076 linear-gradient(to right, 4077 black var(--fade-left-offset), 4078 hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset), 4079 black calc(var(--fade-left-offset) + var(--fade-size)), 4080 black calc(100% - var(--fade-size)), 4081 hsl(0 0% 0% / var(--fade-end-x-opacity)) 4082 ), 4083 linear-gradient(to bottom, 4084 black var(--fade-top-offset), 4085 hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset), 4086 black calc(var(--fade-top-offset) + var(--fade-size)), 4087 black calc(100% - var(--fade-size)), 4088 hsl(0 0% 0% / var(--fade-end-y-opacity)) 4089 ); 4090 mask-composite: intersect; 4091 -webkit-mask-composite: source-in; 4092 4093 transition: --fade-start-x-opacity 300ms ease-out, --fade-end-x-opacity 300ms ease-out, 4094 --fade-start-y-opacity 300ms ease-out, --fade-end-y-opacity 300ms ease-out; 4095} 4096 4097/* Update fade opacity when scrolled - fade appears when there's overflow */ 4098[data-overflow-x-start] .scroll-fade-x, 4099[data-overflow-x-start] .scroll-fade-both { 4100 --fade-start-opacity: 0; 4101 --fade-start-x-opacity: 0; 4102} 4103 4104[data-overflow-x-end] .scroll-fade-x, 4105[data-overflow-x-end] .scroll-fade-both { 4106 --fade-end-opacity: 0; 4107 --fade-end-x-opacity: 0; 4108} 4109 4110[data-overflow-y-start] .scroll-fade-y, 4111[data-overflow-y-start] .scroll-fade-both { 4112 --fade-start-opacity: 0; 4113 --fade-start-y-opacity: 0; 4114} 4115 4116[data-overflow-y-end] .scroll-fade-y, 4117[data-overflow-y-end] .scroll-fade-both { 4118 --fade-end-opacity: 0; 4119 --fade-end-y-opacity: 0; 4120} 4121 4122/* Cursor pointer for buttons */ 4123 4124@layer base { 4125 button:not(:disabled), 4126 [role="button"]:not(:disabled) { 4127 cursor: pointer; 4128 } 4129} 4130 4131/* Toast Notifications */ 4132.toast-item { 4133 @apply absolute w-full left-0 select-none; 4134 z-index: var(--toast-z-index, 100); 4135 4136 /* Position based on data attributes */ 4137 top: var(--toast-top, auto); 4138 bottom: var(--toast-bottom, auto); 4139 transform: var(--toast-transform, translateY(0)); 4140 scale: var(--toast-scale, 100%); 4141 opacity: var(--toast-opacity, 1); 4142
4143 /* Separate transitions for better control - like Sonner */ 4144 transition: transform 400ms ease, opacity 400ms ease, scale 400ms ease, top 400ms ease, bottom 400ms ease, 4145 height 200ms ease; 4146} 4147 4148/* Initial hidden state for enter animation */ 4149.toast-item[data-mounted="false"] { 4150 opacity: 0; 4151} 4152 4153.toast-item[data-mounted="false"][data-position*="bottom"] { 4154 transform: translateY(100%); 4155} 4156 4157.toast-item[data-mounted="false"][data-position*="top"] { 4158 transform: translateY(-100%); 4159} 4160 4161/* Removed state for exit animation */ 4162.toast-item[data-removed="true"] { 4163 opacity: 0; 4164 scale: 95%; 4165 pointer-events: none; 4166} 4167 4168/* In stacked mode, removed toasts should slide away */ 4169.toast-item[data-removed="true"][data-expanded="false"][data-position*="bottom"] { 4170 transform: translateY(calc(var(--toast-index) * 14px + 5%)); 4171} 4172 4173.toast-item[data-removed="true"][data-expanded="false"][data-position*="top"] { 4174 transform: translateY(calc(-1 * (var(--toast-index) * 14px + 5%))); 4175} 4176 4177/* Overflow toasts (removed due to limit) slide in opposite direction */ 4178.toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="bottom"] { 4179 transform: translateY(calc(-1 * (var(--toast-index) * 14px + 25%))); 4180 scale: 78%; 4181} 4182 4183.toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="top"] { 4184 transform: translateY(calc(var(--toast-index) * 14px + 25%)); 4185 scale: 78%; 4186} 4187 4188/* Pointer events based on visibility */ 4189.toast-item[data-visible="false"] { 4190 pointer-events: none; 4191} 4192 4193/* Expanded mode styles */ 4194.toast-item[data-expanded="true"] { 4195 --toast-scale: 100%; 4196 height: var(--initial-height); 4197} 4198 4199.toast-item[data-expanded="true"][data-position*="bottom"] { 4200 --toast-top: auto; 4201 --toast-bottom: var(--toast-offset, 0px); 4202 --toast-transform: translateY(0); 4203} 4204 4205.toast-item[data-expanded="true"][data-position*="top"] { 4206 --toast-top: var(--toast-offset, 0px); 4207 --toast-bottom: auto; 4208 --toast-transform: translateY(0); 4209} 4210 4211/* Stacked mode styles */ 4212.toast-item[data-expanded="false"][data-front="true"] { 4213 --toast-scale: 100%; 4214 --toast-opacity: 1; 4215 height: var(--initial-height); 4216} 4217 4218.toast-item[data-expanded="false"][data-front="true"][data-position*="bottom"] { 4219 --toast-top: auto; 4220 --toast-bottom: 0px; 4221 --toast-transform: translateY(0); 4222} 4223 4224.toast-item[data-expanded="false"][data-front="true"][data-position*="top"] { 4225 --toast-top: 0px; 4226 --toast-bottom: auto; 4227 --toast-transform: translateY(0); 4228} 4229 4230/* Non-front toasts in stack - Sonner approach */ 4231.toast-item[data-expanded="false"]:not([data-front="true"]) { 4232 height: var(--front-toast-height); 4233 overflow: hidden; 4234 --toast-scale: calc(100% - (var(--toast-index) * 6%)); 4235 display: flex; 4236 flex-direction: column; 4237} 4238 4239.toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="bottom"] { 4240 --toast-top: auto; 4241 --toast-bottom: 0px; 4242 --toast-transform: translateY(calc(-1 * var(--toast-index) * 14px)); 4243 justify-content: flex-start; /* Content at top, bottom gets cut */ 4244} 4245 4246.toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="top"] { 4247 --toast-top: 0px; 4248 --toast-bottom: auto; 4249 --toast-transform: translateY(calc(var(--toast-index) * 14px)); 4250 justify-content: flex-end; /* Content at bottom, top gets cut */ 4251} 4252 4253/* Hidden toasts (beyond 3rd) */ 4254.toast-item[data-expanded="false"][data-visible="false"] { 4255 --toast-opacity: 0; 4256 --toast-scale: 82%; 4257} 4258 4259.toast-item[data-expanded="false"][data-visible="false"][data-position*="bottom"] { 4260 --toast-top: auto; 4261 --toast-bottom: -200px; 4262 --toast-transform: translateY(0); 4263} 4264 4265.toast-item[data-expanded="false"][data-visible="false"][data-position*="top"] { 4266 --toast-top: -200px; 4267 --toast-bottom: auto; 4268 --toast-transform: translateY(0); 4269} 4270</code></pre> 4271 <button type="button" class="absolute top-2 right-4 flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-medium shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 bg-neutral-800/50 text-neutral-50 hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200 border border-neutral-700" 4272 data-setup-code-filter-target="copyButton" 4273 data-controller="clipboard analytics" 4274 data-action="click->
4274analytics#track" 4275 data-analytics-event-name-value="installation copied custom css" 4276 data-clipboard-text='/* Semantic theme tokens. Custom themes override the --rb-* variables. */ 4277@theme inline { 4278 --color-primary: var(--rb-primary, var(--color-neutral-800)); 4279 --color-primary-hover: var(--rb-primary-hover, var(--color-neutral-700)); 4280 --color-primary-content: var(--rb-primary-content, var(--color-neutral-800)); 4281 --color-primary-foreground: var(--rb-primary-foreground, var(--color-white)); 4282 --color-accent: var(--rb-primary, var(--color-neutral-800)); 4283} 4284 4285:root { 4286 accent-color: var(--color-accent); 4287} 4288 4289kbd { 4290 @apply rounded-md border border-black/10 bg-white px-1 font-mono text-[11px] text-neutral-800 shadow-[0px_1.5px_0px_0px_rgba(0,0,0,0.05)] dark:border-white/10 dark:bg-neutral-900 dark:text-neutral-200 dark:shadow-[0px_1px_0px_0px_rgba(255,255,255,0.1)]; 4291} 4292 4293/* Forms */ 4294 4295label, 4296.label { 4297 @apply text-sm font-medium text-neutral-700 dark:text-neutral-100; 4298} 4299 4300.form-input[disabled] { 4301 @apply cursor-not-allowed bg-neutral-200; 4302} 4303 4304/* Custom search input clear button styling */ 4305input[type="search"]::-webkit-search-cancel-button { 4306 -webkit-appearance: none; 4307 appearance: none; 4308 height: 16px; 4309 width: 16px; 4310 cursor: pointer; 4311 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%236b7280'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4312 background-size: 12px 12px; 4313 background-repeat: no-repeat; 4314 background-position: center; 4315} 4316 4317input[type="search"]::-webkit-search-cancel-button:hover { 4318 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23374151'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4319} 4320 4321.dark input[type="search"]::-webkit-search-cancel-button { 4322 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23d1d5db'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4323} 4324 4325.dark input[type="search"]::-webkit-search-cancel-button:hover { 4326 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23f3f4f6'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4327} 4328 4329/* non-input elements (like the Stripe card form) can be styled to look like an input */ 4330div.form-control { 4331 -webkit-appearance: none; 4332 -moz-appearance: none; 4333 appearance: none; 4334 background-color: #fff; 4335 border-width: 1px; 4336 padding-top: 0.5rem; 4337 padding-right: 0.75rem; 4338 padding-bottom: 0.5rem; 4339 padding-left: 0.75rem; 4340 font-size: 1rem; 4341 line-height: 1.5rem; 4342} 4343 4344.form-control { 4345 @apply block w-full rounded-lg bg-white border-0 px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset placeholder:text-neutral-500 focus:ring-2 focus:ring-neutral-600 dar
4345k:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dark:focus:ring-neutral-500; 4346} 4347 4348@media (min-width: 640px) { 4349 .form-control { 4350 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 4351 } 4352} 4353 4354.form-control[disabled] { 4355 @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600; 4356} 4357 4358.form-control.error { 4359 @apply border-red-400 ring-red-300 focus:ring-red-500 dark:border-red-600 dark:ring-red-500; 4360} 4361 4362select:not([multiple]) { 4363 @apply w-full appearance-none rounded-lg border-0 bg-white px-3 py-2 text-base/6 text-neutral-900 shadow-xs ring-1 ring-neutral-300 outline-hidden ring-inset focus:ring-2 focus:ring-neutral-600; 4364 4365 /* Custom dropdown arrow */ 4366 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 4367 background-position: right 0.75rem center; 4368 background-repeat: no-repeat; 4369 background-size: 1.25em 1.25em; 4370 padding-right: 2.5rem; 4371} 4372 4373@media (min-width: 640px) { 4374 select:not([multiple]) { 4375 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 4376 } 4377} 4378 4379/* Dark mode styling for single select */ 4380.dark { 4381 select:not([multiple]) { 4382 @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
4382k:focus:ring-neutral-500; 4383 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 4384 } 4385} 4386 4387select:not([multiple])[disabled] { 4388 @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500; 4389} 4390 4391select[multiple] { 4392 @apply w-full rounded-lg rounded-r-none border-0 bg-white px-3 py-2.5 text-base/6 text-neutral-900 shadow-xs outline-1 -outline-offset-1 outline-neutral-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-600 dark:outline-neutral-600; 4393 min-height: 120px; 4394} 4395 4396select[multiple] option { 4397 @apply rounded-md; 4398} 4399 4400@media (min-width: 640px) { 4401 select[multiple] { 4402 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 4403 } 4404} 4405 4406/* Dark mode styling for multiple select */ 4407.dark { 4408 select[multiple] { 4409 @apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dar
4409k:focus:ring-neutral-500; 4410 } 4411} 4412 4413select[multiple][disabled] { 4414 @apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500; 4415} 4416 4417option { 4418 @apply bg-white px-3 py-2 text-sm text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100; 4419} 4420 4421option:checked { 4422 @apply bg-neutral-100 dark:bg-neutral-600; 4423} 4424 4425option:hover { 4426 @apply bg-neutral-50 dark:bg-neutral-600; 4427} 4428 4429.caret { 4430 @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-800; 4431} 4432 4433[type="checkbox"] { 4434 @apply size-4 cursor-pointer appearance-none rounded-sm border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto; 4435} 4436 4437.dark [type="checkbox"]:focus { 4438 outline-color: var(--color-primary-content); 4439} 4440 4441/* Default primary flips light without overwriting a generated theme. */ 4442.dark { 4443 --color-primary: var(--rb-primary, var(--color-neutral-100)); 4444 --color-primary-hover: var(--rb-primary-hover, var(--color-white)); 4445 --color-primary-content: var(--rb-primary-content, var(--color-white)); 4446 --color-primary-foreground: var(--rb-primary-foreground, var(--color-neutral-900)); 4447 --color-accent: var(--rb-primary, var(--color-neutral-100)); 4448} 4449 4450[type="checkbox"]:checked { 4451 border-color: var(--color-primary); 4452 background-color: var(--color-primary); 4453 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); 4454 background-size: 100% 100%; 4455 background-position: center; 4456 background-repeat: no-repeat; 4457} 4458 4459/* Dark marks when primary-foreground is dark (amber, yellow, white primary in dark mode). 4460 Theme preview opts out with data-primary-mark="light" for colored primaries. */ 4461:where([data-primary-mark="dark"]) [type="checkbox"]:checked, 4462.dark:where(:not([data-primary-mark="light"])) [type="checkbox"]:checked { 4463 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23171717' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); 4464} 4465 4466[type="checkbox"]:indeterminate { 4467 border-color: var(--color-primary); 4468 background-color: var(--color-primary); 4469 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' %3e%3cline x1='10.75' y1='6' x2='1.25' y2='6'%3e%3c/line%3e%3c/g%3e%3c/svg%3e"); 4470 background-size: 75% 75%; 4471 background-position: center; 4472 background-repeat: no-repeat; 4473} 4474 4475:where([data-primary-mark="dark"]) [type="checkbox"]:indeterminate, 4476.dark:where(:not([data-primary-mark="light"])) [type="checkbox"]:indeterminate { 4477 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cg fill='none' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' %3e%3cline x1='10.75' y1='6' x2='1.25' y2='6'%3e%3c/line%3e%3c/g%3e%3c/svg%3e"); 4478} 4479 4480[type="checkbox"]:disabled { 4481 @apply cursor-not-allowed border-neutral-300 bg-neutral-200 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
4481k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500; 4482} 4483 4484[type="checkbox"]:disabled:checked { 4485 @apply border-neutral-300 bg-neutral-200 dark:border-neutral-600 dark:bg-neutral-600; 4486} 4487 4488/* Anchor indicator for shift-click range selection */ 4489[type="checkbox"].checkbox-anchor { 4490 outline: 2px dashed currentColor; 4491 outline-offset: 2px; 4492 @apply outline-neutral-600 dark:outline-neutral-200; 4493} 4494 4495[type="radio"] { 4496 @apply size-4 cursor-pointer appearance-none rounded-full border border-neutral-300 bg-white accent-primary checked:border-primary checked:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-primary-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-content disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-primary dark:checked:bg-primary dark:focus:outline-primary-content dark:focus-visible:outline-primary-content dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto; 4497} 4498 4499.dark [type="radio"]:focus { 4500 outline-color: var(--color-primary-content); 4501} 4502 4503[type="radio"]:checked { 4504 border-color: var(--color-primary); 4505 background-color: var(--color-primary); 4506 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); 4507 background-size: 100% 100%; 4508 background-position: center; 4509 background-repeat: no-repeat; 4510} 4511 4512:where([data-primary-mark="dark"]) [type="radio"]:checked, 4513.dark:where(:not([data-primary-mark="light"])) [type="radio"]:checked { 4514 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23171717' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); 4515} 4516 4517[type="radio"]:disabled { 4518 @apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dar
4518k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500; 4519} 4520 4521[type="radio"]:disabled:checked { 4522 @apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600; 4523} 4524 4525/* Datalist styling */ 4526input[list] { 4527 -webkit-appearance: none; 4528 -moz-appearance: none; 4529 appearance: none; 4530} 4531 4532/* Replace default datalist arrow in WebKit browsers */ 4533input[list].replace-default-datalist-arrow::-webkit-calendar-picker-indicator { 4534 display: none !important; 4535 -webkit-appearance: none !important; 4536} 4537 4538input[list].replace-default-datalist-arrow { 4539 padding-right: 2.5rem; 4540 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 4541 background-position: right 0.75rem center; 4542 background-repeat: no-repeat; 4543 background-size: 1.25em 1.25em; 4544} 4545 4546/* Dark mode datalist arrow */ 4547.dark { 4548 input[list].replace-default-datalist-arrow { 4549 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 4550 } 4551} 4552 4553/* Tom Select */ 4554 4555select[multiple][data-controller="select"] { 4556 @apply invisible; 4557} 4558 4559.dropdown-input { 4560 @apply !border-neutral-300 !bg-white text-base !px-3 !py-2.5 placeholder:!text-neutral-500 dark:!border-neutral-600 dar
4560k:!bg-neutral-700 dark:!placeholder-neutral-300; 4561} 4562 4563@media (min-width: 640px) { 4564 .plugin-dropdown_input .dropdown-input { 4565 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 4566 } 4567} 4568 4569.plugin-dropdown_input.focus.dropdown-active .ts-control { 4570 @apply !border-none; 4571} 4572 4573.ts-dropdown-content { 4574 @apply py-1.5 space-y-0.5; 4575 max-height: 240px; 4576 scroll-behavior: auto; 4577} 4578 4579.ts-dropdown-content { 4580 scrollbar-width: thin; 4581 scrollbar-color: #a2a2a270 #7878780b; 4582} 4583 4584.ts-dropdown-content::-webkit-scrollbar { 4585 width: 6px; 4586} 4587 4588.ts-dropdown-content::-webkit-scrollbar-track { 4589 background: #78787879; 4590} 4591 4592.ts-dropdown-content::-webkit-scrollbar-thumb { 4593 background-color: #a2a2a270; 4594 border-radius: 3px; 4595} 4596 4597.ts-control { 4598 @apply flex min-h-10 w-full px-3 py-2 cursor-default rounded-lg border-0 text-base/6 text-neutral-900 shadow-xs ring-1 placeholder:text-neutral-500 ring-neutral-300 outline-hidden ring-inset focus:ring-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dar
4598k:focus:ring-neutral-500; 4599 4600 &[disabled] { 4601 @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600; 4602 } 4603 4604 &.error { 4605 @apply border-red-400 outline-red-300 focus:outline-red-500 dark:border-red-600 dark:outline-red-500; 4606 } 4607} 4608 4609.plugin-dropdown_input .dropdown-input { 4610 @apply outline-hidden; 4611} 4612 4613/* Ensure items-placeholder is visible when no items are selected */ 4614.plugin-dropdown_input .items-placeholder { 4615 display: block !important; 4616} 4617 4618/* Only hide items-placeholder when items are actually selected */ 4619.plugin-dropdown_input.has-items .items-placeholder { 4620 display: none !important; 4621} 4622 4623/* Override the dropdown-active rule to keep placeholder visible when no items selected */ 4624.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder { 4625 display: block !important; 4626} 4627 4628.ts-dropdown .active.create { 4629 @apply cursor-pointer bg-neutral-100 text-neutral-900 dark:bg-neutral-700 dark:text-white; 4630} 4631 4632.loading-more-results { 4633 @apply !cursor-default; 4634} 4635 4636.disabled .ts-control { 4637 cursor: not-allowed !important; 4638} 4639 4640@media (min-width: 640px) { 4641 .ts-control { 4642 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 4643 } 4644} 4645 4646.full .ts-control { 4647 @apply dark:bg-neutral-700; 4648} 4649 4650.ts-wrapper.single .ts-control, 4651.ts-wrapper.single .ts-control input, 4652.ts-control, 4653.ts-wrapper.single.input-active .ts-control { 4654 @apply cursor-text; 4655} 4656 4657.ts-dropdown [data-selectable] .highlight { 4658 @apply bg-orange-500/20 dark:bg-yellow-500/20; 4659} 4660 4661.ts-control, 4662.ts-wrapper.single.input-active .ts-control { 4663 @apply bg-white dark:bg-neutral-700; 4664} 4665 4666.input-active { 4667 @apply shadow rounded-lg ring-2 ring-inset ring-neutral-600 dar
4667k:ring-neutral-500; 4668} 4669 4670.ts-wrapper { 4671 @apply bg-white dark:bg-neutral-700 rounded-lg; 4672} 4673 4674.ts-control, 4675.ts-wrapper.single.input-active .ts-control { 4676 @apply bg-transparent dark:bg-transparent; 4677} 4678 4679.ts-control input { 4680 @apply !m-0 bg-white text-base placeholder:text-neutral-500 read-only:!cursor-pointer dark:bg-neutral-800 dark:text-white dark:placeholder-neutral-300; 4681} 4682 4683@media (min-width: 640px) { 4684 .ts-control input { 4685 font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */ 4686 } 4687} 4688 4689.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control { 4690 @apply !pr-8; 4691} 4692 4693.ts-wrapper.plugin-remove_button .item { 4694 @apply rounded-md; 4695} 4696 4697.ts-wrapper.plugin-remove_button .item .remove { 4698 @apply rounded-r-lg border-none py-1 text-lg leading-none; 4699} 4700 4701.ts-wrapper.plugin-remove_button .item .remove::before { 4702 content: ""; 4703 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23737373'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4704 @apply block size-4 bg-center bg-no-repeat; 4705} 4706 4707/* Red remove button for flagged items */ 4708.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before { 4709 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23991B1B'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4710} 4711 4712.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before { 4713 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23FCA5A5'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4714} 4715 4716/* Add separate dark mode version */ 4717.dark { 4718 .ts-wrapper.plugin-remove_button .item .remove::before { 4719 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23A1A1A1'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); 4720 } 4721} 4722 4723.ts-wrapper.plugin-remove_button .item .remove { 4724 font-size: 0 !important; 4725 @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded !border-0 !p-1 !leading-none text-neutral-500 dark:text-neutral-400 dark:hover:bg-neutral-700; 4726} 4727 4728/* Red remove button styling for flagged items inside input */ 4729.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove { 4730 @apply text-red-700 hover:bg-red-200 hover:text-red-900 dark:text-[#FCA5A5] dark:hover:bg-red-100/10 dark:hover:text-red-200; 4731} 4732 4733/* Flag toggle button styling */ 4734.ts-wrapper.plugin-remove_button .item .flag-toggle { 4735 @apply text-neutral-400 dark:text-neutral-400; 4736} 4737 4738.ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle { 4739 @apply flex size-[18px] items-center justify-center rounded hover:bg-red-200 dark:hover:bg-red-100/10 text-red-800 dark:text-[#FCA5A5]; 4740} 4741 4742.ts-dropdown { 4743 @apply z-40 m-0 overflow-hidden rounded-lg border border-t border-solid border-neutral-300 shadow-xs dark:border-neutral-600 dar
4743k:bg-neutral-800 dark:text-white; 4744} 4745 4746.ts-dropdown .create { 4747 @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm dark:text-neutral-400; 4748} 4749 4750.ts-dropdown [data-selectable].option, 4751.ts-dropdown .no-results { 4752 @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm; 4753} 4754 4755.ts-dropdown .option, 4756.ts-dropdown [data-disabled], 4757.ts-dropdown [data-disabled] [data-selectable].option { 4758 @apply mx-1.5 cursor-not-allowed rounded-md px-2.5 py-2 text-sm; 4759} 4760 4761.ts-dropdown [data-selectable].option, 4762.ts-dropdown .ts-dropdown .create { 4763 @apply cursor-pointer; 4764} 4765 4766/* Focused/hover state - lighter background */ 4767.ts-dropdown .active { 4768 @apply bg-neutral-100 text-neutral-900 dark:bg-neutral-600/50 dark:text-white; 4769} 4770 4771/* Selected state - darker/more prominent */ 4772.ts-dropdown .selected { 4773 @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white; 4774} 4775 4776/* When an option is both selected AND focused, prioritize the selected styling but add a subtle ring */ 4777.ts-dropdown .selected.active { 4778 @apply bg-neutral-200 text-black dark:bg-neutral-500/50 dark:text-white; 4779} 4780 4781.ts-dropdown .spinner { 4782 @apply h-auto w-auto; 4783} 4784 4785.ts-dropdown .spinner:after { 4786 @apply mt-1 mb-0 inline-block size-4 border-2 p-0; 4787} 4788 4789.ts-wrapper:not(.form-control):not(.form-select).single .ts-control { 4790 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 4791 background-position: right 0.5rem center; 4792 background-repeat: no-repeat; 4793 background-size: 1.5em 1.5em; 4794 print-color-adjust: exact; 4795} 4796 4797/* Dark mode arrow for single select */ 4798.dark { 4799 .ts-wrapper:not(.form-control):not(.form-select).single .ts-control { 4800 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 4801 } 4802} 4803 4804/* Add dropdown arrow to multiselect elements */ 4805.ts-wrapper:not(.form-control):not(.form-select).multi .ts-control { 4806 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e"); 4807 background-position: right 0.6rem center; 4808 background-repeat: no-repeat; 4809 background-size: 1.25em 1.25em; 4810 print-color-adjust: exact; 4811 padding-right: 2rem !important; 4812} 4813 4814/* Dark mode arrow for multiselect */ 4815.dark { 4816 .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control { 4817 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e"); 4818 } 4819} 4820.ts-wrapper.multi .ts-control > div { 4821 @apply mr-1 inline-flex items-center justify-center rounded-md bg-neutral-100 px-2 text-xs leading-none font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100; 4822} 4823 4824/* Ensure items don't overlap with the dropdown arrow */ 4825.ts-wrapper.multi.has-items .ts-control { 4826 @apply !pt-[7px] !pr-8 !pb-[4px]; 4827} 4828 4829.ts-wrapper.plugin-remove_button:not(.rtl) .item { 4830 @apply cursor-default; 4831} 4832 4833.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { 4834 @apply !-ml-0.5 cursor-pointer border-none; 4835} 4836 4837.ts-wrapper.plugin-remove_button .item .remove { 4838 @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded border-0 text-lg leading-none text-neutral-900/60 hover:text-neutral-900 dark:text-neutral-100/60 dark:hover:bg-neutral-700 dark:hover:text-neutral-100; 4839} 4840 4841.ts-dropdown .optgroup-header { 4842 @apply border-t border-neutral-300 bg-white font-semibold text-neutral-900 dark:border-neutral-600 dar
4842k:bg-neutral-800 dark:text-neutral-100; 4843} 4844 4845.ts-dropdown.plugin-optgroup_columns .optgroup { 4846 height: fit-content; 4847 @apply !mt-0; 4848} 4849 4850.optgroup { 4851 @apply mt-1.5 first:mt-0; 4852} 4853 4854.dark .ts-dropdown.plugin-optgroup_columns .optgroup { 4855 border-right: 1px solid #525252; 4856} 4857 4858.ts-wrapper.multi.has-items .ts-control > input { 4859 @apply !mb-[3px]; 4860} 4861 4862.tomselect-checkbox { 4863 @apply !mr-0; 4864} 4865 4866.input-hidden.focus { 4867 @apply !rounded-lg border border-neutral-300 dark:border-neutral-600; 4868} 4869 4870/* Replace the previous attempt with this updated selector */ 4871select[data-select-disable-typing-value="true"] + .ts-wrapper .ts-control, 4872select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control, 4873select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control input, 4874select[data-select-disable-typing-value="true"] + .ts-wrapper.single.input-active .ts-control { 4875 @apply cursor-default; 4876} 4877 4878.ts-dropdown-content.is-loading-more .option { 4879 pointer-events: none !important; 4880} 4881 4882/* Count display for multi-select */ 4883.ts-count-display { 4884 @apply mr-auto !my-0.5 !bg-transparent !px-0 !text-sm !font-normal pointer-events-none; 4885 display: none; 4886} 4887 4888/* Hide count display when not active (explicit rule) */ 4889.ts-control:not(.count-active) .ts-count-display { 4890 display: none !important; 4891} 4892 4893/* Hide items and input when count is active */ 4894.ts-control.count-active .item { 4895 display: none !important; 4896 visibility: hidden !important; 4897 width: 0 !important; 4898 height: 0 !important; 4899 margin: 0 !important; 4900 padding: 0 !important; 4901} 4902 4903/* Keep input technically visible for keyboard navigation but make it invisible */ 4904.ts-control.count-active input { 4905 position: absolute !important; 4906 opacity: 0 !important; 4907 width: 0 !important; 4908 height: 0 !important; 4909 padding: 0 !important; 4910 margin: 0 !important; 4911} 4912 4913/* Ensure proper spacing when count is displayed */ 4914.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) { 4915 @apply !py-[5px]; 4916} 4917 4918/* External tags styles - hide tags inside control */ 4919.ts-control.external-tags-active .item { 4920 display: none !important; 4921 visibility: hidden !important; 4922 width: 0 !important; 4923 height: 0 !important; 4924 margin: 0 !important; 4925 padding: 0 !important; 4926} 4927 4928/* Reset padding when external tags are active */ 4929.ts-wrapper.multi.has-items .ts-control.external-tags-active { 4930 @apply !py-2; 4931} 4932 4933/* Keep placeholder visible when external tags are active */ 4934.plugin-dropdown_input.has-items .ts-control.external-tags-active .items-placeholder { 4935 display: block !important; 4936} 4937 4938/* Reset input margins when external tags are active */ 4939.ts-wrapper.multi.has-items .ts-control.external-tags-active > input { 4940 margin: 0 !important; 4941} 4942 4943/* Emoji picker */ 4944 4945em-emoji-picker { 4946 --color-border-over: rgba(0, 0, 0, 0.1); 4947 --color-border: rgba(0, 0, 0, 0.05); 4948 --font-family: "Inter", sans-serif; 4949 --rgb-accent: 155, 155, 155; 4950 4951 position: absolute; 4952 z-index: 1000; 4953 max-width: 400px; 4954 min-width: 318px; 4955 resize: horizontal; 4956 overflow: auto; 4957} 4958 4959@media (max-width: 768px) { 4960 em-emoji-picker { 4961 max-width: 80vw; 4962 } 4963} 4964 4965.dark { 4966 em-emoji-picker { 4967 border: 1px solid #353535; 4968 --color-border: rgba(255, 255, 255, 0.1); 4969 --color-border-over: rgba(255, 255, 255, 0.2); 4970 } 4971} 4972 4973/* Shoelace Neutral styles */ 4974:root { 4975 --sl-color-primary-50: var(--sl-color-neutral-50) !important; 4976 --sl-color-primary-100: var(--sl-color-neutral-100) !important; 4977 --sl-color-primary-200: var(--sl-color-neutral-200) !important; 4978 --sl-color-primary-300: var(--sl-color-neutral-300) !important; 4979 --sl-color-primary-400: var(--sl-color-neutral-400) !important; 4980 --sl-color-primary-500: var(--sl-color-neutral-500) !important; 4981 --sl-color-primary-600: var(--sl-color-neutral-600) !important; 4982 --sl-color-primary-700: var(--sl-color-neutral-700) !important; 4983 --sl-color-primary-800: var(--sl-color-neutral-800) !important; 4984 --sl-color-primary-900: var(--sl-color-neutral-900) !important; 4985 --sl-color-primary-950: var(--sl-color-neutral-950) !important; 4986 4987 --sl-input-focus-ring-color: hsla(0, 0%, 81%, 0.4) !important; 4988 4989 --sl-border-radius-medium: 0.5rem !important; 4990 --sl-border-radius-large: 0.75rem !important; 4991} 4992 4993/* air-datepicker */ 4994 4995.air-datepicker { 4996 --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 4997 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 4998 --adp-font-size: 14px; 4999 --adp-width: 246px; 5000 --adp-z-index: 40; 5001 --adp-padding: 4px; 5002 --adp-grid-areas: "nav" "body" "timepicker" "buttons"; 5003 --adp-transition-duration: 0.3s; 5004 --adp-transition-ease: ease-out; 5005 --adp-transition-offset: 8px; 5006 --adp-background-color: #fff;
5007 --adp-background-color-hover: #f0f0f0; 5008 --adp-background-color-active: #eaeaea; 5009 --adp-background-color-in-range: rgba(16, 16, 16, 0.1); 5010 --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2); 5011 --adp-background-color-selected-other-month-focused: #f1f1f1; 5012 --adp-background-color-selected-other-month: #e6e6e6; 5013 --adp-color: #4a4a4a; 5014 --adp-color-secondary: #9c9c9c; 5015 --adp-accent-color: #0a0a0a; 5016 --adp-color-current-date: var(--adp-accent-color); 5017 --adp-color-other-month: #dedede; 5018 --adp-color-disabled: #aeaeae; 5019 --adp-color-disabled-in-range: #939393; 5020 --adp-color-other-month-hover: #c5c5c5; 5021 --adp-border-color: rgba(0, 0, 0, 0.1); 5022 --adp-border-color-inner: #efefef; 5023 --adp-border-radius: 8px; 5024 --adp-border-color-inline: #d7d7d7; 5025 --adp-nav-height: 32px; 5026 --adp-nav-arrow-color: var(--adp-color-secondary); 5027 --adp-nav-action-size: 32px; 5028 --adp-nav-color-secondary: var(--adp-color-secondary); 5029 --adp-day-name-color: #464646; 5030 --adp-day-name-color-hover: #f1f1f1; 5031 --adp-day-cell-width: 1fr; 5032 --adp-day-cell-height: 32px; 5033 --adp-month-cell-height: 42px; 5034 --adp-year-cell-height: 56px; 5035 --adp-pointer-size: 10px; 5036 --adp-poiner-border-radius: 2px; 5037 --adp-pointer-offset: 14px; 5038 --adp-cell-border-radius: 4px; 5039 --adp-cell-background-color-hover: var(--adp-background-color-hover); 5040 --adp-cell-background-color-selected: #1d1d1d; 5041 --adp-cell-background-color-selected-hover: #303030; 5042 --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1); 5043 --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2); 5044 --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected); 5045 --adp-btn-height: 32px; 5046 --adp-btn-color: var(--adp-accent-color); 5047 --adp-btn-color-hover: var(--adp-color); 5048 --adp-btn-border-radius: var(--adp-border-radius); 5049 --adp-btn-background-color-hover: var(--adp-background-color-hover); 5050 --adp-btn-background-color-active: var(--adp-background-color-active); 5051 --adp-time-track-height: 1px; 5052 --adp-time-track-color: #dedede; 5053 --adp-time-track-color-hover: #b1b1b1; 5054 --adp-time-thumb-size: 12px; 5055 --adp-time-padding-inner: 10px; 5056 --adp-time-day-period-color: var(--adp-color-secondary); 5057 --adp-mobile-font-size: 16px; 5058 --adp-mobile-nav-height: 40px; 5059 --adp-mobile-width: 320px; 5060 --adp-mobile-day-cell-height: 38px; 5061 --adp-mobile-month-cell-height: 48px; 5062 --adp-mobile-year-cell-height: 64px; 5063} 5064.air-datepicker-overlay { 5065 --adp-overlay-background-color: rgba(0, 0, 0, 0.3); 5066 --adp-overlay-transition-duration: 0.3s; 5067 --adp-overlay-transition-ease: ease-out; 5068 --adp-overlay-z-index: 99; 5069} 5070 5071.air-datepicker-cell.-selected-.-day- { 5072 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 5073 background: var(--adp-cell-background-color-selected); 5074} 5075 5076.air-datepicker-cell.-selected-.-year- { 5077 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 5078 background: var(--adp-cell-background-color-selected); 5079} 5080 5081.air-datepicker-cell.-selected-.-month- { 5082 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 5083 background: var(--adp-cell-background-color-selected); 5084} 5085 5086.air-datepicker-cell.-selected- { 5087 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 5088 background: var(--adp-cell-background-color-selected); 5089} 5090 5091.air-datepicker-cell.-selected-.-current- { 5092 color: #ffffff; /* Ensure selected cell text is also light in dark mode */ 5093 background: var(--adp-cell-background-color-selected); 5094} 5095 5096.air-datepicker-cell.-current- { 5097 border: 1px solid #bdbdbd !important; 5098} 5099 5100.air-datepicker-cell.-selected-.-day-.-other-month- { 5101 color: #cccccc; /* Ensure selected cell text is also light in dark mode */ 5102 background: #7e7e7e; 5103} 5104 5105.dark { 5106 .air-datepicker { 5107 --adp-background-color: #2d2d2d; /* Dark background */ 5108 --adp-background-color-hover: #3a3a3a; 5109 --adp-background-color-active: #4a4a4a; 5110 --adp-background-color-in-range: rgba(196, 196, 196, 0.2); 5111 --adp-background-color-in-range-focused: rgba(196, 196, 196, 0.3); 5112 --adp-background-color-selected-other-month-focused: #333; 5113 --adp-background-color-selected-other-month: #444;
5114 --adp-color: #e0e0e0; /* Light text color */ 5115 --adp-color-secondary: #a0a0a0; 5116 --adp-accent-color: #ffffff; /* A light accent color for dark mode */ 5117 --adp-color-other-month: #555; 5118 --adp-color-disabled: #777; 5119 --adp-color-disabled-in-range: #888; 5120 --adp-color-other-month-hover: #666; 5121 --adp-border-color: #ffffff1a; /* Lighter border for dark mode */ 5122 --adp-border-color-inner: #444; 5123 --adp-border-color-inline: #444444; 5124 --adp-nav-arrow-color: var(--adp-color-secondary); 5125 --adp-day-name-color: #c0c0c0; 5126 --adp-day-name-color-hover: #3a3a3a; 5127 --adp-cell-background-color-hover: var(--adp-background-color-hover); 5128 --adp-cell-background-color-selected: #ffffff; 5129 --adp-cell-background-color-selected-hover: #e9e9e9; 5130 --adp-cell-background-color-in-range: rgba(175, 175, 175, 0.2); 5131 --adp-cell-background-color-in-range-hover: rgba(169, 169, 169, 0.3); 5132 --adp-btn-color: var(--adp-accent-color); 5133 --adp-btn-color-hover: var(--adp-color); 5134 --adp-btn-background-color-hover: var(--adp-background-color-hover); 5135 --adp-btn-background-color-active: var(--adp-background-color-active); 5136 --adp-time-track-color: #555; 5137 --adp-time-track-color-hover: #777; 5138 --adp-time-day-period-color: var(--adp-color-secondary); 5139 } 5140 5141 .air-datepicker-overlay { 5142 --adp-overlay-background-color: rgba(255, 255, 255, 0.1); /* Lighter overlay for dark mode */ 5143 } 5144 5145 .air-datepicker-cell.-selected-.-day- { 5146 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 5147 background: var(--adp-cell-background-color-selected); 5148 } 5149 5150 .air-datepicker-cell.-selected-.-year- { 5151 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 5152 background: var(--adp-cell-background-color-selected); 5153 } 5154 5155 .air-datepicker-cell.-selected-.-month- { 5156 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 5157 background: var(--adp-cell-background-color-selected); 5158 } 5159 5160 .air-datepicker-cell.-selected- { 5161 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 5162 background: var(--adp-cell-background-color-selected); 5163 } 5164 5165 .air-datepicker-cell.-selected-.-current- { 5166 color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */ 5167 background: var(--adp-cell-background-color-selected); 5168 } 5169 5170 .air-datepicker-cell.-current- { 5171 border: 1px solid #505050 !important; 5172 } 5173 5174 .air-datepicker-cell.-selected-.-day-.-other-month- { 5175 color: #cccccc; /* Ensure selected cell text is also light in dark mode */ 5176 background: #7e7e7e; 5177 } 5178} 5179 5180.air-datepicker--navigation { 5181 width: 100%; 5182} 5183.air-datepicker--pointer { 5184 opacity: 0; 5185} 5186.air-datepicker { 5187 background: var(--adp-background-color); 5188 border: 1px solid var(--adp-border-color); 5189 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 5190 border-radius: var(--adp-border-radius); 5191 box-sizing: content-box; 5192 display: grid; 5193 grid-template-columns: 1fr; 5194 grid-template-rows: repeat(4, max-content); 5195 grid-template-areas: var(--adp-grid-areas); 5196 font-family: var(--adp-font-family), sans-serif; 5197 font-size: var(--adp-font-size); 5198 color: var(--adp-color); 5199 width: var(--adp-width); 5200 position: absolute; 5201 transition: opacity var(--adp-transition-duration) var(--adp-transition-ease), 5202 transform var(--adp-transition-duration) var(--adp-transition-ease); 5203 z-index: var(--adp-z-index); 5204} 5205 5206.air-datepicker-cell.-selected- { 5207 color: #1d1d1d; 5208 border: none; 5209 background: var(--adp-cell-background-color-selected); 5210} 5211 5212.air-datepicker-cell.-disabled- { 5213 cursor: not-allowed; 5214} 5215 5216/* Add a new rule for dark mode selected cells if needed, or adjust the general .air-datepicker-cell.-selected- inside the dark mode media query */ 5217.dark { 5218 .air-datepicker-cell.-selected- { 5219 color: #e0e0e0; /* Example: light text for selected cells in dark mode */ 5220 /* background: var(--adp-cell-background-color-selected); Is already set within .air-datepicker dark vars */ 5221 } 5222} 5223 5224/* Time-only picker styles */ 5225.air-datepicker.only-timepicker .air-datepicker--navigation { 5226 display: none; 5227} 5228 5229.air-datepicker.only-timepicker .air-datepicker--content { 5230 display: none; 5231} 5232 5233.air-datepicker.only-timepicker .air-datepicker--time { 5234 border-top: none; 5235} 5236 5237/* Scrollbar */ 5238 5239.small-scrollbar {
5240 scrollbar-width: thin; 5241 scrollbar-color: #a2a2a270 #7878780b; 5242} 5243 5244.small-scrollbar::-webkit-scrollbar { 5245 width: 6px; 5246} 5247 5248.small-scrollbar::-webkit-scrollbar-track { 5249 background: #7878780b; 5250} 5251 5252.small-scrollbar::-webkit-scrollbar-thumb { 5253 background-color: #a2a2a270; 5254 border-radius: 3px; 5255} 5256 5257/* Hide scrollbar for scroll area component */ 5258.scrollbar-hide { 5259 -ms-overflow-style: none; /* IE and Edge */ 5260 scrollbar-width: none; /* Firefox */ 5261} 5262 5263.scrollbar-hide::-webkit-scrollbar { 5264 display: none; /* Chrome, Safari and Opera */ 5265} 5266 5267/* Scroll Area Fade Effects - Register custom properties for animation */ 5268@property --fade-start-opacity { 5269 syntax: '<number>'; 5270 initial-value: 1; 5271 inherits: false; 5272} 5273 5274@property --fade-end-opacity { 5275 syntax: '<number>'; 5276 initial-value: 1; 5277 inherits: false; 5278} 5279 5280@property --fade-start-x-opacity { 5281 syntax: '<number>'; 5282 initial-value: 1; 5283 inherits: false; 5284} 5285 5286@property --fade-end-x-opacity { 5287 syntax: '<number>'; 5288 initial-value: 1; 5289 inherits: false; 5290} 5291 5292@property --fade-start-y-opacity { 5293 syntax: '<number>'; 5294 initial-value: 1; 5295 inherits: false; 5296} 5297 5298@property --fade-end-y-opacity { 5299 syntax: '<number>'; 5300 initial-value: 1; 5301 inherits: false; 5302} 5303 5304/* Scroll Area Fade Effects */ 5305.scroll-fade-x { 5306 --fade-start-opacity: 1; 5307 --fade-end-opacity: 1; 5308 --fade-size: 25px; 5309 5310 mask-image: 5311 linear-gradient(to right, 5312 hsl(0 0% 0% / var(--fade-start-opacity)), 5313 black var(--fade-size), 5314 black calc(100% - var(--fade-size)), 5315 hsl(0 0% 0% / var(--fade-end-opacity)) 5316 ); 5317 -webkit-mask-image: 5318 linear-gradient(to right, 5319 hsl(0 0% 0% / var(--fade-start-opacity)), 5320 black var(--fade-size), 5321 black calc(100% - var(--fade-size)), 5322 hsl(0 0% 0% / var(--fade-end-opacity)) 5323 ); 5324 5325 transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out; 5326} 5327 5328.scroll-fade-y { 5329 --fade-start-opacity: 1; 5330 --fade-end-opacity: 1; 5331 --fade-size: 40px; 5332 5333 mask-image: 5334 linear-gradient(to bottom, 5335 hsl(0 0% 0% / var(--fade-start-opacity)), 5336 black var(--fade-size), 5337 black calc(100% - var(--fade-size)), 5338 hsl(0 0% 0% / var(--fade-end-opacity)) 5339 ); 5340 -webkit-mask-image: 5341 linear-gradient(to bottom, 5342 hsl(0 0% 0% / var(--fade-start-opacity)), 5343 black var(--fade-size), 5344 black calc(100% - var(--fade-size)), 5345 hsl(0 0% 0% / var(--fade-end-opacity)) 5346 ); 5347 5348 transition: --fade-start-opacity 300ms ease-out, --fade-end-opacity 300ms ease-out; 5349} 5350 5351.scroll-fade-both { 5352 --fade-start-x-opacity: 1; 5353 --fade-end-x-opacity: 1; 5354 --fade-start-y-opacity: 1; 5355 --fade-end-y-opacity: 1; 5356 --fade-size: 40px; 5357 --fade-top-offset: 0px; /* Offset from top to skip header areas */ 5358 --fade-left-offset: 0px; /* Offset from left to skip sticky columns */ 5359 5360 mask-image: 5361 linear-gradient(to right, 5362 black var(--fade-left-offset), 5363 hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset), 5364 black calc(var(--fade-left-offset) + var(--fade-size)), 5365 black calc(100% - var(--fade-size)), 5366 hsl(0 0% 0% / var(--fade-end-x-opacity)) 5367 ), 5368 linear-gradient(to bottom, 5369 black var(--fade-top-offset), 5370 hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset), 5371 black calc(var(--fade-top-offset) + var(--fade-size)), 5372 black calc(100% - var(--fade-size)), 5373 hsl(0 0% 0% / var(--fade-end-y-opacity)) 5374 ); 5375 -webkit-mask-image: 5376 linear-gradient(to right, 5377 black var(--fade-left-offset), 5378 hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset), 5379 black calc(var(--fade-left-offset) + var(--fade-size)), 5380 black calc(100% - var(--fade-size)), 5381 hsl(0 0% 0% / var(--fade-end-x-opacity)) 5382 ), 5383 linear-gradient(to bottom, 5384 black var(--fade-top-offset), 5385 hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset), 5386 black calc(var(--fade-top-offset) + var(--fade-size)), 5387 black calc(100% - var(--fade-size)), 5388 hsl(0 0% 0% / var(--fade-end-y-opacity)) 5389 ); 5390 mask-composite: intersect; 5391 -webkit-mask-composite: source-in; 5392 5393 transition: --fade-start-x-opacity 300ms ease-out, --fade-end-x-opacity 300ms ease-out, 5394 --fade-start-y-opacity 300ms ease-out, --fade-end-y-opacity 300ms ease-out; 5395} 5396 5397/* Update fade opacity when scrolled - fade appears when there's overflow */ 5398[data-overflow-x-start] .scroll-fade-x, 5399[data-overflow-x-start] .scroll-fade-both { 5400 --fade-start-opacity: 0; 5401 --fade-start-x-opacity: 0; 5402} 5403 5404[data-overflow-x-end] .scroll-fade-x, 5405[data-overflow-x-end] .scroll-fade-both { 5406 --fade-end-opacity: 0; 5407 --fade-end-x-opacity: 0; 5408} 5409 5410[data-overflow-y-start] .scroll-fade-y, 5411[data-overflow-y-start] .scroll-fade-both { 5412 --fade-start-opacity: 0; 5413 --fade-start-y-opacity: 0; 5414} 5415 5416[data-overflow-y-end] .scroll-fade-y, 5417[data-overflow-y-end] .scroll-fade-both { 5418 --fade-end-opacity: 0; 5419 --fade-end-y-opacity: 0; 5420} 5421 5422/* Cursor pointer for buttons */ 5423 5424@layer base { 5425 button:not(:disabled), 5426 [role="button"]:not(:disabled) { 5427 cursor: pointer; 5428 } 5429} 5430 5431/* Toast Notifications */ 5432.toast-item { 5433 @apply absolute w-full left-0 select-none; 5434 z-index: var(--toast-z-index, 100); 5435 5436 /* Position based on data attributes */ 5437 top: var(--toast-top, auto); 5438 bottom: var(--toast-bottom, auto); 5439 transform: var(--toast-transform, translateY(0)); 5440 scale: var(--toast-scale, 100%); 5441 opacity: var(--toast-opacity, 1); 5442
5443 /* Separate transitions for better control - like Sonner */ 5444 transition: transform 400ms ease, opacity 400ms ease, scale 400ms ease, top 400ms ease, bottom 400ms ease, 5445 height 200ms ease; 5446} 5447 5448/* Initial hidden state for enter animation */ 5449.toast-item[data-mounted="false"] { 5450 opacity: 0; 5451} 5452 5453.toast-item[data-mounted="false"][data-position*="bottom"] { 5454 transform: translateY(100%); 5455} 5456 5457.toast-item[data-mounted="false"][data-position*="top"] { 5458 transform: translateY(-100%); 5459} 5460 5461/* Removed state for exit animation */ 5462.toast-item[data-removed="true"] { 5463 opacity: 0; 5464 scale: 95%; 5465 pointer-events: none; 5466} 5467 5468/* In stacked mode, removed toasts should slide away */ 5469.toast-item[data-removed="true"][data-expanded="false"][data-position*="bottom"] { 5470 transform: translateY(calc(var(--toast-index) * 14px + 5%)); 5471} 5472 5473.toast-item[data-removed="true"][data-expanded="false"][data-position*="top"] { 5474 transform: translateY(calc(-1 * (var(--toast-index) * 14px + 5%))); 5475} 5476 5477/* Overflow toasts (removed due to limit) slide in opposite direction */ 5478.toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="bottom"] { 5479 transform: translateY(calc(-1 * (var(--toast-index) * 14px + 25%))); 5480 scale: 78%; 5481} 5482 5483.toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="top"] { 5484 transform: translateY(calc(var(--toast-index) * 14px + 25%)); 5485 scale: 78%; 5486} 5487 5488/* Pointer events based on visibility */ 5489.toast-item[data-visible="false"] { 5490 pointer-events: none; 5491} 5492 5493/* Expanded mode styles */ 5494.toast-item[data-expanded="true"] { 5495 --toast-scale: 100%; 5496 height: var(--initial-height); 5497} 5498 5499.toast-item[data-expanded="true"][data-position*="bottom"] { 5500 --toast-top: auto; 5501 --toast-bottom: var(--toast-offset, 0px); 5502 --toast-transform: translateY(0); 5503} 5504 5505.toast-item[data-expanded="true"][data-position*="top"] { 5506 --toast-top: var(--toast-offset, 0px); 5507 --toast-bottom: auto; 5508 --toast-transform: translateY(0); 5509} 5510 5511/* Stacked mode styles */ 5512.toast-item[data-expanded="false"][data-front="true"] { 5513 --toast-scale: 100%; 5514 --toast-opacity: 1; 5515 height: var(--initial-height); 5516} 5517 5518.toast-item[data-expanded="false"][data-front="true"][data-position*="bottom"] { 5519 --toast-top: auto; 5520 --toast-bottom: 0px; 5521 --toast-transform: translateY(0); 5522} 5523 5524.toast-item[data-expanded="false"][data-front="true"][data-position*="top"] { 5525 --toast-top: 0px; 5526 --toast-bottom: auto; 5527 --toast-transform: translateY(0); 5528} 5529 5530/* Non-front toasts in stack - Sonner approach */ 5531.toast-item[data-expanded="false"]:not([data-front="true"]) { 5532 height: var(--front-toast-height); 5533 overflow: hidden; 5534 --toast-scale: calc(100% - (var(--toast-index) * 6%)); 5535 display: flex; 5536 flex-direction: column; 5537} 5538 5539.toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="bottom"] { 5540 --toast-top: auto; 5541 --toast-bottom: 0px; 5542 --toast-transform: translateY(calc(-1 * var(--toast-index) * 14px)); 5543 justify-content: flex-start; /* Content at top, bottom gets cut */ 5544} 5545 5546.toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="top"] { 5547 --toast-top: 0px; 5548 --toast-bottom: auto; 5549 --toast-transform: translateY(calc(var(--toast-index) * 14px)); 5550 justify-content: flex-end; /* Content at bottom, top gets cut */ 5551} 5552 5553/* Hidden toasts (beyond 3rd) */ 5554.toast-item[data-expanded="false"][data-visible="false"] { 5555 --toast-opacity: 0; 5556 --toast-scale: 82%; 5557} 5558 5559.toast-item[data-expanded="false"][data-visible="false"][data-position*="bottom"] { 5560 --toast-top: auto; 5561 --toast-bottom: -200px; 5562 --toast-transform: translateY(0); 5563} 5564 5565.toast-item[data-expanded="false"][data-visible="false"][data-position*="top"] { 5566 --toast-top: -200px; 5567 --toast-bottom: auto; 5568 --toast-transform: translateY(0); 5569} 5570' 5571 data-clipboard-success-message-value="CSS Copied" 5572 data-clipboard-error-message-value="Copy Failed!" 5573 data-clipboard-show-tooltip-value="false" 5574 data-clipboard-tooltip-duration-value="1500">
5575 <span data-clipboard-target="copyContent" class="flex items-center gap-1.5"> 5576 <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"><rect x="1.75" y="1.75" width="11" height="11" rx="2" ry="2" transform="translate(14.5 14.5) rotate(-180)"></rect><path d="M15.199,6.002l1.029,6.924c.162,1.093-.592,2.11-1.684,2.272l-6.924,1.029c-.933,.139-1.81-.39-2.148-1.228"></path><line x1="7.25" y1="9.75" x2="7.25" y2="4.75"></line><line x1="4.75" y1="7.25" x2="9.75" y2="7.25"></line></g></svg> 5577 Copy 5578 </span> 5579 <span data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5 text-green-400"> 5580 <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c-.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path></g></svg> 5581 Copied! 5582 </span> 5583 </button> 5584</div> 5585 5586 </div> 5587 5588 <!-- Full install Panel --> 5589 <div data-tabs-target="panel" role="tabpanel" class="p-4 bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl"> 5590 <div class="rounded-xl border border-blue-200/50 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200"> 5591 <div class="grid grid-cols-[auto_1fr] gap-2 items-start"> 5592 <div class="flex items-center h-full"> 5593 <svg xmlns="http://www.w3.org/2000/svg" class="text-blue-500 dark:text-blue-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z"></path> <path d="M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75"></path> <path d="M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg> 5594 </div> 5595 <p class="text-sm font-semibold"> 5596 How to install custom CSS for each component 5597 </p> 5598 <div></div> 5599 <div class="text-sm space-y-2"> 5600 <ol class="list-decimal list-inside space-y-1"> 5601 <li>Navigate to the component page you want to use (e.g., <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/combobox">Combobox</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/modal">Modal</a>, <a target="_blank" class="text-blue-700 dark:text-blue-100 underline" href="/docs/emoji-picker">Emoji Picker</a>, etc.)</li> 5602 <li>Look for the <strong>"Custom CSS"</strong> section</li> 5603 <li>Copy the CSS code for that component</li> 5604 <li>Paste it into your main CSS file (typically <code class="code-inline-text">app/assets/stylesheets/application.css</code> or your Tailwind CSS file)</li> 5605 <li>Save the file and restart your Rails server if needed</li> 5606 </ol> 5607 </div> 5608 </div> 5609</div> 5610 5611 </div> 5612</div> 5613 5614<div class="hidden bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-900 rounded-xl p-4 mb-4"> 5615 <div class="flex items-start gap-3"> 5616 <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm0,14.5c-3.584,0-6.5-2.916-6.5-6.5S5.416,2.5,9,2.5s6.5,2.916,6.5,6.5-2.916,6.5-6.5,6.5Z"></path><circle cx="9" cy="5.5" r="1"></circle><path d="M9,7.5c-.414,0-.75,.336-.75,.75v4.5c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-4.5c0-.414-.336-.75-.75-.75Z"></path></g></svg> 5617 <div class="text-sm"> 5618 <p class="font-semibold text-blue-900 dark:text-blue-100 mb-1">A Note on Tailwind Verbosity</p> 5619 <p class="text-blue-800 dark:text-blue-200 mb-4">
5619When browsing the components, if you find the verbose inline Tailwind CSS classes overwhelming, that's completely understandable and a valid concern. I've provided the elements with Tailwind classes directly applied to components for maximum flexibility, allowing you to modify them as you wish.</p> 5620 <p class="text-blue-800 dark:text-blue-200">If you want to increase maintainability and reusability, one solution is to use Tailwind's <code class="code-inline-text">@apply</code> directive to extract styles into reusable CSS classes. Additionally, you can build partials or view components in Rails to encapsulate markup and styles. For an even more structured approach, you can use tools like <a href="https://github.com/ViewComponent/view_component" target="_blank" class="underline hover:text-blue-900 dark:hover:text-blue-100">ViewComponent</a> or <a href="https://github.com/phlex-ruby/phlex" target="_blank" class="underline hover:text-blue-900 dark:hover:text-blue-100">Phlex</a>, which allows you to create components in pure Ruby, making them easier to maintain and reuse across your application.</p> 5621 </div> 5622 </div> 5623</div> 5624 5625 5626 <div class="mt-16 flex items-center justify-between border-t border-neutral-200 pt-6 dark:border-neutral-800"> 5627 <div></div> 5628 5629 <a href="/docs/view-components" class="group flex items-center gap-2 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white"> 5630 <div class="flex flex-col text-right"> 5631 <span>View Components</span> 5632 </div> 5633 <svg xmlns="http://www.w3.org/2000/svg" class="size-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 5634 <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /> 5635 </svg> 5636 </a> 5637 </div> 5638 </div> 5639 <div class="max-xl:hidden"> 5640 <div class="small-scrollbar sticky top-14 max-h-[calc(100svh-3.5rem)] px-6 pt-10 pb-24" data-controller="table-of-contents" data-table-of-contents-exclude-selector-value=".border.mb-8.bg-white, .not-prose, pre, code, .border.border-neutral-200"> 5641 <div class="flex flex-col gap-3"> 5642 <h3 class="flex items-center gap-1.5 uppercase text-sm/6 text-neutral-500 sm:text-xs/6 dark:text-neutral-400"> 5643 <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="1.75" y1="14.75" x2="12.25" y2="14.75"></line><line x1="1.75" y1="10.75" x2="5.25" y2="10.75"></line><line x1="1.75" y1="6.75" x2="5.25" y2="6.75"></line><line x1="1.75" y1="2.75" x2="12.25" y2="2.75"></line><circle cx="11.25" cy="8.75" r="3"></circle><line x1="13.371" y1="10.871" x2="16.25" y2="13.75"></line></g></svg> 5644 Table of contents 5645 </h3> 5646 <div data-table-of-contents-target="container"> 5647 <!-- Table of contents will be generated automatically --> 5648 </div> 5649 5650 <div class="relative mt-4"> 5651 <div class="mx-auto"> 5652 <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 p-4 rounded-xl dark:bg-neutral-800"> 5653 <div data-controller="newsletter" 5654 class="max-w-xs"> 5655 <div data-newsletter-target="form"> 5656 <form data-action="submit->newsletter#submit" 5657 class="space-y-3"> 5658 <h2 class="text-base font-semibold">Get notified when new components come out</h2> 5659 <input type="email" 5660 data-newsletter-target="email" 5661 placeholder="Enter your email..." 5662 class="form-control" 5663 required> 5664 <div class="flex justify-center absolute bottom-0 left-0 right-0 -mb-20"> 5665 <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div> 5666 </div> 5667 <button type="submit" 5668 data-newsletter-target="submitButton" 5669 class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
5669k:focus-visible:outline-neutral-200"> 5670 Subscribe 5671 </button> 5672 </form> 5673 </div> 5674 5675 <div data-newsletter-target="successMessage" 5676 class="text-center py-4" 5677 style="display: none;"> 5678 <div class="inline-flex items-center justify-center size-10 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50"> 5679 <svg class="size-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 5680 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 5681 </svg> 5682 </div> 5683 <h3 class="text-base font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3> 5684 <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p> 5685 </div> 5686 </div> 5687 </div> 5688 </div> 5689</div> 5690 5691 </div> 5692 </div> 5693 </div> 5694 </div> 5695 </div> 5696 </div> 5697 </div> 5698</div> 5699 5700 5701 </main> 5702 5703<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> 5704 5705<footer class="mt-24 bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700"> 5706 <div class="max-w-5xl mx-auto w-full pb-8 pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8"> 5707 5708 <!-- Grid --> 5709 <div class="flex flex-col justify-between md:flex-row gap-5 mb-14"> 5710 5711 <div> 5712 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Popular Components</h4> 5713 5714 <ul class="grid space-y-2"> 5715 <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> 5716 <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> 5717 <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> 5718 <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> 5719 </ul> 5720 </div> 5721 <!-- End Col --> 5722 5723 <div> 5724 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Company</h4> 5725 5726 <ul class="grid space-y-2"> 5727 <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> 5728 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/themes">Themes</a></li> 5729 <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> 5730 <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> 5731 <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focu
5731s: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> 5732 <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> 5733 </ul> 5734 </div> 5735 <!-- End Col --> 5736 5737 <div> 5738 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Pricing</h4> 5739 5740 <ul class="grid space-y-2"> 5741 <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> 5742 <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> 5743 </ul> 5744 </div> 5745 <!-- End Col --> 5746 5747 <div> 5748 <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Legal</h4> 5749 5750 <ul class="grid space-y-2"> 5751 <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> 5752 <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> 5753 <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> 5754 </ul> 5755 </div> 5756 <!-- End Col --> 5757 </div> 5758 5759 <div class="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800"> 5760 <div class="flex flex-col md:flex-row-reverse md:justify-between md:items-center gap-6 items-center text-center md:text-left"> 5761 5762 <nav class="flex flex-col sm:flex-row items-center gap-3"> 5763 <div class="flex items-center"> 5764 <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"> 5765 <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"> 5766 <img class="rounded-full mx-auto size-8" alt="Sandu" src="/assets/founder-avatar-da341a93ca736fdd7217be943b75af4bdf1bf0c14ee149b5f11324eb98a5c6dc.webp" /> 5767 </div> 5768 Built by 5769 <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"> 5770 Sandu 5771 </a> 5772 in Paris ð¥ 5773 </div> 5774 </div> 5775 5776 <div class="flex items-center gap-3"> 5777 <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)"> 5778 <span class="sr-only">Follow Sandu on X (formerly Twitter)</span> 5779 <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"> 5780 <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"> 5781 </svg> 5782 </a> 5783 <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">
5784 <span class="sr-only">Follow Sandu on YouTube</span> 5785 <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> 5786 </a> 5787 <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"> 5788 <span class="sr-only">Send me an email</span> 5789 <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> 5790 </a> 5791 <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"> 5792 <span class="sr-only">RSS Feed</span> 5793 <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> 5794 </a> 5795 </div> 5796 </nav> 5797
5798 <div class="text-sm text-neutral-600 dark:text-neutral-400"> 5799 © 2026 Rails Blocks 5800 </div> 5801 </div> 5802 </div> 5803 <!-- End Grid --> 5804 </div> 5805</footer> 5806 5807
5807<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>
5807 5808</body> 5809</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.