PageSourceSearch

https://railsblocks.com/changelog

html railsblocks.com collected 2026-09-25 20:22:10 UTC 627,982 bytes, 5,559 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="bg-[#FCFBF9] dark:bg-[#111111] text-neutral-800 dark:text-neutral-50">
3  <head>
4    <title>Rails Blocks | Changelog | Rails Blocks updates</title>
5<meta name="description" content="A list of updates and changes to Rails Blocks. Subscribe to the newsletter or RSS feed to get notified when new components come out." />
6<meta name="keywords" content="rails, ui, components, free, stimulus, controllers, ruby on rails, rails blocks, rails blocks ui, rails blocks components, rails blocks ui components, rails blocks free, rails blocks pro, rails blocks pro ui, rails blocks pro ui components, rails blocks pro ui components free" />
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8    <meta charset="utf-8">
9
10    <!-- Theme initialization script to prevent FOUC -->
11    
11<script>
12      (function() {
13        function selectedPalette() {
14          const storedMode = localStorage.getItem("theme");
15
16          if (storedMode === "light" || storedMode === "dark") return storedMode;
17
18          return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
19        }
20
21        function paintTheme(root) {
22          const palette = selectedPalette();
23          const dark = palette === "dark";
24
25          root.classList.toggle("dark", dark);
26          root.classList.toggle("sl-theme-dark", dark);
27          root.style.colorScheme = palette;
28          root.dataset.theme = palette;
29        }
30
31        paintTheme(document.documentElement);
32
33        document.addEventListener("turbo:before-render", function(event) {
34          paintTheme(event.detail.newBody.ownerDocument.documentElement);
35        });
36
37        document.addEventListener("turbo:render", function() {
38          paintTheme(document.documentElement);
39        });
40
41        document.addEventListener("turbo:load", function() {
42          paintTheme(document.documentElement);
43        });
44      })();
45    </script>
45
46
47    <!-- SEO Meta Tags -->
48    <meta name="author" content="Rails Blocks">
49    <meta name="robots" content="index, follow">
50
51    <!-- Open Graph / Facebook -->
52    <meta property="og:type" content="website">
53    <meta property="og:url" content="https://railsblocks.com/changelog">
54    <meta property="og:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus">
55    <meta property="og:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &amp; MCP server.">
56    <meta property="og:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png">
57
58    <!-- Twitter -->
59    <meta property="twitter:card" content="summary_large_image">
60    <meta property="twitter:url" content="https://railsblocks.com/changelog">
61    <meta property="twitter:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus">
62    <meta property="twitter:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &amp; MCP server.">
63    <meta property="twitter:image" content="https://railsblocks.com/assets/opengraph-eb5310cb5b513a6a434977993abdaa571cb7060821e56a1a482eaa5435b6aef4.png">
64
65    <!-- Canonical URL -->
66    <link rel="canonical" href="https://railsblocks.com/changelog">
67
68    <!-- RSS Feed -->
69    <link rel="alternate" type="application/rss+xml" title="Rails Blocks - Component Updates" href="https://railsblocks.com/feeds/documentation.xml">
70
71    <meta name="csrf-param" content="authenticity_token" />
72<meta name="csrf-token" content="BGIU3Hbrj-M4Xst9jqn5Yj9vT_xb7y3iuADMuowCRr8bjEOLS7LHVLAefmfPHJRsZ40T8bVgO7uYxvmOXXg1TQ" />
73    
74
75    <!-- Inter font stylesheet -->
76    <link rel="preconnect" href="https://rsms.me" crossorigin>
77    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" crossorigin="anonymous">
78
79    <!-- Preload Quincy font to prevent FOUT -->
80    <link rel="preload" href="/QuincyCF-Bold.woff" as="font" type="font/woff" crossorigin>
81
82    <!-- Geist Mono for code blocks (shadcn style) -->
83    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.min.css">
84
85    <!-- Air Datepicker CSS -->
86    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css">
87
88    <!-- PhotoSwipe CSS -->
89    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">
90
91    <!--  -->
92    <link rel="stylesheet" href="/assets/application-4e2eb78ae7afb82739067fcdf95589ec6529fc31571e977ee8fc82478ac9c706.css" />
93    
93<script type="importmap" data-turbo-track="reload">{
94  "imports": {
95    "application": "/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js",
96    "@hotwired/stimulus": "/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js",
97    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
98    "@hotwired/turbo-rails": "/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js",
99    "@rails/actioncable": "/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js",
100    "chartkick": "/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js",
101    "Chart.bundle": "/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js",
102    "@rails/activestorage": "/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js",
103    "@activeadmin/activeadmin": "https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js",
104    "@rails/ujs": "https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js",
105    "motion": "https://cdn.jsdelivr.net/npm/motion@latest/+esm",
106    "tom-select": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
107    "tailwindcss-stimulus-components": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
108    "@rails/request.js": "https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm",
109    "number-flow": "https://esm.sh/number-flow",
110    "number-flow/group": "https://esm.sh/number-flow/group",
111    "air-datepicker": "https://esm.sh/[email protected]",
112    "air-datepicker/locale/en": "https://esm.sh/[email protected]/locale/en",
113    "embla-carousel": "https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm",
114    "embla-carousel-wheel-gestures": "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm",
115    "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm",
116    "emoji-mart": "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js",
117    "@emoji-mart/data": "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm",
118    "posthog-js": "https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm",
119    "photoswipe": "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js",
120    "prism": "/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js",
121    "lexxy_extensions": "/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js",
122    "lucide_callout_icons": "/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js",
123    "controllers/accordion_controller": "/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js",
124    "controllers/activity_stats_controller": "/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js",
125    "controllers/analytics_controller": "/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js",
126    "controllers/animated_number_controller": "/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js",
127    "controllers/animated_number_controller_basic": "/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js",
128    "controllers/application": "/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js",
129    "controllers/autocomplete_controller": "/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js",
130    "controllers/autocomplete_fuzzy_search_controller": "/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js",
131    "controllers/autocomplete_navigation_controller": "/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js",
132    "controllers/autocomplete_recent_searches_controller": "/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js",
133    "controllers/autogrow_controller": "/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js",
134    "controllers/autosubmit_controller": "/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js",
135    "controllers/banner_controller": "/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js",
136    "controllers/black_hole_background_controller": "/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js",
137    "controllers/carousel_controller": "/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js",
138    "controllers/checkbox_select_all_controller": "/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js",
139    "controllers/clickable_animated_number_controller": "/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js",
140    "controllers/clipboard_controller": "/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js",
141    "controllers/code_filter_controller": "/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js",
142    "controllers/collapsible_controller": "/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js",
143    "controllers/component_search_controller": "/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js",
144    "controllers/conditional_field_controller": "/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js",
145    "controllers/confirmation_controller": "/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js",
146    "controllers/context_menu_controller": "/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js",
147    "controllers/datatable_controller": "/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js",
148    "controllers/datatable_preview_controller": "/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js",
149    "controllers/date_picker_controller": "/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js",
150    "controllers/dock_controller": "/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js",
151    "controllers/drawer_controller": "/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js",
152    "controllers/dropdown_popover_controller": "/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js",
153    "controllers/emoji_picker_controller": "/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js",
154    "controllers/feedback_controller": "/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js",
155    "controllers/header_controller": "/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js",
156    "controllers/hello_controller": "/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js",
157    "controllers/highlight_controller": "/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js",
158    "controllers/hotkey_controller": "/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js",
159    "controllers/increment_controller": "/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js",
160    "controllers": "/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js",
161    "controllers/infinite_scroll_controller": "/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js",
162    "controllers/inline_edit_controller": "/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js",
163    "controllers/lightbox_controller": "/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js",
164    "controllers/marquee_controller": "/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js",
165    "controllers/menu_controller": "/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js",
166    "controllers/modal_controller": "/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js",
167    "controllers/navbar_controller": "/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js",
168    "controllers/nested_form_controller": "/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js",
169    "controllers/newsletter_controller": "/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js",
170    "controllers/onboarding_checklist_controller": "/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js",
171    "controllers/os_detect_controller": "/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js",
172    "controllers/page_view_controller": "/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
1725e36d.js",
173    "controllers/password_controller": "/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js",
174    "controllers/popover_controller": "/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js",
175    "controllers/pricing_tabs_controller": "/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js",
176    "controllers/rainbow_button_controller": "/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js",
177    "controllers/read_more_controller": "/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js",
178    "controllers/scroll_area_controller": "/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js",
179    "controllers/scroll_preservation_controller": "/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js",
180    "controllers/searchable_dropdown_controller": "/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js",
181    "controllers/select_controller": "/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js",
182    "controllers/setup_code_filter_controller": "/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js",
183    "controllers/shoelace_color_picker_controller": "/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js",
184    "controllers/sidebar_controller": "/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js",
185    "controllers/slideover_controller": "/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js",
186    "controllers/slider_number_flow_controller": "/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js",
187    "controllers/snippet_controller": "/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js",
188    "controllers/stepper_controller": "/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js",
189    "controllers/table_of_contents_controller": "/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js",
190    "controllers/tabs_controller": "/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js",
191    "controllers/text_cycler_controller": "/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js",
192    "controllers/theme_builder_controller": "/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js",
193    "controllers/theme_controller": "/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js",
194    "controllers/toast_controller": "/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js",
195    "controllers/tooltip_controller": "/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js",
196    "controllers/tree_view_controller": "/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js",
197    "controllers/turnstile_controller": "/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js",
198    "controllers/two_factor_controller": "/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js",
199    "channels/consumer": "/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js",
200    "channels": "/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
201  }
202}</script>
202
203<link rel="modulepreload" href="/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js">
204<link rel="modulepreload" href="/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js">
205<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
206<link rel="modulepreload" href="/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js">
207<link rel="modulepreload" href="/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js">
208<link rel="modulepreload" href="/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js">
209<link rel="modulepreload" href="/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js">
210<link rel="modulepreload" href="/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js">
211<link rel="modulepreload" href="https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js">
212<link rel="modulepreload" href="https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js">
213<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/motion@latest/+esm">
214<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
215<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
216<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm">
217<link rel="modulepreload" href="https://esm.sh/number-flow">
218<link rel="modulepreload" href="https://esm.sh/number-flow/group">
219<link rel="modulepreload" href="https://esm.sh/[email protected]">
220<link rel="modulepreload" href="https://esm.sh/[email protected]/locale/en">
221<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm">
222<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm">
223<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm">
224<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js">
225<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm">
226<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm">
227<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js">
228<link rel="modulepreload" href="/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js">
229<link rel="modulepreload" href="/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js">
230<link rel="modulepreload" href="/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js">
231<link rel="modulepreload" href="/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js">
232<link rel="modulepreload" href="/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js">
233<link rel="modulepreload" href="/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js">
234<link rel="modulepreload" href="/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js">
235<link rel="modulepreload" href="/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js">
236<link rel="modulepreload" href="/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js">
237<link rel="modulepreload" href="/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js">
238<link rel="modulepreload" href="/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js">
239<link rel="modulepreload" href="/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js">
240<link rel="modulepreload" href="/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js">
241<link rel="modulepreload" href="/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js">
242<link rel="modulepreload" href="/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js">
243<link rel="modulepreload" href="/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js">
244<link rel="modulepreload" href="/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js">
245<link rel="modulepreload" href="/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js">
246<link rel="modulepreload" href="/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js">
247<link rel="modulepreload" href="/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js">
248<link rel="modulepreload" href="/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js">
249<link rel="modulepreload" href="/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js">
250<link rel="modulepreload" href="/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js">
251<link rel="modulepreload" href="/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js">
252<link rel="modulepreload" href="/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js">
253<link rel="modulepreload" href="/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js">
254<link rel="modulepreload" href="/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js">
255<link rel="modulepreload" href="/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js">
256<link rel="modulepreload" href="/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js">
257<link rel="modulepreload" href="/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js">
258<link rel="modulepreload" href="/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js">
259<link rel="modulepreload" href="/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js">
260<link rel="modulepreload" href="/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js">
261<link rel="modulepreload" href="/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js">
262<link rel="modulepreload" href="/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js">
263<link rel="modulepreload" href="/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js">
264<link rel="modulepreload" href="/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js">
265<link rel="modulepreload" href="/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js">
266<link rel="modulepreload" href="/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js">
267<link rel="modulepreload" href="/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js">
268<link rel="modulepreload" href="/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js">
269<link rel="modulepreload" href="/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js">
270<link rel="modulepreload" href="/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js">
271<link rel="modulepreload" href="/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js">
272<link rel="modulepreload" href="/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js">
273<link rel="modulepreload" href="/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js">
274<link rel="modulepreload" href="/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js">
275<link rel="modulepreload" href="/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js">
276<link rel="modulepreload" href="/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js">
277<link rel="modulepreload" href="/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js">
278<link rel="modulepreload" href="/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js">
279<link rel="modulepreload" href="/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js">
280<link rel="modulepreload" href="/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
2805e36d.js">
281<link rel="modulepreload" href="/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js">
282<link rel="modulepreload" href="/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js">
283<link rel="modulepreload" href="/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js">
284<link rel="modulepreload" href="/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js">
285<link rel="modulepreload" href="/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js">
286<link rel="modulepreload" href="/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js">
287<link rel="modulepreload" href="/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js">
288<link rel="modulepreload" href="/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js">
289<link rel="modulepreload" href="/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js">
290<link rel="modulepreload" href="/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js">
291<link rel="modulepreload" href="/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js">
292<link rel="modulepreload" href="/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js">
293<link rel="modulepreload" href="/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js">
294<link rel="modulepreload" href="/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js">
295<link rel="modulepreload" href="/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js">
296<link rel="modulepreload" href="/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js">
297<link rel="modulepreload" href="/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js">
298<link rel="modulepreload" href="/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js">
299<link rel="modulepreload" href="/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js">
300<link rel="modulepreload" href="/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js">
301<link rel="modulepreload" href="/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js">
302<link rel="modulepreload" href="/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js">
303<link rel="modulepreload" href="/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js">
304<link rel="modulepreload" href="/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js">
305<link rel="modulepreload" href="/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js">
306<link rel="modulepreload" href="/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js">
307<link rel="modulepreload" href="/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js">
308<link rel="modulepreload" href="/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js">
309<script type="module">import "application"</script>
309
310
311    <!-- Prism.js Theme loaded via application.css (shadcn style) -->
312
313    
313<script type="module">import "prism"</script>
313
314
315    <!-- app styles -->
316
317    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
318
319    <link rel="stylesheet" href="/assets/tailwind-8dd8a1967e9bfb39e33fd6b97de1fb9540804eb5e014bd755b551ab3b78c8f67.css" data-turbo-track="reload" />
320
321    <!-- Shoelace -->
322    
322<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script>
322
323    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css">
324    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css">
325
326    
327<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
328<link rel="icon" type="image/svg+xml" href="/favicon.svg">
329<link rel="shortcut icon" href="/favicon.ico">
330<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
331<meta name="apple-mobile-web-app-title" content="Rails Blocks">
332<link rel="manifest" href="/site.webmanifest">
333
334  <!-- Fathom - beautiful, simple website analytics -->
335  
335<script src="https://cdn.usefathom.com/script.js" data-site="RGMCTRCC" defer></script>
335
336  
336<script>
337    // Defines the Fathom queue if it's not already defined
338    window.fathom = window.fathom || {};
339    window.fathom.trackEvent = window.fathom.trackEvent || function() {
340      (window.fathom.q = window.fathom.q || []).push(arguments);
341    };
342  </script>
342
343  <!-- / Fathom -->
344
345  
345<script>
346      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Ie Ts Ms Ee Es Rs capture Ge calculateEventProperties Os register register_once register_for_session unregister unregister_for_session js getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ds Fs createPersonProfile Ls Ps opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Cs debug I As getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
347      posthog.init('phc_1peGskgJndUl9aKkfvJan2QftpxzdEl4tplxzntLjz3', {
348          api_host: 'https://f.railsblocks.com',
349          defaults: '2026-01-30',
350          person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
351      })
352  </script>
352
353
354
355    <!-- Cloudflare Turnstile -->
356    
356<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
356
357
358    <!-- JSON-LD Structured Data -->
359    
359<script type="application/ld+json">
360    {
361      "@context": "https://schema.org",
362      "@type": "WebSite",
363      "name": "Rails Blocks",
364      "url": "https://railsblocks.com/",
365      "description": "Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &amp; MCP server."
366    }
367    </script>
367
368
369    <meta name="sentry-trace" content="3f986b3b5fef46a0b7f93ca91f688128-d3d2aa0af4f542d5-1">
370<meta name="baggage" content="sentry-trace_id=3f986b3b5fef46a0b7f93ca91f688128,sentry-sample_rate=1.0,sentry-sample_rand=0.459669,sentry-sampled=true,sentry-environment=production,sentry-release=c1339cab003834fc5d3ba9a59528fe484c754c35,sentry-public_key=75ec06e0a9c5a635bb41b06c332c1f78">
371  </head>
372
373  <body>
374    
375<header class="sticky z-50 top-0 h-14 w-full gap-3 mx-auto" data-controller="header">
376  <nav class="flex items-center justify-center flex-wrap w-full">
377    <div class="w-full border-b border-neutral-950/5 dark:border-white/10">
378      <div class="bg-white dark:bg-neutral-950">
379        <div class="flex h-14 items-center justify-between gap-2 md:gap-8 px-4 sm:px-6">
380          <div class="flex items-center gap-4">
381            <div class="w-full flex items-center shrink-0 justify-center gap-4">
382              <a class="flex items-center hover:opacity-80 gap-1.5" href="/">
383                <img class="size-6" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" />
384                <span class="font-semibold shrink-0 text-lg md:text-xl text-neutral-900 dark:text-neutral-50">Rails Blocks</span>
385</a>              <div data-controller="modal os-detect" class="hidden md:block">
386  <button data-controller="hotkey"
387          data-action="click->modal#open:prevent keydown.meta+k@document->hotkey#click keydown.ctrl+k@document->hotkey#click"
388          class="flex items-center justify-center gap-1.5 rounded-lg bg-neutral-100/75 dark:bg-neutral-800 p-2.5 md:px-3 md:py-2 text-xs font-medium whitespace-nowrap text-neutral-500 hover:text-neutral-900 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200 border border-black/10 dark:border-white/10">
389    <span class="hidden md:block">Search</span>
390    <div class="hidden md:flex items-center gap-0.5">
391      <kbd data-os-detect-target="mac" class="hidden"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[0.6rem]" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.25,10.5h-1.25v-3h1.25c1.517,0,2.75-1.233,2.75-2.75s-1.233-2.75-2.75-2.75-2.75,1.233-2.75,2.75v1.25h-3v-1.25c0-1.517-1.233-2.75-2.75-2.75s-2.75,1.233-2.75,2.75,1.233,2.75,2.75,2.75h1.25v3h-1.25c-1.517,0-2.75,1.233-2.75,2.75s1.233,2.75,2.75,2.75,2.75-1.233,2.75-2.75v-1.25h3v1.25c0,1.517,1.233,2.75,2.75,2.75s2.75-1.233,2.75-2.75-1.233-2.75-2.75-2.75Zm-1.25-5.75c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25-.561,1.25-1.25,1.25h-1.25v-1.25Zm-8.5,0c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25v1.25h-1.25c-.689,0-1.25-.561-1.25-1.25Zm2.5,8.5c0,.689-.561,1.25-1.25,1.25s-1.25-.561-1.25-1.25,.561-1.25,1.25-1.25h1.25v1.25Zm1.5-5.75h3v3h-3v-3Zm5.75,7c-.689,0-1.25-.561-1.25-1.25v-1.25h1.25c.689,0,1.25,.561,1.25,1.25s-.561,1.25-1.25,1.25Z"></path></g></svg></kbd>
392      <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd>
393      <span>+</span>
394      <kbd>K</kbd>
395    </div>
396    <svg xmlns="http://www.w3.org/2000/svg" class="size-4 md:hidden" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75 15.75L11.6386 11.6386"></path> <path d="M7.75 13.25C10.7875 13.25 13.25 10.7875 13.25 7.75C13.25 4.7125 10.7875 2.25 7.75 2.25C4.7125 2.25 2.25 4.7125 2.25 7.75C2.25 10.7875 4.7125 13.25 7.75 13.25Z"></path></g></svg>
397  </button>
398
399  <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dar
399k:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose">
400    <div class="sm:max-w-md w-full">
401
402      <div class="sm:max-w-md mx-auto w-full">
403        <div class="relative"
404              data-controller="autocomplete"
405              data-autocomplete-delay-value="50"
406              data-autocomplete-submit-on-select-value="false" 
407              data-autocomplete-highlight-matches-value="false"
408              data-autocomplete-suggestion-class-value="border-l-3 border-transparent"
409              data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected"
410              data-autocomplete-anchor-value="form"
411              data-autocomplete-max-suggestions-value="50"
412              data-autocomplete-render-mode-value="inline"
413              data-autocomplete-always-show-value="true"
414              data-autocomplete-auto-select-first-value="true"
415              data-autocomplete-preserve-search-on-select-value="true" 
416              data-autocomplete-select-action-value="modal#close:prevent"
417              data-autocomplete-local-data-value="[{&quot;title&quot;:&quot;Installation&quot;,&quot;url&quot;:&quot;/docs/installation&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;View Components&quot;,&quot;url&quot;:&quot;/docs/view-components&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Shared Partials&quot;,&quot;url&quot;:&quot;/docs/shared-partials&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;CLI&quot;,&quot;url&quot;:&quot;/docs/cli&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;MCP&quot;,&quot;url&quot;:&quot;/docs/mcp&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Author&#39;s Note&quot;,&quot;url&quot;:&quot;/docs/authors-note&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,6.9204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;m13.9962,10.4204c-.4133-.0954-.8729-.1564-1.3732-.1564s-.9599.0611-1.3731.1567\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Accordion&quot;,&quot;url&quot;:&quot;/docs/accordion&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Alert&quot;,&quot;url&quot;:&quot;/docs/alert&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Animated Number&quot;,&quot;url&quot;:&quot;/docs/animated-number&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Autocomplete Search&quot;,&quot;url&quot;:&quot;/docs/autocomplete&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Autogrow&quot;,&quot;url&quot;:&quot;/docs/autogrow&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Avatar&quot;,&quot;url&quot;:&quot;/docs/avatar&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Badge&quot;,&quot;url&quot;:&quot;/docs/badge&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Banner&quot;,&quot;url&quot;:&quot;/docs/banner&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Breadcrumb&quot;,&quot;url&quot;:&quot;/docs/breadcrumb&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Buttons&quot;,&quot;url&quot;:&quot;/docs/buttons&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Card&quot;,&quot;url&quot;:&quot;/docs/card&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Carousel&quot;,&quot;url&quot;:&quot;/docs/carousel&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Checkbox&quot;,&quot;url&quot;:&quot;/docs/checkbox&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Checkbox Select All&quot;,&quot;url&quot;:&quot;/docs/checkbox-select-all&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Clipboard&quot;,&quot;url&quot;:&quot;/docs/clipboard&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Collapsible&quot;,&quot;url&quot;:&quot;/docs/collapsible&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Color Picker&quot;,&quot;url&quot;:&quot;/docs/color-picker&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Combobox&quot;,&quot;url&quot;:&quot;/docs/combobox&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Command Palette&quot;,&quot;url&quot;:&quot;/docs/command-palette&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Confirmation&quot;,&quot;url&quot;:&quot;/docs/confirmation&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Context Menu&quot;,&quot;url&quot;:&quot;/docs/context-menu&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Datatable&quot;,&quot;url&quot;:&quot;/docs/datatable&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Date Picker&quot;,&quot;url&quot;:&quot;/docs/date-picker&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Dark Mode Switcher&quot;,&quot;url&quot;:&quot;/docs/dark-mode-switcher&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Dock&quot;,&quot;url&quot;:&quot;/docs/dock&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Drawer&quot;,&quot;url&quot;:&quot;/docs/drawer&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Dropdown&quot;,&quot;url&quot;:&quot;/docs/dropdown&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Emoji Picker&quot;,&quot;url&quot;:&quot;/docs/emoji-picker&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Feedback&quot;,&quot;url&quot;:&quot;/docs/feedback&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Forms&quot;,&quot;url&quot;:&quot;/docs/forms&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Infinite Scroll&quot;,&quot;url&quot;:&quot;/docs/infinite-scroll&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;KBD \u0026 Hotkeys&quot;,&quot;url&quot;:&quot;/docs/kbd&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Lightbox&quot;,&quot;url&quot;:&quot;/docs/lightbox&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Loading Indicator&quot;,&quot;url&quot;:&quot;/docs/loading-indicator&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Marquee&quot;,&quot;url&quot;:&quot;/docs/marquee&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Modal&quot;,&quot;url&quot;:&quot;/docs/modal&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Onboarding Checklist&quot;,&quot;url&quot;:&quot;/docs/onboarding-checklist&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Navbar&quot;,&quot;url&quot;:&quot;/docs/navbar&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Password&quot;,&quot;url&quot;:&quot;/docs/password&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Pagination&quot;,&quot;url&quot;:&quot;/docs/pagination&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Popover&quot;,&quot;url&quot;:&quot;/docs/popover&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Radio&quot;,&quot;url&quot;:&quot;/docs/radio&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Scroll Area&quot;,&quot;url&quot;:&quot;/docs/scroll-area&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Select&quot;,&quot;url&quot;:&quot;/docs/select&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Sidebar&quot;,&quot;url&quot;:&quot;/docs/sidebar&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Skeleton&quot;,&quot;url&quot;:&quot;/docs/skeleton&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Slideover&quot;,&quot;url&quot;:&quot;/docs/slideover&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Stepper&quot;,&quot;url&quot;:&quot;/docs/stepper&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Switch&quot;,&quot;url&quot;:&quot;/docs/switch&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Tabs&quot;,&quot;url&quot;:&quot;/docs/tabs&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Table&quot;,&quot;url&quot;:&quot;/docs/table&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Testimonial&quot;,&quot;url&quot;:&quot;/docs/testimonial&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Toast&quot;,&quot;url&quot;:&quot;/docs/toast&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Tooltip&quot;,&quot;url&quot;:&quot;/docs/tooltip&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Tree View&quot;,&quot;url&quot;:&quot;/docs/tree-view&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot;
417 viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Two Factor&quot;,&quot;url&quot;:&quot;/docs/two-factor&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4\&quot; width=\&quot;18\&quot; height=\&quot;18\&quot; viewBox=\&quot;0 0 18 18\&quot;\u003e\u003cg fill=\&quot;none\&quot; stroke-linecap=\&quot;round\&quot; stroke-linejoin=\&quot;round\&quot; stroke-width=\&quot;1.5\&quot; stroke=\&quot;currentColor\&quot;\u003e\u003cpolyline points=\&quot;14.983 5.53 9 9 3.017 5.53\&quot;\u003e\u003c/polyline\u003e\u003cline x1=\&quot;9\&quot; y1=\&quot;15.938\&quot; x2=\&quot;9\&quot; y2=\&quot;9\&quot;\u003e\u003c/line\u003e\u003cpath d=\&quot;M7.997,2.332L3.747,4.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\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;}]">
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_&amp;]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">⌘K</kbd><kbd class="not-[.os-macos_&amp;]:block hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400">Ctrl&nbsp;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-&gt;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-&gt;modal#backdropClose">
482    <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rou
482nded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline">
483      <button type="button" data-action="modal#close:prevent" class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none">
484        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
485        <span class="sr-only">Close</span>
486      </button>
487
488      <div class="relative mt-8 mb-6">
489  <div class="mx-auto">
490    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-900">
491      <div data-controller="newsletter"
492           class="max-w-xs">
493        <div data-newsletter-target="form">
494          <form data-action="submit->newsletter#submit"
495                class="space-y-3">
496            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
497            <input type="email"
498                  data-newsletter-target="email"
499                  placeholder="Enter your email..."
500                  class="form-control"
501                  autofocus
502                  required>
503            <div class="flex justify-center">
504              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
505            </div>
506            <button type="submit"
507                    data-newsletter-target="submitButton"
508                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
509              Subscribe to the newsletter
510            </button>
511          </form>
512          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
513            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
514          </div>
515        </div>
516
517        <div data-newsletter-target="successMessage"
518             class="text-center py-4"
519             style="display: none;">
520          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
521            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
522              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
523            </svg>
524          </div>
525          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
526          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
527        </div>
528      </div>
529    </div>
530  </div>
531</div>
532
533
534      <div class="mt-4 flex justify-center">
535        <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
536          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.792" x2="6.25" y2="13.292"></line><line x1="11.75" y1="4.708" x2="11.75" y2="15.208"></line><path d="M2.533,3.576l3.432-.763c.186-.041,.38-.029,.559,.036l4.952,1.801c.179,.065,.373,.078,.559,.036l2.998-.666c.625-.139,1.217,.336,1.217,.976V13.448c0,.469-.326,.875-.783,.976l-3.432,.763c-.186,.041-.38,.029-.559-.036l-4.952-1.801c-.179-.065-.373-.078-.559-.036l-2.998,.666c-.625,.139-1.217-.336-1.217-.976V4.552c0-.469,.326-.875,.783-.976Z"></path></g></svg>
537          Component roadmap
538        </a>
539      </div>
540
541      <div class="mt-4 flex justify-center">
542        <a href="https://railsblocks.com/changelog" target="_blank" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
543          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.75 1.75V7.25"></path> <path d="M3.75 16.25V10.75"></path> <path d="M14.25 2.75H8.75C8.198 2.75 7.75 3.2 7.75 3.75V6.25C7.75 6.8 8.198 7.25 8.75 7.25H14.25C14.802 7.25 15.25 6.8 15.25 6.25V3.75C15.25 3.2 14.802 2.75 14.25 2.75Z"></path> <path d="M3.75 10.75C4.716 10.75 5.5 9.97 5.5 9C5.5 8.03 4.716 7.25 3.75 7.25C2.784 7.25 2 8.03 2 9C2 9.97 2.784 10.75 3.75 10.75Z"></path> <path d="M14.25 10.75H8.75C8.198 10.75 7.75 11.2 7.75 11.75V14.25C7.75 14.8 8.198 15.25 8.75 15.25H14.25C14.802 15.25 15.25 14.8 15.25 14.25V11.75C15.25 11.2 14.802 10.75 14.25 10.75Z"></path></g></svg>
544          Changelog
545        </a>
546      </div>
547    </div>
548  </dialog>
549</div>
550
551
552              <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/installation">Installation</a>
553                <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/themes">Themes</a>
554              <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/cli">CLI</a>
555              <a class="max-md:hidden text-sm/6 text-neutral-950 font-medium dark:text-white" href="/docs/mcp">MCP</a>
556
557                <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
558                  <a href="/pro" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
559                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
5596,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
560                    Pro
561                  </a>
562                </div>
563
564              <div class="hidden md:block border-r border-neutral-200 dark:border-neutral-700 h-6"></div>
565
566              <a class="hidden" aria-label="GitHub" href="https://github.com">
567                <svg viewBox="0 0 20 20" class="size-5 fill-black/40 dark:fill-neutral-400 hover:opacity-75"><path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z"></path></svg>
568              </a>
569                <div class="flex items-center gap-2 max-md:hidden">
570                  <a href="/login" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">Login</a>
571                  <a href="/signup" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Signup</a>
572                </div>
573            </div>
574            <div class="flex items-center gap-2.5 md:hidden">
575              <button type="button" aria-label="Search" class="hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
576                <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg>
577              </button>
578              <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full" data-dropdown-popover-menubar-value="true" data-dropdown-popover-portal-value="false" data-dropdown-popover-placement-value="bottom-end top-end">
579                <button type="button" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" class="outline-hidden flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" aria-label="Navigation">
580                  <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path></svg>
581                </button>
582
583                <dialog
584                  class="outline-hidden absolute top-full z-10 mt-1 w-48 rounded-lg border border-neutral-200 bg-white text-neutral-900 shadow-md transition-opacity ease-out duration-150 opacity-0 dark:bg-neutral-800 dark:text-neutral-100 dar
584k:border-neutral-700/50"
585                  data-controller="menu"
586                  data-dropdown-popover-target="menu"
587                  data-action="click@document->dropdown-popover#closeOnClickOutside
588                              keydown.up->menu#prev keydown.down->menu#next
589                              keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
590                >
591                  <div class="flex flex-col p-1" role="menu">
592                    <a href="/" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
593                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg></span>
594                      Home
595                    </a>
596                    <a href="/docs/installation" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
597                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M11.5 7.25L9 9.75L6.5 7.25"></path> <path d="M6 2.75H3.75C2.6454 2.75 1.75 3.645 1.75 4.75V10.75C1.75 11.855 2.6454 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.855 16.25 10.75V4.75C16.25 3.645 15.3546 2.75 14.25 2.75H12"></path> <path d="M9 9.75V2.75"></path></g></svg></span>
598                      Installation
599                    </a>
600                      <a class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" href="/themes">
601                        <span class="text-xs text-neutral-500 dark:text-neutral-400">
602                          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m8.3034,16.217c-3.7776-.3601-6.7098-3.619-6.5469-7.5271.157-3.7659,3.3501-6.8755,7.1188-6.9388,4.0612-.0683,7.3747,3.2034,7.3747,7.2489h0c0,1.5188-1.2312,2.75-2.75,2.75h-2.963c-1.0336,0-1.6928,1.1036-1.2027,2.0137l.2374.4409c.2597.4823.2062,1.0732-.1361,1.501h0c-.2736.342-.6962.553-1.1322.5115Z"></path><circle cx="9" cy="5" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="6.1716" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="11.8284" cy="6.1716" r="1" fill="currentColor" stroke-width="0"></circle><circle cx="5" cy="9" r="1" fill="currentColor" stroke-width="0"></circle></g></svg>
603                        </span>
604                        Themes
605</a>                    <a href="/docs/cli" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dar
605k:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
606                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2"></rect><line x1="9.75" y1="12.25" x2="12.25" y2="12.25"></line><polyline points="5.75 12.25 8.25 9.75 5.75 7.25"></polyline></g></svg></span>
607                      CLI
608                    </a>
609                    <a href="/docs/mcp" class="md:hidden text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
610                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" fill="currentColor" fill-rule="evenodd" height="18" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em"><title>ModelContextProtocol</title> <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path> <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg></span>
611                      MCP
612                    </a>
613                    <a href="/docs/authors-note" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
614                      <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M10 9.54501L5.07001 14.475"></path> <path d="M1.86329 13.6331C1.06149 12.8389 0.825792 12.1376 0.776992 11.604C0.602992 9.68 2.75199 8.65301 2.73799 6.50601C2.72899 5.12901 1.83399 4.01499 1.10399 3.30399"></path> <path d="M15.241 8.05701L13.649 12.553C13.532 12.883 13.252 13.128 12.909 13.198L5.75203 14.679C5.22403 14.788 4.75603 14.321 4.86603 13.793L6.34703 6.63599C6.41803 6.29299 6.66303 6.013 6.99203 5.896L11.488 4.30399"></path> <path d="M11.496 2.29599L11.195 2.59698C10.804 2.98798 10.804 3.62099 11.195 4.01099L13.364 6.17999L15.533 8.349C15.924 8.74 16.557 8.74 16.947 8.349L17.248 8.048"></path> <path d="M10 10.295C10.4142 10.295 10.75 9.95901 10.75 9.54501C10.75 9.13101 10.4142 8.79501 10 8.79501C9.5858 8.79501 9.25 9.13101 9.25 9.54501C9.25 9.95901 9.5858 10.295 10 10.295Z" fill="currentColor"></path></g></svg></span>
615                      Author's note
616                    </a>
617                      <div class="border-t my-1 border-neutral-100 dark:border-neutral-700"></div>
618                      <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/login">
619                        <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9.75,2.75h3.5c1.105,0,2,.895,2,2V13.25c0,1.105-.895,2-2,2h-3.5"></path><polyline points="6.75 12.5 10.25 9 6.75 5.5"></polyline><line x1="10.25" y1="9" x2="2.75" y2="9"></line></g></svg></span>
620                        Login
621</a>                      <a data-menu-target="item" role="menuitem" class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" href="/signup">
622                        <span class="text-xs text-neutral-500 dark:text-neutral-400"><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 7.2505C10.5188 7.2505 11.75 6.0195 11.75 4.5005C11.75 2.9815 10.5188 1.7505 9 1.7505C7.4812 1.7505 6.25 2.9815 6.25 4.5005C6.25 6.0195 7.4812 7.2505 9 7.2505Z"></path> <path d="M17.25 14.7505H12.25"></path> <path d="M14.75 12.2505V17.2505"></path> <path d="M12.2164 10.677C11.2752 10.102 10.1839 9.7505 8.99999 9.7505C6.44899 9.7505 4.26099 11.2805 3.29099 13.4705C2.92599 14.2955 3.37799 15.2444 4.23799 15.5154C5.46299 15.9014 7.08389 16.2495 8.99999 16.2495C9.22329 16.2495 9.43029 16.2319 9.64399 16.2214"></path></g></svg></span>
623                        Signup
624</a>                  </div>
625                </dialog>
626              </div>
627            </div>
628          </div>
629        </div>
630      </div>
631    </div>
632  </nav>
633</header>
634
635
636<!-- smooth scroll nav links -->
637<script type="text/javascript">
638  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
639      anchor.addEventListener('click', function (e) {
640          e.preventDefault();
641
642          document.querySelector(this.getAttribute('href')).scrollIntoView({
643              behavior: 'smooth'
644          });
645      });
646  });
647</script>
647
648
649    <div class="fixed bottom-4 right-4 z-50" data-turbo-permanent id="theme-switcher">
650  <div
651    data-controller="theme"
652    data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20"
653    data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5">
654    <div class="opacity-0 transition-opacity duration-200 relative z-0 inline-grid p-0.5 grid-cols-3 rounded-full bg-white/80 backdrop-blur-md text-neutral-950 border border-black/10 dark:border-white/10 dark:bg-neutral-800/80 dark:text-white shadow-xs" data-theme-target="picker" role="radiogroup" aria-label="Theme selection">
655      <button
656        class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
657        aria-label="System theme"
658        data-controller="tooltip"
659        data-tooltip-content="System"
660        data-tooltip-animation-value="fade origin"
661        data-tooltip-delay-value="500"
662        data-theme-target="option"
663        data-action="click->theme#choose keydown->theme#navigate"
664        data-theme-mode="system"
665        type="button"
666        role="radio"
667        aria-checked="true"
668        tabindex="0"
669        id="theme-option-system">
670        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path> <path d="M9 12.75V15.25"></path> <path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V10.75C1.75 11.8546 2.64543 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.8546 16.25 10.75V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z"></path></g></svg>
671      </button>
672      <button
673        class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
674        aria-label="Light theme"
675        data-controller="tooltip"
676        data-tooltip-content="Light mode"
677        data-tooltip-animation-value="fade origin"
678        data-tooltip-delay-value="500"
679        data-theme-target="option"
680        data-action="click->theme#choose keydown->theme#navigate"
681        data-theme-mode="light"
682        type="button"
683        role="radio"
684        aria-checked="false"
685        tabindex="-1"
686        id="theme-option-light">
687        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="1.25" x2="9" y2="2.25"></line><line x1="14.48" y1="3.52" x2="13.773" y2="4.227"></line><line x1="16.75" y1="9" x2="15.75" y2="9"></line><line x1="14.48" y1="14.48" x2="13.773" y2="13.773"></line><line x1="9" y1="16.75" x2="9" y2="15.75"></line><line x1="3.52" y1="14.48" x2="4.227" y2="13.773"></line><line x1="1.25" y1="9" x2="2.25" y2="9"></line><line x1="3.52" y1="3.52" x2="4.227" y2="4.227"></line><circle cx="9" cy="9" r="4.25"></circle></g></svg>
688      </button>
689      <button
690        class="rounded-full flex items-center justify-center p-2 m-0.5 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
691        aria-label="Dark theme"
692        data-controller="tooltip"
693        data-tooltip-content="Dark mode"
694        data-tooltip-animation-value="fade origin"
695        data-tooltip-delay-value="500"
696        data-theme-target="option"
697        data-action="click->theme#choose keydown->theme#navigate"
698        data-theme-mode="dark"
699        type="button"
700        role="radio"
701        aria-checked="false"
702        tabindex="-1"
703        id="theme-option-dark">
704        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M13,11.75c-3.452,0-6.25-2.798-6.25-6.25,0-1.352,.433-2.599,1.162-3.622-3.364,.628-5.912,3.575-5.912,7.122,0,4.004,3.246,7.25,7.25,7.25,3.372,0,6.198-2.306,7.009-5.424-.95,.583-2.063,.924-3.259,.924Z"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.
704104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-stroke="none" stroke="none"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle></g></svg>
705      </button>
706    </div>
707  </div>
708</div>
709
710
711    <main class="mx-auto ">
712      
713      <div data-controller="toast"
714     id="toast_triggers"
715     data-toast-position-value="top-center"
716     data-toast-layout-value="default"> 
717  <ul
718    data-toast-target="container"
719    data-action="mouseenter->toast#handleMouseEnter mouseleave->toast#handleMouseLeave"
720    class="fixed block w-full group z-[99] max-w-[300px] sm:max-w-xs left-1/2 -translate-x-1/2 top-0 overflow-visible"
721    style="transition: height 300ms ease;"
722  >
723  </ul>
724</div>
725
726      
727
728
729
730      
731      
732<div class="relative sm:py-6 mt-14">
733  <div class="mx-auto">
734    <div class="text-center max-w-xl mx-auto px-4">
735      <h1 class="text-4xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 font-quincy">
736        <span class="block text-neutral-900 dark:text-neutral-50">Changelog</span>
737      </h1>
738      <p class="mt-3 max-w-md mx-auto text-base text-neutral-500 dark:text-neutral-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
739        A list of updates and changes to Rails Blocks.
740      </p>
741    </div>
742
743    <div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto mt-12">
744      <!-- Timeline -->
745      <div>
746        <!-- Item - July 27th 2026 -->
747        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
748          <!-- Icon -->
749          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
750            <div class="relative z-10 size-6 flex justify-center items-center">
751              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
752            </div>
753          </div>
754          <!-- End Icon -->
755
756          <!-- Right Content -->
757          <div class="grow pb-8 relative">
758            <div class="grid grid-cols-1 gap-6 md:gap-12">
759              <div>
760                <div class="space-y-3">
761                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
762                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
763                      July 27<sup>th</sup> 2026
764                    </h2>
765                  </div>
766                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
766k:text-neutral-300">
767                    <li class="flex items-start">
768                      <span class="mr-2">•</span>
769                      <span>Launched the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/themes">Theme Builder</a>, with 18 primary colors, 9 base palettes, live light and dark component previews, and copy-ready Tailwind CSS plus an AI migration prompt.</span>
770                    </li>
771                    <li class="flex items-start">
772                      <span class="mr-2">•</span>
773                      <span>Added changes related to primary colors to the installation CSS and updated checkbox and radio components to follow generated themes.</span>
774                    </li>
775                    <li class="flex items-start">
776                      <span class="mr-2">•</span>
777                      <span><a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/checkbox">Checkbox</a> ViewComponent and shared partial now accept input data attributes for Stimulus integrations</span>
778                    </li>
779                    <li class="flex items-start">
780                      <span class="mr-2">•</span>
781                      <span>Dynamically updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltips</a> now retain their positioning arrow.</span>
782                    </li>
783                    <li class="flex items-start">
784                      <span class="mr-2">•</span>
785                      <span>Fixed a regression that caused duplicate tooltip arrows after Turbo navigation on persistent interface elements.</span>
786                    </li>
787                  </ul>
788                </div>
789              </div>
790            </div>
791          </div>
792          <!-- End Right Content -->
793        </div>
794        <!-- End Item -->
795
796        <!-- Item - July 19th 2026 -->
797        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
798          <!-- Icon -->
799          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
800            <div class="relative z-10 size-6 flex justify-center items-center">
801              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
802            </div>
803          </div>
804          <!-- End Icon -->
805
806          <!-- Right Content -->
807          <div class="grow pb-8 relative">
808            <div class="grid grid-cols-1 gap-6 md:gap-12">
809              <div>
810                <div class="space-y-3">
811                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
812                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
813                      July 19<sup>th</sup> 2026
814                    </h2>
815                  </div>
816                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
816k:text-neutral-300">
817                    <li class="flex items-start">
818                      <span class="mr-2">•</span>
819                      <span>Added the new Pro <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/onboarding-checklist">Onboarding Checklist component</a>, with server-driven task state, overlay and inline layouts, live progress updates, optional task skipping, and persistence hooks.</span>
820                    </li>
821                    <div class="my-4 w-full">
822                      <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
823                        <li class="relative">
824  <div class="absolute left-4 top-4 z-10 text-xs text-neutral-500 dark:text-neutral-400">
825      <div class="inline relative">
826    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
827      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
828        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
829        Pro
830      </a>
831    </div>
832  </div>
833
834  </div>
835
836  <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover">
837    <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
837k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
838      <span class="text-xs">?</span>
839    </button>
840
841    <template data-popover-target="content">
842      <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
843        <div class="space-y-2">
844          <div class="w-full text-center text-xs font-semibold">Dependencies</div>
845
846          <div class="flex items-center gap-1.5 text-xs">
847            <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308 .326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
848            <span>Tailwind CSS</span>
849          </div>
850
851          <div class="flex items-center gap-1.5 text-xs">
852            <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
852ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
853              <g class="fill-neutral-800 dark:fill-white">
854                <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
855                <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
856                <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
857              </g>
858            </svg>
859            <span class="flex grow gap-2">Stimulus</span>
860          </div>
861          <div class="flex items-center gap-1.5 text-xs">
862            <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
863            <span>Floating UI</span>
864          </div>
865
866          <div class="flex items-center gap-1.5 text-xs">
867            <img alt="Number Flow" class="size-3.5 rounded" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" />
868            <span>Number Flow</span>
869          </div>
870        </div>
871      </div>
872    </template>
873  </div>
874
875  <div class="pointer-events-none absolute inset-0">
876    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl px-5">
877      <div class="w-full max-w-[320px]">
878        
879<div
880  class="relative w-full"
881  data-controller="onboarding-checklist"
882  data-action="click@window->onboarding-checklist#close keydown.esc@window->onboarding-checklist#escape"
883  data-onboarding-checklist-data-value="{&quot;checklist_id&quot;:&quot;changelog-preview&quot;,&quot;title&quot;:&quot;Make Acme yours&quot;,&quot;panel_title&quot;:&quot;Your quick start&quot;,&quot;panel_description&quot;:&quot;A few small wins, then you’re flying.&quot;,&quot;completed_summary&quot;:&quot;All set! Your workspace is ready&quot;,&quot;dismiss_on_complete&quot;:false,&quot;tasks&quot;:[{&quot;id&quot;:&quot;profile&quot;,&quot;title&quot;:&quot;Polish your profile&quot;,&quot;description&quot;:&quot;Add a photo and your role&quot;,&quot;status&quot;:&quot;completed&quot;,&quot;icon&quot;:&quot;user&quot;},{&quot;id&quot;:&quot;workspace&quot;,&quot;title&quot;:&quot;Name your workspace&quot;,&quot;description&quot;:&quot;Make it feel like home&quot;,&quot;status&quot;:&quot;completed&quot;,&quot;icon&quot;:&quot;folder&quot;},{&quot;id&quot;:&quot;invite&quot;,&quot;title&quot;:&quot;Invite your first teammate&quot;,&quot;description&quot;:&quot;Great work happens together&quot;,&quot;status&quot;:&quot;pending&quot;,&quot;action&quot;:&quot;Invite&quot;,&quot;icon&quot;:&quot;users&quot;},{&quot;id&quot;:&quot;project&quot;,&quot;title&quot;:&quot;Create your first project&quot;,&quot;description&quot;:&quot;Turn an idea into a plan&quot;,&quot;status&quot;:&quot;pending&quot;,&quot;action&quot;:&quot;Create&quot;,&quot;icon&quot;:&quot;sparkles&quot;},{&quot;id&quot;:&quot;shortcut&quot;,&quot;title&quot;:&quot;Learn the command menu&quot;,&quot;description&quot;:&quot;Move around at the speed of thought&quot;,&quot;status&quot;:&quot;pending&quot;,&quot;action&quot;:&quot;Explore&quot;,&quot;url&quot;:&quot;/docs/kbd&quot;,&quot;icon&quot;:&quot;keyboard&quot;,&quot;optional&quot;:true}]}"
884  data-onboarding-checklist-mode-value="overlay-below"
885  data-onboarding-checklist-open-value="false"
886  data-onboarding-checklist-compact-value="true"
887>
888  <div data-onboarding-checklist-target="surface" class="relative mx-auto w-full max-w-[280px]">
889    <div class="relative rounded-2xl border border-black/10 bg-white p-1 shadow-[0_10px_28px_rgb(0_0_0_/_10%)] dark:border-white/15 dark:bg-neutral-900 dark:shadow-[0_14px_36px_rgb(0_0_0_/_35%)]">
890      <button
891        type="button"
892        data-onboarding-checklist-target="trigger"
893        data-action="click->onboarding-checklist#toggle"
894        aria-expanded="false"
895        aria-controls="changelog-onboarding-checklist"
896        class="flex min-h-13 w-full items-center gap-2.5 rounded-xl px-3 py-2 text-left transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-500 dark:hover:bg-white/5"
897      >
898        <span data-onboarding-checklist-target="ready progressVisual" aria-hidden="true" class="relative flex size-9 shrink-0 items-center justify-center opacity-0 transition-opacity duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none">
899          <span data-onboarding-checklist-target="completionHalo" class="pointer-events-none absolute inset-1 rounded-full bg-emerald-400/35 opacity-0 will-change-transform" aria-hidden="true"></span>
900          <svg class="size-9 -rotate-90" viewBox="0 0 40 40" aria-hidden="true">
901            <circle cx="20" cy="20" r="17" fill="none" stroke="currentColor" stroke-width="2.75" class="text-neutral-200 dark:text-neutral-700" />
902            <circle data-onboarding-checklist-target="ring" cx="20" cy="20" r="17" pathLength="100" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100" class="text-neutral-800 transition-[stroke-dashoffset,color] duration-[480ms] ease-[cubic-bezier(0.65,0,0.35,1)] motion-reduce:transition-none dark:text-neutral-200" />
903          </svg>
904          <number-flow data-onboarding-checklist-target="progress" class="absolute text-[8px] font-semibold tabular-nums text-neutral-700 
904will-change-transform transition-colors duration-300 motion-reduce:transition-none dark:text-neutral-200"></number-flow>
905        </span>
906        <span class="min-w-0 flex-1">
907          <span data-onboarding-checklist-target="title" class="block truncate text-xs font-semibold tracking-[-0.01em] text-neutral-900 dark:text-white">Make Acme yours</span>
908          <span data-onboarding-checklist-target="summary ready" aria-hidden="true" class="mt-0.5 block truncate text-[10px] text-neutral-500 opacity-0 transition-opacity duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none dark:text-neutral-400"></span>
909        </span>
910        <span class="flex size-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
911          <svg data-onboarding-checklist-target="chevron" class="size-3.5 will-change-transform transition-transform duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 7 4.5 4 4.5-4" /></svg>
912        </span>
913      </button>
914    </div>
915
916    <div id="changelog-onboarding-checklist" data-onboarding-checklist-target="panel" hidden class="left-0 z-40 w-full overflow-hidden rounded-2xl border border-black/10 bg-white will-change-transform transition-[height,opacity,transform] duration-[450ms] ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none shadow-[0_16px_40px_rgb(0_0_0_/_14%)] dark:border-white/15 dark:bg-neutral-900 dark:shadow-[0_20px_48px_rgb(0_0_0_/_45%)]">
917      <div class="flex items-start justify-between border-b border-neutral-200/70 px-5 py-4 dark:border-white/8">
918        <div>
919          <p data-onboarding-checklist-target="panelTitle" class="text-xs font-semibold text-neutral-900 dark:text-white">Your quick start</p>
920          <p data-onboarding-checklist-target="panelDescription" class="mt-0.5 text-[10px] text-neutral-500 dark:text-neutral-400">A few small wins, then you’re flying.</p>
921        </div>
922      </div>
923      <ol data-onboarding-checklist-target="taskList"></ol>
924    </div>
925  </div>
926
927  <p data-onboarding-checklist-target="liveRegion" class="sr-only" aria-live="polite"></p>
928</div>
929
930      </div>
931    </div>
932  </div>
933
934  <a class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-colors duration-200 motion-reduce:transition-none hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200" href="/docs/onboarding-checklist" data-turbo-frame="_top">
935    <div class="h-48"></div>
936    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
937      Onboarding Checklist
938      <svg class="w-0 transition-[width] duration-200 motion-reduce:transition-none group-hover:w-4" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 6h9.75M7.75 9.25 11 6 7.75 2.75" /></svg>
939    </p>
940    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p>
941  </a>
942</li>
943
944                      </ul>
945                    </div>
946                  </ul>
947                </div>
948              </div>
949            </div>
950          </div>
951          <!-- End Right Content -->
952        </div>
953        <!-- End Item -->
954
955        <!-- Item - July 16th 2026 -->
956        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
957          <!-- Icon -->
958          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
959            <div class="relative z-10 size-6 flex justify-center items-center">
960              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
961            </div>
962          </div>
963          <!-- End Icon -->
964
965          <!-- Right Content -->
966          <div class="grow pb-8 relative">
967            <div class="grid grid-cols-1 gap-6 md:gap-12">
968              <div>
969                <div class="space-y-3">
970                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
971                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
972                      July 16<sup>th</sup> 2026
973                    </h2>
974                  </div>
975                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
975k:text-neutral-300">
976                    <li class="flex items-start">
977                      <span class="mr-2">•</span>
978                      <span>Added the new free <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dark-mode-switcher">Dark Mode Switcher component</a>, with System, Light, and Dark preferences, three switcher variants, accessible keyboard controls, and persistent cross-tab syncing.</span>
979                    </li>
980                    <div class="my-4 w-full">
981                      <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
982                        <li class="relative">
983  <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
984  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
985    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
986      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
987      New
988    </div>
989  </div>
990</div>
991
992
993  <div class="pointer-events-none absolute inset-0 left-0 top-0">
994    <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover">
995      <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
995k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
996        <span class="text-xs">?</span>
997      </button>
998
999      <template data-popover-target="content">
1000        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1001          <div class="space-y-2">
1002            <div class="w-full text-center text-xs font-semibold">Dependencies</div>
1003
1004            <div class="flex items-center gap-1.5 text-xs">
1005              <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308 .326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1006              <span>Tailwind CSS</span>
1007            </div>
1008
1009            <div class="flex items-center gap-1.5 text-xs">
1010              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1010ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1011                <g class="fill-neutral-800 dark:fill-white">
1012                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1013                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1014                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1015                </g>
1016              </svg>
1017              <span class="flex grow gap-2">Stimulus</span>
1018            </div>
1019            <div class="flex items-center gap-1.5 text-xs">
1020              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
1021              <span>Floating UI</span>
1022            </div>
1023          </div>
1024        </div>
1025      </template>
1026    </div>
1027
1028    <div class="pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl border border-black/10 bg-white p-4 dark:border-white/20 dark:bg-[#080808]">
1029      <div
1030  data-controller="theme"
1031  data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20"
1032  data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5">
1033  <div
1034    class="relative z-0 inline-grid grid-cols-3 rounded-full border border-black/10 bg-white/80 p-0.5 text-neutral-950 opacity-0 shadow-xs backdrop-blur-md transition-opacity duration-200 dark:border-white/10 dark:bg-neutral-800/80 dark:text-white"
1035    data-theme-target="picker"
1036    role="radiogroup"
1037    aria-label="Theme selection">
1038    <button
1039      class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
1040      aria-label="System theme"
1041      data-controller="tooltip"
1042      data-tooltip-content="System"
1043      data-tooltip-animation-value="fade origin"
1044      data-tooltip-delay-value="500"
1045      data-theme-target="option"
1046      data-action="click->theme#choose keydown->theme#navigate"
1047      data-theme-mode="system"
1048      type="button"
1049      role="radio"
1050      aria-checked="true"
1051      tabindex="0">
1052      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path><path d="M9 12.75V15.25"></path><path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V10.75C1.75 11.8546 2.64543 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.8546 16.25 10.75V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z"></path></g></svg>
1053    </button>
1054    <button
1055      class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
1056      aria-label="Light theme"
1057      data-controller="tooltip"
1058      data-tooltip-content="Light mode"
1059      data-tooltip-animation-value="fade origin"
1060      data-tooltip-delay-value="500"
1061      data-theme-target="option"
1062      data-action="click->theme#choose keydown->theme#navigate"
1063      data-theme-mode="light"
1064      type="button"
1065      role="radio"
1066      aria-checked="false"
1067      tabindex="-1">
1068      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="1.25" x2="9" y2="2.25"></line><line x1="14.48" y1="3.52" x2="13.773" y2="4.227"></line><line x1="16.75" y1="9" x2="15.75" y2="9"></line><line x1="14.48" y1="14.48" x2="13.773" y2="13.773"></line><line x1="9" y1="16.75" x2="9" y2="15.75"></line><line x1="3.52" y1="14.48" x2="4.227" y2="13.773"></line><line x1="1.25" y1="9" x2="2.25" y2="9"></line><line x1="3.52" y1="3.52" x2="4.227" y2="4.227"></line><circle cx="9" cy="9" r="4.25"></circle></g></svg>
1069    </button>
1070    <button
1071      class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
1072      aria-label="Dark theme"
1073      data-controller="tooltip"
1074      data-tooltip-content="Dark mode"
1075      data-tooltip-animation-value="fade origin"
1076      data-tooltip-delay-value="500"
1077      data-theme-target="option"
1078      data-action="click->theme#choose keydown->theme#navigate"
1079      data-theme-mode="dark"
1080      type="button"
1081      role="radio"
1082      aria-checked="false"
1083      tabindex="-1">
1084      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M13,11.75c-3.452,0-6.25-2.798-6.25-6.25,0-1.352,.433-2.599,1.162-3.622-3.364,.628-5.912,3.575-5.912,7.122,0,4.004,3.246,7.25,7.25,7.25,3.372,0,6.198-2.306,7.009-5.424-.95,.583-2.063,.924-3.259,.924Z"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" stroke="none"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" stroke="none"></circle></g></svg>
1085    </button>
1086  </div>
1087</div>
1088
1089    </div>
1090  </div>
1091
1092  <a href="/docs/dark-mode-switcher" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200">
1093    <div class="h-48"></div>
1094    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
1095      Dark Mode Switcher
1096      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 transition-all duration-200 group-hover:w-4" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1097    </p>
1098    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p>
1099  </a>
1100</li>
1101
1102                      </ul>
1103                    </div>
1104                  </ul>
1105                </div>
1106              </div>
1107            </div>
1108          </div>
1109          <!-- End Right Content -->
1110        </div>
1111        <!-- End Item -->
1112
1113        <!-- Item - July 15th 2026 -->
1114        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1115          <!-- Icon -->
1116          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1117            <div class="relative z-10 size-6 flex justify-center items-center">
1118              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1119            </div>
1120          </div>
1121          <!-- End Icon -->
1122
1123          <!-- Right Content -->
1124          <div class="grow pb-8 relative">
1125            <div class="grid grid-cols-1 gap-6 md:gap-12">
1126              <div>
1127                <div class="space-y-3">
1128                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1129                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1130                      July 15<sup>th</sup> 2026
1131                    </h2>
1132                  </div>
1133                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dark:text-neutral-300">
1134                    <li class="flex items-start">
1135                      <span class="mr-2">•</span>
1136                      <span>Added the new free <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/infinite-scroll">Infinite Scroll component</a>, with automatic and manual loading, Pagy-backed batches, and reduced-motion-safe transitions.</span>
1137                    </li>
1138                    <div class="my-4 w-full">
1139                      <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
1140                        <li class="relative">
1141  <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
1142  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
1143    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
1144      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
1145      New
1146    </div>
1147  </div>
1148</div>
1149
1150
1151  <div class="pointer-events-none absolute inset-0 left-0 top-0">
1152    <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover">
1153      <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
1153k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
1154        <span class="text-xs">?</span>
1155      </button>
1156
1157      <template data-popover-target="content">
1158        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1159          <div class="space-y-2">
1160            <div class="w-full text-center text-xs font-semibold">Dependencies</div>
1161
1162            <div class="flex items-center gap-1.5 text-xs">
1163              <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1164              <span>Tailwind CSS</span>
1165            </div>
1166
1167            <div class="flex items-center gap-1.5 text-xs">
1168              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1168ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1169                <g class="fill-neutral-800 dark:fill-white">
1170                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1171                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1172                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1173                </g>
1174              </svg>
1175              <span class="flex grow gap-2">Stimulus</span>
1176            </div>
1177
1178            <div class="flex items-center gap-1.5 text-xs">
1179              <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" />
1180              <span>Pagy</span>
1181            </div>
1182          </div>
1183        </div>
1184      </template>
1185    </div>
1186
1187    <div class="pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl border border-black/10 bg-white p-4 dark:border-white/20 dark:bg-[#080808]">
1188      
1189<div
1190  class="relative h-[9.5rem] w-full max-w-[14rem] overflow-hidden rounded-lg border border-black/10 bg-white shadow-xs dark:border-white/10 dark:bg-neutral-900"
1191  data-controller="infinite-scroll"
1192  data-infinite-scroll-url-value="/docs/infinite-scroll/items?page=2&amp;preview=home"
1193  data-infinite-scroll-scroll-root-value="container"
1194  data-infinite-scroll-root-margin-value="0px 0px 20px"
1195  data-infinite-scroll-manual-value="false"
1196  data-infinite-scroll-loading-label-value="Loading...">
1197  <div class="flex items-center justify-between border-b border-neutral-100 px-3 py-2 dark:border-neutral-800">
1198    <div>
1199      <p class="text-[10px] font-semibold leading-none text-neutral-900 dark:text-white">Recent activity</p>
1200      <p class="mt-1 text-[8px] leading-none text-neutral-400">Workspace updates</p>
1201    </div>
1202    <span class="flex items-center gap-1 rounded-full bg-emerald-50 px-1.5 py-1 text-[7px] font-medium leading-none text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300">
1203      <span class="size-1 rounded-full bg-emerald-500"></span>
1204      Live
1205    </span>
1206  </div>
1207
1208  <div class="small-scrollbar h-[7.35rem] overflow-y-auto overscroll-contain pb-2" data-infinite-scroll-target="viewport">
1209    <div class="divide-y divide-neutral-100 px-2 dark:divide-neutral-800" data-infinite-scroll-target="list">
1210      
1211  <div id="home_preview_activity_1" class="flex items-center gap-2 px-1 py-2">
1212    <span class="size-5 shrink-0 rounded-full bg-violet-100 dark:bg-violet-400/20"></span>
1213    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Olivia shipped a release</p>
1214    <span class="text-[7px] tabular-nums text-neutral-400">2m</span>
1215  </div>
1216  <div id="home_preview_activity_2" class="flex items-center gap-2 px-1 py-2">
1217    <span class="size-5 shrink-0 rounded-full bg-sky-100 dark:bg-sky-400/20"></span>
1218    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Noah left feedback</p>
1219    <span class="text-[7px] tabular-nums text-neutral-400">4m</span>
1220  </div>
1221  <div id="home_preview_activity_3" class="flex items-center gap-2 px-1 py-2">
1222    <span class="size-5 shrink-0 rounded-full bg-amber-100 dark:bg-amber-400/20"></span>
1223    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Mia uploaded files</p>
1224    <span class="text-[7px] tabular-nums text-neutral-400">6m</span>
1225  </div>
1226  <div id="home_preview_activity_4" class="flex items-center gap-2 px-1 py-2">
1227    <span class="size-5 shrink-0 rounded-full bg-emerald-100 dark:bg-emerald-400/20"></span>
1228    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Ethan completed a task</p>
1229    <span class="text-[7px] tabular-nums text-neutral-400">8m</span>
1230  </div>
1231
1232    </div>
1233
1234    <div class="h-9 [overflow-anchor:none]" data-infinite-scroll-target="sentinel"></div>
1235
1236    <div class="pointer-events-none sticky bottom-1 z-10 -mt-9 flex h-9 items-center justify-center" data-infinite-scroll-target="controls">
1237      <button
1238        type="button"
1239        class="pointer-events-auto inline-flex min-h-6 min-w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-100/75 px-2.5 py-1 text-[8px] font-medium text-neutral-600 opacity-0 shadow-lg shadow-black/10 ring-1 ring-black/10 backdrop-blur-sm backdrop-filter transition-opacity duration-150 ease-out motion-reduce:transition-none disabled:cursor-wait dark:bg-neutral-800/75 dark:text-neutral-300 dark:ring-white/15"
1240        data-infinite-scroll-target="button"
1241        data-action="infinite-scroll#load"
1242        hidden>
1243        <svg hidden data-infinite-scroll-target="spinner" class="size-2.5 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true">
1244          <circle class="opacity-25" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3"></circle>
1245          <path class="opacity-80" fill="currentColor" d="M21 12a9 9 0 0 0-9-9v3a6 6 0 0 1 6 6h3Z"></path>
1246        </svg>
1247        <span class="motion-reduce:animate-none" data-infinite-scroll-target="label">Load more</span>
1248      </button>
1249      <p hidden class="rounded-full bg-neutral-100/75 px-2.5 py-1 text-[8px] text-neutral-500 shadow-lg shadow-black/10 ring-1 ring-black/10 backdrop-blur-sm backdrop-filter dark:bg-neutral-800/75 dark:text-neutral-400 dark:ring-white/15" data-infinite-scroll-target="end">You're all caught up</p>
1250    </div>
1251  </div>
1252
1253  <p class="sr-only" aria-live="polite" data-infinite-scroll-target="status"></p>
1254</div>
1255
1256    </div>
1257  </div>
1258
1259  <a href="/docs/infinite-scroll" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200">
1260    <div class="h-48"></div>
1261    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
1262      Infinite Scroll
1263      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 transition-all duration-200 group-hover:w-4" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1264    </p>
1265    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 1 component</p>
1266  </a>
1267</li>
1268
1269                      </ul>
1270                    </div>
1271                  </ul>
1272                </div>
1273              </div>
1274            </div>
1275          </div>
1276          <!-- End Right Content -->
1277        </div>
1278        <!-- End Item -->
1279
1280        <!-- Item - July 14th 2026 -->
1281        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1282
1283          <!-- Icon -->
1284          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1285            <div class="relative z-10 size-6 flex justify-center items-center">
1286              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1287            </div>
1288          </div>
1289          <!-- End Icon -->
1290
1291          <!-- Right Content -->
1292          <div class="grow pb-8 relative">
1293            <!-- Grid -->
1294            <div class="grid grid-cols-1 gap-6 md:gap-12">
1295              <div>
1296                <div class="space-y-3">
1297                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1298                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1299                      July 14<sup>th</sup> 2026
1300                    </h2>
1301                  </div>
1302                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dark:text-neutral-300">
1303                    <li class="flex items-start">
1304                      <span class="mr-2">•</span>
1305                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltip</a> positioning for fixed elements so tooltips stay aligned while scrolling.</span>
1306                    </li>
1307                    <li class="flex items-start">
1308                      <span class="mr-2">•</span>
1309                      <span>Added the new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/avatar">avatar component set</a>, including five examples.</span>
1310                    </li>
1311                    <div class="my-4 w-full">
1312                      <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
1313                        <li class="relative">
1314  <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
1315    <div class="inline relative">
1316  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
1317    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
1318      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
1319      New
1320    </div>
1321  </div>
1322</div>
1323
1324  </div>
1325
1326  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1327    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1328      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1328k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1329        <span class="text-xs">?</span>
1330      </button>
1331
1332      <template data-popover-target="content">
1333        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1334          <div class="space-y-2">
1335            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1336
1337            <div class="flex items-center gap-1.5 text-xs">
1338              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1339              <span class="flex grow gap-2">Tailwind CSS</span>
1340            </div>
1341          </div>
1342        </div>
1343      </template>
1344    </div>
1345
1346    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1347      <!-- Recommended group overlap: xs -space-x-2, sm -space-x-3, md -space-x-4, lg -space-x-5, xl -space-x-6 -->
1348<div class="flex w-fit -space-x-4 [&>*]:isolate" role="group" aria-label="Project members">
1349  <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]">
1350    <img
1351      class="size-full rounded-full object-cover"
1352      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop&crop=face&auto=format&q=80"
1353      alt="Olivia Martin">
1354  </span>
1355  <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]">
1356    <img
1357      class="size-full rounded-full object-cover"
1358      src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&h=160&fit=crop&crop=face&auto=format&q=80"
1359      alt="Noah Williams">
1360  </span>
1361  <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]">
1362    <img
1363      class="size-full rounded-full object-cover"
1364      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=160&h=160&fit=crop&crop=face&auto=format&q=80"
1365      alt="Emma Davis">
1366  </span>
1367  <span class="relative inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-xs font-medium text-neutral-600 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:bg-neutral-800 dark:text-neutral-300 dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]" aria-label="3 more project members">
1368    +3
1369  </span>
1370</div>
1371
1372    </div>
1373  </div>
1374  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/avatar" data-turbo-frame="_top">
1375    <div class="h-48"></div>
1376    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1377      Avatar
1378      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1379    </p>
1380    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
1381  </a>
1382</li>
1383
1384                      </ul>
1385                    </div>
1386                  </ul>
1387                </div>
1388              </div>
1389              <!-- End Col -->
1390            </div>
1391            <!-- End Grid -->
1392          </div>
1393
1394          <!-- End Right Content -->
1395        </div>
1396        <!-- End Item -->
1397
1398        <!-- Item - June 17th 2026 -->
1399        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1400
1401          <!-- Icon -->
1402          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1403            <div class="relative z-10 size-6 flex justify-center items-center">
1404              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1405            </div>
1406          </div>
1407          <!-- End Icon -->
1408
1409          <!-- Right Content -->
1410          <div class="grow pb-8 relative">
1411            <!-- Grid -->
1412            <div class="grid grid-cols-1 gap-6 md:gap-12">
1413              <div>
1414                <div class="space-y-3">
1415                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1416                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1417                      June 17<sup>th</sup> 2026
1418                    </h2>
1419                  </div>
1420                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dark:text-neutral-300">
1421                    <li class="flex items-start">
1422                      <span class="mr-2">•</span>
1423                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> positioning: top-level menus now portal to the body while open so scroll containers do not clip them.</span>
1424                    </li>
1425                    <li class="flex items-start">
1426                      <span class="mr-2">•</span>
1427                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> interactions: searchable dropdowns, checkbox/radio activation, nested submenus, and hover-based submenu navigation now behave more consistently with keyboard and pointer input.</span>
1428                    </li>
1429                    <li class="flex items-start">
1430                      <span class="mr-2">•</span>
1431                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> behavior with portaled menus, including nested submenu hover handling and explicit close actions inside the menu.</span>
1432                    </li>
1433                    <li class="flex items-start">
1434                      <span class="mr-2">•</span>
1435                      <span>Added <span class="inline-block relative" data-controller="popover" data-popover-trigger-value="mouseenter focus" data-popover-max-width-value="320">
1436                        <button type="button" data-popover-target="button" class="cursor-help border-0 bg-transparent p-0 text-left underline decoration-dashed underline-offset-4 decoration-neutral-300 transition-colors hover:decoration-neutral-500 focus-visible:decoration-neutral-500 dark:decoration-neutral-500 dark:hover:decoration-neutral-300 dark:focus-visible:decoration-neutral-300" aria-label="More information about prediction cone handling">
1437                          prediction cone/safe triangle
1438                        </button>
1439                        <template data-popover-target="content">
1440                          <div>
1441                            <p class="rounded-t-[0.4375rem] border-b border-b-neutral-100 bg-neutral-50 px-3 py-2.5 font-semibold text-neutral-700 dark:border-neutral-700/75 dark:bg-neutral-700/25 dark:text-neutral-200">
1442                              Prediction cone/Safe triangle
1443                            </p>
1444                            <div class="p-3">
1445                              <img alt="Animation showing the prediction cone hover area for nested submenu navigation" class="w-full rounded" src="/assets/prediction-cone-74f81ef919876f2cd5b88c86826b7a64d54a9126a342e0ecf0f034bb386b415e.gif" />
1446                            </div>
1447                          </div>
1448                        </template>
1449                      </span> handling for nested <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> submenus so moving diagonally toward a submenu is more forgiving.</span>
1450                    </li>
1451                    <li class="flex items-start">
1452                      <span class="mr-2">•</span>
1453                      <span>Updated Tailwind CSS to v4.3.1.</span>
1454                    </li>
1455                    <li class="flex items-start">
1456                      <span class="mr-2">•</span>
1457                      <span>Updated Tom Select to v2.6.1.</span>
1458                    </li>
1459                    <li class="flex items-start">
1460                      <span class="mr-2">•</span>
1461                      <span>Updated Pagy to v43.5.6.</span>
1462                    </li>
1463                  </ul>
1464                </div>
1465              </div>
1466              <!-- End Col -->
1467            </div>
1468            <!-- End Grid -->
1469          </div>
1470
1471          <!-- End Right Content -->
1472        </div>
1473        <!-- End Item -->
1474
1475        <!-- Item - June 3rd 2026 -->
1476        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1477
1478          <!-- Icon -->
1479          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1480            <div class="relative z-10 size-6 flex justify-center items-center">
1481              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1482            </div>
1483          </div>
1484          <!-- End Icon -->
1485
1486          <!-- Right Content -->
1487          <div class="grow pb-8 relative">
1488            <!-- Grid -->
1489            <div class="grid grid-cols-1 gap-6 md:gap-12">
1490              <div>
1491                <div class="space-y-3">
1492                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1493                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1494                      June 3<sup>rd</sup> 2026
1495                    </h2>
1496                  </div>
1497                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1497k:text-neutral-300">
1498                    <li class="flex items-start">
1499                      <span class="mr-2">•</span>
1500                      <span>Fixed an issue with the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/navbar">navbar</a> menu on small screens which led it to close unexpectedly.</span>
1501                    </li>
1502                    <li class="flex items-start">
1503                      <span class="mr-2">•</span>
1504                      <span>Cleaned up dark mode styles in component snippets to improve consistency.</span>
1505                    </li>
1506                  </ul>
1507                </div>
1508              </div>
1509              <!-- End Col -->
1510            </div>
1511            <!-- End Grid -->
1512          </div>
1513
1514          <!-- End Right Content -->
1515        </div>
1516        <!-- End Item -->
1517
1518        <!-- Item - May 14th 2026 -->
1519        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1520
1521          <!-- Icon -->
1522          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1523            <div class="relative z-10 size-6 flex justify-center items-center">
1524              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1525            </div>
1526          </div>
1527          <!-- End Icon -->
1528
1529          <!-- Right Content -->
1530          <div class="grow pb-8 relative">
1531            <!-- Grid -->
1532            <div class="grid grid-cols-1 gap-6 md:gap-12">
1533              <div>
1534                <div class="space-y-3">
1535                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1536                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1537                      May 14<sup>th</sup> 2026
1538                    </h2>
1539                  </div>
1540                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1540k:text-neutral-300">
1541                    <li class="flex items-start">
1542                      <span class="mr-2">•</span>
1543                      <span>Published the new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/mcp">Rails Blocks MCP server</a> so AI coding agents can discover docs, inspect examples, and install components from Rails Blocks.</span>
1544                    </li>
1545                    <li class="flex items-start">
1546                      <span class="mr-2">•</span>
1547                      <span>Added new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/cli">CLI commands</a> to list, search, preview, install, diff, and update Rails Blocks components from the terminal.</span>
1548                    </li>
1549                    <li class="flex items-start">
1550                      <span class="mr-2">•</span>
1551                      <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/cli#use-the-cli-as-an-ai-skill">CLI skill</a> so agents can use the Rails Blocks CLI with safer defaults, dry runs, and component-specific context.</span>
1552                    </li>
1553                    <li class="flex items-start">
1554                      <span class="mr-2">•</span>
1555                      <span>Open sourced the free Rails Blocks components in the <a target="_blank" class="text-neutral-900 dark:text-white underline hover:opacity-80" href="https://github.com/Rails-Blocks/components">Rails-Blocks/components</a> repository, including documentation, Stimulus controllers, and the free Rails Blocks CSS.</span>
1556                    </li>
1557                    <li class="flex items-start">
1558                      <span class="mr-2">•</span>
1559                      <span>Improved LLM-friendly documentation endpoints, including <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/llms.txt">llms.txt</a> & improved installation markdown docs.</span>
1560                    </li>
1561                    <li class="flex items-start">
1562                      <span class="mr-2">•</span>
1563                      <span>Added the ability to display keyboard shortcuts in <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip#delayed-tooltips">tooltips</a>.</span>
1564                    </li>
1565                    <li class="flex items-start">
1566                      <span class="mr-2">•</span>
1567                      <span>Added a small fix to <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> chevron icons to avoid a layout shift on Safari.</span>
1568                    </li>
1569                    <li class="flex items-start">
1570                      <span class="mr-2">•</span>
1571                      <span>Updated Pagy to v43.5.4.</span>
1572                    </li>
1573                    <li class="flex items-start">
1574                      <span class="mr-2">•</span>
1575                      <span>Updated Tailwind CSS to v4.3.0.</span>
1576                    </li>
1577                  </ul>
1578                </div>
1579              </div>
1580              <!-- End Col -->
1581            </div>
1582            <!-- End Grid -->
1583          </div>
1584
1585          <!-- End Right Content -->
1586        </div>
1587        <!-- End Item -->
1588
1589        <!-- Item - March 20th 2026 -->
1590        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1591
1592          <!-- Icon -->
1593          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1594            <div class="relative z-10 size-6 flex justify-center items-center">
1595              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1596            </div>
1597          </div>
1598          <!-- End Icon -->
1599
1600          <!-- Right Content -->
1601          <div class="grow pb-8 relative">
1602            <!-- Grid -->
1603            <div class="grid grid-cols-1 gap-6 md:gap-12">
1604              <div>
1605                <div class="space-y-3">
1606                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1607                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1608                      March 20<sup>th</sup> 2026
1609                    </h2>
1610                  </div>
1611                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1611k:text-neutral-300">
1612                    <li class="flex items-start">
1613                      <span class="mr-2">•</span>
1614                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/navbar">navbar</a> component: Added hover-to-open with intelligent delays to the stimulus controller and improve the down chevron SVG.</span>
1615                    </li>
1616                    <li class="flex items-start">
1617                      <span class="mr-2">•</span>
1618                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/select">select</a>: added <span class="code-inline-text">openOnMouseDown</span> and <span class="code-inline-text">lockScroll</span> options and improved dropdown scroll locking inside dialogs and overlays.</span>
1619                    </li>
1620                    <li class="flex items-start">
1621                      <span class="mr-2">•</span>
1622                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a>: Fixed the <span class="code-inline-text">lockScroll</span> option, which had an edge case issue with nested submenus.</span>
1623                    </li>
1624                    <li class="flex items-start">
1625                      <span class="mr-2">•</span>
1626                      <span>Improved mobile behavior for <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a>, <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a>, and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a>: scroll locking now applies immediately with consistent scrollbar compensation.</span>
1627                    </li>
1628                  </ul>
1629                </div>
1630              </div>
1631              <!-- End Col -->
1632            </div>
1633            <!-- End Grid -->
1634          </div>
1635
1636          <!-- End Right Content -->
1637        </div>
1638        <!-- End Item -->
1639
1640        <!-- Item - March 12th 2026 -->
1641        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1642
1643          <!-- Icon -->
1644          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1645            <div class="relative z-10 size-6 flex justify-center items-center">
1646              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1647            </div>
1648          </div>
1649          <!-- End Icon -->
1650
1651          <!-- Right Content -->
1652          <div class="grow pb-8 relative">
1653            <!-- Grid -->
1654            <div class="grid grid-cols-1 gap-6 md:gap-12">
1655              <div>
1656                <div class="space-y-3">
1657                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1658                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1659                      March 12<sup>th</sup> 2026
1660                    </h2>
1661                  </div>
1662                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1662k:text-neutral-300">
1663                    <li class="flex items-start">
1664                      <span class="mr-2">•</span>
1665                      <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/forms#nested-form">nested form example</a> to the Forms documentation</span>
1666                    </li>
1667                  </ul>
1668                </div>
1669              </div>
1670              <!-- End Col -->
1671            </div>
1672            <!-- End Grid -->
1673          </div>
1674
1675          <!-- End Right Content -->
1676        </div>
1677        <!-- End Item -->
1678
1679        <!-- Item - March 10th 2026 -->
1680        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1681
1682          <!-- Icon -->
1683          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1684            <div class="relative z-10 size-6 flex justify-center items-center">
1685              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1686            </div>
1687          </div>
1688          <!-- End Icon -->
1689
1690          <!-- Right Content -->
1691          <div class="grow pb-8 relative">
1692            <!-- Grid -->
1693            <div class="grid grid-cols-1 gap-6 md:gap-12">
1694              <div>
1695                <div class="space-y-3">
1696                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1697                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1698                      March 10<sup>th</sup> 2026
1699                    </h2>
1700                  </div>
1701                  <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
1702                    <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
1703                      <div class="flex items-center h-full">
1704                        <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500 dark:text-neutral-400" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M2.795,13.957L5.568,4.846c.22-.722,1.13-.95,1.664-.416l6.339,6.339c.534,.534,.306,1.444-.416,1.664l-9.112,2.773c-.765,.233-1.481-.482-1.248-1.248Z"></path><line x1="6.825" y1="14.359" x2="4.654" y2="7.848"></line><line x1="10.346" y1="13.287" x2="7.475" y2="4.673"></line><path d="M16.743,2.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-stroke="none" stroke="none"></path><circle cx="12.75" cy="5.25" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle><path d="M10,3.439c.184-.133,.588-.465,.823-1.048,.307-.763,.118-1.442,.055-1.64"></path><path d="M14.561,8c.133-.184,.465-.588,1.048-.823,.763-.307,1.442-.118,1.64-.055"></path></g></svg>
1705                      </div>
1706                      <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
1707                        New: Shared Partials, ViewComponents & Markdown documentation
1708                      </h3>
1709                      <div></div>
1710                      <div class="text-sm text-neutral-600 dark:text-neutral-400">
1711                        Since the beginning of the year, I've been working on creating Shared Partials and ViewComponents for all 52 component sets that were released in 2025, and I'm glad to announce that they are finally ready! 🙌
1712                      </div>
1713                      <div></div>
1714                      <div class="text-sm text-neutral-600 dark:text-neutral-400">
1715                        I've also added Markdown documentation for each component set so you can easily ask questions about them in your LLM of choice, or give enough context before customizing Rails Blocks components.
1716                      </div>
1717                    </div>
1718                  </div>
1719                  <div style="position:relative;aspect-ratio:16/9;" class="rounded-lg overflow-hidden outline outline-1 outline-neutral-200 dark:outline-neutral-700">
1720                    <iframe
1721                      loading="lazy" title="Rails Blocks Changelog Update"
1722                      src="https://play.gumlet.io/embed/69af366ff96956f2b50de1e3?background=false&autoplay=false&loop=false&disable_player_controls=false"
1723                      style="border:none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
1724                      referrerpolicy="origin"
1725                      allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;">
1726                    </iframe>
1727                  </div>
1728                  <p class="text-neutral-500 dark:text-neutral-400">
1729                    I also updated dependencies:
1730                  </p>
1731                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1731k:text-neutral-300">
1732                    <li class="flex items-start">
1733                      <span class="mr-2">•</span>
1734                      <span>Tailwind CSS to v4.2.0</span>
1735                    </li>
1736                    <li class="flex items-start">
1737                      <span class="mr-2">•</span>
1738                      <span>Pagy to v43.3.1</span>
1739                    </li>
1740                    <li class="flex items-start">
1741                      <span class="mr-2">•</span>
1742                      <span>Floating UI to v1.7.6</span>
1743                    </li>
1744                    <li class="flex items-start">
1745                      <span class="mr-2">•</span>
1746                      <span>Tom Select to v2.5.2</span>
1747                    </li>
1748                  </ul>
1749                  <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
1750                    <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
1751                      <div class="flex items-center h-full">
1752                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
1753                          <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
1754                            <circle cx="9" cy="9" r="7.25"></circle>
1755                            <path d="M9 5.75V9.25"></path>
1756                            <path d="M9 12.25H9.0075"></path>
1757                          </g>
1758                        </svg>
1759                      </div>
1760                      <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
1761                        About dependencies
1762                      </h3>
1763                      <div></div>
1764                      <div class="text-sm text-neutral-600 dark:text-neutral-400">
1765                        You can safely update your dependencies to the latest versions.
1766                      </div>
1767                    </div>
1768                  </div>
1769                </div>
1770              </div>
1771              <!-- End Col -->
1772            </div>
1773            <!-- End Grid -->
1774          </div>
1775
1776          <!-- End Right Content -->
1777        </div>
1778        <!-- End Item -->
1779
1780        <!-- Item - February 2026 -->
1781        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1782
1783          <!-- Icon -->
1784          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1785            <div class="relative z-10 size-6 flex justify-center items-center">
1786              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1787            </div>
1788          </div>
1789          <!-- End Icon -->
1790
1791          <!-- Right Content -->
1792          <div class="grow pb-8 relative">
1793            <!-- Grid -->
1794            <div class="grid grid-cols-1 gap-6 md:gap-12">
1795              <div>
1796                <div class="space-y-3">
1797                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1798                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1799                      February 2026
1800                    </h2>
1801                  </div>
1802                  <p class="text-neutral-500 dark:text-neutral-400">
1803                    In February 2026, I also shipped these fixes and improvements:
1804                  </p>
1805                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1805k:text-neutral-300">
1806                    <li class="flex items-start">
1807                      <span class="mr-2">•</span>
1808                      <span>Fixed lightboxes opening behind dialog-based components (<a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a>, <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a>, and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a>)</span>
1809                    </li>
1810                    <li class="flex items-start">
1811                      <span class="mr-2">•</span>
1812                      <span>Improved shared <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a> overlays: synchronized scroll-lock and scrollbar compensation across nested overlays, and hardened div-based modal behavior when portaled to <span class="code-inline-text">&lt;body&gt;</span></span>
1813                    </li>
1814                    <li class="flex items-start">
1815                      <span class="mr-2">•</span>
1816                      <span>Revamped the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a> interaction and animation system (smoother snap/drag/open motion), and improved the first-open of asynchronously loaded content UX across <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/drawer">drawer</a>, <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal">modal</a>, and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/slideover">slideover</a> by temporary disabling the button</span>
1817                    </li>
1818                    <li class="flex items-start">
1819                      <span class="mr-2">•</span>
1820                      <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/toast">toast</a> stacking: toasts now stay above <span class="code-inline-text">&lt;dialog&gt;</span> elements</span>
1821                    </li>
1822                    <li class="flex items-start">
1823                      <span class="mr-2">•</span>
1824                      <span>Refactored the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/marquee">marquee</a> animation engine for smoother slow-on-hover and resume behavior across Safari and Chrome</span>
1825                    </li>
1826                    <li class="flex items-start">
1827                      <span class="mr-2">•</span>
1828                      <span>Fixed a Safari blinking issue when closing the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/feedback">feedback</a> widget after submit or manual close</span>
1829                    </li>
1830                    <li class="flex items-start">
1831                      <span class="mr-2">•</span>
1832                      <span>Added a new <a href="/docs/marquee#vertical-marquee" class="text-neutral-900 dark:text-white underline hover:opacity-80">vertical marquee</a> component</span>
1833                    </li>
1834                    <li class="flex items-start">
1835                      <span class="mr-2">•</span>
1836                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/popover">popover</a> stacking behavior in sticky layouts</span>
1837                    </li>
1838                    <li class="flex items-start">
1839                      <span class="mr-2">•</span>
1840                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/stepper">stepper</a>: smoother entrance behavior, persistent current/visited step restoration, and submit loading state support</span>
1841                    </li>
1842                    <li class="flex items-start">
1843                      <span class="mr-2">•</span>
1844                      <span>Refactored <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/two-factor">two factor</a> to use dynamic <span class="code-inline-text">digit</span> targets (instead of <span class="code-inline-text">num1..num6</span>) and added optional <span class="code-inline-text">numericOnly</span> mode</span>
1845                    </li>
1846                    <li class="flex items-start">
1847                      <span class="mr-2">•</span>
1848                      <span>Fixed <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tabs">tabs</a> disabled-state behavior: disabled tabs are skipped during keyboard navigation and cannot be activated</span>
1849                    </li>
1850                    <li class="flex items-start">
1851                      <span class="mr-2">•</span>
1852                      <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/collapsible">collapsible</a> with instant icon switching and a new <span class="code-inline-text">animated</span> option to disable content motion when needed</span>
1853                    </li>
1854                    <li class="flex items-start">
1855                      <span class="mr-2">•</span>
1856                      <span>Added a new plus/minus icon example for <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/collapsible">collapsible</a></span>
1857                    </li>
1858                    <li class="flex items-start">
1859                      <span class="mr-2">•</span>
1860                      <span>Improved the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/carousel">carousel</a> controller behavior and added a new <a href="/docs/carousel#vertical-carousel" class="text-neutral-900 dark:text-white underline hover:opacity-80">vertical carousel</a> example</span>
1861                    </li>
1862                    <li class="flex items-start">
1863                      <span class="mr-2">•</span>
1864                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> interactions: smoother nested submenu focus/highlight behavior during fast pointer movement</span>
1865                    </li>
1866                    <li class="flex items-start">
1867                      <span class="mr-2">•</span>
1868                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/sidebar">sidebar</a> component examples with better styling for the profile when the sidebar is collapsed</span>
1869                    </li>
1870                  </ul>
1871                  <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
1872                    <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
1873                      <div class="flex items-center h-full">
1874                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
1875                          <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
1876                            <circle cx="9" cy="9" r="7.25"></circle>
1877                            <path d="M9 5.75V9.25"></path>
1878                            <path d="M9 12.25H9.0075"></path>
1879                          </g>
1880                        </svg>
1881                      </div>
1882                      <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
1883                        Recommendation
1884                      </h3>
1885                      <div></div>
1886                      <div class="text-sm text-neutral-600 dark:text-neutral-400">
1887                        If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes.
1888                      </div>
1889                    </div>
1890                  </div>
1891                </div>
1892              </div>
1893              <!-- End Col -->
1894            </div>
1895            <!-- End Grid -->
1896          </div>
1897
1898          <!-- End Right Content -->
1899        </div>
1900        <!-- End Item -->
1901
1902        <!-- Item - January 2026 -->
1903        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1904
1905          <!-- Icon -->
1906          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1907            <div class="relative z-10 size-6 flex justify-center items-center">
1908              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1909            </div>
1910          </div>
1911          <!-- End Icon -->
1912
1913          <!-- Right Content -->
1914          <div class="grow pb-8 relative">
1915            <!-- Grid -->
1916            <div class="grid grid-cols-1 gap-6 md:gap-12">
1917              <div>
1918                <div class="space-y-3">
1919                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1920                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1921                      January 2026
1922                    </h2>
1923                  </div>
1924                  <p class="text-neutral-500 dark:text-neutral-400">
1925                    In January 2026, I updated the site with the following improvements:
1926                  </p>
1927                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
1927k:text-neutral-300">
1928                    <li class="flex items-start">
1929                      <span class="mr-2">•</span>
1930                      <span>Added code syntax highlighting with Prism for improved code example rendering</span>
1931                    </li>
1932                  </ul>
1933                </div>
1934              </div>
1935              <!-- End Col -->
1936            </div>
1937            <!-- End Grid -->
1938          </div>
1939          <!-- End Right Content -->
1940        </div>
1941        <!-- End Item -->
1942
1943        <!-- Item - December 2025 -->
1944        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
1945
1946          <!-- Icon -->
1947          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
1948            <div class="relative z-10 size-6 flex justify-center items-center">
1949              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
1950            </div>
1951          </div>
1952          <!-- End Icon -->
1953
1954          <!-- Right Content -->
1955          <div class="grow pb-8 relative">
1956            <!-- Grid -->
1957            <div class="grid grid-cols-1 gap-6 md:gap-12">
1958              <div>
1959                <div class="space-y-3">
1960                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
1961                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
1962                      December 2025
1963                    </h2>
1964                  </div>
1965                  <p class="text-neutral-500 dark:text-neutral-400">
1966                    Happy new year! In December 2025, I built 4 new component sets:
1967                  </p>
1968                  <div class="my-4">
1969                    <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
1970                        <li class="relative">
1971  <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
1972  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
1973    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
1974      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
1975      New
1976    </div>
1977  </div>
1978</div>
1979
1980
1981  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1982    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1983      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1983k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1984        <span class="text-xs">?</span>
1985      </button>
1986
1987      <template data-popover-target="content">
1988        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1989          <div class="space-y-2">
1990            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1991
1992            <div class="flex items-center gap-1.5 text-xs">
1993              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1994              <span class="flex grow gap-2">Tailwind CSS</span>
1995            </div>
1996
1997            <div class="flex items-center gap-1.5 text-xs">
1998              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1998ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1999                <g class="fill-neutral-800 dark:fill-white">
2000                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2001                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2002                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2003                </g>
2004              </svg>
2005              <span class="flex grow gap-2">Stimulus</span>
2006            </div>
2007          </div>
2008        </div>
2009      </template>
2010    </div>
2011
2012    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2013      <div class="w-fit mx-auto" data-controller="checkbox-select-all" data-checkbox-select-all-toggle-key-value="x">
2014  <div class="space-y-1.5">
2015    <!-- Select All -->
2016    <div class="flex items-center gap-x-3">
2017      <input
2018        type="checkbox"
2019        id="preview-select-all"
2020        tabindex="0"
2021        data-checkbox-select-all-target="selectAll"
2022        data-action="click->
2022checkbox-select-all#toggleAll">
2023      <label for="preview-select-all" class="inline-block text-sm font-medium cursor-pointer select-none">
2024        Select All
2025      </label>
2026    </div>
2027
2028    <!-- Checkbox List -->
2029    <div class="space-y-1.5 pl-7">
2030      <div class="flex items-center gap-x-3">
2031        <input
2032          type="checkbox"
2033          id="preview-item-1"
2034          tabindex="0"
2035          data-checkbox-select-all-target="checkbox"
2036          data-action="click->checkbox-select-all#toggle">
2037        <label for="preview-item-1" class="inline-block text-sm cursor-pointer select-none">
2038          Product Design
2039        </label>
2040      </div>
2041
2042      <div class="flex items-center gap-x-3">
2043        <input
2044          type="checkbox"
2045          id="preview-item-2"
2046          tabindex="0"
2047          data-checkbox-select-all-target="checkbox"
2048          data-action="click->checkbox-select-all#toggle">
2049        <label for="preview-item-2" class="inline-block text-sm cursor-pointer select-none">
2050          Development
2051        </label>
2052      </div>
2053
2054      <div class="flex items-center gap-x-3">
2055        <input
2056          type="checkbox"
2057          id="preview-item-3"
2058          tabindex="0"
2059          data-checkbox-select-all-target="checkbox"
2060          data-action="click->checkbox-select-all#toggle">
2061        <label for="preview-item-3" class="inline-block text-sm cursor-pointer select-none">
2062          Marketing
2063        </label>
2064      </div>
2065    </div>
2066  </div>
2067</div>
2068
2069
2070    </div>
2071  </div>
2072  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/checkbox-select-all" data-turbo-frame="_top">
2073    <div class="h-48"></div>
2074    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2075      Checkbox Select All
2076      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2077    </p>
2078    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
2079  </a>
2080</li>
2081
2082
2083                        <li class="relative">
2084  <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
2085      <div class="inline relative">
2086    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
2087      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
2088        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
2089        Pro
2090      </a>
2091    </div>
2092  </div>
2093
2094  </div>
2095
2096  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2097    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2098      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2098k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2099        <span class="text-xs">?</span>
2100      </button>
2101
2102      <template data-popover-target="content">
2103        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2104          <div class="space-y-2">
2105            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2106
2107            <div class="flex items-center gap-1.5 text-xs">
2108              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2109              <span class="flex grow gap-2">Tailwind CSS</span>
2110            </div>
2111
2112            <div class="flex items-center gap-1.5 text-xs">
2113              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2113ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2114                <g class="fill-neutral-800 dark:fill-white">
2115                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2116                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2117                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2118                </g>
2119              </svg>
2120              <span class="flex grow gap-2">Stimulus</span>
2121            </div>
2122
2123            <div class="flex items-center gap-1.5 text-xs">
2124              <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" />
2125              <span class="flex grow gap-2">Pagy</span>
2126            </div>
2127          </div>
2128        </div>
2129      </template>
2130    </div>
2131
2132    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2133      
2134
2135<div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4">
2136  <div class="w-full max-w-md bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 shadow-xs overflow-hidden"
2137       data-controller="datatable-preview"
2138       data-datatable-preview-sort-column-value="name"
2139       data-datatable-preview-sort-direction-value="asc"
2140       data-datatable-preview-page-value="1"
2141       data-datatable-preview-per-page-value="3"
2142       data-datatable-preview-total-value="9">
2143    <table class="w-full text-[10px]">
2144      <thead class="bg-neutral-100 dark:bg-neutral-800">
2145        <tr class="*:py-1 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
2146          <th scope="col"
2147              class="group pl-3 pr-2 cursor-pointer select-none"
2148              data-datatable-preview-target="header"
2149              data-column="name"
2150              data-action="click->datatable-preview#sort">
2151            <div class="inline-flex items-center gap-1">
2152              <span class="font-semibold text-neutral-900 dark:text-neutral-50">Name</span>
2153              
2154<span class="sort-indicator-mini overflow-hidden inline-flex items-center justify-center rounded ring-1 ring-inset ring-black/10 bg-white/50 transition hover:ring-black/20 dark:ring-white/10 dark:bg-neutral-800/50 dark:hover:ring-white/20 text-neutral-900 dark:text-white">
2155  <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5">
2156      <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
2157        <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd"></path>
2158      </svg>
2159  </span>
2160
2161  <span data-datatable-target="loader" class="hidden p-0.5">
2162    <div class="flex items-center justify-center size-2.5">
2163      <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
2164        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
2165        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
2166      </svg>
2167    </div>
2168  </span>
2169</span>
2170
2171
2172            </div>
2173          </th>
2174
2175          <th scope="col"
2176              class="group px-2 cursor-pointer select-none"
2177              data-datatable-preview-target="header"
2178              data-column="role"
2179              data-action="click->datatable-preview#sort">
2180            <div class="inline-flex items-center gap-1">
2181              <span class="font-semibold text-neutral-900 dark:text-neutral-50">Role</span>
2182              
2183<span class="sort-indicator-mini overflow-hidden inline-flex items-center justify-center rounded ring-1 ring-inset ring-black/10 bg-white/50 transition hover:ring-black/20 dark:ring-white/10 dark:bg-neutral-800/50 dark:hover:ring-white/20 text-neutral-400 dark:text-neutral-500">
2184  <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5">
2185      <svg class="size-2.5 opacity-50 group-hover:opacity-100 transition-opacity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
2186        <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path>
2187      </svg>
2188  </span>
2189
2190  <span data-datatable-target="loader" class="hidden p-0.5">
2191    <div class="flex items-center justify-center size-2.5">
2192      <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
2193        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
2194        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
2195      </svg>
2196    </div>
2197  </span>
2198</span>
2199
2200
2201            </div>
2202          </th>
2203
2204          <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50">
2205            Status
2206          </th>
2207        </tr>
2208      </thead>
2209      <tbody data-datatable-preview-target="body" class="*:*:py-1">
2210          <tr data-name="Alex Johnson"
2211              data-role="Admin"
2212              data-status-color="green"
2213              data-status="Active"
2214              data-index="0"
2215              class="">
2216            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2217              Alex Johnson
2218            </td>
2219            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2220              Admin
2221            </td>
2222            <td class="pl-2 pr-3">
2223              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2224                Active
2225              </span>
2226            </td>
2227          </tr>
2228          <tr data-name="Sarah Miller"
2229              data-role="Editor"
2230              data-status-color="green"
2231              data-status="Active"
2232              data-index="1"
2233              class="">
2234            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2235              Sarah Miller
2236            </td>
2237            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2238              Editor
2239            </td>
2240            <td class="pl-2 pr-3">
2241              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2242                Active
2243              </span>
2244            </td>
2245          </tr>
2246          <tr data-name="Michael Chen"
2247              data-role="Viewer"
2248              data-status-color="yellow"
2249              data-status="Pending"
2250              data-index="2"
2251              class="">
2252            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2253              Michael Chen
2254            </td>
2255            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2256              Viewer
2257            </td>
2258            <td class="pl-2 pr-3">
2259              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-yellow-50 text-yellow-700 outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
2260                Pending
2261              </span>
2262            </td>
2263          </tr>
2264          <tr data-name="Emily Davis"
2265              data-role="Editor"
2266              data-status-color="green"
2267              data-status="Active"
2268              data-index="3"
2269              class="hidden">
2270            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2271              Emily Davis
2272            </td>
2273            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2274              Editor
2275            </td>
2276            <td class="pl-2 pr-3">
2277              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2278                Active
2279              </span>
2280            </td>
2281          </tr>
2282          <tr data-name="James Wilson"
2283              data-role="Viewer"
2284              data-status-color="green"
2285              data-status="Active"
2286              data-index="4"
2287              class="hidden">
2288            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2289              James Wilson
2290            </td>
2291            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2292              Viewer
2293            </td>
2294            <td class="pl-2 pr-3">
2295              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2296                Active
2297              </span>
2298            </td>
2299          </tr>
2300          <tr data-name="Lisa Anderson"
2301              data-role="Admin"
2302              data-status-color="green"
2303              data-status="Active"
2304              data-index="5"
2305              class="hidden">
2306            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2307              Lisa Anderson
2308            </td>
2309            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2310              Admin
2311            </td>
2312            <td class="pl-2 pr-3">
2313              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2314                Active
2315              </span>
2316            </td>
2317          </tr>
2318          <tr data-name="Robert Brown"
2319              data-role="Viewer"
2320              data-status-color="green"
2321              data-status="Active"
2322              data-index="6"
2323              class="hidden">
2324            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2325              Robert Brown
2326            </td>
2327            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2328              Viewer
2329            </td>
2330            <td class="pl-2 pr-3">
2331              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2332                Active
2333              </span>
2334            </td>
2335          </tr>
2336          <tr data-name="Patricia Taylor"
2337              data-role="Editor"
2338              data-status-color="yellow"
2339              data-status="Pending"
2340              data-index="7"
2341              class="hidden">
2342            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2343              Patricia Taylor
2344            </td>
2345            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2346              Editor
2347            </td>
2348            <td class="pl-2 pr-3">
2349              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-yellow-50 text-yellow-700 outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
2350                Pending
2351              </span>
2352            </td>
2353          </tr>
2354          <tr data-name="David Martinez"
2355              data-role="Admin"
2356              data-status-color="green"
2357              data-status="Active"
2358              data-index="8"
2359              class="hidden">
2360            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2361              David Martinez
2362            </td>
2363            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2364              Admin
2365            </td>
2366            <td class="pl-2 pr-3">
2367              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2368                Active
2369              </span>
2370            </td>
2371          </tr>
2372      </tbody>
2373    </table>
2374
2375    <div class="border-t border-black/10 dark:border-white/10 px-3 py-1 flex items-center justify-between gap-2">
2376      <p class="text-[9px] text-neutral-500 dark:text-neutral-400" data-datatable-preview-target="info">
2377        1–3 of 9
2378      </p>
2379      <div class="inline-flex items-center gap-1">
2380        <button type="button"
2381                data-datatable-preview-target="prevBtn"
2382                data-action="click->datatable-preview#prevPage"
2383                disabled
2384                class="inline-flex items-center justify-center size-5 rounded border border-black/10 bg-white text-neutral-400 dark:border-white/10 dark:bg-neutral-800 dark:text-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:bg-neutral-50 dark:hover:not-disabled:bg-neutral-700 transition-colors">
2385          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
2386            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
2387          </svg>
2388        </button>
2389        <span class="text-[9px] font-medium text-neutral-700 dark:text-neutral-300 tabular-nums min-w-[2.5rem] text-center" data-datatable-preview-target="pageInfo">
2390          1 / 3
2391        </span>
2392        <button type="button"
2393                data-datatable-preview-target="nextBtn"
2394                data-action="click->datatable-preview#nextPage"
2395                class="inline-flex items-center justify-center size-5 rounded border border-black/10 bg-white dark:border-white/10 dark:bg-neutral-800 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:bg-neutral-50 dark:hover:not-disabled:bg-neutral-700 transition-colors text-neutral-400 dark:text-neutral-500">
2396          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
2397            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
2398          </svg>
2399        </button>
2400      </div>
2401    </div>
2402  </div>
2403</div>
2404
2405    </div>
2406  </div>
2407  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/datatable" data-turbo-frame="_top">
2408    <div class="h-48"></div>
2409    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2410      Datatable
2411      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2412    </p>
2413    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
2414  </a>
2415</li>
2416
2417                        <li class="relative">
2418  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2419    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2420      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2420k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2421        <span class="text-xs">?</span>
2422      </button>
2423
2424      <template data-popover-target="content">
2425        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2426          <div class="space-y-2">
2427            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2428
2429            <div class="flex items-center gap-1.5 text-xs">
2430              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2431              <span class="flex grow gap-2">Tailwind CSS</span>
2432            </div>
2433
2434            <div class="flex items-center gap-1.5 text-xs">
2435              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2435ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2436                <g class="fill-neutral-800 dark:fill-white">
2437                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2438                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2439                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2440                </g>
2441              </svg>
2442              <span class="flex grow gap-2">Stimulus</span>
2443            </div>
2444
2445            <div class="flex items-center gap-1.5 text-xs">
2446              <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" />
2447              <span class="flex grow gap-2">Pagy</span>
2448            </div>
2449          </div>
2450        </div>
2451      </template>
2452    </div>
2453
2454    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2455      
2456<turbo-frame id="pagy-preview" class="inline-flex items-center gap-3 rounded-lg border border-black/10 bg-white px-3 py-2 shadow-xs dark:border-white/10 dark:bg-neutral-900">
2457    <span class="select-none inline-flex items-center gap-1 text-sm font-medium text-neutral-400 cursor-not-allowed dark:text-neutral-600"
2458          aria-label="Previous page (disabled)">
2459      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18">
2460        <g fill="currentColor">
2461          <path d="M11.5607 3.93934C11.9512 4.32986 11.9512 4.96303 11.5607 5.35355L7.91421 9L11.5607 12.6464C11.9512 13.037 11.9512 13.6701 11.5607 14.0607C11.1701 14.4512 10.537 14.4512 10.1464 14.0607L5.79289 9.70711C5.40237 9.31658 5.40237 8.68342 5.79289 8.29289L10.1464 3.93934C10.537 3.54882 11.1701 3.54882 11.5607 3.93934Z" fill="currentColor"></path>
2462        </g>
2463      </svg>
2464      Previous
2465    </span>
2466
2467  <span class="text-sm text-neutral-600 dark:text-neutral-400">
2468    Page <span class="font-medium text-neutral-900 dark:text-white">1</span> of <span class="font-medium text-neutral-900 dark:text-white">3</span>
2469  </span>
2470
2471    <a href="/changelog?preview_page=2"
2472       data-turbo-frame="pagy-preview"
2473       class="select-none inline-flex items-center gap-1 text-sm font-medium text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white"
2474       aria-label="Next page">
2475      Next
2476      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18">
2477        <g fill="currentColor">
2478          <path d="M6.43934 14.0607C6.04882 13.6701 6.04882 13.037 6.43934 12.6464L10.0858 9L6.43934 5.35355C6.04882 4.96303 6.04882 4.32986 6.43934 3.93934C6.82986 3.54882 7.46303 3.54882 7.85355 3.93934L12.2071 8.29289C12.5976 8.68342 12.5976 9.31658 12.2071 9.70711L7.85355 14.0607C7.46303 14.4512 6.82986 14.4512 6.43934 14.0607Z" fill="currentColor"></path>
2479        </g>
2480      </svg>
2481    </a>
2482</turbo-frame>
2483
2484
2485
2486
2487
2488
2489
2490
2491
2492
2493    </div>
2494  </div>
2495  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/pagination" data-turbo-frame="_top">
2496    <div class="h-48"></div>
2497    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2498      Pagination
2499      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2500    </p>
2501    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
2502  </a>
2503</li>
2504
2505                        <li class="relative">
2506  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2507    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2508      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2508k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2509        <span class="text-xs">?</span>
2510      </button>
2511
2512      <template data-popover-target="content">
2513        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2514          <div class="space-y-2">
2515            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2516
2517            <div class="flex items-center gap-1.5 text-xs">
2518              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2519              <span class="flex grow gap-2">Tailwind CSS</span>
2520            </div>
2521
2522          </div>
2523        </div>
2524      </template>
2525    </div>
2526
2527    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2528      <div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4">
2529  <div class="w-full max-w-md bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
2530    <table class="w-full text-[9px]">
2531      <thead class="bg-neutral-100 dark:bg-neutral-800">
2532        <tr class="*:py-1 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
2533          <th scope="col" class="pl-3 pr-2 font-semibold text-neutral-900 dark:text-neutral-50">
2534            Name
2535          </th>
2536          <th scope="col" class="px-2 font-semibold text-neutral-900 dark:text-neutral-50">
2537            Role
2538          </th>
2539          <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50">
2540            Status
2541          </th>
2542        </tr>
2543      </thead>
2544      <tbody class="*:*:py-1">
2545        <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
2546          <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2547            Alex Johnson
2548          </td>
2549          <td class="px-2 text-neutral-500 dark:text-neutral-400">
2550            Admin
2551          </td>
2552          <td class="pl-2 pr-3">
2553            <span class="inline-flex items-center rounded-full bg-green-50 px-1 py-0.5 text-[9px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2554              Active
2555            </span>
2556          </td>
2557        </tr>
2558        <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
2559          <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2560            Sarah Miller
2561          </td>
2562          <td class="px-2 text-neutral-500 dark:text-neutral-400">
2563            Editor
2564          </td>
2565          <td class="pl-2 pr-3">
2566            <span class="inline-flex items-center rounded-full bg-green-50 px-1 py-0.5 text-[9px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2567              Active
2568            </span>
2569          </td>
2570        </tr>
2571        <tr>
2572          <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2573            Michael Chen
2574          </td>
2575          <td class="px-2 text-neutral-500 dark:text-neutral-400">
2576            Viewer
2577          </td>
2578          <td class="pl-2 pr-3">
2579            <span class="inline-flex items-center rounded-full bg-yellow-50 px-1 py-0.5 text-[9px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
2580              Pending
2581            </span>
2582          </td>
2583        </tr>
2584      </tbody>
2585    </table>
2586  </div>
2587</div>
2588
2589    </div>
2590  </div>
2591  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/table" data-turbo-frame="_top">
2592    <div class="h-48"></div>
2593    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2594      Table
2595      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2596    </p>
2597    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
2598  </a>
2599</li>
2600
2601                    </ul>
2602                  </div>
2603                  <p class="text-neutral-500 dark:text-neutral-400">
2604                    I also updated existing components:
2605                  </p>
2606                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
2606k:text-neutral-300">
2607                    <li class="flex items-start">
2608                      <span class="mr-2">•</span>
2609                      <span>Renamed and refactored the conditional radio controller to <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/radio#radio-cards-with-conditional-fields">conditional field</a> controller for improved flexibility with both radio buttons and checkboxes</span>
2610                    </li>
2611                    <li class="flex items-start">
2612                      <span class="mr-2">•</span>
2613                      <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/banner">banner</a> controller logic to improve header positioning and remove jittery animations when navigating between pages</span>
2614                    </li>
2615                    <li class="flex items-start">
2616                      <span class="mr-2">•</span>
2617                      <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltip</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/popover">popover</a> controllers to improve behavior when scrolling the page</span>
2618                    </li>
2619                    <li class="flex items-start">
2620                      <span class="mr-2">•</span>
2621                      <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/forms">forms</a> CSS to add a new checkbox state</span>
2622                    </li>
2623                    <li class="flex items-start">
2624                      <span class="mr-2">•</span>
2625                      <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> custom CSS for better mobile support for the <span class="code-inline-text">dropdown_input</span> plugin, and improved the <span class="code-inline-text">clearInput</span> method</span>
2626                    </li>
2627                    <li class="flex items-start">
2628                      <span class="mr-2">•</span>
2629                      <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tree-view">tree view</a> component and improved tree view controller and styling</span>
2630                    </li>
2631                    <li class="flex items-start">
2632                      <span class="mr-2">•</span>
2633                      <span>Fixed a Safari bug in the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/autocomplete">autocomplete</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/command-palette">command palette</a> components where keyboard navigation would incorrectly jump to the mouse cursor position when scrolling</span>
2634                    </li>
2635                    <li class="flex items-start">
2636                      <span class="mr-2">•</span>
2637                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> scroll behavior: removed aggressive auto-scroll on mouse hover, and enhanced keyboard navigation to show context around the selected option</span>
2638                    </li>
2639                    <li class="flex items-start">
2640                      <span class="mr-2">•</span>
2641                      <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/dropdown">dropdown</a> and <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/context-menu">context menu</a> components with improved state management using <span class="code-inline-text">data-highlighted</span> and <span class="code-inline-text">data-state</span> attributes, plus better accessibility with <span class="code-inline-text">aria-haspopup</span></span>
2642                    </li>
2643                    <li class="flex items-start">
2644                      <span class="mr-2">•</span>
2645                      <span>Updated all secondary button styles for better dark mode visibility</span>
2646                    </li>
2647                    <li class="flex items-start">
2648                      <span class="mr-2">•</span>
2649                      <span>Added a new filter toggle to ignore dark mode classes in the code examples</span>
2650                    </li>
2651                  </ul>
2652                  <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
2653                    <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
2654                      <div class="flex items-center h-full">
2655                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
2656                          <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
2657                            <circle cx="9" cy="9" r="7.25"></circle>
2658                            <path d="M9 5.75V9.25"></path>
2659                            <path d="M9 12.25H9.0075"></path>
2660                          </g>
2661                        </svg>
2662                      </div>
2663                      <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
2664                        Recommendation
2665                      </h3>
2666                      <div></div>
2667                      <div class="text-sm text-neutral-600 dark:text-neutral-400">
2668                        If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes.
2669                      </div>
2670                    </div>
2671                  </div>
2672                </div>
2673              </div>
2674              <!-- End Col -->
2675            </div>
2676            <!-- End Grid -->
2677          </div>
2678          <!-- End Right Content -->
2679        </div>
2680        <!-- End Item -->
2681
2682        <!-- Item - November 2025 -->
2683        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
2684
2685          <!-- Icon -->
2686          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
2687            <div class="relative z-10 size-6 flex justify-center items-center">
2688              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
2689            </div>
2690          </div>
2691          <!-- End Icon -->
2692
2693          <!-- Right Content -->
2694          <div class="grow pb-8 relative">
2695            <!-- Grid -->
2696            <div class="grid grid-cols-1 gap-6 md:gap-12">
2697              <div>
2698                <div class="space-y-3">
2699                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
2700                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
2701                      November 2025
2702                    </h2>
2703                  </div>
2704                  <p class="text-neutral-500 dark:text-neutral-400">
2705                    In November 2025, I built 4 new component sets:
2706                  </p>
2707                  <div class="my-4">
2708                    <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
2709                        <li class="relative">
2710  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2711    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2712      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2712k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2713        <span class="text-xs">?</span>
2714      </button>
2715
2716      <template data-popover-target="content">
2717        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2718          <div class="space-y-2">
2719            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2720
2721            <div class="flex items-center gap-1.5 text-xs">
2722              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2723              <span class="flex grow gap-2">Tailwind CSS</span>
2724            </div>
2725
2726            <div class="flex items-center gap-1.5 text-xs">
2727              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2727ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2728                <g class="fill-neutral-800 dark:fill-white">
2729                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2730                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2731                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2732                </g>
2733              </svg>
2734              <span class="flex grow gap-2">Stimulus</span>
2735            </div>
2736          </div>
2737        </div>
2738      </template>
2739    </div>
2740
2741    <div class="[&_[data-controller='banner']]:!absolute [&_[data-controller='banner']]:!-translate-y-0 relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2742      <div class="h-12 w-full absolute top-0 left-0 right-0 bg-neutral-100 dar
2742k:bg-neutral-800"></div>
2743<div data-controller="banner" data-banner-cookie-name-value="preview_banner" data-banner-cookie-days-value="-1" class="hidden fixed top-12 left-0 right-0 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white border-b border-black/10 dark:border-white/10 shadow-xs transition-all duration-300 ease-in-out opacity-0 -translate-y-full">
2744  <div class="container mx-auto px-4">
2745    <div class="flex items-center justify-between gap-2 sm:gap-4 py-3">
2746      <div class="flex items-center gap-3 flex-1">
2747        <div class="hidden sm:flex size-9 shrink-0 items-center justify-center rounded-full sm:bg-neutral-100 dark:sm:bg-neutral-800" aria-hidden="true">
2748          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-90" aria-hidden="true">
2749            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
2750            <path d="m2 17 10 5 10-5"></path>
2751            <path d="m2 12 10 5 10-5"></path>
2752          </svg>
2753        </div>
2754        <div class="space-y-1">
2755          <p class="text-sm font-semibold">New Feature Launch! 🚀</p>
2756        </div>
2757      </div>
2758      <div class="flex items-center gap-2">
2759        <button data-action="click->banner#hide" class="inline-flex items-center justify-center p-1.5 right-2 top-2 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none" aria-label="Close banner">
2760          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
2761        </button>
2762      </div>
2763    </div>
2764  </div>
2765</div>
2766
2767    </div>
2768  </div>
2769  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/banner" data-turbo-frame="_top">
2770    <div class="h-48"></div>
2771    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2772      Banner
2773      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2774    </p>
2775    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
2776  </a>
2777</li>
2778
2779                        <li class="relative">
2780  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2781    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2782      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2782k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2783        <span class="text-xs">?</span>
2784      </button>
2785
2786      <template data-popover-target="content">
2787        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2788          <div class="space-y-2">
2789            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2790
2791            <div class="flex items-center gap-1.5 text-xs">
2792              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2793              <span class="flex grow gap-2">Tailwind CSS</span>
2794            </div>
2795
2796          </div>
2797        </div>
2798      </template>
2799    </div>
2800
2801    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2802      <div class="flex flex-row">
2803  <div class="flex items-center justify-center p-8">
2804  <svg xmlns="http://www.w3.org/2000/svg" class="rounded-full animate-spin size-8 text-neutral-800 dark:text-neutral-200" width="18" height="18" viewBox="0 0 18 18">
2805    <g fill="currentColor">
2806      <path d="m9,17c-4.4111,0-8-3.5889-8-8S4.5889,1,9,1s8,3.5889,8,8-3.5889,8-8,8Zm0-14.5c-3.584,0-6.5,2.916-6.5,6.5s2.916,6.5,6.5,6.5,6.5-2.916,6.5-6.5-2.916-6.5-6.5-6.5Z" opacity=".4" stroke-width="0"></path>
2807      <path d="m16.25,9.75c-.4141,0-.75-.3359-.75-.75,0-3.584-2.916-6.5-6.5-6.5-.4141,0-.75-.3359-.75-.75s.3359-.75.75-.75c4.4111,0,8,3.5889,8,8,0,.4141-.3359.75-.75.75Z" stroke-width="0"></path>
2808    </g>
2809  </svg>
2810</div>
2811
2812  <div class="flex items-center justify-center p-8">
2813  <svg xmlns="http://www.w3.org/2000/svg" class="size-8 rounded-full animate-[spin_0.8s_steps(8)_infinite]" width="18" height="18" viewBox="0 0 18 18">
2814    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
2815      <line x1="9" y1="1.75" x2="9" y2="4.25" opacity=".13"></line>
2816      <line x1="14.127" y1="3.873" x2="12.359" y2="5.641" opacity=".25"></line>
2817      <line x1="16.25" y1="9" x2="13.75" y2="9" opacity=".38"></line>
2818      <line x1="14.127" y1="14.127" x2="12.359" y2="12.359" opacity=".5"></line>
2819      <line x1="9" y1="16.25" x2="9" y2="13.75" opacity=".63"></line>
2820      <line x1="3.873" y1="14.127" x2="5.641" y2="12.359" opacity=".75"></line>
2821      <line x1="1.75" y1="9" x2="4.25" y2="9" opacity=".88"></line>
2822      <line x1="3.873" y1="3.873" x2="5.641" y2="5.641"></line>
2823    </g>
2824  </svg>
2825</div>
2826
2827  <div class="flex items-center justify-center p-8">
2828  <div class="flex space-x-1.5">
2829    <div class="size-1.5 bg-neutral-800 dark:bg-neutral-200 rounded-full animate-bounce" style="animation-delay: 0ms;"></div>
2830    <div class="size-1.5 bg-neutral-800/80 dark:bg-neutral-200/80 rounded-full animate-bounce" style="animation-delay: 150ms;"></div>
2831    <div class="size-1.5 bg-neutral-800/60 dark:bg-neutral-200/60 rounded-full animate-bounce" style="animation-delay: 300ms;"></div>
2832  </div>
2833</div>
2834
2835</div>
2836
2837    </div>
2838  </div>
2839  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/loading-indicator" data-turbo-frame="_top">
2840    <div class="h-48"></div>
2841    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2842      Loading Indicator
2843      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2844    </p>
2845    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
2846  </a>
2847</li>
2848
2849                        <li class="relative">
2850  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2851    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2852      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2852k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2853        <span class="text-xs">?</span>
2854      </button>
2855
2856      <template data-popover-target="content">
2857        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2858          <div class="space-y-2">
2859            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2860
2861            <div class="flex items-center gap-1.5 text-xs">
2862              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2863              <span class="flex grow gap-2">Tailwind CSS</span>
2864            </div>
2865
2866            <div class="flex items-center gap-1.5 text-xs">
2867              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2867ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2868                <g class="fill-neutral-800 dark:fill-white">
2869                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2870                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2871                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2872                </g>
2873              </svg>
2874              <span class="flex grow gap-2">Stimulus</span>
2875            </div>
2876          </div>
2877        </div>
2878      </template>
2879    </div>
2880
2881    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2882      <div data-controller="scroll-area" data-scroll-area-target="root" data-action="mouseenter->scroll-area#onRootMouseEnter mouseleave->scroll-area#onRootMouseLeave" class="relative h-32 w-full max-w-[240px] rounded-lg border border-neutral-200 bg-white px-4 py-2.5 dark:border-neutral-700 dark:bg-neutral-800">
2883  <!-- Viewport -->
2884  <div data-scroll-area-target="viewport" data-action="scroll->scroll-area#onViewportScroll" class="h-full overflow-auto scrollbar-hide scroll-fade-y pr-1">
2885    <div class="flex flex-col gap-3 text-xs leading-relaxed text-neutral-900 dark:text-neutral-100">
2886      <p>
2887        Rails Blocks is a modern component library for Ruby on Rails applications. It provides
2888        production-ready UI components that integrate seamlessly with Hotwire, Stimulus, and Tailwind CSS.
2889      </p>
2890      <p>
2891        Built with Rails conventions in mind, each component works perfectly with Turbo Drive,
2892        Turbo Frames, and Turbo Streams. All components are fully responsive and support both
2893        light and dark modes out of the box.
2894      </p>
2895      <p>
2896        Build modern, interactive web applications without extensive JavaScript. The library leverages
2897        Stimulus controllers for interactivity while keeping your Rails application fast and native.
2898      </p>
2899      <p>
2900        Every component is copy-and-paste friendly, giving you full control. Customize styles,
2901        behavior, and markup to fit your needs while maintaining consistency across your application.
2902      </p>
2903    </div>
2904  </div>
2905
2906  <!-- Vertical Scrollbar -->
2907  <div data-scroll-area-target="scrollbar" data-scroll-area-orientation-value="vertical" data-action="click->
2907scroll-area#onScrollbarClick" class="absolute right-2 top-2 bottom-2 flex w-1.5 justify-center rounded-full bg-black/5 backdrop-blur-sm opacity-0 transition-opacity duration-150 delay-300 pointer-events-none data-[hovering]:opacity-100 data-[hovering]:duration-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-100 data-[scrolling]:delay-0 data-[scrolling]:pointer-events-auto dark:bg-white/10">
2908    <!-- Thumb -->
2909    <div data-scroll-area-target="thumb" data-action="mousedown->scroll-area#onThumbMouseDown" class="relative w-full rounded-full bg-neutral-500 transition-opacity duration-100 dark:bg-neutral-400"></div>
2910  </div>
2911</div>
2912
2913    </div>
2914  </div>
2915  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/scroll-area" data-turbo-frame="_top">
2916    <div class="h-48"></div>
2917    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2918      Scroll Area
2919      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2920    </p>
2921    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
2922  </a>
2923</li>
2924
2925                        <li class="relative">
2926  <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
2927      <div class="inline relative">
2928    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
2929      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
2930        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
2931        Pro
2932      </a>
2933    </div>
2934  </div>
2935
2936  </div>
2937
2938  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2939    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2940      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2940k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2941        <span class="text-xs">?</span>
2942      </button>
2943
2944      <template data-popover-target="content">
2945        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2946          <div class="space-y-2">
2947            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2948
2949            <div class="flex items-center gap-1.5 text-xs">
2950              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2951              <span class="flex grow gap-2">Tailwind CSS</span>
2952            </div>
2953
2954            <div class="flex items-center gap-1.5 text-xs">
2955              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2955ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2956                <g class="fill-neutral-800 dark:fill-white">
2957                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2958                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2959                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2960                </g>
2961              </svg>
2962              <span class="flex grow gap-2">Stimulus</span>
2963            </div>
2964          </div>
2965        </div>
2966      </template>
2967    </div>
2968
2969    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2970      <div data-controller="stepper"
2971     data-stepper-current-step-value="0"
2972     data-stepper-validate-on-next-value="true"
2973     data-stepper-save-progress-value="false"
2974     data-stepper-cloak-value="true"
2975     data-stepper-animate-entrance-value="true"
2976     style="visibility: hidden; opacity: 0;"
2977     class="w-full max-w-xs mx-auto p-4 mt-10 relative">
2978
2979
2980  <!-- Step Indicators -->
2981  <div class="max-w-24 mx-auto absolute -top-4 inset-x-0">
2982    <ul class="relative flex flex-row gap-x-1">
2983        <li class="group relative shrink flex-1 last:flex-none">
2984          <div class="w-full inline-flex items-center align-middle text-xs">
2985            <div class="relative inline-flex flex-col items-center">
2986              <button type="button" data-stepper-target="indicator" data-action="click->
2986stepper#goToStep" data-step="0" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
2987                <span class="step-number">1</span>
2988                <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg>
2989              </button>
2990            </div>
2991            <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div>
2992          </div>
2993        </li>
2994        <li class="group relative shrink flex-1 last:flex-none">
2995          <div class="w-full inline-flex items-center align-middle text-xs">
2996            <div class="relative inline-flex flex-col items-center">
2997              <button type="button" data-stepper-target="indicator" data-action="click->stepper#goToStep" data-step="1" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
2998                <span class="step-number">2</span>
2999                <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg>
3000              </button>
3001            </div>
3002            <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div>
3003          </div>
3004        </li>
3005        <li class="group relative shrink flex-1 last:flex-none">
3006          <div class="w-full inline-flex items-center align-middle text-xs">
3007            <div class="relative inline-flex flex-col items-center">
3008              <button type="button" data-stepper-target="indicator" data-action="click->
3008stepper#goToStep" data-step="2" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
3009                <span class="step-number">3</span>
3010                <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg>
3011              </button>
3012            </div>
3013            <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div>
3014          </div>
3015        </li>
3016    </ul>
3017  </div>
3018
3019  <!-- Step 1: Choose Your Plan -->
3020  <div data-stepper-target="step" class="block">
3021    <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Choose Your Plan</h3>
3022
3023    <fieldset class="flex gap-2 justify-center">
3024      <legend class="sr-only">Select a plan</legend>
3025
3026      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3027        <input type="radio" name="preview-plan" value="free" class="sr-only" required>
3028        <div class="flex-1">
3029          <div class="flex items-center justify-between">
3030            <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100">
3031              Free
3032            </p>
3033          </div>
3034        </div>
3035      </label>
3036
3037      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3038        <input type="radio" name="preview-plan" value="lite" class="sr-only" required>
3039        <div class="flex-1">
3040          <div class="flex items-center justify-between">
3041            <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100">
3042              Lite
3043            </p>
3044          </div>
3045        </div>
3046      </label>
3047
3048      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3049        <input type="radio" name="preview-plan" value="basic" class="sr-only" required>
3050        <div class="flex-1">
3051          <div class="flex items-center justify-between">
3052            <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">
3053              Basic
3054            </p>
3055          </div>
3056        </div>
3057      </label>
3058
3059      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3060        <input type="radio" name="preview-plan" value="pro" class="sr-only" required>
3061        <div class="flex-1">
3062          <div class="flex items-center justify-between">
3063            <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">
3064              Pro
3065            </p>
3066          </div>
3067        </div>
3068      </label>
3069    </fieldset>
3070  </div>
3071
3072  <!-- Step 2: What is your role? -->
3073  <div data-stepper-target="step" class="hidden">
3074    <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">What is your role?</h3>
3075
3076    <fieldset class="flex gap-2 justify-center">
3077      <legend class="sr-only">Select your role</legend>
3078
3079      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3080        <input type="radio" name="preview-role" value="ceo" class="sr-only" required>
3081        <div class="flex-1">
3082          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">CEO</p>
3083        </div>
3084      </label>
3085
3086      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3087        <input type="radio" name="preview-role" value="developer" class="sr-only" required>
3088        <div class="flex-1">
3089          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Developer</p>
3090        </div>
3091      </label>
3092
3093      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3094        <input type="radio" name="preview-role" value="designer" class="sr-only" required>
3095        <div class="flex-1">
3096          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Designer</p>
3097        </div>
3098      </label>
3099    </fieldset>
3100  </div>
3101
3102  <!-- Step 3: Where did you learn about us? -->
3103  <div data-stepper-target="step" class="hidden">
3104    <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Where did you learn about us?</h3>
3105
3106    <fieldset class="flex gap-2 justify-center">
3107      <legend class="sr-only">Select how you found us</legend>
3108
3109      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3110        <input type="radio" name="preview-source" value="search" class="sr-only" required>
3111        <div class="flex-1">
3112          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Search</p>
3113        </div>
3114      </label>
3115
3116      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3117        <input type="radio" name="preview-source" value="social" class="sr-only" required>
3118        <div class="flex-1">
3119          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Social</p>
3120        </div>
3121      </label>
3122
3123      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
3124        <input type="radio" name="preview-source" value="referral" class="sr-only" required>
3125        <div class="flex-1">
3126          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Referral</p>
3127        </div>
3128      </label>
3129    </fieldset>
3130  </div>
3131
3132  <!-- Navigation Buttons -->
3133  <div class="mt-4 flex items-center justify-between gap-2 mx-auto px-8">
3134    <button type="button" data-stepper-target="prevButton" data-action="click->
3134stepper#previous" class="hidden w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-200 bg-white/90 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
3135      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18">
3136        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
3137          <polyline points="11.25 14.25 5.75 9 11.25 3.75"></polyline>
3138        </g>
3139      </svg>
3140      Back
3141    </button>
3142
3143    <button type="button" data-stepper-target="nextButton" data-action="click->stepper#next" class="w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-400/30 bg-neutral-800 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-white shadow-sm select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
3144      Continue
3145      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18">
3146        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
3147          <polyline points="6.75 3.75 12.25 9 6.75 14.25"></polyline>
3148        </g>
3149      </svg>
3150    </button>
3151
3152    <button type="button" data-stepper-target="submitButton" data-action="click->
3152stepper#submit" class="hidden w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-400/30 bg-neutral-800 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-white shadow-sm select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
3153      Submit
3154      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18">
3155        <g fill="currentColor">
3156          <path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path>
3157        </g>
3158      </svg>
3159    </button>
3160  </div>
3161</div>
3162
3163    </div>
3164  </div>
3165  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/stepper" data-turbo-frame="_top">
3166    <div class="h-48"></div>
3167    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3168      Stepper
3169      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3170    </p>
3171    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
3172  </a>
3173</li>
3174
3175                    </ul>
3176                  </div>
3177                  <p class="text-neutral-500 dark:text-neutral-400">
3178                    I also updated existing components:
3179                  </p>
3180                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
3180k:text-neutral-300">
3181                    <li class="flex items-start">
3182                      <span class="mr-2">•</span>
3183                      <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/emoji-picker">emoji picker</a>'s min-width</span>
3184                    </li>
3185                    <li class="flex items-start">
3186                      <span class="mr-2">•</span>
3187                      <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/navbar">navbar</a> component with improved hover behavior and <span class="code-inline-text">data-target</span> attributes</span>
3188                    </li>
3189                    <li class="flex items-start">
3190                      <span class="mr-2">•</span>
3191                      <span>Updated the <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> component with improved functionality and i18n support</span>
3192                    </li>
3193                    <li class="flex items-start">
3194                      <span class="mr-2">•</span>
3195                      <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/modal#div-based-modal">div-based modal</a> variant</span>
3196                    </li>
3197                    <li class="flex items-start">
3198                      <span class="mr-2">•</span>
3199                      <span>Added a new <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/switch">switch</a> variant with an enhanced active state</span>
3200                    </li>
3201                  </ul>
3202                  <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
3203                    <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
3204                      <div class="flex items-center h-full">
3205                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
3206                          <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
3207                            <circle cx="9" cy="9" r="7.25"></circle>
3208                            <path d="M9 5.75V9.25"></path>
3209                            <path d="M9 12.25H9.0075"></path>
3210                          </g>
3211                        </svg>
3212                      </div>
3213                      <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
3214                        Recommendation
3215                      </h3>
3216                      <div></div>
3217                      <div class="text-sm text-neutral-600 dark:text-neutral-400">
3218                        If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes.
3219                      </div>
3220                    </div>
3221                  </div>
3222                </div>
3223              </div>
3224              <!-- End Col -->
3225            </div>
3226            <!-- End Grid -->
3227          </div>
3228          <!-- End Right Content -->
3229        </div>
3230        <!-- End Item -->
3231
3232        <!-- Item - September 2025 -->
3233        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
3234
3235          <!-- Icon -->
3236          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
3237            <div class="relative z-10 size-6 flex justify-center items-center">
3238              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
3239            </div>
3240          </div>
3241          <!-- End Icon -->
3242
3243          <!-- Right Content -->
3244          <div class="grow pb-8 relative">
3245            <!-- Grid -->
3246            <div class="grid grid-cols-1 gap-6 md:gap-12">
3247              <div>
3248                <div class="space-y-3">
3249                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
3250                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
3251                      September 2025
3252                    </h2>
3253                  </div>
3254                  <p class="text-neutral-500 dark:text-neutral-400">
3255                    In September 2025, I built 4 new free component sets:
3256                  </p>
3257                  <div class="my-4">
3258                    <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
3259                        <li class="relative">
3260  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3261    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3262      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3262k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3263        <span class="text-xs">?</span>
3264      </button>
3265
3266      <template data-popover-target="content">
3267        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3268          <div class="space-y-2">
3269            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3270
3271            <div class="flex items-center gap-1.5 text-xs">
3272              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3273              <span class="flex grow gap-2">Tailwind CSS</span>
3274            </div>
3275
3276            <div class="flex items-center gap-1.5 text-xs">
3277              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3277ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3278                <g class="fill-neutral-800 dark:fill-white">
3279                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3280                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3281                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3282                </g>
3283              </svg>
3284              <span class="flex grow gap-2">Stimulus</span>
3285            </div>
3286
3287            <div class="flex items-center gap-1.5 text-xs">
3288              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
3289              <span class="flex grow gap-2">Floating UI</span>
3290            </div>
3291
3292            <div class="flex items-center gap-1.5 text-xs">
3293              <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c4
329300aafdebbd.webp" />
3294              <span class="flex grow gap-2">Motion.dev</span>
3295            </div>
3296          </div>
3297        </div>
3298      </template>
3299    </div>
3300
3301    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3302
3303
3304      <div class="">
3305        <div class="rounded-xl flex items-center justify-center">
3306          <div class="flex w-fit mx-auto items-center justify-center" data-controller="dock">
3307            <div class="mx-auto hidden h-16 items-end gap-4 rounded-2xl bg-neutral-50 px-4 pb-3 md:flex dark:bg-neutral-950 border border-neutral-200/50 dark:border-neutral-600/50">
3308                <a href="#" class="rounded-full" data-dock-target="icon" data-tooltip="Home" data-tooltip-placement="top" >
3309                  <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50  text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700">
3310                    <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%">
3311                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg>
3312                    </div>
3313                  </div>
3314                </a>
3315                <a href="/?articles=true" class="rounded-full" data-dock-target="icon" data-tooltip="Articles" data-tooltip-placement="top" >
3316                  <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50  text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700">
3317                    <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%">
3318                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.25,12.25v2c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V3.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v1.5"></path><line x1="4.75" y1="5.75" x2="9.25" y2="5.75"></line><line x1="4.75" y1="8.75" x2="7" y2="8.75"></line><line x1="4.75" y1="11.75" x2="6.25" y2="11.75"></line><path d="M12.375,10.625c.444-.444,2.948-2.948,4.216-4.216,.483-.483,.478-1.261-.005-1.745h0c-.483-.483-1.261-.489-1.745-.005-1.268,1.268-3.772,3.772-4.216,4.216-.625,.625-1.125,2.875-1.125,2.875,0,0,2.25-.5,2.875-1.125Z"></path></g></svg>
3319                    </div>
3320                  </div>
3321                </a>
3322                <a href="/?projects=true" class="rounded-full" data-dock-target="icon" data-tooltip="Projects" data-tooltip-placement="top" >
3323                  <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50  text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700">
3324                    <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%">
3325                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="8" cy="5.5" r="3.75"></circle><path d="M1.953,15c1.298-1.958,3.522-3.25,6.047-3.25"></path><path d="M14.925,16.25h-6.175l1.868-4.203c.08-.181,.259-.297,.457-.297h5.406c.362,0,.604,.372,.457,.703l-1.556,3.5c-.08,.181-.259,.297-.457,.297Z"></path><line x1="8.75" y1="16.25" x2="5.75" y2="16.25"></line></g></svg>
3326                    </div>
3327                  </div>
3328                </a>
3329            </div>
3330            <div class="absolute right-5 bottom-17 flex items-end flex-col gap-2 hidden md:hidden" data-dock-target="mobileMenu">
3331                <a href="#" data-tooltip="Home" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dar
3331k:active:bg-neutral-700">
3332                  <span class="text-sm">Home</span>
3333                  <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg></span>
3334                </a>
3335                <a href="/?articles=true" data-tooltip="Articles" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-700">
3336                  <span class="text-sm">Articles</span>
3337                  <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.25,12.25v2c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V3.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v1.5"></path><line x1="4.75" y1="5.75" x2="9.25" y2="5.75"></line><line x1="4.75" y1="8.75" x2="7" y2="8.75"></line><line x1="4.75" y1="11.75" x2="6.25" y2="11.75"></line><path d="M12.375,10.625c.444-.444,2.948-2.948,4.216-4.216,.483-.483,.478-1.261-.005-1.745h0c-.483-.483-1.261-.489-1.745-.005-1.268,1.268-3.772,3.772-4.216,4.216-.625,.625-1.125,2.875-1.125,2.875,0,0,2.25-.5,2.875-1.125Z"></path></g></svg></span>
3338                </a>
3339                <a href="/?projects=true" data-tooltip="Projects" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-700">
3340                  <span class="text-sm">Projects</span>
3341                  <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="8" cy="5.5" r="3.75"></circle><path d="M1.953,15c1.298-1.958,3.522-3.25,6.047-3.25"></path><path d="M14.925,16.25h-6.175l1.868-4.203c.08-.181,.259-.297,.457-.297h5.406c.362,0,.604,.372,.457,.703l-1.556,3.5c-.08,.181-.259,.297-.457,.297Z"></path><line x1="8.75" y1="16.25" x2="5.75" y2="16.25"></line></g></svg></span>
3342                </a>
3343            </div>
3344            <div class="flex items-center gap-2 md:hidden">
3345              <span class="text-sm max-w-[175px]">The dock is replaced by a drop-up menu on mobile</span>
3346              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="14.25" y1="14.25" x2="3.75" y2="3.75"></line><path d="M8.24,14.25c3.388-1.562,6.01,0,6.01,0,0,0-1.562-2.622,0-6.01"></path></g></svg>
3347            </div>
3348            <div class="absolute right-5 bottom-5 block md:hidden"
3349                data-action="click->dock#toggleMobile">
3350              <button data-dock-target="mobileButton" class="flex h-10 w-10 items-center justify-center border border-neutral-200/50 rounded-full bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-600/50">
3351                <svg class="size-5 rotate-0 text-neutral-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="2.75 11.5 9 5.25 15.25 11.5"></polyline></g></svg>
3352              </button>
3353            </div>
3354          </div>
3355        </div>
3356      </div>
3357
3358    </div>
3359  </div>
3360  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/dock" data-turbo-frame="_top">
3361    <div class="h-48"></div>
3362    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3363      Dock Menu
3364      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3365    </p>
3366    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 1 component</p>
3367  </a>
3368</li>
3369
3370                        <li class="relative">
3371  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3372    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3373      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3373k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3374        <span class="text-xs">?</span>
3375      </button>
3376
3377      <template data-popover-target="content">
3378        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3379          <div class="space-y-2">
3380            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3381
3382            <div class="flex items-center gap-1.5 text-xs">
3383              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3384              <span class="flex grow gap-2">Tailwind CSS</span>
3385            </div>
3386
3387            <div class="flex items-center gap-1.5 text-xs">
3388              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3388ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3389                <g class="fill-neutral-800 dark:fill-white">
3390                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3391                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3392                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3393                </g>
3394              </svg>
3395              <span class="flex grow gap-2">Stimulus</span>
3396            </div>
3397          </div>
3398        </div>
3399      </template>
3400    </div>
3401
3402    <div data-turbo="false" class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center overflow-visible">
3403      <nav class="flex w-fit justify-center" data-controller="navbar">
3404        <div class="relative">
3405          <!-- Menu List -->
3406          <ul data-navbar-target="menu" class="m-0 flex list-none items-center gap-1 rounded-lg border border-neutral-200 bg-white p-1 shadow-sm dark:border-neutral-700 dark:bg-neutral-800">
3407            <li>
3408              <a href="/" class="block rounded-md px-1.5 py-1.5 text-xs font-medium text-neutral-700 no-underline select-none hover:bg-neutral-100 dar
3408k:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
3409                <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg>
3410              </a>
3411            </li>
3412
3413            <!-- Components Dropdown -->
3414            <li class="relative hidden sm:block">
3415              <button type="button" data-navbar-target="trigger" data-content-id="components-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
3416                Blocks
3417                <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
3418              </button>
3419            </li>
3420
3421            <!-- Resources Dropdown -->
3422            <li class="relative hidden sm:block">
3423              <button type="button" data-navbar-target="trigger" data-content-id="resources-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
3424                Resources
3425                <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
3426              </button>
3427            </li>
3428
3429            <li class="relative sm:hidden">
3430              <button type="button" data-navbar-target="trigger" data-content-id="mobile-menu-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-1.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
3431                <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9" x2="15.75" y2="9"></line><line x1="2.25" y1="3.75" x2="15.75" y2="3.75"></line><line x1="2.25" y1="14.25" x2="15.75" y2="14.25"></line></g></svg>
3432              </button>
3433            </li>
3434          </ul>
3435
3436          <!-- Viewport Container -->
3437          <div data-navbar-target="viewport" data-action="pointerenter->navbar#cancelClose pointerleave->navbar#handlePointerLeave" data-state="closed" class="absolute top-full z-50 mt-2 origin-top transition-all duration-200 ease-out data-[state=closed]:pointer-events-none data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=closing]:pointer-events-none data-[state=closing]:scale-95 data-[state=closing]:opacity-0 data-[state=open]:pointer-events-auto data-[state=open]:scale-100 data-[state=open]:opacity-100 left-1/2 -translate-x-1/2 sm:left-0 sm:translate-x-0">
3438            <!-- Indicator Arrow -->
3439            <div data-navbar-target="indicator" class="pointer-events-none absolute -top-1 z-10 flex h-2 w-10 items-end justify-center overflow-visible transition-opacity duration-200">
3440              <div class="h-2 w-2 rotate-45 border-t border-l border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800"></div>
3441            </div>
3442
3443            <div data-navbar-target="background" class="relative z-0 rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-800">
3444              <!-- Components Content -->
3445              <div id="components-content" data-navbar-target="content" data-state="closed" class="hidden">
3446                <div class="grid grid-cols-1 gap-1.5 p-4 w-[300px] sm:w-[420px] sm:grid-cols-[0.75fr_1fr]">
3447                  <!-- Featured Callout -->
3448                  <a href="/" class="row-span-3 flex h-full w-full cursor-pointer flex-col justify-end rounded-lg bg-gradient-to-br from-red-400 to-red-600 p-6 no-underline transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3448k:from-red-500 dark:to-red-800 dark:focus-visible:outline-neutral-200 hover:opacity-90">
3449                    <img class="size-9 mb-4" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" />
3450                    <div class="mb-1 text-base font-medium text-white">Rails Blocks</div>
3451                    <p class="m-0 text-xs text-neutral-100">Delightful Rails components.</p>
3452                  </a>
3453
3454                  <!-- Menu Items -->
3455                  <a href="/docs/modal" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3456                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Modal</div>
3457                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Dialog boxes for user interactions and confirmations.</p>
3458                  </a>
3459
3460                  <a href="/docs/dropdown" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3460k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3461                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Dropdown</div>
3462                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Contextual menus with keyboard navigation.</p>
3463                  </a>
3464
3465                  <a href="/docs/tooltip" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3466                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Tooltip</div>
3467                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Helpful hints that appear on hover or focus.</p>
3468                  </a>
3469                </div>
3470              </div>
3471
3472              <!-- Resources Content -->
3473              <div id="resources-content" data-navbar-target="content" data-state="closed" class="hidden">
3474                <div class="grid grid-cols-1 gap-2 p-5 w-[300px] sm:w-[420px] sm:grid-cols-2">
3475                  <a href="/docs/installation" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3475k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3476                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Installation</div>
3477                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Get started with Rails Blocks in your Rails app.</p>
3478                  </a>
3479
3480                  <a href="/docs/authors-note" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3481                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Author's Note</div>
3482                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Learn about the philosophy behind Rails Blocks.</p>
3483                  </a>
3484
3485                  <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" rel="noopener noreferrer" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3485k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3486                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Roadmap</div>
3487                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">See what's coming next and vote on features.</p>
3488                  </a>
3489
3490                  <a href="/changelog" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3491                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Changelog</div>
3492                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Latest updates and new component releases.</p>
3493                  </a>
3494
3495                  <a href="/pro" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3495k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3496                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Rails Blocks Pro</div>
3497                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Unlock premium components and features.</p>
3498                  </a>
3499
3500                  <a href="/signup" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
3501                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Create an account</div>
3502                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">And get notified when new components are released.</p>
3503                  </a>
3504                </div>
3505              </div>
3506
3507              <!-- Mobile Menu Content -->
3508              <div id="mobile-menu-content" data-navbar-target="content" data-state="closed" class="hidden">
3509                <div class="grid grid-cols-1 gap-1.5 p-4 w-[280px] sm:w-[420px] sm:grid-cols-2">
3510                  <div class="relative">
3511                    <button type="button" data-navbar-target="trigger" data-content-id="components-content" data-action="click->navbar#toggleMenu keydown->navbar#handleTriggerKeydown" data-state="closed" class="w-full group flex items-center justify-between gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3511k:focus-visible:outline-neutral-200">
3512                      Blocks
3513                      <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
3514                    </button>
3515                  </div>
3516
3517                  <!-- Resources Dropdown -->
3518                  <div class="relative">
3519                    <button type="button" data-navbar-target="trigger" data-content-id="resources-content" data-action="click->navbar#toggleMenu keydown->navbar#handleTriggerKeydown" data-state="closed" class="w-full group flex items-center justify-between gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
3519k:focus-visible:outline-neutral-200">
3520                      Resources
3521                      <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
3522                    </button>
3523                  </div>
3524                </div>
3525              </div>
3526            </div>
3527          </div>
3528        </div>
3529      </nav>
3530    </div>
3531  </div>
3532  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/navbar" data-turbo-frame="_top">
3533    <div class="h-48"></div>
3534    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3535      Navbar
3536      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3537    </p>
3538    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p>
3539  </a>
3540</li>
3541
3542                        <li class="relative">
3543  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3544    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3545      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3545k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3546        <span class="text-xs">?</span>
3547      </button>
3548
3549      <template data-popover-target="content">
3550        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3551          <div class="space-y-2">
3552            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3553
3554            <div class="flex items-center gap-1.5 text-xs">
3555              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3556              <span class="flex grow gap-2">Tailwind CSS</span>
3557            </div>
3558
3559            <div class="flex items-center gap-1.5 text-xs">
3560              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3560ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3561                <g class="fill-neutral-800 dark:fill-white">
3562                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3563                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3564                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3565                </g>
3566              </svg>
3567              <span class="flex grow gap-2">Stimulus</span>
3568            </div>
3569          </div>
3570        </div>
3571      </template>
3572    </div>
3573
3574    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
3575      <!-- Note: You will likely need to replace all the min-h-[192px] with a min-h-screen -->
3576
3577<div class="flex h-full w-full flex-col relative" data-controller="sidebar" data-sidebar-storage-key-value="previewSidebar">
3578  <!-- Mobile Sidebar Overlay -->
3579  <div class="absolute inset-0 z-50 md:hidden hidden" data-sidebar-target="mobileSidebar">
3580    <!-- Backdrop -->
3581    <div class="absolute inset-0 bg-black/50 transition-opacity duration-300" data-sidebar-target="mobileBackdrop" data-action="click->
3581sidebar#closeMobile"></div>
3582
3583    <!-- Sidebar Panel -->
3584    <div class="absolute inset-y-0 left-0 w-32 border-r border-neutral-200 dark:border-neutral-800 transition-transform duration-300 ease-out" data-sidebar-target="mobilePanel">
3585      <div data-sidebar-target="sharedContent"></div>
3586    </div>
3587  </div>
3588
3589  <div class="relative z-0 flex h-full w-full">
3590    <div class="relative flex h-full flex-row">
3591      <details class="w-11 open:w-32 group/sidebar relative z-20 h-full shrink-0 overflow-hidden max-md:hidden motion-safe:transition-all motion-safe:duration-300 dark:border-neutral-800" data-sidebar-target="desktopSidebar">
3592        <!-- Tiny Sidebar (shown when closed) -->
3593        <summary class="group-open/sidebar:hidden flex min-h-[192px] h-full cursor-e-resize list-none flex-col items-start pl-2 pr-1.5">
3594          <div class="flex h-13 w-full items-center justify-start">
3595            <button class="cursor-e-resize flex size-7 items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800" data-action="click->sidebar#open">
3596              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.75" x2="6.25" y2="15.25"></line><polyline points="10.25 6.5 12.75 9 10.25 11.5"></polyline><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
3597            </button>
3598          </div>
3599
3600          <div class="flex w-full flex-col items-start">
3601            <a href="javascript:void(0)" aria-label="Dashboard" data-controller="tooltip" data-tooltip-content="Dashboard" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
3602              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg>
3603            </a>
3604            <a href="javascript:void(0)" aria-label="Contacts" data-controller="tooltip" data-tooltip-content="Contacts" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
3605              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="9" cy="4.5" r="2.75"></circle><path d="M13.762,15.516c.86-.271,1.312-1.221,.947-2.045-.97-2.191-3.159-3.721-5.709-3.721s-4.739,1.53-5.709,3.721c-.365,.825,.087,1.7
360574,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg>
3606            </a>
3607            <a href="javascript:void(0)" aria-label="Companies" data-controller="tooltip" data-tooltip-content="Companies" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
3608              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M7.75 16.25V7.75C7.75 7.198 8.198 6.75 8.75 6.75H14.25C14.802 6.75 15.25 7.198 15.25 7.75V16.25"></path> <path d="M2.75 16.25V4.412C2.75 4.01 2.99 3.64701 3.36 3.49101L7.86 1.58802C8.519 1.30902 9.25 1.79301 9.25 2.50901V3.75001"></path> <path d="M1.75 16.25H16.25"></path> <path d="M10.25 10.25V9.75"></path> <path d="M12.75 10.25V9.75"></path> <path d="M10.25 13.25V12.75"></path> <path d="M12.75 13.25V12.75"></path></g></svg>
3609            </a>
3610          </div>
3611
3612          <div class="grow"></div>
3613
3614          <div class="sticky bottom-0 z-30 bg-white py-1.5 empty:hidden dark:bg-neutral-950">
3615            <button class="w-full flex items-center gap-1.5 rounded-lg px-1 sm:px-1.5 py-1 sm:py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
3616              <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
3617                <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30">
3618                  <img alt="Profile image" class="size-4 shrink-0 object-cover" referrerpolicy="no-referrer" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100&h=100&fit=crop">
3619                </div>
3620              </div>
3621            </button>
3622          </div>
3623        </summary>
3624
3625        <!-- Full Sidebar (shown when open) -->
3626        <div class="h-full w-32 overflow-x-clip overflow-y-auto text-clip whitespace-nowrap" data-sidebar-target="desktopContent">
3627          <!-- Shared Sidebar Content Template -->
3628          <template data-sidebar-target="contentTemplate">
3629            <nav class="min-h-[192px] bg-white dark:bg-neutral-950 relative flex h-full w-full flex-1 flex-col overflow-y-auto select-none">
3630            <div class="sticky top-0 z-30">
3631              <div class="px-1.5 sm:px-2">
3632                <div class="flex h-13 items-center justify-between">
3633                  <a href="javascript:void(0)" aria-label="Home" class="flex size-7 items-center justify-center rounded-lg text-neutral-900 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
3634                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 9C1 4.58168 4.58179 1 9 1C13.4182 1 17 4.58168 17 9C17 13.4183 13.4182 17 9 17C4.58179 17 1 13.4183 1 9Z" fill-opacity="0.4"></path></g></svg>
3635                  </a>
3636                  <div class="flex">
3637                    <button class="flex size-7 cursor-w-resize items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800" aria-expanded="true" aria-label="Close sidebar" data-state="closed" data-action="click->sidebar#close">
3638                      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="11.75" y1="2.75" x2="11.75" y2="15.25"></line><polyline points="7.75 6.5 5.25 9 7.75 11.5"></polyline><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2"></rect></g></svg>
3639                    </button>
3640                  </div>
3641                </div>
3642              </div>
3643            </div>
3644
3645            <aside class="relative px-1.5 last:mb-5 sm:px-2">
3646              <a href="javascript:void(0)" aria-label="Dashboard" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dar
3646k:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
3647                <div class="flex min-w-0 items-center gap-1.5">
3648                  <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
3649                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg>
3650                  </div>
3651                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
3652                    <div class="truncate">Dashboard</div>
3653                  </div>
3654                </div>
3655                <div class="text-neutral-500 dark:text-neutral-400">
3656                  <div class="hidden sm:block">
3657                    <div class="hidden ml-auto group-hover:flex text-xs">
3658                      ⌘1
3659                    </div>
3660                  </div>
3661                </div>
3662              </a>
3663              <a href="javascript:void(0)" aria-label="Contacts" title="Contacts" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
3664                <div class="flex min-w-0 items-center gap-1.5">
3665                  <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
3666                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="9" cy="4.5" r="2.75"></circle><path d="M13.762,15.516c.86-.271,1.312-1.221,.947-2.045-.97-2.191-3.159-3.721-5.709-3.721s-4.739,1.53-5.709,3.721c-.365,.825,.087,1.7
366674,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg>
3667                  </div>
3668                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
3669                    <div class="truncate">Contacts</div>
3670                  </div>
3671                </div>
3672                <div class="text-neutral-500 dark:text-neutral-400">
3673                  <div class="hidden sm:block">
3674                    <div class="hidden ml-auto group-hover:flex text-xs">
3675                      ⌘2
3676                    </div>
3677                  </div>
3678                </div>
3679              </a>
3680              <a href="javascript:void(0)" aria-label="Companies" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
3681                <div class="flex min-w-0 items-center gap-1.5">
3682                  <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
3683                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M7.75 16.25V7.75C7.75 7.198 8.198 6.75 8.75 6.75H14.25C14.802 6.75 15.25 7.198 15.25 7.75V16.25"></path> <path d="M2.75 16.25V4.412C2.75 4.01 2.99 3.64701 3.36 3.49101L7.86 1.58802C8.519 1.30902 9.25 1.79301 9.25 2.50901V3.75001"></path> <path d="M1.75 16.25H16.25"></path> <path d="M10.25 10.25V9.75"></path> <path d="M12.75 10.25V9.75"></path> <path d="M10.25 13.25V12.75"></path> <path d="M12.75 13.25V12.75"></path></g></svg>
3684                  </div>
3685                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
3686                    <div class="truncate">Companies</div>
3687                  </div>
3688                </div>
3689                <div class="text-neutral-500 dark:text-neutral-400">
3690                  <div class="hidden sm:block">
3691                    <div class="hidden ml-auto group-hover:flex text-xs">
3692                      ⌘3
3693                    </div>
3694                  </div>
3695                </div>
3696              </a>
3697            </aside>
3698
3699            <div class="grow"></div>
3700
3701            <div class="sticky bottom-0 z-30 bg-white p-1.5 empty:hidden sm:p-2 dark:bg-neutral-950">
3702              <button class="w-full flex items-center gap-1.5 rounded-lg px-1 sm:px-1.5 py-1 sm:py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
3703                <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
3704                  <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30">
3705                    <img alt="Profile image" class="size-4 shrink-0 object-cover" referrerpolicy="no-referrer" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100&h=100&fit=crop">
3706                  </div>
3707                </div>
3708                <div class="min-w-0">
3709                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
3710                    <div class="truncate text-xs">John Doe</div>
3711                  </div>
3712                </div>
3713              </button>
3714            </div>
3715          </nav>
3716          </template>
3717        </div>
3718      </details>
3719    </div>
3720
3721    <main class="min-h-[192px] pl-1.5 md:pl-0 py-1.5 pr-1.5 grow h-auto w-auto flex flex-col justify-center items-center relative">
3722      <div class="w-full h-full mb-[2px] flex justify-center items-center relative bg-neutral-50 dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-800">
3723        <div class="w-full absolute top-0 z-10 flex items-center md:hidden p-2">
3724          <button type="button" class="size-7 inline-flex items-center justify-center rounded-md focus:bg-neutral-100 focus:outline-hidden focu
3724s:ring-inset dark:focus:bg-neutral-700/50 active:opacity-50" data-action="click->sidebar#openMobile" aria-label="Open sidebar">
3725            <span class="sr-only">Open sidebar</span>
3726            <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9" x2="15.75" y2="9"></line><line x1="2.25" y1="3.75" x2="15.75" y2="3.75"></line><line x1="2.25" y1="14.25" x2="8.25" y2="14.25"></line></g></svg>
3727          </button>
3728        </div>
3729        <div class="px-6 py-4 text-xs">
3730          Your content
3731        </div>
3732      </div>
3733    </main>
3734  </div>
3735</div>
3736
3737    </div>
3738  </div>
3739  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/sidebar" data-turbo-frame="_top">
3740    <div class="h-48"></div>
3741    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3742      Sidebar
3743      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3744    </p>
3745    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
3746  </a>
3747</li>
3748
3749                        <li class="relative">
3750  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3751    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3752      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3752k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3753        <span class="text-xs">?</span>
3754      </button>
3755
3756      <template data-popover-target="content">
3757        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3758          <div class="space-y-2">
3759            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3760
3761            <div class="flex items-center gap-1.5 text-xs">
3762              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3763              <span class="flex grow gap-2">Tailwind CSS</span>
3764            </div>
3765
3766            <div class="flex items-center gap-1.5 text-xs">
3767              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3767ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3768                <g class="fill-neutral-800 dark:fill-white">
3769                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3770                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3771                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3772                </g>
3773              </svg>
3774              <span class="flex grow gap-2">Stimulus</span>
3775            </div>
3776          </div>
3777        </div>
3778      </template>
3779    </div>
3780
3781    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3782      <div class="flex flex-wrap gap-2 justify-center">
3783        <button
3784          onclick="toast('Toast Notification', { type: 'success' })"
3785          class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
3785k:focus-visible:outline-neutral-200"
3786        >
3787          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="12" height="12" viewBox="0 0 12 12"><g fill="currentColor"><path d="m10.75,7.5c-.414,0-.75-.336-.75-.75v-2.75c0-2.206-1.794-4-4-4S2,1.794,2,4v2.75c0,.414-.336.75-.75.75s-.75.336-.75.75.336.75.75.75h9.5c.414,0,.75-.336.75-.75s-.336-.75-.75-.75Z" stroke-width="0"></path><path d="m6,12c1.105,0,2-.895,2-2h-4c0,1.105.895,2,2,2Z" stroke-width="0"></path></g></svg>
3788          Show Toast
3789        </button>
3790      </div>
3791    </div>
3792  </div>
3793  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/toast" data-turbo-frame="_top">
3794    <div class="h-48"></div>
3795    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3796      Toast
3797      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3798    </p>
3799    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p>
3800  </a>
3801</li>
3802
3803                    </ul>
3804                  </div>
3805                  <p class="text-neutral-500 dark:text-neutral-400">
3806                    I also updated existing components:
3807                  </p>
3808                  <ul class="mt-3 space-y-2 text-sm text-neutral-600 dar
3808k:text-neutral-300">
3809                    <li class="flex items-start">
3810                      <span class="mr-2">•</span>
3811                      <span>Updated <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/combobox">combobox</a> component with improved functionality</span>
3812                    </li>
3813                    <li class="flex items-start">
3814                      <span class="mr-2">•</span>
3815                      <span>Enhanced <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/autocomplete">autocomplete</a> component with a better user experience</span>
3816                    </li>
3817                    <li class="flex items-start">
3818                      <span class="mr-2">•</span>
3819                      <span>Improved <a class="text-neutral-900 dark:text-white underline hover:opacity-80" href="/docs/tooltip">tooltip</a> component with enhanced hover </span>
3820                    </li>
3821                  </ul>
3822                  <div class="mt-4 rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
3823                    <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
3824                      <div class="flex items-center h-full">
3825                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
3826                          <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
3827                            <circle cx="9" cy="9" r="7.25"></circle>
3828                            <path d="M9 5.75V9.25"></path>
3829                            <path d="M9 12.25H9.0075"></path>
3830                          </g>
3831                        </svg>
3832                      </div>
3833                      <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
3834                        Recommendation
3835                      </h3>
3836                      <div></div>
3837                      <div class="text-sm text-neutral-600 dark:text-neutral-400">
3838                        If you're using these components, I recommend updating your Stimulus controllers and custom CSS to take advantage of the latest improvements and bug fixes.
3839                      </div>
3840                    </div>
3841                  </div>
3842                </div>
3843              </div>
3844              <!-- End Col -->
3845            </div>
3846            <!-- End Grid -->
3847          </div>
3848          <!-- End Right Content -->
3849        </div>
3850        <!-- End Item -->
3851
3852        <!-- Item - August 2025 -->
3853        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
3854
3855          <!-- Icon -->
3856          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
3857            <div class="relative z-10 size-6 flex justify-center items-center">
3858              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
3859            </div>
3860          </div>
3861          <!-- End Icon -->
3862
3863          <!-- Right Content -->
3864          <div class="grow pb-8 relative">
3865            <!-- Grid -->
3866            <div class="grid grid-cols-1 gap-6 md:gap-12">
3867              <div>
3868                <div class="space-y-3">
3869                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
3870                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
3871                      August 2025
3872                    </h2>
3873                  </div>
3874                  <p class="text-neutral-500 dark:text-neutral-400">
3875                    In August 2025, I released 8 new component sets:
3876                  </p>
3877                  <div class="my-4">
3878                    <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
3879                        <li class="relative">
3880  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3881    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3882      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3882k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3883        <span class="text-xs">?</span>
3884      </button>
3885
3886      <template data-popover-target="content">
3887        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3888          <div class="space-y-2">
3889            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3890
3891            <div class="flex items-center gap-1.5 text-xs">
3892              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3893              <span class="flex grow gap-2">Tailwind CSS</span>
3894            </div>
3895
3896          </div>
3897        </div>
3898      </template>
3899    </div>
3900
3901    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3902      <div class="rounded-xl border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/50">
3903        <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
3904          <div class="flex items-center h-full">
3905            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
3906              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
3907                <circle cx="9" cy="9" r="7.25"></circle>
3908                <path d="M9 5.75V9.25"></path>
3909                <path d="M9 12.25H9.0075"></path>
3910              </g>
3911            </svg>
3912          </div>
3913          <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
3914            Information
3915          </h3>
3916          <div></div>
3917          <div class="text-sm text-neutral-600 dark:text-neutral-400">
3918            Alert description.
3919          </div>
3920        </div>
3921      </div>
3922    </div>
3923  </div>
3924  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/alert" data-turbo-frame="_top">
3925    <div class="h-48"></div>
3926    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3927      Alert
3928      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3929    </p>
3930    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
3931  </a>
3932</li>
3933
3934                        <li class="relative">
3935    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
3936    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
3937      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
3938        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
3939        Pro
3940      </a>
3941    </div>
3942  </div>
3943
3944  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3945    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3946      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3946k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3947        <span class="text-xs">?</span>
3948      </button>
3949
3950      <template data-popover-target="content">
3951        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3952          <div class="space-y-2">
3953            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3954
3955            <div class="flex items-center gap-1.5 text-xs">
3956              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3957              <span class="flex grow gap-2">Tailwind CSS</span>
3958            </div>
3959
3960            <div class="flex items-center gap-1.5 text-xs">
3961              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3961ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3962                <g class="fill-neutral-800 dark:fill-white">
3963                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3964                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3965                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3966                </g>
3967              </svg>
3968              <span class="flex grow gap-2">Stimulus</span>
3969            </div>
3970
3971            <div class="flex items-center gap-1.5 text-xs">
3972              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
3973              <span class="flex grow gap-2">Floating UI</span>
3974            </div>
3975
3976          </div>
3977        </div>
3978      </template>
3979    </div>
3980
3981    <div data-controller="toggle text-cycler" class="flex-col gap-2 relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3982
3983      <!-- Search on Focus Autocomplete -->
3984<div class="max-w-xs mx-auto w-full">
3985  <form class="relative"
3986        data-controller="autocomplete"
3987        data-autocomplete-search-on-focus-value="true"
3988        data-autocomplete-submit-on-select-value="false" 
3989        data-autocomplete-show-recent-value="false"
3990        data-autocomplete-local-data-value='[{&quot;title&quot;:&quot;Apple&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot;
3990 viewBox=\&quot;0 0 24 24\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath fill-rule=\&quot;evenodd\&quot; clip-rule=\&quot;evenodd\&quot; d=\&quot;M13.3091 6.48971C13.8886 6.26249 14.614 6.00143 15.6913 6.00143C17.3749 6.00143 19.1523 6.89003 20.3404 8.35613L21.0976 9.29055L20.0406 9.86449C17.5093 11.2391 17.8608 14.8633 20.4912 15.8476L21.4953 16.2234L21.0506 17.199C20.5752 18.2418 20.3284 18.7499 19.6885 19.7119C18.7074 21.192 17.3565 22.9787 15.3958 22.997C14.1793 23.0084 13.2116 22.1656 12.0053 22.172C10.7909 22.1784 9.80329 23 8.57946 22.9999L8.57073 22.9999C6.64549 22.9829 5.31146 21.3315 4.3393 19.8664C1.80437 16.0461 1.46451 11.568 3.19812 8.92508C4.43251 7.04322 6.3164 6.00413 8.20878 6.00413C9.15354 6.00413 9.91949 6.26847 10.5172 6.47873C11.1502 6.70144 11.5462 6.84 11.9823 6.84C12.4376 6.84 12.7407 6.71256 13.3091 6.48971Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M15.3653 3.793C16.0815 2.87425 16.5703 1.63176 16.373 0.305766C15.203 0.386016 13.89 1.07576 13.0913 2.0455C12.3668 2.92525 11.7675 4.231 12 5.5C13.2765 5.53975 14.598 4.77775 15.3653 3.793Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Behance&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
3990 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M10.144,7.203c.808,0,1.554,.062,2.238,.249,.684,.124,1.243,.373,1.741,.684s.87,.746,1.119,1.306c.249,.56,.373,1.243,.373,1.989,0,.87-.187,1.616-.622,2.176-.373,.56-.995,1.057-1.741,1.43,1.057,.311,1.865,.87,2.362,1.616s.808,1.679,.808,2.735c0,.87-.187,1.616-.497,2.238s-.808,1.181-1.368,1.554c-.56,.373-1.243,.684-1.989,.87-.746,.187-1.492,.311-2.238,.311H2V7.203H10.144Zm-.497,6.963c.684,0,1.243-.187,1.679-.497s.622-.87,.622-1.554c0-.373-.062-.746-.187-.995s-.311-.435-.56-.622c-.249-.124-.497-.249-.808-.311s-.622-.062-.995-.062h-3.606v4.041h3.854Zm.187,7.336c.373,0,.746-.062,1.057-.124s.622-.187,.87-.373c.249-.187,.435-.373,.622-.684,.124-.311,.249-.684,.249-1.119,0-.87-.249-1.492-.746-1.927-.497-.373-1.181-.56-1.989-.56H5.792v4.787h4.041Zm11.998-.062c.497,.497,1.243,.746,2.238,.746,.684,0,1.306-.187,1.803-.497,.497-.373,.808-.746,.933-1.119h3.046c-.497,1.492-1.243,2.549-2.238,3.233-.995,.622-2.176,.995-3.606,.995-.995,0-1.865-.187-2.673-.497s-1.43-.746-1.989-1.368c-.56-.56-.995-1.243-1.243-2.052-.311-.808-.435-1.679-.435-2.673,0-.933,.124-1.803,.435-2.611s.746-1.492,1.306-2.114c.56-.56,1.243-1.057,1.989-1.368,.808-.311,1.616-.497,2.611-.497,1.057,0,1.989,.187,2.798,.622s1.43,.933,1.927,1.679c.497,.684,.87,1.492,1.119,2.362,.124,.87,.187,1.741,.124,2.735h-9.014c0,.995,.373,1.927,.87,2.425Zm3.917-6.528c-.435-.435-1.119-.684-1.927-.684-.56,0-.995,.124-1.368,.311-.373,.187-.622,.435-.87,.684-.249,.249-.373,.56-.435,.87s-.124,.56-.124,.808h5.595c-.124-.933-.435-1.554-.87-1.989Zm-5.471-6.528h6.963v1.679h-6.963v-1.679Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Discord&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
3990 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M26.413,6.536c-1.971-.902-4.052-1.543-6.189-1.904-.292,.523-.557,1.061-.793,1.612-2.277-.343-4.592-.343-6.869,0-.236-.551-.5-1.089-.793-1.612-2.139,.365-4.221,1.006-6.194,1.909C1.658,12.336,.596,17.987,1.127,23.558h0c2.294,1.695,4.861,2.984,7.591,3.811,.615-.827,1.158-1.704,1.626-2.622-.888-.332-1.744-.741-2.56-1.222,.215-.156,.425-.316,.628-.472,4.806,2.26,10.37,2.26,15.177,0,.205,.168,.415,.328,.628,.472-.817,.483-1.676,.892-2.565,1.225,.467,.918,1.011,1.794,1.626,2.619,2.732-.824,5.301-2.112,7.596-3.808h0c.623-6.461-1.064-12.06-4.46-17.025Zm-15.396,13.596c-1.479,0-2.702-1.343-2.702-2.994s1.18-3.006,2.697-3.006,2.73,1.354,2.704,3.006-1.192,2.994-2.699,2.994Zm9.967,0c-1.482,0-2.699-1.343-2.699-2.994s1.18-3.006,2.699-3.006,2.723,1.354,2.697,3.006-1.189,2.994-2.697,2.994Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Framer&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot;
3990 viewBox=\&quot;0 0 24 24\&quot;\u003e\u003cg fill=\&quot;none\&quot;\u003e\u003cpath d=\&quot;M5.55502 3.61569C5.12664 3.18731 4.91245 2.97312 4.89798 2.78923C4.88542 2.62967 4.95001 2.47374 5.07171 2.3698C5.21198 2.25 5.51489 2.25 6.1207 2.25H16.35C17.1901 2.25 17.6101 2.25 17.931 2.41349C18.2132 2.5573 18.4427 2.78677 18.5865 3.06901C18.75 3.38988 18.75 3.80992 18.75 4.65V7.35C18.75 8.19008 18.75 8.61012 18.5865 8.93099C18.4427 9.21323 18.2132 9.4427 17.931 9.58651C17.6101 9.75 17.1901 9.75 16.35 9.75H15.2249L14.1308 8.65589C13.6119 8.13703 13.3525 7.87761 13.0497 7.69208C12.7813 7.52759 12.4887 7.40638 12.1826 7.33289C11.8373 7.25 11.4704 7.25 10.7366 7.25H9.18933L5.55502 3.61569Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M11.3843 21.445C11.8127 21.8734 12.0269 22.0875 12.2108 22.102C12.3703 22.1146 12.5262 22.05 12.6302 21.9283C12.75 21.788 12.75 21.4851 12.75 20.8793V16.75H6.68933L11.3843 21.445Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M5.25 10.65C5.25 9.80992 5.25 9.38988 5.41349 9.06901C5.5573 8.78677 5.78677 8.5573 6.06901 8.41349C6.38988 8.25 6.80992 8.25 7.65 8.25H10.9852C11.4744 8.25 11.7189 8.25 11.9491 8.30526C12.1532 8.35425 12.3483 8.43506 12.5272 8.54472C12.7291 8.6684 12.902 8.84136 13.2479 9.18726L18.445 14.3843C18.8734 14.8127 19.0875 15.0269 19.102 15.2108C19.1146 15.3703 19.05 15.5263 18.9283 15.6302C18.788 15.75 18.4851 15.75 17.8793 15.75H5.68934V15.75C5.40804 15.4687 5.25 15.0872 5.25 14.6893V10.65Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;LinkedIn&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
3990 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z\&quot; fill-rule=\&quot;evenodd\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Microsoft&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot; viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M3,3H15.381V15.381H3V3Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M16.619,3h12.381V15.381h-12.381V3Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M3,16.619H15.381v12.381H3v-12.381Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M16.619,16.619h12.381v12.381h-12.381v-12.381Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Patreon&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
3990 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M28.783,10.412c-.005-3.575-2.789-6.505-6.056-7.563-4.057-1.313-9.407-1.123-13.281,.705C4.75,5.77,3.275,10.623,3.22,15.464c-.045,3.98,.352,14.461,6.264,14.536,4.393,.056,5.047-5.605,7.08-8.331,1.446-1.94,3.308-2.487,5.6-3.055,3.939-.975,6.624-4.084,6.619-8.203Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Pinterest&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot; viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M16,2C8.268,2,2,8.268,2,16c0,5.931,3.69,11.001,8.898,13.041-.122-1.108-.233-2.811,.049-4.02,.254-1.093,1.642-6.959,1.642-6.959,0,0-.419-.839-.419-2.079,0-1.947,1.128-3.4,2.533-3.4,1.194,0,1.771,.897,1.771,1.972,0,1.201-.765,2.997-1.16,4.661-.33,1.393,.699,2.53,2.073,2.53,2.488,0,4.401-2.624,4.401-6.411,0-3.352-2.409-5.696-5.848-5.696-3.983,0-6.322,2.988-6.322,6.076,0,1.203,.464,2.494,1.042,3.195,.114,.139,.131,.26,.097,.402-.106,.442-.342,1.393-.389,1.588-.061,.256-.203,.311-.468,.187-1.749-.814-2.842-3.37-2.842-5.424,0-4.416,3.209-8.472,9.25-8.472,4.857,0,8.631,3.461,8.631,8.086,0,4.825-3.042,8.708-7.265,8.708-1.419,0-2.752-.737-3.209-1.608,0,0-.702,2.673-.872,3.328-.316,1.216-1.169,2.74-1.74,3.67,1.31,.406,2.702,.624,4.145,.624,7.732,0,14-6.268,14-14S23.732,2,16,2Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Slack&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
3990 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M8.463,19.43c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731,1.228-2.731,2.731-2.731h2.731v2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M9.839,19.43c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731c0,0,0-6.839,0-6.839Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M12.57,8.463c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731,2.731,1.228,2.731,2.731v2.731h-2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M12.57,9.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731H5.731c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731c0,0,6.839,0,6.839,0Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M23.537,12.57c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731-1.228,2.731-2.731,2.731h-2.731v-2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M22.161,12.57c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731V5.731c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M19.43,23.537c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731-2.731-1.228-2.731-2.731v-2.731h2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M19.43,22.161c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731h6.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731h-6.839Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Spotify&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot;
3990 viewBox=\&quot;0 0 24 24\&quot;\u003e\u003cg fill=\&quot;none\&quot;\u003e\u003cpath fill-rule=\&quot;evenodd\&quot; clip-rule=\&quot;evenodd\&quot; d=\&quot;M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM7.24064 10.243C6.84845 10.3756 6.42251 10.1654 6.28965 9.77326C6.15675 9.38095 6.36704 8.95518 6.75936 8.82227L6.76064 8.82184C7.11822 8.70159 7.48582 8.61304 7.85391 8.53176C8.52557 8.38345 9.47301 8.22053 10.5843 8.1602C12.7986 8.03998 15.7214 8.32449 18.3991 10.0073C18.7498 10.2277 18.8554 10.6906 18.635 11.0413C18.4146 11.3921 17.9516 11.4977 17.6009 11.2773C15.2786 9.81778 12.7014 9.54747 10.6657 9.65799C9.65199 9.71302 8.78693 9.86187 8.17734 9.99648C7.86261 10.066 7.54712 10.1423 7.24064 10.243ZM7.24011 11.7965L7.23879 11.7969C6.85051 11.9412 6.65269 12.3729 6.79696 12.7612C6.94116 13.1493 7.37306 13.3469 7.76121 13.203C8.01105 13.1136 8.26893 13.0456 8.52676 12.9836C9.03189 12.8623 9.75307 12.7275 10.6068 12.677C12.318 12.5758 14.5214 12.8144 16.5979 14.1331C16.9476 14.3552 17.4111 14.2517 17.6331 13.9021C17.8552 13.5524 17.7517 13.0889 17.4021 12.8669C14.9786 11.3278 12.432 11.0664 10.5182 11.1797C9.55943 11.2364 8.74936 11.3875 8.17636 11.5251C7.86123 11.6008 7.54651 11.6843 7.2419 11.7958L7.24011 11.7965ZM8.24708 16.1038C7.85613 16.24 7.42827 16.0337 7.29187 15.6428C7.15541 15.2517 7.36183 14.824 7.75292 14.6876C8.60177 14.3947 9.50664 14.2708 10.4004 14.2265C11.9342 14.1505 13.9791 14.3679 15.9019 15.5885C16.2516 15.8105 16.3552 16.2739 16.1332 16.6236C15.9112 16.9733 15.4478 17.0769 15.0981 16.8549C13.5209 15.8538 11.8158 15.6582 10.4746 15.7246C9.72314 15.7619 8.96309 15.8652 8.24708 16.1038Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;Trello&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
3990 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M25.906,3H6.089c-1.707,.002-3.089,1.387-3.089,3.094V25.911c0,1.706,1.383,3.089,3.089,3.089H25.906c1.707,0,3.091-1.383,3.094-3.089V6.094c-.002-1.708-1.386-3.091-3.094-3.094ZM14.197,21.729c.002,.566-.454,1.026-1.02,1.028-.001,0-.003,0-.004,0h-4.348c-.566,0-1.024-.459-1.024-1.024,0-.001,0-.003,0-.004V8.829c-.002-.566,.454-1.026,1.02-1.028,.001,0,.003,0,.004,0h4.348c.566,0,1.024,.459,1.024,1.024,0,.001,0,.003,0,.004v12.9Zm10.002-5.923c0,.568-.46,1.028-1.028,1.028h-4.344c-.568,0-1.028-.46-1.028-1.028v-6.977c0-.568,.46-1.028,1.028-1.028h4.344c.568,0,1.028,.46,1.028,1.028v6.977Z\&quot; fill-rule=\&quot;evenodd\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;},{&quot;title&quot;:&quot;YouTube&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot; viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M31.331,8.248c-.368-1.386-1.452-2.477-2.829-2.848-2.496-.673-12.502-.673-12.502-.673,0,0-10.007,0-12.502,.673-1.377,.37-2.461,1.462-2.829,2.848-.669,2.512-.669,7.752-.669,7.752,0,0,0,5.241,.669,7.752,.368,1.386,1.452,2.477,2.829,2.847,2.496,.673,12.502,.673,12.502,.673,0,0,10.007,0,12.502-.673,1.377-.37,2.461-1.462,2.829-2.847,.669-2.512,.669-7.752,.669-7.752,0,0,0-5.24-.669-7.752ZM12.727,20.758V11.242l8.364,4.758-8.364,4.758Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;}]'>
3991
3992    <div class="relative">
3993      <input id="search_on_focus_basic_autocomplete"
3994             required
3995             data-autocomplete-target="input"
3996             placeholder="Search brands..."
3997             class="form-control !px-9">
3998
3999      <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-2.5 top-2.5 size-5 text-neutral-400 pointer-events-none" width="20" height="20" viewBox="0 0 20 20">
4000        <g fill="currentColor">
4001          <path d="M16.906,17.966c-.256,0-.512-.098-.707-.293l-4.817-4.817c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l4.817,4.817c.391,.391,.391,1.023,0,1.414-.195,.195-.451,.293-.707,.293Z"></path>
4002          <path d="M8.5,15c-3.584,0-6.5-2.916-6.5-6.5S4.916,2,8.5,2s6.5,2.916,6.5,6.5-2.916,6.5-6.5,6.5Zm0-11c-2.481,0-4.5,2.019-4.5,4.5s2.019,4.5,4.5,4.5,4.5-2.019,4.5-4.5-2.019-4.5-4.5-4.5Z"></path>
4003        </g>
4004      </svg>
4005
4006      <button type="button" data-autocomplete-target="clearButton" data-action="click->autocomplete#clearInput" class="hidden absolute flex items-center justify-center size-5 right-2.5 top-2.5 rounded-full text-neutral-400 hover:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
4006k:focus-visible:outline-neutral-200">
4007        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg>
4008      </button>
4009    </div>
4010
4011    <div data-autocomplete-target="results"
4012         class="small-scrollbar absolute z-50 w-full bg-white dark:bg-neutral-900 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden hidden opacity-0 max-h-[250px] overflow-y-auto"
4013         role="listbox"
4014         tabindex="-1">
4015    </div>
4016  </form>
4017</div>
4018
4019    </div>
4020  </div>
4021  <a href="/docs/autocomplete" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4022    <div class="h-48"></div>
4023    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4024      Autocomplete Search
4025      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4026    </p>
4027    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">
4028      View 10 components
4029    </p>
4030  </a>
4031</li>
4032
4033                        <li class="relative">
4034  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4035    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4036      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4036k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4037        <span class="text-xs">?</span>
4038      </button>
4039
4040      <template data-popover-target="content">
4041        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4042          <div class="space-y-2">
4043            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4044
4045            <div class="flex items-center gap-1.5 text-xs">
4046              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4047              <span class="flex grow gap-2">Tailwind CSS</span>
4048            </div>
4049
4050          </div>
4051        </div>
4052      </template>
4053    </div>
4054
4055    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4056      <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
4057    </div>
4058  </div>
4059  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/badge" data-turbo-frame="_top">
4060    <div class="h-48"></div>
4061    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4062      Badge
4063      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4064    </p>
4065    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
4066  </a>
4067</li>
4068
4069                        <li class="relative">
4070  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4071    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4072      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4072k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4073        <span class="text-xs">?</span>
4074      </button>
4075
4076      <template data-popover-target="content">
4077        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4078          <div class="space-y-2">
4079            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4080
4081            <div class="flex items-center gap-1.5 text-xs">
4082              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4083              <span class="flex grow gap-2">Tailwind CSS</span>
4084            </div>
4085          </div>
4086        </div>
4087      </template>
4088    </div>
4089
4090    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4091      <div class="w-full max-w-xs">
4092        <div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
4093          <div class="p-3">
4094            <h3 class="text-sm font-medium leading-6 text-neutral-900 dark:text-neutral-100">Card Preview</h3>
4095            <div class="mt-1.5 text-xs text-neutral-500 dark:text-neutral-400">
4096              <p>Simple card components with multiple variations.</p>
4097            </div>
4098          </div>
4099        </div>
4100      </div>
4101    </div>
4102  </div>
4103  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/card" data-turbo-frame="_top">
4104    <div class="h-48"></div>
4105    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4106      Card
4107      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4108    </p>
4109    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p>
4110  </a>
4111</li>
4112
4113                        <li class="relative">
4114    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
4115    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
4116      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
4117        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
41176,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
4118        Pro
4119      </a>
4120    </div>
4121  </div>
4122
4123  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4124    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4125      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4126        <span class="text-xs">?</span>
4127      </button>
4128
4129      <template data-popover-target="content">
4130        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4131          <div class="space-y-2">
4132            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4133
4134            <div class="flex items-center gap-1.5 text-xs">
4135              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4136              <span class="flex grow gap-2">Tailwind CSS</span>
4137            </div>
4138
4139            <div class="flex items-center gap-1.5 text-xs">
4140              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4140ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4141                <g class="fill-neutral-800 dark:fill-white">
4142                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4143                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4144                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4145                </g>
4146              </svg>
4147              <span class="flex grow gap-2">Stimulus</span>
4148            </div>
4149
4150            <div class="flex items-center gap-1.5 text-xs">
4151              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
4152              <span class="flex grow gap-2">Floating UI</span>
4153            </div>
4154          </div>
4155        </div>
4156      </template>
4157    </div>
4158
4159    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4160      <div class="w-full max-w-xs flex justify-center">
4161        <div data-controller="modal">
4162  <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" data-action="click->
4162modal#open:prevent">
4163    Search brands
4164  </button>
4165
4166  <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose">
4167    <div class="sm:max-w-md w-full">
4168
4169      <div class="sm:max-w-md mx-auto w-full">
4170        <form class="relative"
4171              data-controller="autocomplete"
4172              data-autocomplete-submit-on-select-value="false" 
4173              data-autocomplete-highlight-matches-value="false"
4174              data-autocomplete-suggestion-class-value="border-l-3 border-transparent"
4175              data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected"
4176              data-autocomplete-anchor-value="form"
4177              data-autocomplete-render-mode-value="inline"
4178              data-autocomplete-always-show-value="true"
4179              data-autocomplete-auto-select-first-value="true"
4180              data-autocomplete-preserve-search-on-select-value="true" 
4181              data-autocomplete-select-action-value="modal#close:prevent"
4182              data-autocomplete-local-data-value='[{&quot;title&quot;:&quot;Apple&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot;
4182 viewBox=\&quot;0 0 24 24\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath fill-rule=\&quot;evenodd\&quot; clip-rule=\&quot;evenodd\&quot; d=\&quot;M13.3091 6.48971C13.8886 6.26249 14.614 6.00143 15.6913 6.00143C17.3749 6.00143 19.1523 6.89003 20.3404 8.35613L21.0976 9.29055L20.0406 9.86449C17.5093 11.2391 17.8608 14.8633 20.4912 15.8476L21.4953 16.2234L21.0506 17.199C20.5752 18.2418 20.3284 18.7499 19.6885 19.7119C18.7074 21.192 17.3565 22.9787 15.3958 22.997C14.1793 23.0084 13.2116 22.1656 12.0053 22.172C10.7909 22.1784 9.80329 23 8.57946 22.9999L8.57073 22.9999C6.64549 22.9829 5.31146 21.3315 4.3393 19.8664C1.80437 16.0461 1.46451 11.568 3.19812 8.92508C4.43251 7.04322 6.3164 6.00413 8.20878 6.00413C9.15354 6.00413 9.91949 6.26847 10.5172 6.47873C11.1502 6.70144 11.5462 6.84 11.9823 6.84C12.4376 6.84 12.7407 6.71256 13.3091 6.48971Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M15.3653 3.793C16.0815 2.87425 16.5703 1.63176 16.373 0.305766C15.203 0.386016 13.89 1.07576 13.0913 2.0455C12.3668 2.92525 11.7675 4.231 12 5.5C13.2765 5.53975 14.598 4.77775 15.3653 3.793Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Behance&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
4182 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M10.144,7.203c.808,0,1.554,.062,2.238,.249,.684,.124,1.243,.373,1.741,.684s.87,.746,1.119,1.306c.249,.56,.373,1.243,.373,1.989,0,.87-.187,1.616-.622,2.176-.373,.56-.995,1.057-1.741,1.43,1.057,.311,1.865,.87,2.362,1.616s.808,1.679,.808,2.735c0,.87-.187,1.616-.497,2.238s-.808,1.181-1.368,1.554c-.56,.373-1.243,.684-1.989,.87-.746,.187-1.492,.311-2.238,.311H2V7.203H10.144Zm-.497,6.963c.684,0,1.243-.187,1.679-.497s.622-.87,.622-1.554c0-.373-.062-.746-.187-.995s-.311-.435-.56-.622c-.249-.124-.497-.249-.808-.311s-.622-.062-.995-.062h-3.606v4.041h3.854Zm.187,7.336c.373,0,.746-.062,1.057-.124s.622-.187,.87-.373c.249-.187,.435-.373,.622-.684,.124-.311,.249-.684,.249-1.119,0-.87-.249-1.492-.746-1.927-.497-.373-1.181-.56-1.989-.56H5.792v4.787h4.041Zm11.998-.062c.497,.497,1.243,.746,2.238,.746,.684,0,1.306-.187,1.803-.497,.497-.373,.808-.746,.933-1.119h3.046c-.497,1.492-1.243,2.549-2.238,3.233-.995,.622-2.176,.995-3.606,.995-.995,0-1.865-.187-2.673-.497s-1.43-.746-1.989-1.368c-.56-.56-.995-1.243-1.243-2.052-.311-.808-.435-1.679-.435-2.673,0-.933,.124-1.803,.435-2.611s.746-1.492,1.306-2.114c.56-.56,1.243-1.057,1.989-1.368,.808-.311,1.616-.497,2.611-.497,1.057,0,1.989,.187,2.798,.622s1.43,.933,1.927,1.679c.497,.684,.87,1.492,1.119,2.362,.124,.87,.187,1.741,.124,2.735h-9.014c0,.995,.373,1.927,.87,2.425Zm3.917-6.528c-.435-.435-1.119-.684-1.927-.684-.56,0-.995,.124-1.368,.311-.373,.187-.622,.435-.87,.684-.249,.249-.373,.56-.435,.87s-.124,.56-.124,.808h5.595c-.124-.933-.435-1.554-.87-1.989Zm-5.471-6.528h6.963v1.679h-6.963v-1.679Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Discord&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
4182 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M26.413,6.536c-1.971-.902-4.052-1.543-6.189-1.904-.292,.523-.557,1.061-.793,1.612-2.277-.343-4.592-.343-6.869,0-.236-.551-.5-1.089-.793-1.612-2.139,.365-4.221,1.006-6.194,1.909C1.658,12.336,.596,17.987,1.127,23.558h0c2.294,1.695,4.861,2.984,7.591,3.811,.615-.827,1.158-1.704,1.626-2.622-.888-.332-1.744-.741-2.56-1.222,.215-.156,.425-.316,.628-.472,4.806,2.26,10.37,2.26,15.177,0,.205,.168,.415,.328,.628,.472-.817,.483-1.676,.892-2.565,1.225,.467,.918,1.011,1.794,1.626,2.619,2.732-.824,5.301-2.112,7.596-3.808h0c.623-6.461-1.064-12.06-4.46-17.025Zm-15.396,13.596c-1.479,0-2.702-1.343-2.702-2.994s1.18-3.006,2.697-3.006,2.73,1.354,2.704,3.006-1.192,2.994-2.699,2.994Zm9.967,0c-1.482,0-2.699-1.343-2.699-2.994s1.18-3.006,2.699-3.006,2.723,1.354,2.697,3.006-1.189,2.994-2.697,2.994Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Framer&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot;
4182 viewBox=\&quot;0 0 24 24\&quot;\u003e\u003cg fill=\&quot;none\&quot;\u003e\u003cpath d=\&quot;M5.55502 3.61569C5.12664 3.18731 4.91245 2.97312 4.89798 2.78923C4.88542 2.62967 4.95001 2.47374 5.07171 2.3698C5.21198 2.25 5.51489 2.25 6.1207 2.25H16.35C17.1901 2.25 17.6101 2.25 17.931 2.41349C18.2132 2.5573 18.4427 2.78677 18.5865 3.06901C18.75 3.38988 18.75 3.80992 18.75 4.65V7.35C18.75 8.19008 18.75 8.61012 18.5865 8.93099C18.4427 9.21323 18.2132 9.4427 17.931 9.58651C17.6101 9.75 17.1901 9.75 16.35 9.75H15.2249L14.1308 8.65589C13.6119 8.13703 13.3525 7.87761 13.0497 7.69208C12.7813 7.52759 12.4887 7.40638 12.1826 7.33289C11.8373 7.25 11.4704 7.25 10.7366 7.25H9.18933L5.55502 3.61569Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M11.3843 21.445C11.8127 21.8734 12.0269 22.0875 12.2108 22.102C12.3703 22.1146 12.5262 22.05 12.6302 21.9283C12.75 21.788 12.75 21.4851 12.75 20.8793V16.75H6.68933L11.3843 21.445Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M5.25 10.65C5.25 9.80992 5.25 9.38988 5.41349 9.06901C5.5573 8.78677 5.78677 8.5573 6.06901 8.41349C6.38988 8.25 6.80992 8.25 7.65 8.25H10.9852C11.4744 8.25 11.7189 8.25 11.9491 8.30526C12.1532 8.35425 12.3483 8.43506 12.5272 8.54472C12.7291 8.6684 12.902 8.84136 13.2479 9.18726L18.445 14.3843C18.8734 14.8127 19.0875 15.0269 19.102 15.2108C19.1146 15.3703 19.05 15.5263 18.9283 15.6302C18.788 15.75 18.4851 15.75 17.8793 15.75H5.68934V15.75C5.40804 15.4687 5.25 15.0872 5.25 14.6893V10.65Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;LinkedIn&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
4182 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z\&quot; fill-rule=\&quot;evenodd\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Microsoft&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot; viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M3,3H15.381V15.381H3V3Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M16.619,3h12.381V15.381h-12.381V3Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M3,16.619H15.381v12.381H3v-12.381Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M16.619,16.619h12.381v12.381h-12.381v-12.381Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Patreon&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
4182 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M28.783,10.412c-.005-3.575-2.789-6.505-6.056-7.563-4.057-1.313-9.407-1.123-13.281,.705C4.75,5.77,3.275,10.623,3.22,15.464c-.045,3.98,.352,14.461,6.264,14.536,4.393,.056,5.047-5.605,7.08-8.331,1.446-1.94,3.308-2.487,5.6-3.055,3.939-.975,6.624-4.084,6.619-8.203Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Pinterest&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot; viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M16,2C8.268,2,2,8.268,2,16c0,5.931,3.69,11.001,8.898,13.041-.122-1.108-.233-2.811,.049-4.02,.254-1.093,1.642-6.959,1.642-6.959,0,0-.419-.839-.419-2.079,0-1.947,1.128-3.4,2.533-3.4,1.194,0,1.771,.897,1.771,1.972,0,1.201-.765,2.997-1.16,4.661-.33,1.393,.699,2.53,2.073,2.53,2.488,0,4.401-2.624,4.401-6.411,0-3.352-2.409-5.696-5.848-5.696-3.983,0-6.322,2.988-6.322,6.076,0,1.203,.464,2.494,1.042,3.195,.114,.139,.131,.26,.097,.402-.106,.442-.342,1.393-.389,1.588-.061,.256-.203,.311-.468,.187-1.749-.814-2.842-3.37-2.842-5.424,0-4.416,3.209-8.472,9.25-8.472,4.857,0,8.631,3.461,8.631,8.086,0,4.825-3.042,8.708-7.265,8.708-1.419,0-2.752-.737-3.209-1.608,0,0-.702,2.673-.872,3.328-.316,1.216-1.169,2.74-1.74,3.67,1.31,.406,2.702,.624,4.145,.624,7.732,0,14-6.268,14-14S23.732,2,16,2Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Slack&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
4182 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M8.463,19.43c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731,1.228-2.731,2.731-2.731h2.731v2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M9.839,19.43c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731c0,0,0-6.839,0-6.839Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M12.57,8.463c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731,2.731,1.228,2.731,2.731v2.731h-2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M12.57,9.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731H5.731c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731c0,0,6.839,0,6.839,0Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M23.537,12.57c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731-1.228,2.731-2.731,2.731h-2.731v-2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M22.161,12.57c0,1.503-1.228,2.731-2.731,2.731s-2.731-1.228-2.731-2.731V5.731c0-1.503,1.228-2.731,2.731-2.731s2.731,1.228,2.731,2.731v6.839Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M19.43,23.537c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731-2.731-1.228-2.731-2.731v-2.731h2.731Z\&quot;\u003e\u003c/path\u003e\u003cpath d=\&quot;M19.43,22.161c-1.503,0-2.731-1.228-2.731-2.731s1.228-2.731,2.731-2.731h6.839c1.503,0,2.731,1.228,2.731,2.731s-1.228,2.731-2.731,2.731h-6.839Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Spotify&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot;
4182 viewBox=\&quot;0 0 24 24\&quot;\u003e\u003cg fill=\&quot;none\&quot;\u003e\u003cpath fill-rule=\&quot;evenodd\&quot; clip-rule=\&quot;evenodd\&quot; d=\&quot;M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM7.24064 10.243C6.84845 10.3756 6.42251 10.1654 6.28965 9.77326C6.15675 9.38095 6.36704 8.95518 6.75936 8.82227L6.76064 8.82184C7.11822 8.70159 7.48582 8.61304 7.85391 8.53176C8.52557 8.38345 9.47301 8.22053 10.5843 8.1602C12.7986 8.03998 15.7214 8.32449 18.3991 10.0073C18.7498 10.2277 18.8554 10.6906 18.635 11.0413C18.4146 11.3921 17.9516 11.4977 17.6009 11.2773C15.2786 9.81778 12.7014 9.54747 10.6657 9.65799C9.65199 9.71302 8.78693 9.86187 8.17734 9.99648C7.86261 10.066 7.54712 10.1423 7.24064 10.243ZM7.24011 11.7965L7.23879 11.7969C6.85051 11.9412 6.65269 12.3729 6.79696 12.7612C6.94116 13.1493 7.37306 13.3469 7.76121 13.203C8.01105 13.1136 8.26893 13.0456 8.52676 12.9836C9.03189 12.8623 9.75307 12.7275 10.6068 12.677C12.318 12.5758 14.5214 12.8144 16.5979 14.1331C16.9476 14.3552 17.4111 14.2517 17.6331 13.9021C17.8552 13.5524 17.7517 13.0889 17.4021 12.8669C14.9786 11.3278 12.432 11.0664 10.5182 11.1797C9.55943 11.2364 8.74936 11.3875 8.17636 11.5251C7.86123 11.6008 7.54651 11.6843 7.2419 11.7958L7.24011 11.7965ZM8.24708 16.1038C7.85613 16.24 7.42827 16.0337 7.29187 15.6428C7.15541 15.2517 7.36183 14.824 7.75292 14.6876C8.60177 14.3947 9.50664 14.2708 10.4004 14.2265C11.9342 14.1505 13.9791 14.3679 15.9019 15.5885C16.2516 15.8105 16.3552 16.2739 16.1332 16.6236C15.9112 16.9733 15.4478 17.0769 15.0981 16.8549C13.5209 15.8538 11.8158 15.6582 10.4746 15.7246C9.72314 15.7619 8.96309 15.8652 8.24708 16.1038Z\&quot; fill=\&quot;currentColor\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;Trello&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
4182 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M25.906,3H6.089c-1.707,.002-3.089,1.387-3.089,3.094V25.911c0,1.706,1.383,3.089,3.089,3.089H25.906c1.707,0,3.091-1.383,3.094-3.089V6.094c-.002-1.708-1.386-3.091-3.094-3.094ZM14.197,21.729c.002,.566-.454,1.026-1.02,1.028-.001,0-.003,0-.004,0h-4.348c-.566,0-1.024-.459-1.024-1.024,0-.001,0-.003,0-.004V8.829c-.002-.566,.454-1.026,1.02-1.028,.001,0,.003,0,.004,0h4.348c.566,0,1.024,.459,1.024,1.024,0,.001,0,.003,0,.004v12.9Zm10.002-5.923c0,.568-.46,1.028-1.028,1.028h-4.344c-.568,0-1.028-.46-1.028-1.028v-6.977c0-.568,.46-1.028,1.028-1.028h4.344c.568,0,1.028,.46,1.028,1.028v6.977Z\&quot; fill-rule=\&quot;evenodd\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;},{&quot;title&quot;:&quot;YouTube&quot;,&quot;customIcon&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; class=\&quot;size-4 shrink-0\&quot; width=\&quot;32\&quot; height=\&quot;32\&quot;
4182 viewBox=\&quot;0 0 32 32\&quot;\u003e\u003cg fill=\&quot;currentColor\&quot;\u003e\u003cpath d=\&quot;M31.331,8.248c-.368-1.386-1.452-2.477-2.829-2.848-2.496-.673-12.502-.673-12.502-.673,0,0-10.007,0-12.502,.673-1.377,.37-2.461,1.462-2.829,2.848-.669,2.512-.669,7.752-.669,7.752,0,0,0,5.241,.669,7.752,.368,1.386,1.452,2.477,2.829,2.847,2.496,.673,12.502,.673,12.502,.673,0,0,10.007,0,12.502-.673,1.377-.37,2.461-1.462,2.829-2.847,.669-2.512,.669-7.752,.669-7.752,0,0,0-5.24-.669-7.752ZM12.727,20.758V11.242l8.364,4.758-8.364,4.758Z\&quot;\u003e\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e&quot;,&quot;url&quot;:&quot;javascript:void(0)&quot;}]'>
4183
4184          <div class="relative">
4185            <input id="basic_command_palette"
4186                   autofocus
4187                   required
4188                   data-autocomplete-target="input"
4189                   placeholder="Select a brand..."
4190                   class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4">
4191
4192            <!-- Clear Button -->
4193            <button type="button"
4194                    data-autocomplete-target="clearButton"
4195                    data-action="click->autocomplete#clearInput"
4196                    class="hidden absolute right-2 top-1/2 -translate-y-1/2 items-center justify-center size-8 mr-1 rounded-full hover:bg-neutral-100 transition-colors text-neutral-400 hover:text-neutral-500 dark:hover:bg-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
4196k:focus-visible:outline-neutral-200">
4197              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg>
4198            </button>
4199          </div>
4200
4201          <div data-autocomplete-target="results"
4202              class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto"
4203              role="listbox"
4204              tabindex="-1">
4205          </div>
4206        </form>
4207      </div>
4208
4209      <!-- Footer -->
4210      <div class="hidden sm:flex flex-wrap gap-1 items-center bg-neutral-50 px-4 py-3 text-xs text-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-t border-black/10 dark:border-white/10">
4211        <div class="flex items-center gap-1">
4212          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd>
4213          <span>to close,</span>
4214        </div>
4215        <div class="flex items-center gap-1">
4216          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd>
4217          <span>to select,</span>
4218        </div>
4219        <div class="flex items-center gap-1">
4220          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">
4221            <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.391,8.448L9.398,1.867c-.2-.264-.597-.264-.797,0L3.609,8.448c-.25,.329-.015,.802,.398,.802h2.743v6c0,.552,.448,1,1,1h2.5c.552,0,1-.448,1-1v-6h2.743c.413,0,.648-.473,.398-.802Z"></path></g></svg>
4222          </kbd>
4223          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">
4224            <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.609,9.552l4.993,6.581c.2,.264,.597,.264,.797,0l4.993-6.581c.25-.329,.015-.802-.398-.802h-2.743V2.75c0-.552-.448-1-1-1h-2.5c-.552,0-1,.448-1,1v6h-2.743c-.413,0-.648,.473-.398,.802Z"></path></g></svg>
4225          </kbd>
4226          <span>to navigate.</span>
4227        </div>
4228      </div>
4229    </div>
4230  </dialog>
4231</div>
4232
4233      </div>
4234    </div>
4235  </div>
4236  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/command-palette" data-turbo-frame="_top">
4237    <div class="h-48"></div>
4238    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4239      Command Palette
4240      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4241    </p>
4242    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
4243  </a>
4244</li>
4245
4246                        <li class="relative">
4247  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4248    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4249      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4249k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4250        <span class="text-xs">?</span>
4251      </button>
4252
4253      <template data-popover-target="content">
4254        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4255          <div class="space-y-2">
4256            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4257
4258            <div class="flex items-center gap-1.5 text-xs">
4259              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4260              <span class="flex grow gap-2">Tailwind CSS</span>
4261            </div>
4262
4263            <div class="flex items-center gap-1.5 text-xs">
4264              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4264ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4265                <g class="fill-neutral-800 dark:fill-white">
4266                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4267                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4268                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4269                </g>
4270              </svg>
4271              <span class="flex grow gap-2">Stimulus</span>
4272            </div>
4273          </div>
4274        </div>
4275      </template>
4276    </div>
4277
4278    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4279      <div class="max-w-md mx-auto">
4280  <div data-controller="modal">
4281
4282    <button class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
4282k:focus-visible:outline-neutral-200"
4283            data-action="click->modal#open:prevent">
4284      Create Workspace
4285    </button>
4286
4287    <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full lg:rounded-2xl z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-800 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"
4288            data-modal-target="dialog"
4289            data-action="mousedown->modal#backdropClose">
4290
4291      <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rounded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline">
4292        <button type="button"
4293                data-action="modal#close:prevent"
4294                class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none">
4295          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
4296            <line x1="18" x2="6" y1="6" y2="18"></line>
4297            <line x1="6" x2="18" y1="6" y2="18"></line>
4298          </svg>
4299          <span class="sr-only">Close</span>
4300        </button>
4301
4302        <div class="mb-4">
4303          <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Create Workspace</h2>
4304        </div>
4305
4306        <form data-controller="confirmation"
4307              data-confirmation-confirm-text-value="CREATE">
4308          <div class="mb-6">
4309            <label for="workspace-creation-confirmation" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
4310              Type <span class="inline rounded-md border border-black/10 bg-white px-1 py-0.5 font-mono text-neutral-800 dark:border-white/10 dark:bg-neutral-900 dark:text-neutral-200">CREATE</span> to confirm:
4311            </label>
4312            <input type="text"
4313                   id="workspace-creation-confirmation"
4314                   data-confirmation-target="input"
4315                   class="form-control"
4316                   autocomplete="off"
4317                   placeholder="Type CREATE to confirm"
4318                   autofocus>
4319          </div>
4320
4321          <div class="flex gap-3 justify-end">
4322            <button type="button"
4323                    data-action="click->modal#close:prevent click->confirmation#cancel"
4324                    class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
4325              Cancel
4326            </button>
4327            <button type="button"
4328                    data-confirmation-target="confirmButton"
4329                    data-action="click->confirmation#confirm click->modal#close:prevent"
4330                    disabled
4331                    class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
4332              Create Workspace
4333            </button>
4334          </div>
4335        </form>
4336      </div>
4337    </dialog>
4338  </div>
4339</div>
4340
4341    </div>
4342  </div>
4343  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/confirmation" data-turbo-frame="_top">
4344    <div class="h-48"></div>
4345    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4346      Confirmation
4347      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4348    </p>
4349    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
4350  </a>
4351</li>
4352
4353                        <li class="relative">
4354  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4355    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4356      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4356k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4357        <span class="text-xs">?</span>
4358      </button>
4359
4360      <template data-popover-target="content">
4361        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4362          <div class="space-y-2">
4363            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4364
4365            <div class="flex items-center gap-1.5 text-xs">
4366              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4367              <span class="flex grow gap-2">Tailwind CSS</span>
4368            </div>
4369
4370            <div class="flex items-center gap-1.5 text-xs">
4371              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4371ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4372                <g class="fill-neutral-800 dark:fill-white">
4373                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4374                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4375                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4376                </g>
4377              </svg>
4378              <span class="flex grow gap-2">Stimulus</span>
4379            </div>
4380
4381            <div class="flex items-center gap-1.5 text-xs">
4382              <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c400aafdebbd.webp" />
4383              <span class="flex grow gap-2">Motion.dev</span>
4384            </div>
4385          </div>
4386        </div>
4387      </template>
4388    </div>
4389
4390    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4391      <div class="w-full max-w-xs">
4392        <div class="w-fit mx-auto flex items-center justify-center relative" data-controller="feedback" data-feedback-expanded-value="false" data-feedback-position-value="center" data-feedback-target="container">
4393          <!-- Button -->
4394          <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" data-feedback-target="button" data-action="click->
4394feedback#toggle">
4395            <span class="flex items-center gap-1.5" data-feedback-target="buttonText">
4396              Feedback
4397            </span>
4398          </button>
4399
4400          <!-- Form -->
4401          <div class="absolute hidden h-24 w-48 overflow-hidden rounded-lg border border-black/5 bg-neutral-100 p-1 shadow-xs outline-none dark:border-white/10 dark:bg-neutral-800 dark:shadow-neutral-900/50" data-feedback-target="form">
4402            <form class="relative flex h-full flex-col overflow-hidden rounded-lg border border-[#E6E7E8] bg-white dark:border-neutral-600 dark:bg-neutral-700" data-action="submit->feedback#submit">
4403
4404              <textarea class="small-scrollbar text-xs w-full flex-1 resize-none rounded-t-lg bg-white p-3 text-black placeholder-neutral-500 !outline-none dark:bg-neutral-700 dark:text-neutral-100 dark:placeholder-neutral-400"
4405                        required
4406                        placeholder="Tell us what you think..."
4407                        data-feedback-target="textarea"></textarea>
4408
4409              <div class="absolute bottom-1.5 right-1.5">
4410                <button type="submit" class="ml-auto flex items-center justify-center rounded-md bg-neutral-800 py-1 px-2 text-xs font-medium text-white transition-colors duration-200 hover:bg-neutral-700 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100">
4411                  <span>
4412                    Send
4413                  </span>
4414                </button>
4415              </div>
4416
4417            </form>
4418          </div>
4419        </div>
4420      </div>
4421    </div>
4422  </div>
4423  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/feedback" data-turbo-frame="_top">
4424    <div class="h-48"></div>
4425    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4426      Feedback
4427      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4428    </p>
4429    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 9 components</p>
4430  </a>
4431</li>
4432
4433                        <li class="relative">
4434  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4435    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4436      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4436k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4437        <span class="text-xs">?</span>
4438      </button>
4439
4440      <template data-popover-target="content">
4441        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4442          <div class="space-y-2">
4443            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4444
4445            <div class="flex items-center gap-1.5 text-xs">
4446              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4447              <span class="flex grow gap-2">Tailwind CSS</span>
4448            </div>
4449
4450          </div>
4451        </div>
4452      </template>
4453    </div>
4454
4455    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4456      <div class="max-w-md w-full flex items-center justify-center">
4457        <div class="animate-pulse max-w-md w-full">
4458  <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-full mb-2"></div>
4459  <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2"></div>
4460</div>
4461
4462      </div>
4463    </div>
4464  </div>
4465  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/skeleton" data-turbo-frame="_top">
4466    <div class="h-48"></div>
4467    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4468      Skeleton
4469      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4470    </p>
4471    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
4472  </a>
4473</li>
4474
4475                    </ul>
4476                  </div>
4477                </div>
4478              </div>
4479              <!-- End Col -->
4480            </div>
4481            <!-- End Grid -->
4482          </div>
4483          <!-- End Right Content -->
4484        </div>
4485        <!-- End Item -->
4486
4487        <!-- Item - July 2025 -->
4488        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
4489
4490          <!-- Icon -->
4491          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
4492            <div class="relative z-10 size-6 flex justify-center items-center">
4493              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
4494            </div>
4495          </div>
4496          <!-- End Icon -->
4497
4498          <!-- Right Content -->
4499          <div class="grow pb-8 relative">
4500            <!-- Grid -->
4501            <div class="grid grid-cols-1 gap-6 md:gap-12">
4502              <div>
4503                <div class="space-y-3">
4504                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
4505                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
4506                      July 2025
4507                    </h2>
4508                  </div>
4509                  <p class="text-neutral-500 dark:text-neutral-400">
4510                    In July 2025, I released 12 new component sets:
4511                  </p>
4512                  <div class="my-4">
4513                    <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
4514                        <li class="relative">
4515  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4516    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4517      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4517k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4518        <span class="text-xs">?</span>
4519      </button>
4520
4521      <template data-popover-target="content">
4522        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4523          <div class="space-y-2">
4524            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4525
4526            <div class="flex items-center gap-1.5 text-xs">
4527              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4528              <span class="flex grow gap-2">Tailwind CSS</span>
4529            </div>
4530
4531            <div class="flex items-center gap-1.5 text-xs">
4532              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4532ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4533                <g class="fill-neutral-800 dark:fill-white">
4534                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4535                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4536                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4537                </g>
4538              </svg>
4539              <span class="flex grow gap-2">Stimulus</span>
4540            </div>
4541          </div>
4542        </div>
4543      </template>
4544    </div>
4545
4546    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4547      <div class="w-full max-w-xs">
4548        <textarea
4549          id="autogrow"
4550          rows="2"
4551          class="form-control min-h-16 max-h-32 small-scrollbar"
4552          placeholder="Start typing and watch the textarea grow..."
4553          data-controller="autogrow"
4554          data-action="input->autogrow#autogrow"
4555        ></textarea>
4556      </div>
4557    </div>
4558  </div>
4559  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/autogrow" data-turbo-frame="_top">
4560    <div class="h-48"></div>
4561    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4562      Autogrow
4563      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4564    </p>
4565    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
4566  </a>
4567</li>
4568
4569                        <li class="relative">
4570  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4571    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4572      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4572k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4573        <span class="text-xs">?</span>
4574      </button>
4575
4576      <template data-popover-target="content">
4577        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4578          <div class="space-y-2">
4579            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4580
4581            <div class="flex items-center gap-1.5 text-xs">
4582              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4583              <span class="flex grow gap-2">Tailwind CSS</span>
4584            </div>
4585
4586            <div class="flex items-center gap-1.5 text-xs">
4587              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4587ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4588                <g class="fill-neutral-800 dark:fill-white">
4589                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4590                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4591                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4592                </g>
4593              </svg>
4594              <span class="flex grow gap-2">Stimulus</span>
4595            </div>
4596          </div>
4597        </div>
4598      </template>
4599    </div>
4600
4601    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4602      <div class="flex justify-center w-full whitespace-nowrap">
4603        <ol class="flex justify-center items-center space-x-2 text-sm w-full">
4604          <li>
4605            <a href="javascript:void(0)" class="flex items-center text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
4606              <svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor">
4606<path d="M7.94127 1.36281C8.56694 0.887445 9.4333 0.886569 10.0591 1.36312L15.3088 5.35287C15.7448 5.68398 16 6.20008 16 6.746V14.25C16 15.7692 14.7692 17 13.25 17H10.75V13.251C10.75 12.699 10.302 12.251 9.75 12.251H8.25C7.698 12.251 7.25 12.699 7.25 13.251V17H4.75C3.23079 17 2 15.7692 2 14.25V6.746C2 6.19867 2.2559 5.68346 2.69155 5.3526L7.94127 1.36281Z"></path></g></svg>
4607            </a>
4608          </li>
4609          <li class="flex items-center space-x-2">
4610            <span class="text-neutral-400 dark:text-neutral-600">/</span>
4611
4612            <!-- Dropdown for hidden breadcrumb items -->
4613            <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-placement-value="bottom-start">
4614              <button
4615                class="flex outline-none items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700/50"
4616                data-dropdown-popover-target="button"
4617                data-action="dropdown-popover#toggle"
4618                aria-label="Show more breadcrumb items"
4619              >
4620                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 20 20" fill="currentColor">
4621                  <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
4622                </svg>
4623              </button>
4624
4625              <dialog
4626                class="absolute z-10 w-fit rounded-lg border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100"
4627                data-controller="menu"
4628                data-dropdown-popover-target="menu"
4629                autofocus="false"
4630                data-action="click@document->dropdown-popover#closeOnClickOutside
4631                            close->menu#reset
4632                            keydown.up->menu#prev keydown.down->menu#next
4633                            keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
4634              >
4635                <div class="flex flex-col p-1" role="menu">
4636                  <a href="javascript:void(0)" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1">
4637                    Getting started
4638                  </a>
4639                  <a href="javascript:void(0)" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1">
4640                    Components
4641                  </a>
4642                </div>
4643              </dialog>
4644            </div>
4645          </li>
4646          <li class="flex items-center space-x-2">
4647            <span class="text-neutral-400 dark:text-neutral-600">/</span>
4648            <a href="javascript:void(0)" class="flex items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
4649              <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.75,12h-3.625c-.896,0-1.625-.729-1.625-1.625s.729-1.625,1.625-1.625h7.75c1.723,0,3.125-1.402,3.125-3.125s-1.402-3.125-3.125-3.125H5.25c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.625c.896,0,1.625,.729,1.625,1.625s-.729,1.625-1.625,1.625H5.125c-1.723,0-3.125,1.402-3.125,3.125s1.402,3.125,3.125,3.125h3.625c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"></path><circle cx="13.25" cy="12.75" r="2.75"></circle></g></svg>
4650              <span class="hidden sm:block">Breadcrumb</span>
4651            </a>
4652          </li>
4653        </ol>
4654      </div>
4655
4656    </div>
4657  </div>
4658  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/breadcrumb" data-turbo-frame="_top">
4659    <div class="h-48"></div>
4660    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4661      Breadcrumb
4662      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4663    </p>
4664    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
4665  </a>
4666</li>
4667
4668                        <li class="relative">
4669  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4670    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4671      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4671k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4672        <span class="text-xs">?</span>
4673      </button>
4674
4675      <template data-popover-target="content">
4676        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4677          <div class="space-y-2">
4678            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4679
4680            <div class="flex items-center gap-1.5 text-xs">
4681              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4682              <span class="flex grow gap-2">Tailwind CSS</span>
4683            </div>
4684
4685          </div>
4686        </div>
4687      </template>
4688    </div>
4689
4690    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4691      <div class="flex items-center gap-x-3">
4692        <input type="checkbox" id="checked-checkbox">
4693        <label for="checked-checkbox" class="inline-block select-none">Checkbox input</label>
4694      </div>
4695    </div>
4696  </div>
4697  <a href="/docs/checkbox" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4698    <div class="h-48"></div>
4699    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4700      Checkbox
4701      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4702    </p>
4703    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
4704  </a>
4705</li>
4706
4707                        <li class="relative">
4708  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4709    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4710      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4710k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4711        <span class="text-xs">?</span>
4712      </button>
4713
4714      <template data-popover-target="content">
4715        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4716          <div class="space-y-2">
4717            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4718
4719            <div class="flex items-center gap-1.5 text-xs">
4720              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4721              <span class="flex grow gap-2">Tailwind CSS</span>
4722            </div>
4723
4724            <div class="flex items-center gap-1.5 text-xs">
4725              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4725ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4726                <g class="fill-neutral-800 dark:fill-white">
4727                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4728                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4729                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4730                </g>
4731              </svg>
4732              <span class="flex grow gap-2">Stimulus</span>
4733            </div>
4734          </div>
4735        </div>
4736      </template>
4737    </div>
4738
4739    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4740      <div data-controller="collapsible" data-collapsible-open-value="false" data-state="closed" class="w-[350px] space-y-2">
4741        <!-- Header with toggle button -->
4742        <div class="flex items-center justify-between space-x-4">
4743          <h4 class="text-xs font-semibold">You starred 2 repositories</h4>
4744
4745          <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-1.5 -sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200" data-action="click->
4745collapsible#toggle">
4746            <!-- Collapsed state icon (visible by default) -->
4747
4748            <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute transition-opacity duration-200 ease-in-out size-3.5" style="opacity: 0;">
4749              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
4750                <polyline points="12.5 6.25 9 2.75 5.5 6.25"></polyline>
4751                <polyline points="12.5 11.75 9 15.25 5.5 11.75"></polyline>
4752              </g>
4753            </svg>
4754
4755            <!-- Expanded state icon (hidden by default) -->
4756            <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="transition-opacity duration-200 ease-in-out size-3.5" style="opacity: 0;">
4757              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
4758                <polyline points="5.5 3.5 9 7 12.5 3.5"></polyline>
4759                <polyline points="5.5 14.5 9 11 12.5 14.5"></polyline>
4760              </g>
4761            </svg>
4762
4763            <span class="sr-only">Toggle</span>
4764          </button>
4765        </div>
4766
4767        <!-- Always visible content -->
4768        <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-3 py-2 font-mono text-xs">rails/rails</div>
4769
4770        <!-- Collapsible content -->
4771        <div data-collapsible-target="content" data-state="closed" class="space-y-2 overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0; opacity: 0;">
4772          <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-3 py-2 font-mono text-xs">hotwired/stimulus</div>
4773        </div>
4774      </div>
4775    </div>
4776  </div>
4777  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/collapsible" data-turbo-frame="_top">
4778    <div class="h-48"></div>
4779    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4780      Collapsible
4781      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4782    </p>
4783    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p>
4784  </a>
4785</li>
4786
4787                        <li class="relative">
4788    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
4789    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
4790      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
4791        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
47916,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
4792        Pro
4793      </a>
4794    </div>
4795  </div>
4796
4797  <div class="pointer-events-none absolute inset-0 top-0 left-0">
4798    <div class="pointer-events-auto absolute top-4 right-4 z-10 inline-block" data-controller="popover">
4799      <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm leading-5 font-semibold text-neutral-800 hover:text-neutral-900 focus:outline-offset-2 focus:outline-neutral-500 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
4800        <span class="text-xs">?</span>
4801      </button>
4802
4803      <template data-popover-target="content">
4804        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4805          <div class="space-y-2">
4806            <div class="w-full text-center text-xs font-semibold">Dependencies</div>
4807
4808            <div class="flex items-center gap-1.5 text-xs">
4809              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4810              <span class="flex grow gap-2">Tailwind CSS</span>
4811            </div>
4812
4813            <div class="flex items-center gap-1.5 text-xs">
4814              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4814ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4815                <g class="fill-neutral-800 dark:fill-white">
4816                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4817                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4818                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4819                </g>
4820              </svg>
4821              <span class="flex grow gap-2">Stimulus</span>
4822            </div>
4823          </div>
4824        </div>
4825      </template>
4826    </div>
4827
4828    <div class="pointer-events-auto relative flex h-48 items-center justify-center rounded-t-xl border border-black/10 bg-white p-8 md:p-10 dark:border-white/20 dark:bg-black/80">
4829      <div id="drawer-preview" class="group">
4830        <a class="hidden p-1 align-middle group-hover:inline-block" href="#drawer-preview">
4831          <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500" viewBox="0 0 24 24" fill="currentColor">
4832            <path fill-rule="evenodd" d="M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z" clip-rule="evenodd"></path>
4833          </svg>
4834        </a>
4835      </div>
4836      <div class="not-prose">
4837        <div data-controller="drawer" data-drawer-snap-points-value='["auto"]'>
4838          <button data-action="drawer#show:prevent" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Open Drawer</button>
4839
4840          <dialog data-drawer-target="dialog" data-action="mousedown->drawer#backdropClose" class="drawer mx-auto w-full max-w-2xl border-x border-t border-black/10 dark:border-white/10">
4841            <div class="rounded-t-xl bg-white dark:bg-neutral-800">
4842              <div data-drawer-target="handle" class="cursor-grab select-none active:cursor-grabbing group">
4843                <div class="flex h-8 w-full items-center justify-center">
4844                  <div class="mx-auto my-4 h-1.5 w-10 rounded-full bg-neutral-200 group-hover:bg-neutral-300 group-active:bg-neutral-400 dark:bg-neutral-700 dark:group-hover:bg-neutral-600 dar
4844k:group-active:bg-neutral-500"></div>
4845                </div>
4846
4847                <div class="border-b border-neutral-200 px-6 pb-4 dark:border-neutral-700">
4848                  <h2 class="text-xl font-semibold text-neutral-900 dark:text-white">Drawer Example</h2>
4849                </div>
4850              </div>
4851
4852              <div class="px-6 pt-4 pb-6">
4853                <div class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-neutral-200 p-5 dark:border-neutral-700/75">
4854                  <p class="text-sm text-neutral-600 dark:text-neutral-400">Drag down to dismiss or click the button below</p>
4855                </div>
4856                <div class="mt-4 flex gap-2">
4857                  <button data-action="drawer#hide:prevent" type="button" class="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Close Drawer</button>
4858                </div>
4859              </div>
4860            </div>
4861          </dialog>
4862        </div>
4863      </div>
4864    </div>
4865  </div>
4866  <a href="/docs/drawer" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-offset-2 focus:outline-neutral-500 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200">
4867    <div class="h-48"></div>
4868    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
4869      Drawer
4870      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4871    </p>
4872    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 8 components</p>
4873  </a>
4874</li>
4875
4876                        <li class="relative">
4877  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4878    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4879      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4879k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4880        <span class="text-xs">?</span>
4881      </button>
4882
4883      <template data-popover-target="content">
4884        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4885          <div class="space-y-2">
4886            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4887
4888            <div class="flex items-center gap-1.5 text-xs">
4889              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4890              <span class="flex grow gap-2">Tailwind CSS</span>
4891            </div>
4892
4893            <div class="flex items-center gap-1.5 text-xs">
4894              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4894ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4895                <g class="fill-neutral-800 dark:fill-white">
4896                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4897                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4898                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4899                </g>
4900              </svg>
4901              <span class="flex grow gap-2">Stimulus</span>
4902            </div>
4903          </div>
4904        </div>
4905      </template>
4906    </div>
4907
4908    <div data-controller="os-detect" class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4909      <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
4910        data-controller="tooltip hotkey"
4911        data-tooltip-content="Action performed!"
4912        data-tooltip-placement-value="top"
4913        data-tooltip-trigger-value="focus"
4914        data-action="keydown.meta+shift+o@document->hotkey#click keydown.ctrl+shift+o@document->hotkey#click">
4915        <kbd data-os-detect-target="mac" class="hidden">⌘</kbd>
4916        <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd>
4917        <span>+</span>
4918        <kbd>Shift</kbd>
4919        <span>+</span>
4920        <kbd>O</kbd>
4921      </button>
4922    </div>
4923  </div>
4924  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/kbd" data-turbo-frame="_top">
4925    <div class="h-48"></div>
4926    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4927      KBD & Hotkey
4928      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4929    </p>
4930    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
4931  </a>
4932</li>
4933
4934                        <li class="relative">
4935  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4936    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4937      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4937k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4938        <span class="text-xs">?</span>
4939      </button>
4940
4941      <template data-popover-target="content">
4942        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4943          <div class="space-y-2">
4944            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4945
4946            <div class="flex items-center gap-1.5 text-xs">
4947              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4948              <span class="flex grow gap-2">Tailwind CSS</span>
4949            </div>
4950
4951            <div class="flex items-center gap-1.5 text-xs">
4952              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4952ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4953                <g class="fill-neutral-800 dark:fill-white">
4954                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4955                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4956                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4957                </g>
4958              </svg>
4959              <span class="flex grow gap-2">Stimulus</span>
4960            </div>
4961
4962            <div class="flex items-center gap-1.5 text-xs">
4963              <img alt="PhotoSwipe" class="size-3.5 rounded-sm" src="/assets/photoswipe-logo-b3e92230fc472dfc24be0c4c595b1988efbbfdc9db889d7e9e9fc4f02c5c41c6.webp" />
4964              <span class="flex grow gap-2">PhotoSwipe</span>
4965            </div>
4966          </div>
4967        </div>
4968      </template>
4969    </div>
4970
4971    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-14 md:py-16 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4972      <div data-controller="lightbox" data-lightbox-target="gallery" class="max-w-[150px] flex gap-2 flex-wrap justify-center">
4973        <!-- First 3 visible thumbnails -->
4974        <a href="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe"
4975          data-pswp-src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe"
4976          data-pswp-caption="new-background-v2.png"
4977          class="group relative">
4978          <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400"
4979              alt="Thumbnail 1"
4980              class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all">
4981        </a>
4982
4983        <a href="https://images.unsplash.com/photo-1611162617474-5b21e879e113"
4984          data-pswp-src="https://images.unsplash.com/photo-1611162617474-5b21e879e113"
4985          data-pswp-caption="netflix-logo.png"
4986          class="group relative">
4987          <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=400"
4988              alt="Thumbnail 2"
4989              class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all">
4990        </a>
4991
4992        <a href="https://images.unsplash.com/photo-1551650975-87deedd944c3"
4993          data-pswp-src="https://images.unsplash.com/photo-1551650975-87deedd944c3"
4994          data-pswp-caption="mobile-responsive.png"
4995          class="group relative">
4996          <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=400"
4997              alt="Thumbnail 3"
4998              class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all">
4999        </a>
5000
5001        <!-- +2 more indicator -->
5002        <a href="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900"
5003          data-pswp-src="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900"
5004          data-pswp-caption="dashboard-analytics.jpg"
5005          class="group relative cursor-pointer">
5006          <div class="size-12 rounded bg-neutral-100 dark:bg-neutral-800 ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all flex items-center justify-center">
5007            <span class="text-base font-medium text-neutral-600 dar
5007k:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">+2</span>
5008          </div>
5009        </a>
5010
5011        <!-- Hidden last image -->
5012        <a href="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900"
5013          data-pswp-src="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900"
5014          data-pswp-caption="person-typing.png"
5015          class="hidden">
5016        </a>
5017      </div>
5018    </div>
5019  </div>
5020  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/lightbox" data-turbo-frame="_top">
5021    <div class="h-48"></div>
5022    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5023      Lightbox
5024      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5025    </p>
5026    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
5027  </a>
5028</li>
5029
5030                        <li class="relative">
5031  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5032    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5033      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5033k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5034        <span class="text-xs">?</span>
5035      </button>
5036
5037      <template data-popover-target="content">
5038        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5039          <div class="space-y-2">
5040            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5041
5042            <div class="flex items-center gap-1.5 text-xs">
5043              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5044              <span class="flex grow gap-2">Tailwind CSS</span>
5045            </div>
5046
5047            <div class="flex items-center gap-1.5 text-xs">
5048              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5048ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5049                <g class="fill-neutral-800 dark:fill-white">
5050                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5051                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5052                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5053                </g>
5054              </svg>
5055              <span class="flex grow gap-2">Stimulus</span>
5056            </div>
5057          </div>
5058        </div>
5059      </template>
5060    </div>
5061
5062    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center overflow-hidden">
5063      <div class="w-full">
5064        <div
5065          data-controller="marquee"
5066          data-marquee-speed-value="15"
5067          class="relative overflow-hidden bg-transparent py-4 [--marquee-fade-size:1.25rem] [mask-image:linear-gradient(to_right,transparent,black_var(--marquee-fade-size),black_calc(100%-var(--marquee-fade-size)),transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_var(--marquee-fade-size),black_calc(100%-var(--marquee-fade-size)),transparent)]"
5068          data-action="mouseenter->marquee#pauseAnimation mouseleave->marquee#resumeAnimation"
5069        >
5070          <div data-marquee-target="track" class="relative flex w-full">
5071            <div data-marquee-target="list" class="flex w-full shrink-0 flex-nowrap items-center justify-around ga
5071p-8">
5072              <div class="flex items-center space-x-2">
5073                <svg xmlns="http://www.w3.org/2000/svg" fill="#d30001" viewBox="0 0 235 155" class="h-5">
5074                  <g>
5075                    <path d="M180 17.8c-.9-.5-3.4-1.7-9.7-3.5l-.4 6.6c3.3 1.1 6.5 2.3 9.7 3.6l.4-6.7Z"></path>
5076                    <path d="M124.9 18.9c-29.2 2.6-65 29.1-86 64.1S15 147.6 15 147.6h79s-15.1-68.9 34.9-96.8c10.9-5.3 45.6-25.1 102.4 16.9 1.8-1.5 3.5-2.7 3.5-2.7s-52-51.9-109.9-46.1Z"></path>
5077                    <path d="m54.7 54.7-7.1-6.2c-2.6 2.5-5.1 5-7.4 7.5l7.7 6.6c2.1-2.7 4.4-5.4 6.8-7.9Z"></path>
5078                    <path d="M92.5 25 88 18.1c-2.5 1.3-5.1 2.7-7.8 4.3l4.6 7c2.6-1.6 5.1-3.1 7.7-4.4Z"></path>
5079                    <path d="M24.5 99.4 13 95.2c-1.9 4.3-4 9.3-5 12l11.5 4.2c1.3-3.4 3.4-8.3 5-12Z"></path>
5080                    <path d="M133.1 14.5h1l-2-6.1c-3.1 0-6.3.2-9.6.6l1.9 5.9c2.9-.3 5.8-.4 8.7-.4Z"></path>
5081                    <path d="M97 127.6c.2 5.3.7 9.6 1.2 12.6l12 4.3c-.9-3.9-1.8-8.3-2.4-13L97 127.6Z"></path>
5082                    <path d="m137.9 51.3 2.3 6.9c2.9-1.4 5.8-2.6 8.7-3.5l-2.2-6.6c-3.4 1-6.3 2.1-8.8 3.2Z"></path>
5083                    <path d="M169.7 52c3.3.1 6.6.5 9.9 1.2l.4-6.2c-3.4-.7-6.7-1.1-9.9-1.3l-.4 6.3Z"></path>
5084                    <path d="M101.5 91.2c-1.3 3.7-2.2 7.4-3 11l8.1 6.4c.4-3.9 1.1-7.8 2.1-11.7l-7.2-5.7Z"></path>
5085                    <path d="m113 70 4.8 7.2c1.7-2.5 3.7-4.8 5.9-7.1l-4.5-6.8c-2.3 2.1-4.4 4.4-6.2 6.7Z"></path>
5086                  </g>
5087                </svg>
5088                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Ruby on Rails</span>
5089              </div>
5090              <div class="flex items-center space-x-2">
5091                <svg class="size-4 rounded-sm" width="60" height="60" viewB
5091ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5092                  <g class="fill-neutral-800 dark:fill-white">
5093                    <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5094                    <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5095                    <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5096                  </g>
5097                </svg>
5098                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Stimulus</span>
5099              </div>
5100              <div class="flex items-center space-x-2">
5101                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="h-5"><path fill="#23B2E7" fill-rule="evenodd" d="M10 5Q6 5 5 8.334q1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C11.386 9.041 12.522 10 15 10q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C13.614 5.96 12.479 5 10 5m-5 5q-4 0-5 3.334 1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C6.386 14.041 7.521 15 10 15q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C8.614 10.96 7.478 10 5 10" clip-rule="evenodd"></path></svg>
5102                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Tailwind CSS</span>
5103              </div>
5104              <div class="flex items-center space-x-2">
5105                <img class="size-5" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" />
5106                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Rails Blocks</span>
5107              </div>
5108            </div>
5109          </div>
5110        </div>
5111      </div>
5112    </div>
5113  </div>
5114  <a href="/docs/marquee" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5115    <div class="h-48"></div>
5116    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5117      Marquee
5118      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5119    </p>
5120    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
5121  </a>
5122</li>
5123
5124                        <li class="relative">
5125  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5126    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5127      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5127k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5128        <span class="text-xs">?</span>
5129      </button>
5130
5131      <template data-popover-target="content">
5132        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5133          <div class="space-y-2">
5134            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5135
5136            <div class="flex items-center gap-1.5 text-xs">
5137              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5138              <span class="flex grow gap-2">Tailwind CSS</span>
5139            </div>
5140
5141            <div class="flex items-center gap-1.5 text-xs">
5142              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5142ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5143                <g class="fill-neutral-800 dark:fill-white">
5144                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5145                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5146                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5147                </g>
5148              </svg>
5149              <span class="flex grow gap-2">Stimulus</span>
5150            </div>
5151          </div>
5152        </div>
5153      </template>
5154    </div>
5155
5156    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5157      <div class="w-full max-w-sm">
5158        <div class="relative" data-controller="password">
5159          <input type="password"
5160                 id="preview_password"
5161                 name="password"
5162                 class="form-control !pr-12"
5163                 placeholder="Enter your password"
5164                 value="SecurePass123!"
5165                 data-password-target="input">
5166          <button type="button"
5167                  class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors"
5168                  data-action="click->
5168password#toggle"
5169                  aria-label="Toggle password visibility">
5170            <span data-password-target="toggleIcon">
5171              <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 11.75C10.5188 11.75 11.75 10.5188 11.75 9C11.75 7.48122 10.5188 6.25 9 6.25C7.48122 6.25 6.25 7.48122 6.25 9C6.25 10.5188 7.48122 11.75 9 11.75Z"></path> <path d="M15.9557 7.88669C16.3481 8.57939 16.3481 9.42049 15.9557 10.1132C15.0087 11.7849 12.7944 14.4999 9 14.4999C5.2056 14.4999 2.9912 11.7849 2.0443 10.1132C1.6519 9.42049 1.6519 8.57939 2.0443 7.88669C2.9913 6.21499 5.2056 3.5 9 3.5C12.7944 3.5 15.0088 6.21499 15.9557 7.88669Z"></path></g></svg>
5172            </span>
5173          </button>
5174        </div>
5175      </div>
5176    </div>
5177  </div>
5178  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/password" data-turbo-frame="_top">
5179    <div class="h-48"></div>
5180    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5181      Password
5182      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5183    </p>
5184    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
5185  </a>
5186</li>
5187
5188                        <li class="relative">
5189  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5190    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5191      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5191k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5192        <span class="text-xs">?</span>
5193      </button>
5194
5195      <template data-popover-target="content">
5196        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5197          <div class="space-y-2">
5198            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5199
5200            <div class="flex items-center gap-1.5 text-xs">
5201              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5202              <span class="flex grow gap-2">Tailwind CSS</span>
5203            </div>
5204
5205          </div>
5206        </div>
5207      </template>
5208    </div>
5209
5210    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5211      <div class="flex items-center gap-x-3">
5212        <input name="radio" type="radio" id="checked-radio">
5213        <label for="checked-radio" class="inline-block select-none">Radio input</label>
5214      </div>
5215    </div>
5216  </div>
5217  <a href="/docs/radio" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5218    <div class="h-48"></div>
5219    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5220      Radio
5221      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5222    </p>
5223    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
5224  </a>
5225</li>
5226
5227                        <li class="relative">
5228  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5229    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5230      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5230k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5231        <span class="text-xs">?</span>
5232      </button>
5233
5234      <template data-popover-target="content">
5235        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5236          <div class="space-y-2">
5237            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5238
5239            <div class="flex items-center gap-1.5 text-xs">
5240              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5241              <span class="flex grow gap-2">Tailwind CSS</span>
5242            </div>
5243
5244          </div>
5245        </div>
5246      </template>
5247    </div>
5248
5249    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5250      <label class="group flex items-center cursor-pointer">
5251        <div class="relative">
5252          <input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch">
5253          <!-- Background element -->
5254          <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dar
5254k:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div>
5255          <!-- Round element with icons inside -->
5256          <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800">
5257            <!-- X icon for unchecked state -->
5258            <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0 dark:text-neutral-500" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g></svg>
5259            <!-- Checkmark icon for checked state -->
5260            <svg xmlns="http://www.w3.org/2000/svg" class="absolute size-4 text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100 dark:text-neutral-100" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline></g></svg>
5261          </div>
5262        </div>
5263      </label>
5264    </div>
5265  </div>
5266  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/switch" data-turbo-frame="_top">
5267    <div class="h-48"></div>
5268    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5269      Switch
5270      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5271    </p>
5272    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
5273  </a>
5274</li>
5275
5276                        <li class="relative">
5277  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5278    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5279      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5279k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5280        <span class="text-xs">?</span>
5281      </button>
5282
5283      <template data-popover-target="content">
5284        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5285          <div class="space-y-2">
5286            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5287
5288            <div class="flex items-center gap-1.5 text-xs">
5289              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5290              <span class="flex grow gap-2">Tailwind CSS</span>
5291            </div>
5292
5293          </div>
5294        </div>
5295      </template>
5296    </div>
5297
5298    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5299      <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-4 text-center">
5300        <!-- Star Rating -->
5301        <div class="flex justify-center mb-2">
5302          <div class="flex items-center space-x-1">
5303            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
5304              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
5305            </svg>
5306            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
5307              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
5308            </svg>
5309            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
5310              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
5311            </svg>
5312            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
5313              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
5314            </svg>
5315            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
5316              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
5317            </svg>
5318          </div>
5319        </div>
5320
5321        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300 mb-2">
5322          "Outstanding quality!"
5323        </blockquote>
5324
5325        <footer>
5326          <div class="flex items-center justify-center">
5327            <img class="size-8 rounded-full object-cover shrink-0" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" alt="Michael Rodriguez">
5328            <div class="ml-3 text-left">
5329              <div class="text-sm font-semibold text-neutral-900 dark:text-white truncate">Michael Rodriguez</div>
5330              <div class="text-xs text-neutral-500 dark:text-neutral-400 truncate">Verified Customer</div>
5331            </div>
5332          </div>
5333        </footer>
5334      </div>
5335    </div>
5336  </div>
5337  <a href="/docs/testimonial" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5338    <div class="h-48"></div>
5339    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5340      Testimonial
5341      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5342    </p>
5343    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p>
5344  </a>
5345</li>
5346
5347                    </ul>
5348                  </div>
5349                </div>
5350              </div>
5351              <!-- End Col -->
5352            </div>
5353            <!-- End Grid -->
5354          </div>
5355          <!-- End Right Content -->
5356        </div>
5357        <!-- End Item -->
5358
5359        <!-- Item - First half of 2025 -->
5360        <div class="relative flex gap-x-3 sm:gap-x-5 md:gap-x-8">
5361
5362          <!-- Icon -->
5363          <div class="hidden md:block relative after:absolute after:top-7 after:bottom-1 after:start-3 after:w-px after:-translate-x-[0.5px] after:bg-neutral-300 dark:after:bg-neutral-600">
5364            <div class="relative z-10 size-6 flex justify-center items-center">
5365              <div class="size-2 rounded-full bg-neutral-800 dark:bg-neutral-200"></div>
5366            </div>
5367          </div>
5368          <!-- End Icon -->
5369
5370          <!-- Right Content -->
5371          <div class="grow pb-8">
5372            <!-- Grid -->
5373            <div class="grid grid-cols-1 gap-6 md:gap-12">
5374              <div>
5375                <div class="space-y-3">
5376                  <div class="sticky top-[3.5rem] -mx-4 px-4 -mt-1.5 z-40 bg-[#FCFBF9]/50 dark:bg-[#111111]/50 py-2 border-b border-black/10 dark:border-white/10 backdrop-blur-md">
5377                    <h2 class="font-mono text-neutral-800 dark:text-neutral-200">
5378                      First half of 2025
5379                    </h2>
5380                  </div>
5381                  <p class="text-neutral-500 dark:text-neutral-400">
5382                    During the first half of 2025, I built the initial version of Rails Blocks. It launched with 20 components after months of work.
5383                  </p>
5384                </div>
5385              </div>
5386              <!-- End Col -->
5387            </div>
5388            <!-- End Grid -->
5389          </div>
5390          <!-- End Right Content -->
5391        </div>
5392        <!-- End Item -->
5393      </div>
5394      <!-- End Timeline -->
5395    </div>
5396  </div>
5397
5398  <div class="relative mt-24">
5399  <div class="mx-auto">
5400    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
5401      <div data-controller="newsletter"
5402           class="max-w-xs">
5403        <div data-newsletter-target="form">
5404          <form data-action="submit->newsletter#submit"
5405                class="space-y-3">
5406            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
5407            <input type="email"
5408                  data-newsletter-target="email"
5409                  placeholder="Enter your email..."
5410                  class="form-control"
5411                  
5412                  required>
5413            <div class="flex justify-center">
5414              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
5415            </div>
5416            <button type="submit"
5417                    data-newsletter-target="submitButton"
5418                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
5419              Subscribe to the newsletter
5420            </button>
5421          </form>
5422          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
5423            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
5424          </div>
5425        </div>
5426
5427        <div data-newsletter-target="successMessage"
5428             class="text-center py-4"
5429             style="display: none;">
5430          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
5431            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5432              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
5433            </svg>
5434          </div>
5435          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
5436          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
5437        </div>
5438      </div>
5439    </div>
5440  </div>
5441</div>
5442
5443  <div class="mt-4 flex justify-center">
5444    <a href="/feeds/documentation.xml" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
5445      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></g></svg>
5446      Subscribe via RSS
5447    </a>
5448  </div>
5449</div>
5450
5451    </main>
5452    
5453<div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div>
5454
5455<footer class="mt-24 bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700">
5456  <div class="max-w-5xl mx-auto w-full pb-8 pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8">
5457
5458    <!-- Grid -->
5459    <div class="flex flex-col justify-between md:flex-row gap-5 mb-14">
5460
5461      <div>
5462        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Popular Components</h4>
5463
5464        <ul class="grid space-y-2">
5465          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/combobox">Combobox</a></li>
5466          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/toast">Toast</a></li>
5467          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/sidebar">Sidebar</a></li>
5468          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/datatable">Datatable</a></li>
5469        </ul>
5470      </div>
5471      <!-- End Col -->
5472
5473      <div>
5474        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Company</h4>
5475
5476        <ul class="grid space-y-2">
5477          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/changelog">Changelog</a></li>
5478            <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/themes">Themes</a></li>
5479          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" target="_blank" href="https://railsblocks.featurebase.app/roadmap">Roadmap</a></li>
5480          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focu
5480s:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/authors-note">About</a></li>
5481          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://github.com/Rails-Blocks/components" target="_blank">Open Source</a></li>
5482          <li><a class="hidden text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/blog">Blog</a></li>
5483        </ul>
5484      </div>
5485      <!-- End Col -->
5486
5487      <div>
5488        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Pricing</h4>
5489
5490        <ul class="grid space-y-2">
5491          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/pro">Pro Access</a></li>
5492          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/discount">Student Discount</a></li>
5493        </ul>
5494      </div>
5495      <!-- End Col -->
5496
5497      <div>
5498        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Legal</h4>
5499
5500        <ul class="grid space-y-2">
5501          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/terms">Terms</a></li>
5502          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/privacy">Privacy</a></li>
5503          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/license">License</a></li>
5504        </ul>
5505      </div>
5506      <!-- End Col -->
5507    </div>
5508
5509    <div class="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800">
5510      <div class="flex flex-col md:flex-row-reverse md:justify-between md:items-center gap-6 items-center text-center md:text-left">
5511
5512        <nav class="flex flex-col sm:flex-row items-center gap-3">
5513          <div class="flex items-center">
5514            <div class="text-sm group relative bg-neutral-50 text-neutral-700 border border-neutral-200 px-2.5 py-1.5 rounded-md dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-100">
5515              <div class="absolute w-full pr-8 pointer-events-none opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out transform -translate-y-6 group-hover:-translate-y-8">
5516                <img class="rounded-full mx-auto size-8" alt="Sandu" src="/assets/founder-avatar-da341a93ca736fdd7217be943b75af4bdf1bf0c14ee149b5f11324eb98a5c6dc.webp" />
5517              </div>
5518              Built by
5519              <a href="https://alexglv.com" target="_blank" class="text-neutral-700 hover:opacity-80 transition font-semibold dark:text-neutral-50 hover:text-neutral-800 dark:hover:text-neutral-50">
5520                Sandu
5521              </a>
5522              in Paris 🥐
5523            </div>
5524          </div>
5525
5526          <div class="flex items-center gap-3">
5527            <a href="https://x.com/alexandruglv" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my 𝕏 account" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on X (formerly Twitter)">
5528              <span class="sr-only">Follow Sandu on X (formerly Twitter)</span>
5529              <svg class="inline-block size-5 pb-0.5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
5530                <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z">
5531              </svg>
5532            </a>
5533            <a href="https://www.youtube.com/channel/UCNRPTZcDwaEkoPQsLURm6WQ" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my YouTube channel" data-tooltip-delay-value="500" target="_blank" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on YouTube">
5534              <span class="sr-only">Follow Sandu on YouTube</span>
5535              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z"></path><circle cx="9" cy="9" r="7.25"></circle></g></svg>
5536            </a>
5537            <a class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Send me an email" data-tooltip-delay-value="500" href="mailto:[email protected]" aria-label="Send me an email">
5538              <span class="sr-only">Send me an email</span>
5539              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733"></path><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
5540            </a>
5541            <a href="/feeds/documentation.xml" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Subscribe to RSS feed" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="RSS Feed">
5542              <span class="sr-only">RSS Feed</span>
5543              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.5 3.5a11 11 0 0 1 11 11M3.5 7.5a7 7 0 0 1 7 7M4.5 13.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path></g></svg>
5544            </a>
5545          </div>
5546        </nav>
5547
5548        <div class="text-sm text-neutral-600 dark:text-neutral-400">
5549          © 2026 Rails Blocks
5550        </div>
5551      </div>
5552    </div>
5553    <!-- End Grid -->
5554  </div>
5555</footer>
5556
5557  
5557<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"dd73a264958e4d48a84300a88963d377","r":1,"spa":2}' crossorigin="anonymous"></script>
5557
5558</body>
5559</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.