PageSourceSearch

https://railsblocks.com/

html railsblocks.com collected 2026-09-25 20:22:04 UTC 823,618 bytes, 6,657 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 | Ruby on Rails UI components using Tailwind CSS and Stimulus</title>
5<meta name="description" content="Ruby on Rails UI components built with Stimulus and Tailwind CSS, simply copy and paste the RoR code into your app or use our CLI &amp; MCP server." />
6<meta name="keywords" content="rails, ui, components, free, stimulus, controllers, ruby on rails, rails blocks, rails blocks ui, rails blocks components, rails blocks ui components, rails blocks free, rails blocks pro, rails blocks pro ui, rails blocks pro ui components, rails blocks pro ui components free" />
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8    <meta charset="utf-8">
9
10    <!-- Theme initialization script to prevent FOUC -->
11    
11<script>
12      (function() {
13        function selectedPalette() {
14          const storedMode = localStorage.getItem("theme");
15
16          if (storedMode === "light" || storedMode === "dark") return storedMode;
17
18          return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
19        }
20
21        function paintTheme(root) {
22          const palette = selectedPalette();
23          const dark = palette === "dark";
24
25          root.classList.toggle("dark", dark);
26          root.classList.toggle("sl-theme-dark", dark);
27          root.style.colorScheme = palette;
28          root.dataset.theme = palette;
29        }
30
31        paintTheme(document.documentElement);
32
33        document.addEventListener("turbo:before-render", function(event) {
34          paintTheme(event.detail.newBody.ownerDocument.documentElement);
35        });
36
37        document.addEventListener("turbo:render", function() {
38          paintTheme(document.documentElement);
39        });
40
41        document.addEventListener("turbo:load", function() {
42          paintTheme(document.documentElement);
43        });
44      })();
45    </script>
45
46
47    <!-- SEO Meta Tags -->
48    <meta name="author" content="Rails Blocks">
49    <meta name="robots" content="index, follow">
50
51    <!-- Open Graph / Facebook -->
52    <meta property="og:type" content="website">
53    <meta property="og:url" content="https://railsblocks.com/">
54    <meta property="og:title" content="Rails Blocks - Rails UI Components using Tailwind CSS and Stimulus">
55    <meta property="og:description" content="Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &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/">
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/">
67
68    <!-- RSS Feed -->
69    <link rel="alternate" type="application/rss+xml" title="Rails Blocks - Component Updates" href="https://railsblocks.com/feeds/documentation.xml">
70
71    <meta name="csrf-param" content="authenticity_token" />
72<meta name="csrf-token" content="lWJ_m4ouELxvnwHm2P0nwImWsLXEXLXlXJrPzq28yS1ExrDz1eXWNSt-77MPTI8AWFD0aQbAwiJVU-zCfKUZog" />
73    
74
75    <!-- Inter font stylesheet -->
76    <link rel="preconnect" href="https://rsms.me" crossorigin>
77    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" crossorigin="anonymous">
78
79    <!-- Preload Quincy font to prevent FOUT -->
80    <link rel="preload" href="/QuincyCF-Bold.woff" as="font" type="font/woff" crossorigin>
81
82    <!-- Geist Mono for code blocks (shadcn style) -->
83    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.min.css">
84
85    <!-- Air Datepicker CSS -->
86    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css">
87
88    <!-- PhotoSwipe CSS -->
89    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.css">
90
91    <!--  -->
92    <link rel="stylesheet" href="/assets/application-4e2eb78ae7afb82739067fcdf95589ec6529fc31571e977ee8fc82478ac9c706.css" />
93    
93<script type="importmap" data-turbo-track="reload">{
94  "imports": {
95    "application": "/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js",
96    "@hotwired/stimulus": "/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js",
97    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
98    "@hotwired/turbo-rails": "/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js",
99    "@rails/actioncable": "/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js",
100    "chartkick": "/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js",
101    "Chart.bundle": "/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js",
102    "@rails/activestorage": "/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js",
103    "@activeadmin/activeadmin": "https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js",
104    "@rails/ujs": "https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js",
105    "motion": "https://cdn.jsdelivr.net/npm/motion@latest/+esm",
106    "tom-select": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
107    "tailwindcss-stimulus-components": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
108    "@rails/request.js": "https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm",
109    "number-flow": "https://esm.sh/number-flow",
110    "number-flow/group": "https://esm.sh/number-flow/group",
111    "air-datepicker": "https://esm.sh/[email protected]",
112    "air-datepicker/locale/en": "https://esm.sh/[email protected]/locale/en",
113    "embla-carousel": "https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm",
114    "embla-carousel-wheel-gestures": "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm",
115    "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm",
116    "emoji-mart": "https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js",
117    "@emoji-mart/data": "https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm",
118    "posthog-js": "https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm",
119    "photoswipe": "https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js",
120    "prism": "/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js",
121    "lexxy_extensions": "/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js",
122    "lucide_callout_icons": "/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js",
123    "controllers/accordion_controller": "/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js",
124    "controllers/activity_stats_controller": "/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js",
125    "controllers/analytics_controller": "/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js",
126    "controllers/animated_number_controller": "/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js",
127    "controllers/animated_number_controller_basic": "/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js",
128    "controllers/application": "/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js",
129    "controllers/autocomplete_controller": "/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js",
130    "controllers/autocomplete_fuzzy_search_controller": "/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js",
131    "controllers/autocomplete_navigation_controller": "/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js",
132    "controllers/autocomplete_recent_searches_controller": "/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js",
133    "controllers/autogrow_controller": "/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js",
134    "controllers/autosubmit_controller": "/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js",
135    "controllers/banner_controller": "/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js",
136    "controllers/black_hole_background_controller": "/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js",
137    "controllers/carousel_controller": "/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js",
138    "controllers/checkbox_select_all_controller": "/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js",
139    "controllers/clickable_animated_number_controller": "/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js",
140    "controllers/clipboard_controller": "/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js",
141    "controllers/code_filter_controller": "/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js",
142    "controllers/collapsible_controller": "/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js",
143    "controllers/component_search_controller": "/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js",
144    "controllers/conditional_field_controller": "/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js",
145    "controllers/confirmation_controller": "/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js",
146    "controllers/context_menu_controller": "/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js",
147    "controllers/datatable_controller": "/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js",
148    "controllers/datatable_preview_controller": "/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js",
149    "controllers/date_picker_controller": "/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js",
150    "controllers/dock_controller": "/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js",
151    "controllers/drawer_controller": "/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js",
152    "controllers/dropdown_popover_controller": "/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js",
153    "controllers/emoji_picker_controller": "/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js",
154    "controllers/feedback_controller": "/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js",
155    "controllers/header_controller": "/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js",
156    "controllers/hello_controller": "/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js",
157    "controllers/highlight_controller": "/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js",
158    "controllers/hotkey_controller": "/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js",
159    "controllers/increment_controller": "/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js",
160    "controllers": "/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js",
161    "controllers/infinite_scroll_controller": "/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js",
162    "controllers/inline_edit_controller": "/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js",
163    "controllers/lightbox_controller": "/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js",
164    "controllers/marquee_controller": "/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js",
165    "controllers/menu_controller": "/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js",
166    "controllers/modal_controller": "/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js",
167    "controllers/navbar_controller": "/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js",
168    "controllers/nested_form_controller": "/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js",
169    "controllers/newsletter_controller": "/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js",
170    "controllers/onboarding_checklist_controller": "/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js",
171    "controllers/os_detect_controller": "/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js",
172    "controllers/page_view_controller": "/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
1725e36d.js",
173    "controllers/password_controller": "/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js",
174    "controllers/popover_controller": "/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js",
175    "controllers/pricing_tabs_controller": "/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js",
176    "controllers/rainbow_button_controller": "/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js",
177    "controllers/read_more_controller": "/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js",
178    "controllers/scroll_area_controller": "/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js",
179    "controllers/scroll_preservation_controller": "/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js",
180    "controllers/searchable_dropdown_controller": "/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js",
181    "controllers/select_controller": "/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js",
182    "controllers/setup_code_filter_controller": "/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js",
183    "controllers/shoelace_color_picker_controller": "/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js",
184    "controllers/sidebar_controller": "/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js",
185    "controllers/slideover_controller": "/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js",
186    "controllers/slider_number_flow_controller": "/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js",
187    "controllers/snippet_controller": "/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js",
188    "controllers/stepper_controller": "/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js",
189    "controllers/table_of_contents_controller": "/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js",
190    "controllers/tabs_controller": "/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js",
191    "controllers/text_cycler_controller": "/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js",
192    "controllers/theme_builder_controller": "/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js",
193    "controllers/theme_controller": "/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js",
194    "controllers/toast_controller": "/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js",
195    "controllers/tooltip_controller": "/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js",
196    "controllers/tree_view_controller": "/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js",
197    "controllers/turnstile_controller": "/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js",
198    "controllers/two_factor_controller": "/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js",
199    "channels/consumer": "/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js",
200    "channels": "/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js"
201  }
202}</script>
202
203<link rel="modulepreload" href="/assets/application-ce2887f446009c0ecd8727deb726614ba1e3874296f9bb9ba2afbf7cdb0bc1de.js">
204<link rel="modulepreload" href="/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js">
205<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
206<link rel="modulepreload" href="/assets/turbo.min-3e48f1801baf343469811ff2c47889596fb8b7eb6d8fa63c4d81d0b94dc8c16d.js">
207<link rel="modulepreload" href="/assets/actioncable.esm-b66d83871f0a453b10ba8b4c147c2bafa655caaa5d13fa34e9bf361c1c2aedb7.js">
208<link rel="modulepreload" href="/assets/chartkick-8eb76e6cbdb540d495739fce84049fd038e59e7fd55c9e08e47b0b5a74b62db4.js">
209<link rel="modulepreload" href="/assets/Chart.bundle-f9da773cb982870fc03e616b7bcbfcc56462d3b0188cd9e441f8d8398c7e9482.js">
210<link rel="modulepreload" href="/assets/activestorage.esm-3f2e9c040e7870f701a98bbbb1c77c979bbbdab80af967b59174f14d9388a0c1.js">
211<link rel="modulepreload" href="https://ga.jspm.io/npm:@activeadmin/[email protected]/dist/active_admin.js">
212<link rel="modulepreload" href="https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js">
213<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/motion@latest/+esm">
214<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
215<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
216<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm">
217<link rel="modulepreload" href="https://esm.sh/number-flow">
218<link rel="modulepreload" href="https://esm.sh/number-flow/group">
219<link rel="modulepreload" href="https://esm.sh/[email protected]">
220<link rel="modulepreload" href="https://esm.sh/[email protected]/locale/en">
221<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel@latest/+esm">
222<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm">
223<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm">
224<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js">
225<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/+esm">
226<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/posthog-js@latest/+esm">
227<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe.esm.js">
228<link rel="modulepreload" href="/assets/prism-ee2a382b8379bfb08180c8374d286fd968aa297c26307217e2f9569cd2dfa857.js">
229<link rel="modulepreload" href="/assets/lexxy_extensions-3a4f8ce2ad2947c7dde1befd2a3ff05fe20dbb90efe89e487ab212345ca90f20.js">
230<link rel="modulepreload" href="/assets/lucide_callout_icons-2ed2b2287453d7d7f526fa6b646eb164a21f45f0af46db464998ba162f6a5cc7.js">
231<link rel="modulepreload" href="/assets/controllers/accordion_controller-68f918b7a16360dae870c023974f8241d23da31b691fe7a85fd105ef6bacd3e3.js">
232<link rel="modulepreload" href="/assets/controllers/activity_stats_controller-2bf1f94be12f4d38e945e87992e089bb47096da3a1babd59b7a0bd53c0011a39.js">
233<link rel="modulepreload" href="/assets/controllers/analytics_controller-2e76449d24f6e5675c20c0a447dc0187d26f88802eab3f9769e65f3171df85b1.js">
234<link rel="modulepreload" href="/assets/controllers/animated_number_controller-cc897cbf7500108d75b7410c4d8f99e89fed6834f5432fc3da637b3d23f1e8a8.js">
235<link rel="modulepreload" href="/assets/controllers/animated_number_controller_basic-413bc082033e8d3cde1eff9c6ee43ba1c1b6ae49f9e97d29b69621cdf08121b4.js">
236<link rel="modulepreload" href="/assets/controllers/application-992de401b2daa10b774ececa0f4b3a9a17784229cf80053802bb0278bea09c8d.js">
237<link rel="modulepreload" href="/assets/controllers/autocomplete_controller-61c12e18fdcf79da83234e4f312bf08e11db2a7cfd9a62f46df0ad26e0142cd4.js">
238<link rel="modulepreload" href="/assets/controllers/autocomplete_fuzzy_search_controller-41616d489457167e6ae856554df9faf8f3cbbae4773ba34efb39e5129b2768fe.js">
239<link rel="modulepreload" href="/assets/controllers/autocomplete_navigation_controller-92f7001ba93b8fb7cfe5a46e0c3d3f01e30b00d40955db7a3d3766fcdb19a7fc.js">
240<link rel="modulepreload" href="/assets/controllers/autocomplete_recent_searches_controller-126a09f754580a64711526524116256d8227e895cf0b27ff6241d14e8f994795.js">
241<link rel="modulepreload" href="/assets/controllers/autogrow_controller-dc2f6c6542bb0c085cf6e42f4de74ed0e4d064eb86467f918cd1c4fc3a32db15.js">
242<link rel="modulepreload" href="/assets/controllers/autosubmit_controller-4128b3047af7088a35b78209c4e5a5857a8cdf7e6db9c87266a1bfc006563423.js">
243<link rel="modulepreload" href="/assets/controllers/banner_controller-89c7dd5e101132f49513044f06948e33368ad440d5c4e3a45a82274105a599ac.js">
244<link rel="modulepreload" href="/assets/controllers/black_hole_background_controller-d7ea14388fc91359f527ab25db93e5f754606ce33dc7f3b0f38bb4ce7806e0f4.js">
245<link rel="modulepreload" href="/assets/controllers/carousel_controller-7e335df24449025cf025c55e28e81452c6acc982061a726d42df0519d517e7f7.js">
246<link rel="modulepreload" href="/assets/controllers/checkbox_select_all_controller-47d9d094c1de4a2977ebc3995494b0fc0bf32b77bf2fa8153b38dfd5eb118992.js">
247<link rel="modulepreload" href="/assets/controllers/clickable_animated_number_controller-cf1c998aa0af94b43f0db582390ae1950468f67f061f9d9b7247f30668d899cd.js">
248<link rel="modulepreload" href="/assets/controllers/clipboard_controller-b0c3a4b7bc7c889ebdd1ceec1f605d2a69e65188d9f8aedde952f33c97e08452.js">
249<link rel="modulepreload" href="/assets/controllers/code_filter_controller-b78aa62f6f5dde0c534f96a2198b7c2c104e7b0765cef49eda95d4503f8220da.js">
250<link rel="modulepreload" href="/assets/controllers/collapsible_controller-a39d5b7ff31c5eb807b64d40a7e15546f97d3b7617c1c33990d1a482c26d3d13.js">
251<link rel="modulepreload" href="/assets/controllers/component_search_controller-fa06589fe987df949cdcddb127a728c1da3d86ff278ee2d95f0bac0bdd567774.js">
252<link rel="modulepreload" href="/assets/controllers/conditional_field_controller-97799033d1b51a7008e0d8e33c2fc61c70a8304ede19eb49fdd335f3d3035a63.js">
253<link rel="modulepreload" href="/assets/controllers/confirmation_controller-4a5132ce4df6e7eb2f80829c45a6e47571543645bada92ec0ec54d9044c77b3f.js">
254<link rel="modulepreload" href="/assets/controllers/context_menu_controller-77e47db59b27f9ec9fde1fcb9ca6466aee4076ab981924e779542c3454f3c93d.js">
255<link rel="modulepreload" href="/assets/controllers/datatable_controller-f83ec938c9d9b27a981de4924f4bff7a1fbafae2904c98bcdfe48d5ca6fa393c.js">
256<link rel="modulepreload" href="/assets/controllers/datatable_preview_controller-c3f3a5cda07c2d66e871d16e1998b89b2eeb56c67a72a786bce23b39f48fa1ee.js">
257<link rel="modulepreload" href="/assets/controllers/date_picker_controller-253d8b524c4baff070b5e52ed868125b97bc24351fec1b787f90ce8ff2feb0c0.js">
258<link rel="modulepreload" href="/assets/controllers/dock_controller-ec5240a11befe00bce9599e61fd9cb94c79709b468e79b944c59f475f963055b.js">
259<link rel="modulepreload" href="/assets/controllers/drawer_controller-b8666297ccaaac7a794d293f27cf2c4dff429d76f7d59d9d3900813c2a95f677.js">
260<link rel="modulepreload" href="/assets/controllers/dropdown_popover_controller-dcfce815f3e53a50fe53ed7d2f36d49d04c89ba4afbe7b395d43340fe9c12bf9.js">
261<link rel="modulepreload" href="/assets/controllers/emoji_picker_controller-c056b2f8bb9032e3909380d4be0b521a9edfbe5a8d1c60d06e4e96e988b30962.js">
262<link rel="modulepreload" href="/assets/controllers/feedback_controller-b3c361e5a39489c06cdc30cd9946bd4ab76d27b5eadc25aeadd9f46f9f14a3ae.js">
263<link rel="modulepreload" href="/assets/controllers/header_controller-ad9c787275b782e8ae53ee6bb4c4e48e4aeec2378eb9505bfe3a0078fc5bddad.js">
264<link rel="modulepreload" href="/assets/controllers/hello_controller-7f59110cda0590e842fa21ec58f351ca3df8385326afb50f932d9e87d0bf5355.js">
265<link rel="modulepreload" href="/assets/controllers/highlight_controller-2ee2d0fe0f95be1b8f24bf6a226811ca1d4d99ded02a416828bd0cd03d993b36.js">
266<link rel="modulepreload" href="/assets/controllers/hotkey_controller-4906788b99654b4bdebaff5ddb16cbd3023b5c9d88a279134af3cbe119992ddd.js">
267<link rel="modulepreload" href="/assets/controllers/increment_controller-9c6acdc5317e20cc593af2845447862f69efed2c875173fb3bcb9fbf6bd4aa9f.js">
268<link rel="modulepreload" href="/assets/controllers/index-ddceca80534a826b5fd4a98c6bb2e10f6e25d3c462fcaeb966f4ec51a349312e.js">
269<link rel="modulepreload" href="/assets/controllers/infinite_scroll_controller-d794b664cbe6bd01f3f3bf4737e8bd396d2c65fffc1aed3f70e777ef82bfb24e.js">
270<link rel="modulepreload" href="/assets/controllers/inline_edit_controller-1559f3f1eae67ab844b2ca5a8515fd2affb99a7dcdc48047fd78e7d1e35d5820.js">
271<link rel="modulepreload" href="/assets/controllers/lightbox_controller-70a04fdfe82959f273f2d153b68e8c49441b936e3f9d85de07c12ed4cd569ff5.js">
272<link rel="modulepreload" href="/assets/controllers/marquee_controller-f62eea56769547d92df5fe25ab33e95d93223fd084e17b632ead8212e3298994.js">
273<link rel="modulepreload" href="/assets/controllers/menu_controller-8f656dcc8accdb5f52cabd89aa015721d737cd78e58b4d44725b91b27428be4f.js">
274<link rel="modulepreload" href="/assets/controllers/modal_controller-b0a1489a5d752ad768f2e5b7b8b3538db41092d719630c6ac1723224d4921732.js">
275<link rel="modulepreload" href="/assets/controllers/navbar_controller-e2e93536f44ab12fb542e40b361a9e916e3a70f4d0a3d8a6da435c38faefd802.js">
276<link rel="modulepreload" href="/assets/controllers/nested_form_controller-b168b9a507594df9ce8c4d974d12397365b235b0f73371cae12b5a937804c972.js">
277<link rel="modulepreload" href="/assets/controllers/newsletter_controller-5f069f0e526e8ca1fb7e9cea5d3c537c306682a8e7911ec7ffd3f73c571f80de.js">
278<link rel="modulepreload" href="/assets/controllers/onboarding_checklist_controller-39dc6bf4879beb8690ffc064555e32e8f86b2cce939d7d3674d568bbe3db0aaf.js">
279<link rel="modulepreload" href="/assets/controllers/os_detect_controller-fdabd286329d2fcbc361cd807cea42ecae29e5274b63efb666e29b57e8215557.js">
280<link rel="modulepreload" href="/assets/controllers/page_view_controller-f387290e103662ff4f8f0d30eb2a19fd78b0657d234018629d2e5eb06fd
2805e36d.js">
281<link rel="modulepreload" href="/assets/controllers/password_controller-ff0f1a76b7c5eecd5b8118091db2df12bf3f17e7fdcf9c526c5555ef93a2f539.js">
282<link rel="modulepreload" href="/assets/controllers/popover_controller-1b1bea1bfe533d7aa2fb2dd4654c96abdf611cd9e554261ca3506fa8d19baee1.js">
283<link rel="modulepreload" href="/assets/controllers/pricing_tabs_controller-ef4263b0b8f9c30dd8c0ea5e1efe413e3a83912d7e7fffe3b3609f8ac67bffd4.js">
284<link rel="modulepreload" href="/assets/controllers/rainbow_button_controller-5b51b4e14a1ca6e2d6b09fa42909695f780b5434f288f0d138bcadfd265d5d64.js">
285<link rel="modulepreload" href="/assets/controllers/read_more_controller-85ad41396138e5bff247d29f97a423b274daf4c2f6db4496b16253e2f01492d9.js">
286<link rel="modulepreload" href="/assets/controllers/scroll_area_controller-69635327e35071b6db15b22898c8d0dc8f7ce53a5a916c2f1906b0c9b02c41e9.js">
287<link rel="modulepreload" href="/assets/controllers/scroll_preservation_controller-2b864175645163639087e02cf9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js">
288<link rel="modulepreload" href="/assets/controllers/searchable_dropdown_controller-430e5f4fc4213d1b0f2c116117c21bc57e91713fec486e0a52765213712d6d3c.js">
289<link rel="modulepreload" href="/assets/controllers/select_controller-74d1f70342c3770a333db97ce592c0cec58d74fdca287b0d8c9c6a5bdfb70410.js">
290<link rel="modulepreload" href="/assets/controllers/setup_code_filter_controller-475bc53e471e0ba57fb81260231480539fcf0dfef1500e66cae2063b75d918d3.js">
291<link rel="modulepreload" href="/assets/controllers/shoelace_color_picker_controller-fb2867531d003d3ee4f2199d292aef8152f7ac9dd0ab8123d6613a39ab813aa4.js">
292<link rel="modulepreload" href="/assets/controllers/sidebar_controller-22283653891c7def50a59bbc0cdd21077b4d025a78a82b1bf83013e38e506c3b.js">
293<link rel="modulepreload" href="/assets/controllers/slideover_controller-d2784e5efe60760dfdfe1b45360606eeabe6ea17c63e1078d678bb3eb0fcdb8b.js">
294<link rel="modulepreload" href="/assets/controllers/slider_number_flow_controller-7dd050abe7736568909063d3c668689012c736b45271025c17e280a90018c298.js">
295<link rel="modulepreload" href="/assets/controllers/snippet_controller-ba0646ac1f8c7fea6e6a056e38781569afce34c48ec61e6100d7c8980305067c.js">
296<link rel="modulepreload" href="/assets/controllers/stepper_controller-5f3f3249eea7190c323e5dfbcc0eaa71d044f1c4d200d669159edb93ab741a76.js">
297<link rel="modulepreload" href="/assets/controllers/table_of_contents_controller-3f096fbcf4c30a5a5536ec7b189890b9cfab901866edc5ad7ebf80b6e717537a.js">
298<link rel="modulepreload" href="/assets/controllers/tabs_controller-4cdc2eb1b5c92d421f37f9dfd4bb69e9a3091ae1b1eebc0a9510073a5476a872.js">
299<link rel="modulepreload" href="/assets/controllers/text_cycler_controller-68fe49e432b67f3ad3cae918b14cc8fb499cb792117d1808d6748beb735210e7.js">
300<link rel="modulepreload" href="/assets/controllers/theme_builder_controller-14517cedf554a7a1de2e2f0a22ab918417c3e476d02f1700afa4277569b7faed.js">
301<link rel="modulepreload" href="/assets/controllers/theme_controller-92f859a51c4d051c21b1f8aeec06b5c71d50f5bcdcc3ba4431ba0f8cbaedeccf.js">
302<link rel="modulepreload" href="/assets/controllers/toast_controller-35d241a8c227f21dc898225e10b4e0cde9508a0a82c06756433cb0d2e7d68a0f.js">
303<link rel="modulepreload" href="/assets/controllers/tooltip_controller-a8c00f3a945fdd0ed6ff54b226a8c942400b7d9894d5c0d1f55d2d44ac848dd5.js">
304<link rel="modulepreload" href="/assets/controllers/tree_view_controller-9e6b47ec5b19a36c0ec6eacf8cac1e6e59fdb2b0bfdc28dd8edadc6a7c11a350.js">
305<link rel="modulepreload" href="/assets/controllers/turnstile_controller-c93aec3bd6a87f100d2382b76bc47805c17452f0fd05abd518b78c66e60b161e.js">
306<link rel="modulepreload" href="/assets/controllers/two_factor_controller-bebbef5416ed915b6d56ab303efaf880279af94ce63fe4334f160007f398975b.js">
307<link rel="modulepreload" href="/assets/channels/consumer-e499b626f1d691b5bdf7d83ff61cee46531b74e527aa0c2b78a229dc34d465ab.js">
308<link rel="modulepreload" href="/assets/channels/index-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js">
309<script type="module">import "application"</script>
309
310
311    <!-- Prism.js Theme loaded via application.css (shadcn style) -->
312
313    
313<script type="module">import "prism"</script>
313
314
315    <!-- app styles -->
316
317    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
318
319    <link rel="stylesheet" href="/assets/tailwind-8dd8a1967e9bfb39e33fd6b97de1fb9540804eb5e014bd755b551ab3b78c8f67.css" data-turbo-track="reload" />
320
321    <!-- Shoelace -->
322    
322<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/color-picker/color-picker.js"></script>
322
323    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css">
324    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css">
325
326    
327<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
328<link rel="icon" type="image/svg+xml" href="/favicon.svg">
329<link rel="shortcut icon" href="/favicon.ico">
330<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
331<meta name="apple-mobile-web-app-title" content="Rails Blocks">
332<link rel="manifest" href="/site.webmanifest">
333
334  <!-- Fathom - beautiful, simple website analytics -->
335  
335<script src="https://cdn.usefathom.com/script.js" data-site="RGMCTRCC" defer></script>
335
336  
336<script>
337    // Defines the Fathom queue if it's not already defined
338    window.fathom = window.fathom || {};
339    window.fathom.trackEvent = window.fathom.trackEvent || function() {
340      (window.fathom.q = window.fathom.q || []).push(arguments);
341    };
342  </script>
342
343  <!-- / Fathom -->
344
345  
345<script>
346      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Ie Ts Ms Ee Es Rs capture Ge calculateEventProperties Os register register_once register_for_session unregister unregister_for_session js getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ds Fs createPersonProfile Ls Ps opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Cs debug I As getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
347      posthog.init('phc_1peGskgJndUl9aKkfvJan2QftpxzdEl4tplxzntLjz3', {
348          api_host: 'https://f.railsblocks.com',
349          defaults: '2026-01-30',
350          person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
351      })
352  </script>
352
353
354
355    <!-- Cloudflare Turnstile -->
356    
356<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
356
357
358    <!-- JSON-LD Structured Data -->
359    
359<script type="application/ld+json">
360    {
361      "@context": "https://schema.org",
362      "@type": "WebSite",
363      "name": "Rails Blocks",
364      "url": "https://railsblocks.com/",
365      "description": "Rails UI components for building modern web applications, simply copy and paste the code into your app or use our CLI &amp; MCP server."
366    }
367    </script>
367
368
369    <meta name="sentry-trace" content="43a27dff224a4484b2c31ba2747ce47d-370901ec0a354ecc-1">
370<meta name="baggage" content="sentry-trace_id=43a27dff224a4484b2c31ba2747ce47d,sentry-sample_rate=1.0,sentry-sample_rand=0.659744,sentry-sampled=true,sentry-environment=production,sentry-release=c1339cab003834fc5d3ba9a59528fe484c754c35,sentry-public_key=75ec06e0a9c5a635bb41b06c332c1f78">
371  </head>
372
373  <body>
374    
375<header class="sticky z-50 top-0 h-14 w-full gap-3 mx-auto" data-controller="header">
376  <nav class="flex items-center justify-center flex-wrap w-full">
377    <div class="w-full border-b border-neutral-950/5 dark:border-white/10">
378      <div class="bg-white dark:bg-neutral-950">
379        <div class="flex h-14 items-center justify-between gap-2 md:gap-8 px-4 sm:px-6">
380          <div class="flex items-center gap-4">
381            <div class="w-full flex items-center shrink-0 justify-center gap-4">
382              <a class="flex items-center hover:opacity-80 gap-1.5" href="/">
383                <img class="size-6" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" />
384                <span class="font-semibold shrink-0 text-lg md:text-xl text-neutral-900 dark:text-neutral-50">Rails Blocks</span>
385</a>              <div data-controller="modal os-detect" class="hidden md:block">
386  <button data-controller="hotkey"
387          data-action="click->modal#open:prevent keydown.meta+k@document->hotkey#click keydown.ctrl+k@document->hotkey#click"
388          class="flex items-center justify-center gap-1.5 rounded-lg bg-neutral-100/75 dark:bg-neutral-800 p-2.5 md:px-3 md:py-2 text-xs font-medium whitespace-nowrap text-neutral-500 hover:text-neutral-900 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200 border border-black/10 dark:border-white/10">
389    <span class="hidden md:block">Search</span>
390    <div class="hidden md:flex items-center gap-0.5">
391      <kbd data-os-detect-target="mac" class="hidden"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[0.6rem]" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.25,10.5h-1.25v-3h1.25c1.517,0,2.75-1.233,2.75-2.75s-1.233-2.75-2.75-2.75-2.75,1.233-2.75,2.75v1.25h-3v-1.25c0-1.517-1.233-2.75-2.75-2.75s-2.75,1.233-2.75,2.75,1.233,2.75,2.75,2.75h1.25v3h-1.25c-1.517,0-2.75,1.233-2.75,2.75s1.233,2.75,2.75,2.75,2.75-1.233,2.75-2.75v-1.25h3v1.25c0,1.517,1.233,2.75,2.75,2.75s2.75-1.233,2.75-2.75-1.233-2.75-2.75-2.75Zm-1.25-5.75c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25-.561,1.25-1.25,1.25h-1.25v-1.25Zm-8.5,0c0-.689,.561-1.25,1.25-1.25s1.25,.561,1.25,1.25v1.25h-1.25c-.689,0-1.25-.561-1.25-1.25Zm2.5,8.5c0,.689-.561,1.25-1.25,1.25s-1.25-.561-1.25-1.25,.561-1.25,1.25-1.25h1.25v1.25Zm1.5-5.75h3v3h-3v-3Zm5.75,7c-.689,0-1.25-.561-1.25-1.25v-1.25h1.25c.689,0,1.25,.561,1.25,1.25s-.561,1.25-1.25,1.25Z"></path></g></svg></kbd>
392      <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd>
393      <span>+</span>
394      <kbd>K</kbd>
395    </div>
396    <svg xmlns="http://www.w3.org/2000/svg" class="size-4 md:hidden" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75 15.75L11.6386 11.6386"></path> <path d="M7.75 13.25C10.7875 13.25 13.25 10.7875 13.25 7.75C13.25 4.7125 10.7875 2.25 7.75 2.25C4.7125 2.25 2.25 4.7125 2.25 7.75C2.25 10.7875 4.7125 13.25 7.75 13.25Z"></path></g></svg>
397  </button>
398
399  <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dar
399k:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose">
400    <div class="sm:max-w-md w-full">
401
402      <div class="sm:max-w-md mx-auto w-full">
403        <div class="relative"
404              data-controller="autocomplete"
405              data-autocomplete-delay-value="50"
406              data-autocomplete-submit-on-select-value="false" 
407              data-autocomplete-highlight-matches-value="false"
408              data-autocomplete-suggestion-class-value="border-l-3 border-transparent"
409              data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected"
410              data-autocomplete-anchor-value="form"
411              data-autocomplete-max-suggestions-value="50"
412              data-autocomplete-render-mode-value="inline"
413              data-autocomplete-always-show-value="true"
414              data-autocomplete-auto-select-first-value="true"
415              data-autocomplete-preserve-search-on-select-value="true" 
416              data-autocomplete-select-action-value="modal#close:prevent"
417              data-autocomplete-local-data-value="[{&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 mt-14 px-4 sm:px-6 max-w-7xl">
712      
713      <div data-controller="toast"
714     id="toast_triggers"
715     data-toast-position-value="top-center"
716     data-toast-layout-value="default"> 
717  <ul
718    data-toast-target="container"
719    data-action="mouseenter->toast#handleMouseEnter mouseleave->toast#handleMouseLeave"
720    class="fixed block w-full group z-[99] max-w-[300px] sm:max-w-xs left-1/2 -translate-x-1/2 top-0 overflow-visible"
721    style="transition: height 300ms ease;"
722  >
723  </ul>
724</div>
725
726      
727
728
729
730      
731      
732<div class="relative sm:py-6">
733  <div class="mx-auto">
734    <div class="text-center max-w-xl mx-auto">
735      <h1 class="text-4xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 font-quincy">
736        <span class="block text-neutral-900 dark:text-neutral-50">UI components</span>
737        <span class="block text-red-600 dark:text-red-500">for your Rails app</span>
738      </h1>
739      <p class="mt-3 max-w-md mx-auto text-base text-neutral-500 dark:text-neutral-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
740        A ready-to-use collection of 300+ UI components with minimal dependencies and a focus on simplicity
741      </p>
742    </div>
743
744    <div class="my-4 flex flex-col md:flex-row items-center justify-center whitespace-nowrap gap-1.5">
745      <div class="flex items-center gap-1.5 lg:gap-2.5">
746        <svg xmlns="http://www.w3.org/2000/svg" fill="#d30001" viewBox="0 0 235 155" class="h-4">
747          <g>
748            <path d="M180 17.8c-.9-.5-3.4-1.7-9.7-3.5l-.4 6.6c3.3 1.1 6.5 2.3 9.7 3.6l.4-6.7Z"/>
749            <path d="M124.9 18.9c-29.2 2.6-65 29.1-86 64.1S15 147.6 15 147.6h79s-15.1-68.9 34.9-96.8c10.9-5.3 45.6-25.1 102.4 16.9 1.8-1.5 3.5-2.7 3.5-2.7s-52-51.9-109.9-46.1Z"/>
750            <path d="m54.7 54.7-7.1-6.2c-2.6 2.5-5.1 5-7.4 7.5l7.7 6.6c2.1-2.7 4.4-5.4 6.8-7.9Z"/>
751            <path d="M92.5 25 88 18.1c-2.5 1.3-5.1 2.7-7.8 4.3l4.6 7c2.6-1.6 5.1-3.1 7.7-4.4Z"/>
752            <path d="M24.5 99.4 13 95.2c-1.9 4.3-4 9.3-5 12l11.5 4.2c1.3-3.4 3.4-8.3 5-12Z"/>
753            <path d="M133.1 14.5h1l-2-6.1c-3.1 0-6.3.2-9.6.6l1.9 5.9c2.9-.3 5.8-.4 8.7-.4Z"/>
754            <path d="M97 127.6c.2 5.3.7 9.6 1.2 12.6l12 4.3c-.9-3.9-1.8-8.3-2.4-13L97 127.6Z"/>
755            <path d="m137.9 51.3 2.3 6.9c2.9-1.4 5.8-2.6 8.7-3.5l-2.2-6.6c-3.4 1-6.3 2.1-8.8 3.2Z"/>
756            <path d="M169.7 52c3.3.1 6.6.5 9.9 1.2l.4-6.2c-3.4-.7-6.7-1.1-9.9-1.3l-.4 6.3Z"/>
757            <path d="M101.5 91.2c-1.3 3.7-2.2 7.4-3 11l8.1 6.4c.4-3.9 1.1-7.8 2.1-11.7l-7.2-5.7Z"/>
758            <path d="m113 70 4.8 7.2c1.7-2.5 3.7-4.8 5.9-7.1l-4.5-6.8c-2.3 2.1-4.4 4.4-6.2 6.7Z"/>
759          </g>
760        </svg>
761        <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base">
762          Built for <span class="font-medium">Rails</span> v7+
763        </span>
764      </div>
765      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 hidden md:block"><path fill="currentColor" d="M10.003 11.108a1.183 1.183 0 0 1-1.176-1.176c0-.644.532-1.176 1.176-1.176s1.176.532 1.176 1.176-.532 1.176-1.176 1.176"></path></svg>
766      <div class="flex items-center gap-1.5 lg:gap-2.5">
767        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="h-5"><path fill="#23B2E7" fill-rule="evenodd" d="M10 5Q6 5 5 8.334q1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C11.386 9.041 12.522 10 15 10q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C13.614 5.96 12.479 5 10 5m-5 5q-4 0-5 3.334 1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C6.386 14.041 7.521 15 10 15q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C8.614 10.96 7.478 10 5 10" clip-rule="evenodd"></path></svg>
768        <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base">
769          Styled with <span class="font-medium">TailwindCSS</span> v4+
770        </span>
771      </div>
772      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 hidden md:block"><path fill="currentColor" d="M10.003 11.108a1.183 1.183 0 0 1-1.176-1.176c0-.644.532-1.176 1.176-1.176s1.176.532 1.176 1.176-.532 1.176-1.176 1.176"></path></svg>
773      <div class="flex items-center gap-1.5 lg:gap-2.5">
774        <svg class="size-3.5 rounded-sm" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
775          <g class="fill-neutral-800 dark:fill-white">
776            <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
777            <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
778            <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
779          </g>
780        </svg>
781        <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base">
782          Interactive with <span class="font-medium">Stimulus</span>
783        </span>
784      </div>
785      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 hidden md:block"><path fill="currentColor" d="M10.003 11.108a1.183 1.183 0 0 1-1.176-1.176c0-.644.532-1.176 1.176-1.176s1.176.532 1.176 1.176-.532 1.176-1.176 1.176"></path></svg>
786      <div class="flex items-center gap-1.5 lg:gap-2.5">
787        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-neutral-800 dark:text-neutral-200" viewBox="0 0 97 84" fill="none">
788          <path fill-rule="evenodd" clip-rule="evenodd" d="M49.4814 0C48.7181 0 48.2362 0.820805 48.6082 1.48737L70.8119 41.269C71.0655 41.7233 71.0655 42.2767 70.8119 42.731L48.6082 82.5126C48.2362 83.1792 48.7181 84 49.4814 84H71.8975C72.4412 84 72.9423 83.7058 73.2073 83.231L95.8119 42.731C96.0655 42.2767 96.0655 41.7233 95.8119 41.2689L73.2073 0.76895C72.9423 0.2942 72.4412 0 71.8975 0H49.4814ZM47.3741 41.269C47.6278 41.7233 47.6278 42.2767 47.3741 42.731L24.6554 83.4355C24.2739 84.119 23.2905 84.119 22.909 83.4355L0.190204 42.731C-0.063401 42.2767 -0.0634013 41.7233 0.190203 41.269L22.909 0.564484C23.2905 -0.119028 24.2739 -0.119029 24.6554 0.564482L47.3741 41.269Z" fill="currentColor"></path>
789        </svg>
790        <span class="text-neutral-600 dark:text-neutral-400 text-sm sm:text-base">
791          <span class="font-medium">ViewComponent</span> support
792        </span>
793      </div>
794    </div>
795
796    <div class="my-6 bg-white rounded-xl p-4 md:p-6 w-full max-w-3xl mx-auto border dark:bg-neutral-800 border-black/10 dark:border-white/10">
797      <form data-controller="autosubmit component-search" data-turbo-frame="component_list" action="/" accept-charset="UTF-8" method="get">
798        <div class="flex flex-col gap-1 items-start w-full">
799          <div class="flex items-center justify-between w-full">
800            <label for="search_query" class="block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1">Search Components</label>
801            <a class="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200" onclick="var input = document.getElementById(&#39;search_query&#39;); if(input) { input.value = &#39;&#39;; input.focus(); var form = input.closest(&#39;form&#39;); if (form) { form.requestSubmit(); } } return false;" href="#">Clear search</a>
802          </div>
803          <div class="relative flex items-center w-full">
804            <div class="pointer-events-none absolute inset-y-0 left-0 my-px ml-px flex w-10 items-center justify-center rounded-l text-neutral-500 dark:text-neutral-400">
805              <svg class="hi-mini hi-magnifying-glass inline-block size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
806                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path>
807              </svg>
808            </div>
809            <input type="text" name="search" id="search_query" placeholder="Search for components..." class="!pl-10 w-full form-control" data-action="input-&gt;component-search#trackSearch" data-component-search-target="searchInput" autocomplete="off" />
810          </div>
811        </div>
812</form>    </div>
813
814    <turbo-frame id="component_list">
815      <div class="mt-12">
816
817
818          <ul class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6">
819              <li class="relative">
820  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
821    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
822      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
822k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
823        <span class="text-xs">?</span>
824      </button>
825
826      <template data-popover-target="content">
827        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
828          <div class="space-y-2">
829            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
830
831            <div class="flex items-center gap-1.5 text-xs">
832              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
833              <span class="flex grow gap-2">Tailwind CSS</span>
834            </div>
835
836            <div class="flex items-center gap-1.5 text-xs">
837              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
837ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
838                <g class="fill-neutral-800 dark:fill-white">
839                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
840                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
841                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
842                </g>
843              </svg>
844              <span class="flex grow gap-2">Stimulus</span>
845            </div>
846          </div>
847        </div>
848      </template>
849    </div>
850
851    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
852
853      <div class="w-full" data-controller="accordion" data-orientation="vertical">
854
855          <div data-accordion-target="item" data-state="closed" data-orientation="vertical" class="border-b pb-2 border-neutral-200 dark:border-neutral-700">
856            <p data-orientation="vertical" data-state="closed" class="flex text-base font-semibold mt-2 mb-0">
857              <button
858                type="button"
859                data-accordion-target="trigger"
860                data-action="click->
860accordion#toggle"
861                aria-controls="accordion-content-0"
862                aria-expanded="false"
863                data-state="closed"
864                data-orientation="vertical"
865                id="accordion-trigger-0"
866                tabindex="0"
867                class="text-xs flex flex-1 items-center text-left justify-between py-1 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:outline-offset-2 px-2"
868              >
869                Is the accordion accessible?
870                <svg
871                  data-accordion-target="icon"
872                  xmlns="http://www.w3.org/2000/svg"
873                  width="24"
874                  height="24"
875                  viewBox="0 0 24 24"
876                  fill="none"
877                  stroke="currentColor"
878                  stroke-width="2"
879                  stroke-linecap="round"
880                  stroke-linejoin="round"
881                  class="size-4 shrink-0 transition-transform duration-300"
882                >
883                  <path d="m6 9 6 6 6-6"></path>
884                </svg>
885              </button>
886            </p>
887            <div
888              data-accordion-target="content"
889              data-state="closed"
890              id="accordion-content-0"
891              role="region"
892              aria-labelledby="accordion-trigger-0"
893              data-orientation="vertical"
894              class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]"
895              hidden
896            >
897              <div class="overflow-hidden min-h-0">
898                <div class="text-xs opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
899                  <p class="my-2 px-2">Yes, just press the <kbd>↓</kbd> <kbd>↑</kbd> <kbd>Tab</kbd> <kbd>↵</kbd> & <kbd>Space</kbd> keys 😉.</p>
900                </div>
901              </div>
902            </div>
903          </div>
904          <div data-accordion-target="item" data-state="closed" data-orientation="vertical" class="border-b pb-2 border-neutral-200 dark:border-neutral-700">
905            <p data-orientation="vertical" data-state="closed" class="flex text-base font-semibold mt-2 mb-0">
906              <button
907                type="button"
908                data-accordion-target="trigger"
909                data-action="click->accordion#toggle"
910                aria-controls="accordion-content-1"
911                aria-expanded="false"
912                data-state="closed"
913                data-orientation="vertical"
914                id="accordion-trigger-1"
915                tabindex="0"
916                class="text-xs flex flex-1 items-center text-left justify-between py-1 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:outline-offset-2 px-2"
917              >
918                Is it styled?
919                <svg
920                  data-accordion-target="icon"
921                  xmlns="http://www.w3.org/2000/svg"
922                  width="24"
923                  height="24"
924                  viewBox="0 0 24 24"
925                  fill="none"
926                  stroke="currentColor"
927                  stroke-width="2"
928                  stroke-linecap="round"
929                  stroke-linejoin="round"
930                  class="size-4 shrink-0 transition-transform duration-300"
931                >
932                  <path d="m6 9 6 6 6-6"></path>
933                </svg>
934              </button>
935            </p>
936            <div
937              data-accordion-target="content"
938              data-state="closed"
939              id="accordion-content-1"
940              role="region"
941              aria-labelledby="accordion-trigger-1"
942              data-orientation="vertical"
943              class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]"
944              hidden
945            >
946              <div class="overflow-hidden min-h-0">
947                <div class="text-xs opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
948                  <p class="my-2 px-2">Yep, it comes Tailwind CSS styles that you can easily customize.</p>
949                </div>
950              </div>
951            </div>
952          </div>
953          <div data-accordion-target="item" data-state="closed" data-orientation="vertical" class="border-b pb-2 border-neutral-200 dark:border-neutral-700">
954            <p data-orientation="vertical" data-state="closed" class="flex text-base font-semibold mt-2 mb-0">
955              <button
956                type="button"
957                data-accordion-target="trigger"
958                data-action="click->accordion#toggle"
959                aria-controls="accordion-content-2"
960                aria-expanded="false"
961                data-state="closed"
962                data-orientation="vertical"
963                id="accordion-trigger-2"
964                tabindex="0"
965                class="text-xs flex flex-1 items-center text-left justify-between py-1 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 focus:outline-neutral-700 dark:focus:outline-white focus:outline-offset-2 px-2"
966              >
967                Does it have animations?
968                <svg
969                  data-accordion-target="icon"
970                  xmlns="http://www.w3.org/2000/svg"
971                  width="24"
972                  height="24"
973                  viewBox="0 0 24 24"
974                  fill="none"
975                  stroke="currentColor"
976                  stroke-width="2"
977                  stroke-linecap="round"
978                  stroke-linejoin="round"
979                  class="size-4 shrink-0 transition-transform duration-300"
980                >
981                  <path d="m6 9 6 6 6-6"></path>
982                </svg>
983              </button>
984            </p>
985            <div
986              data-accordion-target="content"
987              data-state="closed"
988              id="accordion-content-2"
989              role="region"
990              aria-labelledby="accordion-trigger-2"
991              data-orientation="vertical"
992              class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]"
993              hidden
994            >
995              <div class="overflow-hidden min-h-0">
996                <div class="text-xs opacity-0 transition-opacity duration-300 data-[state=open]:opacity-100" data-state="closed">
997                  <p class="my-2 px-2">Yes, with smooth animations for opening and closing.</p>
998                </div>
999              </div>
1000            </div>
1001          </div>
1002      </div>
1003    </div>
1004  </div>
1005  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/accordion" data-turbo-frame="_top">
1006    <div class="h-48"></div>
1007    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1008      Accordion
1009      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1010    </p>
1011    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 11 components</p>
1012  </a>
1013</li>
1014
1015
1016              <li class="relative">
1017  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1018    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1019      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1019k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1020        <span class="text-xs">?</span>
1021      </button>
1022
1023      <template data-popover-target="content">
1024        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1025          <div class="space-y-2">
1026            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1027
1028            <div class="flex items-center gap-1.5 text-xs">
1029              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1030              <span class="flex grow gap-2">Tailwind CSS</span>
1031            </div>
1032
1033          </div>
1034        </div>
1035      </template>
1036    </div>
1037
1038    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1039      <div class="rounded-xl border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-800/50">
1040        <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
1041          <div class="flex items-center h-full">
1042            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
1043              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
1044                <circle cx="9" cy="9" r="7.25"></circle>
1045                <path d="M9 5.75V9.25"></path>
1046                <path d="M9 12.25H9.0075"></path>
1047              </g>
1048            </svg>
1049          </div>
1050          <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
1051            Information
1052          </h3>
1053          <div></div>
1054          <div class="text-sm text-neutral-600 dark:text-neutral-400">
1055            Alert description.
1056          </div>
1057        </div>
1058      </div>
1059    </div>
1060  </div>
1061  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/alert" data-turbo-frame="_top">
1062    <div class="h-48"></div>
1063    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1064      Alert
1065      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1066    </p>
1067    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
1068  </a>
1069</li>
1070
1071
1072              <li class="relative">
1073  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1074    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1075      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1075k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1076        <span class="text-xs">?</span>
1077      </button>
1078
1079      <template data-popover-target="content">
1080        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1081          <div class="space-y-2">
1082            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1083
1084            <div class="flex items-center gap-1.5 text-xs">
1085              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1086              <span class="flex grow gap-2">Tailwind CSS</span>
1087            </div>
1088
1089            <div class="flex items-center gap-1.5 text-xs">
1090              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1090ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1091                <g class="fill-neutral-800 dark:fill-white">
1092                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1093                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1094                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1095                </g>
1096              </svg>
1097              <span class="flex grow gap-2">Stimulus</span>
1098            </div>
1099
1100            <div class="flex items-center gap-1.5 text-xs">
1101              <img alt="Number flow" class="size-3.5" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" />
1102              <span class="flex grow gap-2">Number flow</span>
1103            </div>
1104          </div>
1105        </div>
1106      </template>
1107    </div>
1108
1109    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1110      <div
1111        data-controller="clickable-animated-number"
1112        data-clickable-animated-number-initial-value="42"
1113        data-clickable-animated-number-min-value="0"
1114        data-clickable-animated-number-max-value="999"
1115        data-clickable-animated-number-duration-value="1000"
1116        data-action="click->
1116clickable-animated-number#changeNumber"
1117        class="cursor-pointer text-6xl font-bold text-neutral-800 dark:text-white active:scale-90 transition-transform duration-150 ease-out select-none"
1118      >
1119      </div>
1120    </div>
1121  </div>
1122  <a href="/docs/animated-number" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1123    <div class="h-48"></div>
1124    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1125      Animated Number
1126      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1127    </p>
1128    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 11 components</p>
1129  </a>
1130</li>
1131
1132
1133              <li class="relative">
1134    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
1135    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
1136      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
1137        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
1138        Pro
1139      </a>
1140    </div>
1141  </div>
1142
1143  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1144    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1145      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1145k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1146        <span class="text-xs">?</span>
1147      </button>
1148
1149      <template data-popover-target="content">
1150        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1151          <div class="space-y-2">
1152            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1153
1154            <div class="flex items-center gap-1.5 text-xs">
1155              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1156              <span class="flex grow gap-2">Tailwind CSS</span>
1157            </div>
1158
1159            <div class="flex items-center gap-1.5 text-xs">
1160              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1160ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1161                <g class="fill-neutral-800 dark:fill-white">
1162                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1163                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1164                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1165                </g>
1166              </svg>
1167              <span class="flex grow gap-2">Stimulus</span>
1168            </div>
1169
1170            <div class="flex items-center gap-1.5 text-xs">
1171              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
1172              <span class="flex grow gap-2">Floating UI</span>
1173            </div>
1174
1175          </div>
1176        </div>
1177      </template>
1178    </div>
1179
1180    <div data-controller="toggle text-cycler" class="flex-col gap-2 relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1181
1182      <!-- Search on Focus Autocomplete -->
1183<div class="max-w-xs mx-auto w-full">
1184  <form class="relative"
1185        data-controller="autocomplete"
1186        data-autocomplete-search-on-focus-value="true"
1187        data-autocomplete-submit-on-select-value="false" 
1188        data-autocomplete-show-recent-value="false"
1189        data-autocomplete-local-data-value='[{&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;
1189 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;
1189 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;
1189 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;
1189 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;
1189 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;
1189 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;
1189 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;
1189 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;
1189 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;}]'>
1190
1191    <div class="relative">
1192      <input id="search_on_focus_basic_autocomplete"
1193             required
1194             data-autocomplete-target="input"
1195             placeholder="Search brands..."
1196             class="form-control !px-9">
1197
1198      <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-2.5 top-2.5 size-5 text-neutral-400 pointer-events-none" width="20" height="20" viewBox="0 0 20 20">
1199        <g fill="currentColor">
1200          <path d="M16.906,17.966c-.256,0-.512-.098-.707-.293l-4.817-4.817c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l4.817,4.817c.391,.391,.391,1.023,0,1.414-.195,.195-.451,.293-.707,.293Z"></path>
1201          <path d="M8.5,15c-3.584,0-6.5-2.916-6.5-6.5S4.916,2,8.5,2s6.5,2.916,6.5,6.5-2.916,6.5-6.5,6.5Zm0-11c-2.481,0-4.5,2.019-4.5,4.5s2.019,4.5,4.5,4.5,4.5-2.019,4.5-4.5-2.019-4.5-4.5-4.5Z"></path>
1202        </g>
1203      </svg>
1204
1205      <button type="button" data-autocomplete-target="clearButton" data-action="click->autocomplete#clearInput" class="hidden absolute flex items-center justify-center size-5 right-2.5 top-2.5 rounded-full text-neutral-400 hover:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
1205k:focus-visible:outline-neutral-200">
1206        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg>
1207      </button>
1208    </div>
1209
1210    <div data-autocomplete-target="results"
1211         class="small-scrollbar absolute z-50 w-full bg-white dark:bg-neutral-900 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden hidden opacity-0 max-h-[250px] overflow-y-auto"
1212         role="listbox"
1213         tabindex="-1">
1214    </div>
1215  </form>
1216</div>
1217
1218    </div>
1219  </div>
1220  <a href="/docs/autocomplete" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1221    <div class="h-48"></div>
1222    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1223      Autocomplete Search
1224      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1225    </p>
1226    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">
1227      View 10 components
1228    </p>
1229  </a>
1230</li>
1231
1232
1233              <li class="relative">
1234  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1235    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1236      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1236k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1237        <span class="text-xs">?</span>
1238      </button>
1239
1240      <template data-popover-target="content">
1241        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1242          <div class="space-y-2">
1243            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1244
1245            <div class="flex items-center gap-1.5 text-xs">
1246              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1247              <span class="flex grow gap-2">Tailwind CSS</span>
1248            </div>
1249
1250            <div class="flex items-center gap-1.5 text-xs">
1251              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1251ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1252                <g class="fill-neutral-800 dark:fill-white">
1253                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1254                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1255                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1256                </g>
1257              </svg>
1258              <span class="flex grow gap-2">Stimulus</span>
1259            </div>
1260          </div>
1261        </div>
1262      </template>
1263    </div>
1264
1265    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1266      <div class="w-full max-w-xs">
1267        <textarea
1268          id="autogrow"
1269          rows="2"
1270          class="form-control min-h-16 max-h-32 small-scrollbar"
1271          placeholder="Start typing and watch the textarea grow..."
1272          data-controller="autogrow"
1273          data-action="input->autogrow#autogrow"
1274        ></textarea>
1275      </div>
1276    </div>
1277  </div>
1278  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/autogrow" data-turbo-frame="_top">
1279    <div class="h-48"></div>
1280    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1281      Autogrow
1282      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1283    </p>
1284    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
1285  </a>
1286</li>
1287
1288
1289              <li class="relative">
1290  <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
1291    <div class="inline relative">
1292  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
1293    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
1294      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
1294<path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
1295      New
1296    </div>
1297  </div>
1298</div>
1299
1300  </div>
1301
1302  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1303    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1304      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1305        <span class="text-xs">?</span>
1306      </button>
1307
1308      <template data-popover-target="content">
1309        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1310          <div class="space-y-2">
1311            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1312
1313            <div class="flex items-center gap-1.5 text-xs">
1314              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1315              <span class="flex grow gap-2">Tailwind CSS</span>
1316            </div>
1317          </div>
1318        </div>
1319      </template>
1320    </div>
1321
1322    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1323      <!-- Recommended group overlap: xs -space-x-2, sm -space-x-3, md -space-x-4, lg -space-x-5, xl -space-x-6 -->
1324<div class="flex w-fit -space-x-4 [&>*]:isolate" role="group" aria-label="Project members">
1325  <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]">
1326    <img
1327      class="size-full rounded-full object-cover"
1328      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop&crop=face&auto=format&q=80"
1329      alt="Olivia Martin">
1330  </span>
1331  <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]">
1332    <img
1333      class="size-full rounded-full object-cover"
1334      src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&h=160&fit=crop&crop=face&auto=format&q=80"
1335      alt="Noah Williams">
1336  </span>
1337  <span class="relative inline-flex size-10 shrink-0 rounded-full after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]">
1338    <img
1339      class="size-full rounded-full object-cover"
1340      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=160&h=160&fit=crop&crop=face&auto=format&q=80"
1341      alt="Emma Davis">
1342  </span>
1343  <span class="relative inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-xs font-medium text-neutral-600 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)] dark:bg-neutral-800 dark:text-neutral-300 dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]" aria-label="3 more project members">
1344    +3
1345  </span>
1346</div>
1347
1348    </div>
1349  </div>
1350  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/avatar" data-turbo-frame="_top">
1351    <div class="h-48"></div>
1352    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1353      Avatar
1354      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1355    </p>
1356    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
1357  </a>
1358</li>
1359
1360
1361              <li class="relative">
1362  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1363    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1364      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1364k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1365        <span class="text-xs">?</span>
1366      </button>
1367
1368      <template data-popover-target="content">
1369        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1370          <div class="space-y-2">
1371            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1372
1373            <div class="flex items-center gap-1.5 text-xs">
1374              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1375              <span class="flex grow gap-2">Tailwind CSS</span>
1376            </div>
1377
1378          </div>
1379        </div>
1380      </template>
1381    </div>
1382
1383    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1384      <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
1385    </div>
1386  </div>
1387  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/badge" data-turbo-frame="_top">
1388    <div class="h-48"></div>
1389    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1390      Badge
1391      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1392    </p>
1393    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
1394  </a>
1395</li>
1396
1397
1398              <li class="relative">
1399  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1400    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1401      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1401k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1402        <span class="text-xs">?</span>
1403      </button>
1404
1405      <template data-popover-target="content">
1406        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1407          <div class="space-y-2">
1408            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1409
1410            <div class="flex items-center gap-1.5 text-xs">
1411              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1412              <span class="flex grow gap-2">Tailwind CSS</span>
1413            </div>
1414
1415            <div class="flex items-center gap-1.5 text-xs">
1416              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1416ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1417                <g class="fill-neutral-800 dark:fill-white">
1418                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1419                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1420                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1421                </g>
1422              </svg>
1423              <span class="flex grow gap-2">Stimulus</span>
1424            </div>
1425          </div>
1426        </div>
1427      </template>
1428    </div>
1429
1430    <div class="[&_[data-controller='banner']]:!absolute [&_[data-controller='banner']]:!-translate-y-0 relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
1431      <div class="h-12 w-full absolute top-0 left-0 right-0 bg-neutral-100 dar
1431k:bg-neutral-800"></div>
1432<div data-controller="banner" data-banner-cookie-name-value="preview_banner" data-banner-cookie-days-value="-1" class="hidden fixed top-12 left-0 right-0 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white border-b border-black/10 dark:border-white/10 shadow-xs transition-all duration-300 ease-in-out opacity-0 -translate-y-full">
1433  <div class="container mx-auto px-4">
1434    <div class="flex items-center justify-between gap-2 sm:gap-4 py-3">
1435      <div class="flex items-center gap-3 flex-1">
1436        <div class="hidden sm:flex size-9 shrink-0 items-center justify-center rounded-full sm:bg-neutral-100 dark:sm:bg-neutral-800" aria-hidden="true">
1437          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-90" aria-hidden="true">
1438            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
1439            <path d="m2 17 10 5 10-5"></path>
1440            <path d="m2 12 10 5 10-5"></path>
1441          </svg>
1442        </div>
1443        <div class="space-y-1">
1444          <p class="text-sm font-semibold">New Feature Launch! 🚀</p>
1445        </div>
1446      </div>
1447      <div class="flex items-center gap-2">
1448        <button data-action="click->banner#hide" class="inline-flex items-center justify-center p-1.5 right-2 top-2 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none" aria-label="Close banner">
1449          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
1450        </button>
1451      </div>
1452    </div>
1453  </div>
1454</div>
1455
1456    </div>
1457  </div>
1458  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/banner" data-turbo-frame="_top">
1459    <div class="h-48"></div>
1460    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1461      Banner
1462      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1463    </p>
1464    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
1465  </a>
1466</li>
1467
1468
1469                <li class="sm:hidden col-span-1">
1470                  <div class="relative mt-8 mb-6">
1471  <div class="mx-auto">
1472    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
1473      <div data-controller="newsletter"
1474           class="max-w-xs">
1475        <div data-newsletter-target="form">
1476          <form data-action="submit->newsletter#submit"
1477                class="space-y-3">
1478            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
1479            <input type="email"
1480                  data-newsletter-target="email"
1481                  placeholder="Enter your email..."
1482                  class="form-control"
1483                  
1484                  required>
1485            <div class="flex justify-center">
1486              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
1487            </div>
1488            <button type="submit"
1489                    data-newsletter-target="submitButton"
1490                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
1490k:focus-visible:outline-neutral-200">
1491              Subscribe to the newsletter
1492            </button>
1493          </form>
1494          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
1495            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
1496          </div>
1497        </div>
1498
1499        <div data-newsletter-target="successMessage"
1500             class="text-center py-4"
1501             style="display: none;">
1502          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
1503            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1504              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
1505            </svg>
1506          </div>
1507          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
1508          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
1509        </div>
1510      </div>
1511    </div>
1512  </div>
1513</div>
1514
1515                </li>
1516              <li class="relative">
1517  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1518    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1519      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1520        <span class="text-xs">?</span>
1521      </button>
1522
1523      <template data-popover-target="content">
1524        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1525          <div class="space-y-2">
1526            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1527
1528            <div class="flex items-center gap-1.5 text-xs">
1529              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1530              <span class="flex grow gap-2">Tailwind CSS</span>
1531            </div>
1532
1533            <div class="flex items-center gap-1.5 text-xs">
1534              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1534ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1535                <g class="fill-neutral-800 dark:fill-white">
1536                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1537                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1538                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1539                </g>
1540              </svg>
1541              <span class="flex grow gap-2">Stimulus</span>
1542            </div>
1543          </div>
1544        </div>
1545      </template>
1546    </div>
1547
1548    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1549      <div class="flex justify-center w-full whitespace-nowrap">
1550        <ol class="flex justify-center items-center space-x-2 text-sm w-full">
1551          <li>
1552            <a href="javascript:void(0)" class="flex items-center text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
1553              <svg xmlns="http://www.w3.org/2000/svg" class="size-4 shrink-0" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor">
1553<path d="M7.94127 1.36281C8.56694 0.887445 9.4333 0.886569 10.0591 1.36312L15.3088 5.35287C15.7448 5.68398 16 6.20008 16 6.746V14.25C16 15.7692 14.7692 17 13.25 17H10.75V13.251C10.75 12.699 10.302 12.251 9.75 12.251H8.25C7.698 12.251 7.25 12.699 7.25 13.251V17H4.75C3.23079 17 2 15.7692 2 14.25V6.746C2 6.19867 2.2559 5.68346 2.69155 5.3526L7.94127 1.36281Z"></path></g></svg>
1554            </a>
1555          </li>
1556          <li class="flex items-center space-x-2">
1557            <span class="text-neutral-400 dark:text-neutral-600">/</span>
1558
1559            <!-- Dropdown for hidden breadcrumb items -->
1560            <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-placement-value="bottom-start">
1561              <button
1562                class="flex outline-none items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700/50"
1563                data-dropdown-popover-target="button"
1564                data-action="dropdown-popover#toggle"
1565                aria-label="Show more breadcrumb items"
1566              >
1567                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 20 20" fill="currentColor">
1568                  <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
1569                </svg>
1570              </button>
1571
1572              <dialog
1573                class="absolute z-10 w-fit rounded-lg border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100"
1574                data-controller="menu"
1575                data-dropdown-popover-target="menu"
1576                autofocus="false"
1577                data-action="click@document->dropdown-popover#closeOnClickOutside
1578                            close->menu#reset
1579                            keydown.up->menu#prev keydown.down->menu#next
1580                            keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
1581              >
1582                <div class="flex flex-col p-1" role="menu">
1583                  <a href="javascript:void(0)" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1">
1584                    Getting started
1585                  </a>
1586                  <a href="javascript:void(0)" class="flex items-center rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus:bg-neutral-700/50" data-menu-target="item" role="menuitem" tabindex="-1">
1587                    Components
1588                  </a>
1589                </div>
1590              </dialog>
1591            </div>
1592          </li>
1593          <li class="flex items-center space-x-2">
1594            <span class="text-neutral-400 dark:text-neutral-600">/</span>
1595            <a href="javascript:void(0)" class="flex items-center gap-1 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
1596              <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.75,12h-3.625c-.896,0-1.625-.729-1.625-1.625s.729-1.625,1.625-1.625h7.75c1.723,0,3.125-1.402,3.125-3.125s-1.402-3.125-3.125-3.125H5.25c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.625c.896,0,1.625,.729,1.625,1.625s-.729,1.625-1.625,1.625H5.125c-1.723,0-3.125,1.402-3.125,3.125s1.402,3.125,3.125,3.125h3.625c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"></path><circle cx="13.25" cy="12.75" r="2.75"></circle></g></svg>
1597              <span class="hidden sm:block">Breadcrumb</span>
1598            </a>
1599          </li>
1600        </ol>
1601      </div>
1602
1603    </div>
1604  </div>
1605  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/breadcrumb" data-turbo-frame="_top">
1606    <div class="h-48"></div>
1607    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1608      Breadcrumb
1609      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1610    </p>
1611    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
1612  </a>
1613</li>
1614
1615
1616              <li class="relative">
1617  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1618    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1619      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1619k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1620        <span class="text-xs">?</span>
1621      </button>
1622
1623      <template data-popover-target="content">
1624        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1625          <div class="space-y-2">
1626            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1627
1628            <div class="flex items-center gap-1.5 text-xs">
1629              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1630              <span class="flex grow gap-2">Tailwind CSS</span>
1631            </div>
1632
1633          </div>
1634        </div>
1635      </template>
1636    </div>
1637
1638    <div data-controller="toggle text-cycler" class="flex-col gap-2 relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1639
1640      <button data-action="toggle#toggle text-cycler#toggle" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
1641        Button
1642      </button>
1643
1644      <p data-toggle-target="toggleable" data-text-cycler-target="toggleable" class="hidden text-xs text-neutral-500 dark:text-neutral-400 text-center"></p>
1645    </div>
1646  </div>
1647  <a href="/docs/buttons" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1648    <div class="h-48"></div>
1649    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1650      Buttons
1651      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1652    </p>
1653    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 14 components</p>
1654  </a>
1655</li>
1656
1657
1658              <li class="relative">
1659  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1660    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1661      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1661k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1662        <span class="text-xs">?</span>
1663      </button>
1664
1665      <template data-popover-target="content">
1666        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1667          <div class="space-y-2">
1668            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1669
1670            <div class="flex items-center gap-1.5 text-xs">
1671              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1672              <span class="flex grow gap-2">Tailwind CSS</span>
1673            </div>
1674          </div>
1675        </div>
1676      </template>
1677    </div>
1678
1679    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1680      <div class="w-full max-w-xs">
1681        <div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
1682          <div class="p-3">
1683            <h3 class="text-sm font-medium leading-6 text-neutral-900 dark:text-neutral-100">Card Preview</h3>
1684            <div class="mt-1.5 text-xs text-neutral-500 dark:text-neutral-400">
1685              <p>Simple card components with multiple variations.</p>
1686            </div>
1687          </div>
1688        </div>
1689      </div>
1690    </div>
1691  </div>
1692  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/card" data-turbo-frame="_top">
1693    <div class="h-48"></div>
1694    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1695      Card
1696      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1697    </p>
1698    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p>
1699  </a>
1700</li>
1701
1702
1703              <li class="relative">
1704  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1705    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1706      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1706k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1707        <span class="text-xs">?</span>
1708      </button>
1709
1710      <template data-popover-target="content">
1711        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1712          <div class="space-y-2">
1713            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1714
1715            <div class="flex items-center gap-1.5 text-xs">
1716              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1717              <span class="flex grow gap-2">Tailwind CSS</span>
1718            </div>
1719
1720            <div class="flex items-center gap-1.5 text-xs">
1721              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1721ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1722                <g class="fill-neutral-800 dark:fill-white">
1723                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1724                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1725                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1726                </g>
1727              </svg>
1728              <span class="flex grow gap-2">Stimulus</span>
1729            </div>
1730
1731            <div class="flex items-center gap-1.5 text-xs">
1732              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-5 -5 160 160"><defs><linearGradient id="light-theme-gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#2f71c1"/><stop offset="100%" stop-color="#7561c3"/></linearGradient><path id="light-theme-logo" d="M93 .03l.46.06.47.08.24.05.23.05.23.07.24.07.47.16.23.1.24.1.45.2.23.1.44.24.44.26L98 2l.6.48.38.34.36.36.17.2.1.12.1.13.1.12.1.14.1.12.2.26.1.14.1.13.17.27.18.3.16.3.16.32.08.17.15.36.07.2.1.2.07.2.08.2.07.23.08.23.07.23.16.5.
173208.26.08.28.1.3.63 2.35.1.4.14.54.13.55.24 1.13.1.58.12.57.1.6.18 1.2.1.6.08.63.07.62.07.64.06.64.06.65.05.65.04.67.05.67.1 2.06.04 2.87-.03 2.23-.06 1.53-.02.78-.05.78-.04.8-.1 1.6-.07.82-.06.82-.26 2.8-.02.26-.03.26-.02.27-.04.52-.04.5-.02.24-.03.48-.02.22-.01.23v.23l-.02.2-.01.22v.4l-.03.37v.17l-.01.18-.02.32v.3.13.25l-.01.2.01.1V46v.08.06.05.05l.01.03.01.02h.01.02l.03.01h.67l.13-.01h.14.15.16l.34-.02.37-.02.2-.01h.42l.46-.04h.24l.23-.02.25-.02.26-.02.27-.02h.27l.26-.02.28-.02.3-.03.3-.02h.28l.6-.04.3-.03.62-.05.3-.03 1.4-.1 1.37-.1 1.36-.08 2.64-.1 1.3-.03 1.26-.02h1.25 1.22l1.2.02 1.17.03 2.27.1 1.1.08 1.07.08 1.05.1 1.03.1 1 .12.97.13.94.15.93.16.88.17.87.2.83.2.8.2.78.22.75.24.72.24.7.26.67.27.63.28.6.3.58.3.54.32.5.33.5.35.45.35.42.36.38.38.36.4.14.17.27.33.12.16.12.17.1.17.1.16.2.3.1.17.25.47.08.16.07.15.06.17.16.47.1.33.06.33.03.16.02.18.02.16v.17l.02.36v.18l-.02.36-.01.2-.02.2-.01.2-.06.4-.04.2-.04.22-.03.2-.08.35-.1.35-.12.36-.13.36-.15.37-.17.38-.18.37-.2.4-.22.38-.24.4-.25.4-.26.4-.6.8-.64.82-.36.4-.35.42-1.18 1.24-.42.43-.88.84-.46.43-.96.84-.5.43-1.03.84-.53.43-.55.4-1.7 1.25-.6.4-1.22.8-.62.4-.63.4-.38.24-.4.24-.42.25-.42.26-.45.26-.46.26-.96.54-.5.3-.5.27-.5.28-.5.3-1.03.56-.52.27-.5.28-.52.27-1 .53-.5.26-.5.25-.48.25-.92.46-.86.42-.42.2-.38.2-.37.17-.35.17-.32.15-.3.13-.27.1-.26.1-.2.1-.2.06-.17.06-.12.03-.1.02-.05-.02-.04-.04-.04-.06-.03-.08-.03-.1-.02-.1-.01-.13-.02-.14v-.15l.01-.17v-.2l.01-.18.02-.2.01-.2.05-.44.03-.22.1-.7.04-.24.1-.47.05-.24.1-.45.06-.22.05-.22.07-.2.05-.2.07-.2.07-.18.12-.32.06-.15.07-.13.07-.12.06-.1.07-.1.06-.06.06-.05.1-.04.1-.05.05-.04.07-.04.06-.03.07-.03.08-.04.16-.1.18-.08.1-.06.1-.04.2-.12.32-.16.22-.12.23-.13.24-.12.37-.2.12-.07.25-.13.13-.07.25-.13.14-.06.12-.07.13-.06.13-.07.13-.06 1.37-.7.67-.36.67-.38.66-.36.65-.36.64-.37 1.26-.75.6-.36 1.2-.75.58-.38.57-.36.57-.38.55-.37.54-.38.53-.36.52-.37 1-.74.47-.35.46-.37.45-.36.44-.36.84-.7.4-.35.74-.68.67-.67.6-.65.28-.32.27-.3.24-.3.23-.3.2-.3.36-.58.14-.28.14-.3.12-.27.1-.27.08-.27.06-.26.04-.26.02-.26v-.5l-.03-.25-.05-.24-.07-.22-.08-.23-.1-.23-.12-.22-.14-.2-.32-.42-.4-.4-.48-.38-.26-.18-.28-.18-.6-.34-.68-.33-.37-.15-.4-.15-.4-.14-.42-.14-.43-.14-.46-.14-.47-.13-.5-.12-.5-.1-.52-.1-.47-.1-.5-.1-.53-.08-.58-.06-.6-.08-.63-.06-.65-.06-.67-.05-.7-.05-.72-.05-.74-.04-1.52-.06-.8-.03-.8-.02h-.8l-1.67-.02-.83.01h-.85l-2.57.03-.85.03-.86.03-.86.02-.84.05-.85.03-.84.06-.82.05-.83.06-.8.05-1.57.14-.76.07-.75.08-.72.08-1.4.2-.65.1-3.42.52-1.4 7.83-1.46 7.83 6.8 7.94 1.04 1.25 1.03 1.23 1 1.2.98 1.2.95 1.2.93 1.18.9 1.16.88 1.15.87 1.13.84 1.13.82 1.1.8 1.1.78 1.1.75 1.07.73 1.07 1.4 2.1.67 1.03.65 1.02.62 1 .6 1 .58.98.56.98.54.95.52.96.5.95.48.93.45.92.43.9.42.9.4.9.37.88.36.9.33.86.32.86.3.86.28.84.25.83.23.83.15.52.12.5.14.5.1.48.1.46.1.45.1.44.08.44.08.4.06.4.07.4.04.4.04.37.03.37.02.36.02.34v.67l-.03.64-.03.3-.04.3-.05.3-.12.58-.08.27-.1.28-.2.52-.12.26-.12.25-.13.26-.14.25-.3.5-.17.24-.18.24-.2.24-.2.23-.2.24-.3.33-.3.3-.32.3-.34.26-.35.24-.36.23-.38.2-.4.2-.4.17-.42.14-.43.13-.92.2-.5.07-.5.05h-.5-1.08l-.56-.04-.57-.04-.6-.08-.6-.1-.62-.1-.66-.13-.65-.15-.68-.16-1.4-.4-.73-.22-.75-.25-.77-.26-.78-.3-.8-.3-.82-.32-.84-.34-.86-.37-1.8-.8-.92-.43-.93-.45-.33-.15-.34-.17-.37-.2-.4-.2-.42-.22-.43-.25-.45-.25-.46-.26-.48-.28-1.5-.9-.5-.32-.53-.3-1.04-.65-.53-.32-.53-.33-.5-.34-.52-.32-1-.64-.5-.33-.47-.3-.46-.3-.45-.3-.42-.3-.4-.28-.4-.27-.36-.24-.34-.25-.3-.23-.3-.2-.25-.2-.22-.17-.18-.17-.16-.13-.1-.12-.08-.1-.04-.07h0l.01-.04.02-.06.05-.05v-.04l.06-.06.1-.07.2-.16.06-.04.07-.05.06-.04.07-.04.07-.05.08-.05.08-.04.07-.05.16-.1.1-.05.1-.04.08-.06.4-.2.1-.06.1-.05.1-.04.22-.1.2-.1 2.62-1.1 9.13 5.35.92.52.9.5.88.5.87.47.84.44.83.43 1.6.8.78.37.74.34.74.33.72.3.7.28.68.27.66.24.63.22.63.2.6.18.58.16.56.14.54.12.52.1.5.08.48.07.46.03h.43.43l.4-.03.38-.04.35-.06.34-.1.32-.1.3-.13.27-.15.25-.17.23-.18.2-.22.18-.23.16-.26.22-.44.16-.5.1-.53.06-.6.02-.63-.03-.7-.08-.72-.12-.78-.18-.8-.2-.86-.26-.9-.3-.93-.35-.97-.38-1-.43-1.04-.47-1.07-.5-1.1-.55-1.14-.6-1.17-.63-1.18-.66-1.23-.7-1.24-.74-1.27-.77-1.3-1.64-2.65-.87-1.35-.9-1.37-.93-1.4-.97-1.4-2.03-2.84-1.
173205-1.43-1.1-1.46-1.1-1.45-1.15-1.48-1.16-1.47-1.2-1.48-1.22-1.48-1.23-1.5-4.17-4.9-2.05 7.54-.74 2.67-.76 2.65-.78 2.62-.8 2.57-.8 2.55-.84 2.5-.84 2.46-.87 2.43-.88 2.38-.88 2.35-.9 2.3-.9 2.25-.92 2.2-.94 2.14-.93 2.1-.95 2.05-.96 1.98-.96 1.93-.98 1.88-.96 1.82-.98 1.74-.98 1.7-.98 1.63-.98 1.56-1 1.5-.97 1.42-.98 1.35-.97 1.28-.98 1.2-.97 1.13-.96 1.05-.95.97-.96.88-.94.8-.93.73-.92.64-.92.55-.9.46-.88.37-.88.28-.2.05-.42.08-.22.02-.43.04h-.68l-.23-.02-.24-.02-.23-.03-.23-.04-.47-.1-.23-.06-.24-.06-.23-.08-.23-.07-.47-.18-.7-.3-.44-.22-.23-.12-.65-.4-.2-.14-.6-.45-.57-.5-.18-.17-.34-.38-.18-.2-.2-.25-.18-.26-.17-.28-.2-.3-.17-.32-.18-.33-.18-.36-.34-.76-.34-.82-.16-.43-.32-.9-.32-.94-.14-.5-.15-.5-.28-1.02-.26-1.06-.13-.54-.23-1.1-.22-1.12-.1-.56-.18-1.12-.08-.57-.14-1.12-.05-.56-.1-1.13-.08-1.1-.01-.54-.02-.4-.02-.44v-4.98l.03-1.26.01-.64.02-.64.01-.65.06-1.92.05-1.25.03-.6.02-.6.03-.58.02-.56.04-.54.06-1 .03-.47.03-.43.03-.4.03-.37.04-.34.03-.3.03-.26.04-.22.03-.18.03-.13.03-.08.03-.04.02.01.02-.01.03.02h.03l.03.02.03.01.1.05.03.03.16.1.05.03.12.08.07.04.07.05.3.2.1.06.07.05.1.06.1.07.08.05.2.14.1.06.3.2.3.22.2.14.2.16 2.5 1.85-.24 5.9-.03.64-.01.66v.65l-.02 1.3v1.3l.03 1.93.04 1.28.03.63.02.62.04.6.04.62.12 1.8.1 1.14.06.56.05.55.13 1.06.14 1.02.08.48.07.47.08.46.08.43.1.44.1.4.08.4.1.37.1.36.1.34.2.6.2.55.22.52.2.5.22.45.23.42.24.38.24.36.24.32.26.3.26.26.28.22.27.2.28.15.3.13.3.08.3.06.3.02h.33l.33-.05.34-.08.36-.12.35-.14.38-.18.38-.22.4-.24.4-.3.42-.32.42-.35.44-.4.44-.42.45-.46.47-.5.48-.53.5-.56.5-.6.5-.63.53-.67.55-.7.55-.73.57-.77.6-.87.63-.9.62-.95.63-.97.62-1.02.63-1.05.64-1.1.63-1.13.64-1.15.63-1.2.63-1.23.64-1.26 1.25-2.6.63-1.35.63-1.37.63-1.4.63-1.42.62-1.46.62-1.47.6-1.5.6-1.52.6-1.54.6-1.56 1.2-3.2.6-1.62.57-1.64.58-1.64.57-1.67.56-1.67.55-1.7.54-1.7.53-1.7.52-1.73.52-1.74.5-1.74.5-1.75.96-3.52 2.2-8.17-5.1-5.15-2.6-2.6-.4-.38-.18-.2-.2-.18-.2-.2-.18-.17-.18-.2-.36-.35-.16-.17-.66-.62-.14-.14-.14-.15-.28-.26-.12-.13-.12-.12-.12-.1-.3-.3-.1-.08-2.14-1.95-18.45 5.42-1.48.46-1.46.44-1.43.46-1.4.44-1.38.45-1.36.44-1.34.45-1.32.45-1.3.45-2.52.88-1.23.46-1.2.44-1.2.45-1.18.46-1.15.45-1.14.46-1.13.47-2.2.92-1.08.47-1.06.47-1.05.47-2.06.96-2 1-1.96 1-1.92 1.02-.95.52-.93.5-.93.54-1.97.98-.9.55-.9.56-.86.53-.82.53-.8.53-.76.52-.72.5-.7.5-.68.5-.63.5-.6.48-.58.5-.54.48-.5.46-.48.47-.45.45-.4.45-.4.44-.35.43-.32.43-.3.42-.26.4-.22.4-.2.4-.16.4-.13.38-.1.36-.07.36-.04.35v.35l.03.33.07.33.1.3.13.3.17.3.2.3.23.28.26.26.3.25.33.25.36.24.4.22.3.16.32.15.35.15.36.15.37.13.4.14.42.13.42.12.45.13.47.12.48.1 1 .2.52.1.54.1.56.1.57.08.58.08.6.08.6.07 1.25.13.64.05 1.32.1.67.04.68.03.7.04.7.02.72.02 1.44.02h2.22l.75-.02.76-.01.76-.02.77-.03.78-.04.14-.01.15-.01h.14l.15-.01.28-.02.28-.01h.15.56.13l.14-.01.52-.01.12-.01h.26l.1-.01h.24l.1-.01h.1l.2-.01.1-.01.1.01h.08l.08-.01h.5l.1.03.1.04.1.06.1.07.12.08.12.1.14.1.15.1.14.12.15.14.16.15.63.63.16.17.48.54.16.2.3.37.14.18.28.35.12.18.12.17.22.32.1.16.1.14.13.26.05.12.04.1.03.1.01.1v.07l-.02.06-.03.03-.25.07h-.08l-.2.02-.3.06h-.13l-.28.03-.14.02-.16.01-.16.02h-.17l-.35.03-.37.04-.2.01-.2.03-.62.04-.22.02-.45.04h-.23l-.23.02-.72.04h-.25l-.23.01-.25.02-1.03.05-1 .06-1 .03-.98.04-.97.03-1.9.02H26.3l-.9-.02h-.9l-.87-.04-.87-.03-1.67-.1-.82-.07-.8-.06-.8-.08-1.54-.18-1.48-.2-.7-.1-1.4-.26-.67-.14-.66-.15-.63-.15-.63-.17-1.2-.34-.58-.2-.55-.2-.54-.2-.53-.2-.52-.22-.5-.23-.48-.22-.46-.24-.45-.26-.4-.23-.4-.25-.38-.25-.35-.25-.34-.25-.33-.27-.6-.52-.28-.27-.25-.27-.24-.28-.23-.28-.4-.6-.18-.3-.16-.3-.14-.3-.13-.3-.1-.3-.17-.63-.05-.32-.05-.33-.03-.34-.01-.33.01-.35.02-.35.04-.34.05-.36.07-.36.08-.37.1-.37.12-.37.13-.38.15-.4.17-.4.18-.4.4-.8.22-.4.74-1.17.4-.57.44-.6.47-.58.5-.6.53-.6 1.14-1.18.62-.6.64-.6.68-.6.7-.6.73-.6.76-.6 1.6-1.2.84-.6.9-.6 1.83-1.2.96-.6 1-.6 1.02-.6 1.04-.6 1.08-.6 1.1-.6 1.13-.6 1.15-.6 1.2-.6 1.22-.6 1.23-.6 1.27-.6 1.3-.6 1.32-.6 1.35-.6 1.38-.6 1.4-.6 1.43-.6 1.46-.6.65-.27.7-.28.77-.3 1.67-.62.9-.34 1.9-.7 1-.35 1.03-.37 1.07-.37 1.07-.38 1.1-.37 1.1-.38 1.12-.38 1.14-.38 1.13-.38 2.26-.75 5.45-1.76 1.04-.32 1-.3.96-.3 1.83-.55.85-.25.8-.23.75-.2.7-.2.63-.17.58-.14.5-.13.44-.1.37-.08.3-.05.22-.01 1.55-.03-1.57-1.52-.26-.24-.3-.28-.32-.28-.36-.3-.38-.34-.4-.35-.45-.38-.46-.4-.5-.4-.5-.42-.54-.43-.54-.45-.58-.46-1.2-.94-.6-.48-1.28-1-.65-.5-1.32-1.02-1.34-1.02-.7-.5-.67-.5-.68-.5-1.34-1-.66-.5-.66-.48-.65-.47-.64-.46-.63-.46-.6-.43-.6-.42-.58-.42-.56-.4-.56-.38-.52-.36-.52-.34-1.54-1-.78-.5-.76-.48-1.54-.92-.77-.45-.76-.43-1.52-.84-.75-.4-.74-.4-.74-.38-.72-.36-1.44-.68-.7-.32-1.38-.6-.67-.27-.66-.27-.65-.25-.64-.23-.6-.22-1.2-.4-.58-.17-.55-.15-.54-.14-.53-.12-.5-.1-.48-.08-.48-.07-.44-.05-.43-.03h-.78l-.36.03-.34.04-.3.07-.35.1-.33.14-.3.2-.27.22-.23.25-.2.28-.18.32-.15.35-.13.38-.1.42-.06.44-.04.48-.01.5.02.53.05.56.06.6.1.62.12.63.15.67.18.7.2.73.22.73.55 1.57.3.8.33.83.36.86.4.88.4.9.43.9.47.94.48.94.5.97.53.98.56 1 .58 1.02.6 1.03.64 1.04.65 1.06.67 1.07 2.8 4.43-1.25 2.8
17326-.05.12-.1.22-.05.13-.1.23-.06.1-.05.12-.05.1-.05.12-.04.1-.1.2-.04.1-.1.2-.03.1-.05.1-.1.24-.05.08-.03.07-.13.26-.1.16-.02.04-.03.04-.05.1-.07.07h-.05l-.16-.16-.12-.13-.13-.18-.16-.2-.18-.24-.2-.28-.22-.3-.23-.33-.5-.75-.27-.4-.28-.43-.3-.45L30 56l-.63-1-.66-1.03-1-1.6-.34-.56-.33-.55-.34-.54-.65-1.1-.33-.54-.3-.53-.32-.53-.58-1-.28-.5-.27-.47-.25-.46-.25-.43-.22-.4-.4-.76-.26-.48-.25-.5-.24-.5-.48-1.02-.22-.52-.45-1.05-.6-1.6-.2-.54-.18-.53-.2-.53-.34-1.06-.16-.54-.3-1.04-.28-1.03-.24-1-.1-.5-.2-.96-.08-.47-.14-.9-.06-.43-.04-.42-.04-.4-.02-.4v-.38l-.01-.36.01-.36v-.33l.06-.62.05-.27.1-.5.07-.24.08-.24.08-.25.08-.23.2-.48.2-.46.24-.46.12-.2.27-.44.14-.2.44-.6.16-.2.32-.37.17-.17.17-.18.17-.16.18-.17.37-.3.18-.14.2-.14L22 19l.38-.24.6-.3.4-.16.4-.13.73-.15.77-.1.8-.07.86-.01.9.03.94.1.96.13 1 .2 1.04.22 1.07.27 1.12.33 1.14.36 1.17.42 1.2.44 1.24.5 1.26.54 1.3.6 1.3.63 1.34.66 1.37.7 1.38.74 1.4.78 1.43.83 1.45.86 1.46.9 1.48.94 1.5.98 1.5 1 1.53 1.05 1.54 1.08 1.55 1.12 1.56 1.15 1.58 1.17 1.58 1.22 1.6 1.25 1.6 1.28 1.6 1.3 1.6 1.34 1.6 1.37 1.6 1.4 5.42 4.82L88.7 49l1.12-.2 1.07-.2.52-.1.75-.15.24-.03.46-.1.22-.04.43-.07.4-.07.2-.03.18-.03.35-.05.16-.02.15-.03.15-.02.27-.04.12-.01h.1.56l.08-.02.1-.04.08-.04.1-.06.16-.16.07-.1.08-.1.07-.13.07-.15.06-.16.08-.18.07-.2.06-.22.06-.23.06-.25.06-.27.07-.28.05-.3.06-.32.05-.34.06-.36.05-.4.06-.4.05-.43.05-.44.06-.47.05-.5.04-.5.05-.53.05-.56.05-.58.05-.6.05-.63.04-.65.05-.68.05-.7.05-.73.04-.75.06-1.1.05-1.1.04-1.06.06-2.1v-3l-.02-.97-.02-.96-.08-1.85-.05-.9-.07-.88-.07-.86-.08-.84-.1-.82-.1-.8-.1-.77-.1-.75-.13-.72-.12-.7-.14-.67-.15-.65-.15-.62-.16-.6-.17-.57-.17-.54-.2-.52-.2-.48-.2-.47-.2-.42-.22-.4-.22-.37-.23-.34-.23-.3-.24-.27-.25-.24-.25-.2-.27-.17-.26-.13-.3-.1-.3-.11-.3-.05-.3-.02-.3.01L92 6l-.33.05-.34.1-.34.12-.35.14-.72.4-.37.24-.38.26-.38.3-.4.32-.4.35-.4.38-.4.4-.4.44-.44.46-.43.48-.44.5-.45.55-.46.56-.45.6-.47.62-.48.64-.47.7-.5.7-.5.72-.5.77-.5.78-.5.8-.5.84-.53.86-1.06 1.8-.54.95-4.72 8.25-3.1.4-.1.01-.12.01h-.1-.12-.1-.1-.1-.8-.08-.07l-.1-.01h-.07l-.07-.01-.2-.04h-.1l-.1-.04h-.04l-.1-.06-.03-.02-.01-.03-.02-.02-.01-.04v-.03l.02-.12.03-.15.06-.2.07-.22.1-.24.1-.28.12-.3.15-.32L68 29l.17-.37.18-.4.2-.4.2-.43.2-.44.22-.45.24-.47.47-.98.5-1 .26-.5.26-.52.8-1.52.28-.5.27-.5.26-.5.28-.5.52-.94.26-.45.25-.44.25-.42.25-.4.23-.4.22-.36.22-.34.2-.33.2-.3.44-.65.88-1.27.43-.6.86-1.18.83-1.1.42-.54 1.22-1.53.4-.48.4-.46.4-.45.4-.43.78-.82.4-.4.76-.74.38-.34.74-.66.74-.6.37-.28.36-.27L87 2l.7-.45.36-.2.35-.2.35-.18.34-.16.36-.15.33-.15.34-.12.34-.1.33-.1.42-.1.22-.04.2-.02.22-.02.44-.02h.23l.23.01.22.02zM93.4 54l-1.16.23-1.25.3-1.2.35-1 .34-.76.3-.45.26-.08.2 1.14 1.27 1.7 1.75 1.82 1.78 1.48 1.37.7.54.16-.26.22-.63.26-.95.3-1.2.28-1.37.28-1.57.15-1.23v-.87l-.13-.56-.27-.24-.44-.04-.75.06-1 .15zm-48.7-.1l-4.34 1.68 1.3-2.42c1.68-3.17 5.8-7.83 9.24-10.44.18-.15 1.08-.86 2.72-2.15l2.32 1.64c1.27.9 2.35 1.77 2.4 2 .05.18-.83 1-1.94 1.7-1.16.76-3.28 2.5-4.73 3.86-1.84 1.8-3.86 2.98-6.97 4.14zm24.9 58.64c-10.8-1.44-21.16-8-27.37-17.4-2.63-4.02-5.8-12.95-6-16.85-.12-2.35.07-2.6 2.43-3.7 1.4-.63 2.62-1.1 2.76-1.06.1.1.5 2.38.8 5.16 1.1 8.96 6.72 17.88 14.56 22.95 4.32 2.86 10.6 5 15.18 5.26 1.78.1 3.3.4 3.33.6.07.25-.43 1.54-1.1 2.95l-1.18 2.6-3.43-.5zm4.3-76.72c-1.95-1.94 9.3-.5 15.27 2 3.42 1.4 3.68 1.6 3.44 3.15-.18 1.3-5.97 1.87-9.46.92-2.5-.68-6.43-3.26-9.25-6.06zm24.78 60.43c1.57-1.66 3.27-3.8 3.7-4.6 1.06-2.1 1.5-2.1 2.76-.36.56.88 1.35 1.9 1.74 2.45.5.64.01 1.67-1.63 3.8-3.97 5.2-13.04 12.18-12.28 9.44 1.38-4.5 3.2-8.05 5.72-10.72zm11.5-24.45c-1.94-2.4-2.9-4.28-3.57-6.82-1.68-6.27.9-12.08 3.24-7.47 1.32 2.5 3.28 10.33 3.57 14.07.17 1.83.08 3.4-.1 3.46-.24.06-1.6-1.45-3.13-3.24z"/></defs><g fill="url(#light-theme-gradient)"><use xlink:href="#light-theme-logo"/></g></svg>
1733              <span class="flex grow gap-2">Embla Carousel</span>
1734            </div>
1735          </div>
1736        </div>
1737      </template>
1738    </div>
1739
1740    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1741      <section class="overflow-hidden mx-auto" data-controller="carousel"
1742        data-carousel-loop-value="true"
1743        data-carousel-drag-free-value="false"
1744        data-carousel-dots-value="true"
1745        data-carousel-buttons-value="true">
1746        <div class="overflow-hidden outline-hidden pt-1 cursor-grab active:cursor-grabbing md:[--carousel-fade-size:1.25rem] md:[mask-image:linear-gradient(to_right,transparent,black_var(--carousel-fade-size),black_calc(100%-var(--carousel-fade-size)),transparent)] md:[-webkit-mask-image:linear-gradient(to_right,transparent,black_var(--carousel-fade-size),black_calc(100%-var(--carousel-fade-size)),transparent)]" data-carousel-target="viewport">
1747          <div class="flex">
1748            <div class="mr-2 text-xs flex-shrink-0 flex-grow-0 basis-full sm:basis-3/4 md:basis-2/3 min-w-0 px-3 sm:px-4 py-6 sm:py-8 text-center rounded-xl border border-neutral-200 bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 relative select-none">
1749              Slide 1
1750            </div>
1751            <div class="mr-2 text-xs flex-shrink-0 flex-grow-0 basis-full sm:basis-3/4 md:basis-2/3 min-w-0 px-3 sm:px-4 py-6 sm:py-8 text-center rounded-xl border border-neutral-200 bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 relative select-none">
1752              Slide 2
1753            </div>
1754            <div class="mr-2 text-xs flex-shrink-0 flex-grow-0 basis-full sm:basis-3/4 md:basis-2/3 min-w-0 px-3 sm:px-4 py-6 sm:py-8 text-center rounded-xl border border-neutral-200 bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700 relative select-none">
1755              Slide 3
1756            </div>
1757          </div>
1758        </div>
1759
1760        <div class="flex justify-between items-center mt-4 pb-1">
1761          <div class="grid grid-cols-2 gap-1 items-center z-20">
1762            <button class="flex items-center justify-center size-6 rounded-full bg-white p-1 text-sm font-semibold text-neutral-800 shadow-xs hover:bg-neutral-50 outline-hidden border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/75" type="button" data-carousel-target="prevButton" aria-label="Previous">
1763              <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-700 dark:text-neutral-300 size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M11.5 16C11.308 16 11.116 15.9271 10.97 15.7801L4.71999 9.53005C4.42699 9.23705 4.42699 8.76202 4.71999 8.46902L10.97 2.21999C11.263 1.92699 11.738 1.92699 12.031 2.21999C12.324 2.51299 12.324 2.98803 12.031 3.28103L6.311 9.001L12.031 14.721C12.324 15.014 12.324 15.489 12.031 15.782C11.885 15.928 11.693 16.002 11.501 16.002L11.5 16Z"></path></g></svg>
1764            </button>
1765
1766            <button class="flex items-center justify-center size-6 rounded-full bg-white p-1 text-sm font-semibold text-neutral-800 shadow-xs hover:bg-neutral-50 outline-hidden border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/75" type="button" data-carousel-target="nextButton" aria-label="Next">
1767              <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-700 dark:text-neutral-300 size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.28 8.46999L7.03 2.21999C6.737 1.92699 6.262 1.92699 5.969 2.21999C5.676 2.51299 5.676 2.98803 5.969 3.28103L11.689 9.001L5.969 14.721C5.676 15.014 5.676 15.489 5.969 15.782C6.115 15.928 6.307 16.002 6.499 16.002C6.691 16.002 6.883 15.929 7.029 15.782L13.279 9.53201C13.572 9.23901 13.572 8.76403 13.279 8.47103L13.28 8.46999Z"></path></g></svg>
1768            </button>
1769          </div>
1770
1771          <div class="flex flex-wrap justify-end items-center gap-1.5 z-20" data-carousel-target="dotsContainer"></div>
1772        </div>
1773      </section>
1774    </div>
1775  </div>
1776  <a href="/docs/carousel" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1777    <div class="h-48"></div>
1778    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1779      Carousel
1780      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1781    </p>
1782    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p>
1783  </a>
1784</li>
1785
1786
1787              <li class="relative">
1788  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1789    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1790      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1790k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1791        <span class="text-xs">?</span>
1792      </button>
1793
1794      <template data-popover-target="content">
1795        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1796          <div class="space-y-2">
1797            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1798
1799            <div class="flex items-center gap-1.5 text-xs">
1800              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1801              <span class="flex grow gap-2">Tailwind CSS</span>
1802            </div>
1803
1804          </div>
1805        </div>
1806      </template>
1807    </div>
1808
1809    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1810      <div class="flex items-center gap-x-3">
1811        <input type="checkbox" id="checked-checkbox">
1812        <label for="checked-checkbox" class="inline-block select-none">Checkbox input</label>
1813      </div>
1814    </div>
1815  </div>
1816  <a href="/docs/checkbox" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1817    <div class="h-48"></div>
1818    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1819      Checkbox
1820      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1821    </p>
1822    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
1823  </a>
1824</li>
1825
1826
1827              <li class="relative">
1828  <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
1829  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
1830    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
1831      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
1832      New
1833    </div>
1834  </div>
1835</div>
1836
1837
1838  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1839    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1840      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1840k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1841        <span class="text-xs">?</span>
1842      </button>
1843
1844      <template data-popover-target="content">
1845        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1846          <div class="space-y-2">
1847            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1848
1849            <div class="flex items-center gap-1.5 text-xs">
1850              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1851              <span class="flex grow gap-2">Tailwind CSS</span>
1852            </div>
1853
1854            <div class="flex items-center gap-1.5 text-xs">
1855              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1855ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1856                <g class="fill-neutral-800 dark:fill-white">
1857                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1858                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1859                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1860                </g>
1861              </svg>
1862              <span class="flex grow gap-2">Stimulus</span>
1863            </div>
1864          </div>
1865        </div>
1866      </template>
1867    </div>
1868
1869    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
1870      <div class="w-fit mx-auto" data-controller="checkbox-select-all" data-checkbox-select-all-toggle-key-value="x">
1871  <div class="space-y-1.5">
1872    <!-- Select All -->
1873    <div class="flex items-center gap-x-3">
1874      <input
1875        type="checkbox"
1876        id="preview-select-all"
1877        tabindex="0"
1878        data-checkbox-select-all-target="selectAll"
1879        data-action="click->
1879checkbox-select-all#toggleAll">
1880      <label for="preview-select-all" class="inline-block text-sm font-medium cursor-pointer select-none">
1881        Select All
1882      </label>
1883    </div>
1884
1885    <!-- Checkbox List -->
1886    <div class="space-y-1.5 pl-7">
1887      <div class="flex items-center gap-x-3">
1888        <input
1889          type="checkbox"
1890          id="preview-item-1"
1891          tabindex="0"
1892          data-checkbox-select-all-target="checkbox"
1893          data-action="click->checkbox-select-all#toggle">
1894        <label for="preview-item-1" class="inline-block text-sm cursor-pointer select-none">
1895          Product Design
1896        </label>
1897      </div>
1898
1899      <div class="flex items-center gap-x-3">
1900        <input
1901          type="checkbox"
1902          id="preview-item-2"
1903          tabindex="0"
1904          data-checkbox-select-all-target="checkbox"
1905          data-action="click->checkbox-select-all#toggle">
1906        <label for="preview-item-2" class="inline-block text-sm cursor-pointer select-none">
1907          Development
1908        </label>
1909      </div>
1910
1911      <div class="flex items-center gap-x-3">
1912        <input
1913          type="checkbox"
1914          id="preview-item-3"
1915          tabindex="0"
1916          data-checkbox-select-all-target="checkbox"
1917          data-action="click->checkbox-select-all#toggle">
1918        <label for="preview-item-3" class="inline-block text-sm cursor-pointer select-none">
1919          Marketing
1920        </label>
1921      </div>
1922    </div>
1923  </div>
1924</div>
1925
1926
1927    </div>
1928  </div>
1929  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/checkbox-select-all" data-turbo-frame="_top">
1930    <div class="h-48"></div>
1931    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1932      Checkbox Select All
1933      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
1934    </p>
1935    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
1936  </a>
1937</li>
1938
1939
1940
1941              <li class="relative">
1942  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
1943    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
1944      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
1944k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1945        <span class="text-xs">?</span>
1946      </button>
1947
1948      <template data-popover-target="content">
1949        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
1950          <div class="space-y-2">
1951            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
1952
1953            <div class="flex items-center gap-1.5 text-xs">
1954              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
1955              <span class="flex grow gap-2">Tailwind CSS</span>
1956            </div>
1957
1958            <div class="flex items-center gap-1.5 text-xs">
1959              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
1959ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
1960                <g class="fill-neutral-800 dark:fill-white">
1961                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
1962                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
1963                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
1964                </g>
1965              </svg>
1966              <span class="flex grow gap-2">Stimulus</span>
1967            </div>
1968
1969            <div class="flex items-center gap-1.5 text-xs">
1970              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
1971              <span class="flex grow gap-2">Floating UI</span>
1972            </div>
1973          </div>
1974        </div>
1975      </template>
1976    </div>
1977
1978    <div class="relative relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
1979
1980      <button class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
1980k:focus-visible:outline-neutral-200"
1981                  data-controller="clipboard"
1982                  data-clipboard-text="https://railsblocks.com"
1983                  data-clipboard-show-tooltip-value="true"
1984                  data-clipboard-success-message-value="Share it with friends 🙌">
1985        <div data-clipboard-target="copyContent" class="flex items-center gap-1.5">
1986          <span>Copy URL</span>
1987          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm4.75,10.25H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Zm0-3H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path></g></svg>
1988        </div>
1989        <div data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5">
1990          <span>Copied</span>
1991          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm5.35,5.45l-3.75,5c-.136,.181-.346,.291-.572,.299-.009,0-.019,0-.028,0-.216,0-.422-.093-.564-.256l-1.75-2c-.273-.312-.241-.785,.071-1.058s.785-.242,1.058,.071l1.141,1.303,3.195-4.26c.249-.331,.719-.397,1.05-.15,.331,.249,.398,.719,.15,1.05Z"></path></g></svg>
1992        </div>
1993      </button>
1994    </div>
1995  </div>
1996  <a href="/docs/clipboard" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
1997    <div class="h-48"></div>
1998    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
1999      Clipboard
2000      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2001    </p>
2002    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p>
2003  </a>
2004</li>
2005
2006
2007              <li class="relative">
2008  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2009    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2010      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2010k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2011        <span class="text-xs">?</span>
2012      </button>
2013
2014      <template data-popover-target="content">
2015        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2016          <div class="space-y-2">
2017            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2018
2019            <div class="flex items-center gap-1.5 text-xs">
2020              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2021              <span class="flex grow gap-2">Tailwind CSS</span>
2022            </div>
2023
2024            <div class="flex items-center gap-1.5 text-xs">
2025              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2025ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2026                <g class="fill-neutral-800 dark:fill-white">
2027                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2028                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2029                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2030                </g>
2031              </svg>
2032              <span class="flex grow gap-2">Stimulus</span>
2033            </div>
2034          </div>
2035        </div>
2036      </template>
2037    </div>
2038
2039    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
2040      <div data-controller="collapsible" data-collapsible-open-value="false" data-state="closed" class="w-[350px] space-y-2">
2041        <!-- Header with toggle button -->
2042        <div class="flex items-center justify-between space-x-4">
2043          <h4 class="text-xs font-semibold">You starred 2 repositories</h4>
2044
2045          <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-1.5 -sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200" data-action="click->
2045collapsible#toggle">
2046            <!-- Collapsed state icon (visible by default) -->
2047
2048            <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute transition-opacity duration-200 ease-in-out size-3.5" style="opacity: 0;">
2049              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
2050                <polyline points="12.5 6.25 9 2.75 5.5 6.25"></polyline>
2051                <polyline points="12.5 11.75 9 15.25 5.5 11.75"></polyline>
2052              </g>
2053            </svg>
2054
2055            <!-- Expanded state icon (hidden by default) -->
2056            <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="transition-opacity duration-200 ease-in-out size-3.5" style="opacity: 0;">
2057              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
2058                <polyline points="5.5 3.5 9 7 12.5 3.5"></polyline>
2059                <polyline points="5.5 14.5 9 11 12.5 14.5"></polyline>
2060              </g>
2061            </svg>
2062
2063            <span class="sr-only">Toggle</span>
2064          </button>
2065        </div>
2066
2067        <!-- Always visible content -->
2068        <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-3 py-2 font-mono text-xs">rails/rails</div>
2069
2070        <!-- Collapsible content -->
2071        <div data-collapsible-target="content" data-state="closed" class="space-y-2 overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0; opacity: 0;">
2072          <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-3 py-2 font-mono text-xs">hotwired/stimulus</div>
2073        </div>
2074      </div>
2075    </div>
2076  </div>
2077  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/collapsible" data-turbo-frame="_top">
2078    <div class="h-48"></div>
2079    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2080      Collapsible
2081      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2082    </p>
2083    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p>
2084  </a>
2085</li>
2086
2087
2088                <li class="sm:hidden col-span-1">
2089                  <div class="relative mt-8 mb-6">
2090  <div class="mx-auto">
2091    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
2092      <div data-controller="newsletter"
2093           class="max-w-xs">
2094        <div data-newsletter-target="form">
2095          <form data-action="submit->newsletter#submit"
2096                class="space-y-3">
2097            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
2098            <input type="email"
2099                  data-newsletter-target="email"
2100                  placeholder="Enter your email..."
2101                  class="form-control"
2102                  
2103                  required>
2104            <div class="flex justify-center">
2105              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
2106            </div>
2107            <button type="submit"
2108                    data-newsletter-target="submitButton"
2109                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
2109k:focus-visible:outline-neutral-200">
2110              Subscribe to the newsletter
2111            </button>
2112          </form>
2113          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
2114            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
2115          </div>
2116        </div>
2117
2118        <div data-newsletter-target="successMessage"
2119             class="text-center py-4"
2120             style="display: none;">
2121          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
2122            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2123              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
2124            </svg>
2125          </div>
2126          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
2127          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
2128        </div>
2129      </div>
2130    </div>
2131  </div>
2132</div>
2133
2134                </li>
2135              <li class="z-20 relative">
2136  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2137    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2138      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2139        <span class="text-xs">?</span>
2140      </button>
2141
2142      <template data-popover-target="content">
2143        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2144          <div class="space-y-2">
2145            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2146
2147            <div class="flex items-center gap-1.5 text-xs">
2148              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2149              <span class="flex grow gap-2">Tailwind CSS</span>
2150            </div>
2151
2152            <div class="flex items-center gap-1.5 text-xs">
2153              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2153ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2154                <g class="fill-neutral-800 dark:fill-white">
2155                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2156                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2157                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2158                </g>
2159              </svg>
2160              <span class="flex grow gap-2">Stimulus</span>
2161            </div>
2162
2163            <div class="flex items-center gap-1.5 text-xs">
2164              <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 127 141" version="1.1">
2165                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2166                  <g fill-rule="nonzero" fill="#0ea5e9">
2167                    <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.7
21675,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"/>
2168                  </g>
2169                </g>
2170              </svg>
2171              <span class="flex grow gap-2">Shoelace</span>
2172            </div>
2173          </div>
2174        </div>
2175      </template>
2176    </div>
2177
2178    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
2179
2180      <div>
2181        <sl-color-picker
2182          value="#fff"
2183          class="z-50"
2184          opacity
2185          label="Select a color"
2186          format="hex"
2187          swatches="
2188            #fb2c36 ; #ff6900 ; #fe9a00 ; #f0b100 ; #7ccf00 ; #00c950 ; #00bc7d ; #00bba7 ; #00b8db ; #00a6f4 ; #2b7fff ; #615fff ; #8e51ff ; #ad46ff ; #e12afb ; #f6339a
2189          "
2190        ></sl-color-picker>
2191
2192      </div>
2193
2194    </div>
2195  </div>
2196  <a href="/docs/color-picker" data-turbo-frame="_top" class="group z-20 block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2197    <div class="h-48"></div>
2198    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2199      Color picker
2200      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2201    </p>
2202    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
2203  </a>
2204</li>
2205
2206
2207              <li class="relative">
2208  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2209    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2210      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2210k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2211        <span class="text-xs">?</span>
2212      </button>
2213
2214      <template data-popover-target="content">
2215        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2216          <div class="space-y-2">
2217            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2218
2219            <div class="flex items-center gap-1.5 text-xs">
2220              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2221              <span class="flex grow gap-2">Tailwind CSS</span>
2222            </div>
2223
2224            <div class="flex items-center gap-1.5 text-xs">
2225              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2225ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2226                <g class="fill-neutral-800 dark:fill-white">
2227                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2228                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2229                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2230                </g>
2231              </svg>
2232              <span class="flex grow gap-2">Stimulus</span>
2233            </div>
2234
2235            <div class="flex items-center gap-1.5 text-xs">
2236              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.25,13H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,16H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,2H3.75c-1.517,0-2.75,1.233-2.75,2.75v2.5c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75v-2.5c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,6.5H3.75c-.689,0-1.25-.561-1.25-1.25v-2.5c0-.689,.561-1.25,1.25-1.25h4.75v5Zm5.833-2.833l-1.25,1.667c-.078,.105-.202,.167-.333,.167s-.255-.062-.333-.167l-1.25-1.667c-.095-.126-.11-.295-.039-.436,.071-.141,.215-.23,.373-.23h2.5c.158,0,.302,.089,.373,.23,.07,.141,.055,.31-.039,.436Z"></path></g></svg>
2237              <span class="flex grow gap-2">Tom select</span>
2238            </div>
2239
2240            <div class="flex items-center gap-1.5 text-xs">
2241              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
2242              <span class="flex grow gap-2">Floating UI</span>
2243            </div>
2244
2245          </div>
2246        </div>
2247      </template>
2248    </div>
2249
2250    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center *:w-full">
2251
2252      <select name="frameworks_with_icons[]" id="frameworks_with_icons" multiple="multiple" data-controller="select" data-autocomplete="off" data-class="w-full" data-select-dropdown-input-value="true"><option value="">Select framework...</option><option value="rails">{&quot;icon&quot;:&quot;\u003cimg class=&#39;size-5 my-0 dark:invert&#39; src=&#39;https://cdn.prod.website-files.com/61d14fa88c31332eb4187c19/62af9b63d93f763db776358d_Tech-Rails-Black.png&#39;\u003e&quot;,&quot;name&quot;:&quot;Rails&quot;,&quot;side&quot;:&quot;\u003cspan class=&#39;ml-auto text-xs border border-neutral-200 bg-white px-1 py-0.5 rounded-md dark:bg-neutral-900/50 dark:border-neutral-700&#39;\u003e42\u003c/span\u003e&quot;}</option>
2253<option value="laravel">{&quot;icon&quot;:&quot;\u003cimg class=&#39;size-5 my-0 dark:invert&#39; src=&#39;https://cdn.prod.website-files.com/61d14fa88c31332eb4187c19/62af928c450de106001471fd_Tech-Laravel-Black.png&#39;\u003e&quot;,&quot;name&quot;:&quot;Laravel&quot;,&quot;side&quot;:&quot;\u003cspan class=&#39;ml-auto text-xs border border-neutral-200 bg-white px-1 py-0.5 rounded-md dark:bg-neutral-900/50 dark:border-neutral-700&#39;\u003e21\u003c/span\u003e&quot;}</option>
2254<option value="django">{&quot;icon&quot;:&quot;\u003cimg class=&#39;size-5 my-0 dark:invert&#39; src=&#39;https://cdn.prod.website-files.com/61d14fa88c31332eb4187c19/62af943503138202b88a1ef6_Tech-Django-Black.png&#39;\u003e&quot;,&quot;name&quot;:&quot;Django&quot;,&quot;side&quot;:&quot;\u003cspan class=&#39;ml-auto text-xs border border-neutral-200 bg-white px-1 py-0.5 rounded-md dark:bg-neutral-900/50 dark:border-neutral-700&#39;\u003e12\u003c/span\u003e&quot;}</option></select>
2255    </div>
2256  </div>
2257  <a href="/docs/combobox" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2258    <div class="h-48"></div>
2259    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2260      Combobox (Multi-select)
2261      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2262    </p>
2263    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 10 components</p>
2264  </a>
2265</li>
2266
2267
2268              <li class="relative">
2269    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
2270    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
2271      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
2272        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
22726,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
2273        Pro
2274      </a>
2275    </div>
2276  </div>
2277
2278  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2279    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2280      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2281        <span class="text-xs">?</span>
2282      </button>
2283
2284      <template data-popover-target="content">
2285        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2286          <div class="space-y-2">
2287            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2288
2289            <div class="flex items-center gap-1.5 text-xs">
2290              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2291              <span class="flex grow gap-2">Tailwind CSS</span>
2292            </div>
2293
2294            <div class="flex items-center gap-1.5 text-xs">
2295              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2295ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2296                <g class="fill-neutral-800 dark:fill-white">
2297                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2298                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2299                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2300                </g>
2301              </svg>
2302              <span class="flex grow gap-2">Stimulus</span>
2303            </div>
2304
2305            <div class="flex items-center gap-1.5 text-xs">
2306              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
2307              <span class="flex grow gap-2">Floating UI</span>
2308            </div>
2309          </div>
2310        </div>
2311      </template>
2312    </div>
2313
2314    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
2315      <div class="w-full max-w-xs flex justify-center">
2316        <div data-controller="modal">
2317  <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" data-action="click->
2317modal#open:prevent">
2318    Search brands
2319  </button>
2320
2321  <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-900 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose">
2322    <div class="sm:max-w-md w-full">
2323
2324      <div class="sm:max-w-md mx-auto w-full">
2325        <form class="relative"
2326              data-controller="autocomplete"
2327              data-autocomplete-submit-on-select-value="false" 
2328              data-autocomplete-highlight-matches-value="false"
2329              data-autocomplete-suggestion-class-value="border-l-3 border-transparent"
2330              data-autocomplete-selected-class-value="bg-neutral-50 dark:bg-neutral-800 border-l-neutral-800 dark:border-l-neutral-200 selected"
2331              data-autocomplete-anchor-value="form"
2332              data-autocomplete-render-mode-value="inline"
2333              data-autocomplete-always-show-value="true"
2334              data-autocomplete-auto-select-first-value="true"
2335              data-autocomplete-preserve-search-on-select-value="true" 
2336              data-autocomplete-select-action-value="modal#close:prevent"
2337              data-autocomplete-local-data-value='[{&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;
2337 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;
2337 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;
2337 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;
2337 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;
2337 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;
2337 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;
2337 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;
2337 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;
2337 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;
2337 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;}]'>
2338
2339          <div class="relative">
2340            <input id="basic_command_palette"
2341                   autofocus
2342                   required
2343                   data-autocomplete-target="input"
2344                   placeholder="Select a brand..."
2345                   class="border-b border-black/10 dark:border-white/10 w-full outline-none py-4 px-4">
2346
2347            <!-- Clear Button -->
2348            <button type="button"
2349                    data-autocomplete-target="clearButton"
2350                    data-action="click->autocomplete#clearInput"
2351                    class="hidden absolute right-2 top-1/2 -translate-y-1/2 items-center justify-center size-8 mr-1 rounded-full hover:bg-neutral-100 transition-colors text-neutral-400 hover:text-neutral-500 dark:hover:bg-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-neutral-600 dar
2351k:focus-visible:outline-neutral-200">
2352              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9.75" x2="9.75" y2="2.25"></line><line x1="9.75" y1="9.75" x2="2.25" y2="2.25"></line></g></svg>
2353            </button>
2354          </div>
2355
2356          <div data-autocomplete-target="results"
2357              class="small-scrollbar w-full bg-white dark:bg-neutral-900 max-h-[250px] overflow-y-auto"
2358              role="listbox"
2359              tabindex="-1">
2360          </div>
2361        </form>
2362      </div>
2363
2364      <!-- Footer -->
2365      <div class="hidden sm:flex flex-wrap gap-1 items-center bg-neutral-50 px-4 py-3 text-xs text-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-t border-black/10 dark:border-white/10">
2366        <div class="flex items-center gap-1">
2367          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Esc</kbd>
2368          <span>to close,</span>
2369        </div>
2370        <div class="flex items-center gap-1">
2371          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">Enter</kbd>
2372          <span>to select,</span>
2373        </div>
2374        <div class="flex items-center gap-1">
2375          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">
2376            <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.391,8.448L9.398,1.867c-.2-.264-.597-.264-.797,0L3.609,8.448c-.25,.329-.015,.802,.398,.802h2.743v6c0,.552,.448,1,1,1h2.5c.552,0,1-.448,1-1v-6h2.743c.413,0,.648-.473,.398-.802Z"></path></g></svg>
2377          </kbd>
2378          <kbd class="px-1.5 py-0.5 text-xs font-mono bg-neutral-200 dark:bg-neutral-700 rounded">
2379            <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.609,9.552l4.993,6.581c.2,.264,.597,.264,.797,0l4.993-6.581c.25-.329,.015-.802-.398-.802h-2.743V2.75c0-.552-.448-1-1-1h-2.5c-.552,0-1,.448-1,1v6h-2.743c-.413,0-.648,.473-.398,.802Z"></path></g></svg>
2380          </kbd>
2381          <span>to navigate.</span>
2382        </div>
2383      </div>
2384    </div>
2385  </dialog>
2386</div>
2387
2388      </div>
2389    </div>
2390  </div>
2391  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/command-palette" data-turbo-frame="_top">
2392    <div class="h-48"></div>
2393    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2394      Command Palette
2395      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2396    </p>
2397    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
2398  </a>
2399</li>
2400
2401
2402              <li class="relative">
2403  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2404    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2405      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2405k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2406        <span class="text-xs">?</span>
2407      </button>
2408
2409      <template data-popover-target="content">
2410        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2411          <div class="space-y-2">
2412            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2413
2414            <div class="flex items-center gap-1.5 text-xs">
2415              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2416              <span class="flex grow gap-2">Tailwind CSS</span>
2417            </div>
2418
2419            <div class="flex items-center gap-1.5 text-xs">
2420              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2420ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2421                <g class="fill-neutral-800 dark:fill-white">
2422                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2423                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2424                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2425                </g>
2426              </svg>
2427              <span class="flex grow gap-2">Stimulus</span>
2428            </div>
2429          </div>
2430        </div>
2431      </template>
2432    </div>
2433
2434    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
2435      <div class="max-w-md mx-auto">
2436  <div data-controller="modal">
2437
2438    <button class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
2438k:focus-visible:outline-neutral-200"
2439            data-action="click->modal#open:prevent">
2440      Create Workspace
2441    </button>
2442
2443    <dialog class="modal max-w-[100vw-2rem] sm:max-w-md bg-transparent rounded-xl w-full lg:rounded-2xl z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-800 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"
2444            data-modal-target="dialog"
2445            data-action="mousedown->modal#backdropClose">
2446
2447      <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rounded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline">
2448        <button type="button"
2449                data-action="modal#close:prevent"
2450                class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none">
2451          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2452            <line x1="18" x2="6" y1="6" y2="18"></line>
2453            <line x1="6" x2="18" y1="6" y2="18"></line>
2454          </svg>
2455          <span class="sr-only">Close</span>
2456        </button>
2457
2458        <div class="mb-4">
2459          <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Create Workspace</h2>
2460        </div>
2461
2462        <form data-controller="confirmation"
2463              data-confirmation-confirm-text-value="CREATE">
2464          <div class="mb-6">
2465            <label for="workspace-creation-confirmation" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
2466              Type <span class="inline rounded-md border border-black/10 bg-white px-1 py-0.5 font-mono text-neutral-800 dark:border-white/10 dark:bg-neutral-900 dark:text-neutral-200">CREATE</span> to confirm:
2467            </label>
2468            <input type="text"
2469                   id="workspace-creation-confirmation"
2470                   data-confirmation-target="input"
2471                   class="form-control"
2472                   autocomplete="off"
2473                   placeholder="Type CREATE to confirm"
2474                   autofocus>
2475          </div>
2476
2477          <div class="flex gap-3 justify-end">
2478            <button type="button"
2479                    data-action="click->modal#close:prevent click->confirmation#cancel"
2480                    class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
2481              Cancel
2482            </button>
2483            <button type="button"
2484                    data-confirmation-target="confirmButton"
2485                    data-action="click->confirmation#confirm click->modal#close:prevent"
2486                    disabled
2487                    class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
2488              Create Workspace
2489            </button>
2490          </div>
2491        </form>
2492      </div>
2493    </dialog>
2494  </div>
2495</div>
2496
2497    </div>
2498  </div>
2499  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/confirmation" data-turbo-frame="_top">
2500    <div class="h-48"></div>
2501    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2502      Confirmation
2503      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2504    </p>
2505    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
2506  </a>
2507</li>
2508
2509
2510              <li class="relative">
2511    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
2512    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
2513      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
2514        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
25146,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
2515        Pro
2516      </a>
2517    </div>
2518  </div>
2519
2520  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2521    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2522      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2523        <span class="text-xs">?</span>
2524      </button>
2525
2526      <template data-popover-target="content">
2527        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2528          <div class="space-y-2">
2529            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2530
2531            <div class="flex items-center gap-1.5 text-xs">
2532              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2533              <span class="flex grow gap-2">Tailwind CSS</span>
2534            </div>
2535
2536            <div class="flex items-center gap-1.5 text-xs">
2537              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2537ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2538                <g class="fill-neutral-800 dark:fill-white">
2539                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2540                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2541                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2542                </g>
2543              </svg>
2544              <span class="flex grow gap-2">Stimulus</span>
2545            </div>
2546
2547            <div class="flex items-center gap-1.5 text-xs">
2548              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
2549              <span class="flex grow gap-2">Floating UI</span>
2550            </div>
2551          </div>
2552        </div>
2553      </template>
2554    </div>
2555
2556    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center *:w-full">
2557
2558      <div data-controller="context-menu">
2559        <div class="cursor-context-menu select-none py-8 px-4 lg:px-8 border-2 border-dashed border-neutral-200 dark:border-neutral-700 text-xs lg:text-sm text-center text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 rounded-md">
2560          <span class="hidden lg:inline">Right click to open the context menu</span>
2561          <span class="inline lg:hidden">Long press to open the context menu</span>
2562        </div>
2563
2564        <dialog
2565          class="outline-hidden fixed z-50 w-48 rounded-lg border border-neutral-200 bg-white text-neutral-900 shadow-md transition-opacity ease-out duration-150 opacity-0 dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-700/50"
2566          style="margin: 0;"
2567          data-context-menu-target="menu"
2568          data-controller="menu"
2569          data-action="click@document->dropdown-popover#closeOnClickOutside
2570                      keydown.up->menu#prev keydown.down->menu#next
2571                      keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
2572        >
2573          <div class="flex flex-col p-1" role="menu">
2574            <button class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
2575              Cut
2576              <span class="ml-auto text-xs text-neutral-500">⌘X</span>
2577            </button>
2578            <button class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
2579              Copy
2580              <span class="ml-auto text-xs text-neutral-500">⌘C</span>
2581            </button>
2582            <button disabled class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
2583              Duplicate
2584              <span class="ml-auto text-xs text-neutral-500">⌘D</span>
2585            </button>
2586            <button class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
2587              Paste
2588              <span class="ml-auto text-xs text-neutral-500">⌘V</span>
2589            </button>
2590            <div class="flex flex-col" role="menu">
2591              <div class="relative w-full"
2592                  data-controller="dropdown-popover"
2593                  data-dropdown-popover-nested-value="true"
2594                  data-dropdown-popover-flip-class="translate-y-full">
2595                <button class="text-left w-full text-sm flex items-center justify-between px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 data-[state=open]:!bg-neutral-400/20"
2596                        data-dropdown-popover-target="button"
2597                        data-action="dropdown-popover#toggle"
2598                        data-menu-target="item"
2599                        role="menuitem">
2600                  Share
2601                  <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g></svg>
2602                </button>
2603
2604                <dialog
2605                  class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100"
2606                  data-controller="menu"
2607                  data-dropdown-popover-target="menu"
2608                  data-action="click@document->dropdown-popover#closeOnClickOutside
2609                              keydown.up->menu#prev keydown.down->menu#next
2610                              keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
2611                >
2612                  <div class="flex flex-col p-1" role="menu">
2613                    <button class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dar
2613k:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
2614                      Email link
2615                    </button>
2616                    <button class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
2617                      Messages
2618                    </button>
2619                    <button class="text-left text-sm flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 focus:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:focus:bg-neutral-700/50 disabled:opacity-50 disabled:cursor-not-allowed" data-menu-target="item" role="menuitem">
2620                      Notes
2621                    </button>
2622                  </div>
2623                </dialog>
2624              </div>
2625            </div>
2626          </div>
2627        </dialog>
2628      </div>
2629
2630    </div>
2631  </div>
2632  <a href="/docs/context-menu" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2633    <div class="h-48"></div>
2634    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2635      Context menu
2636      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2637    </p>
2638    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
2639  </a>
2640</li>
2641
2642
2643              <li class="relative">
2644  <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
2645      <div class="inline relative">
2646    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
2647      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
2648        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
2649        Pro
2650      </a>
2651    </div>
2652  </div>
2653
2654  </div>
2655
2656  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2657    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2658      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2658k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2659        <span class="text-xs">?</span>
2660      </button>
2661
2662      <template data-popover-target="content">
2663        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2664          <div class="space-y-2">
2665            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2666
2667            <div class="flex items-center gap-1.5 text-xs">
2668              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2669              <span class="flex grow gap-2">Tailwind CSS</span>
2670            </div>
2671
2672            <div class="flex items-center gap-1.5 text-xs">
2673              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2673ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2674                <g class="fill-neutral-800 dark:fill-white">
2675                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2676                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
2677                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
2678                </g>
2679              </svg>
2680              <span class="flex grow gap-2">Stimulus</span>
2681            </div>
2682
2683            <div class="flex items-center gap-1.5 text-xs">
2684              <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" />
2685              <span class="flex grow gap-2">Pagy</span>
2686            </div>
2687          </div>
2688        </div>
2689      </template>
2690    </div>
2691
2692    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
2693      
2694
2695<div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4">
2696  <div class="w-full max-w-md bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 shadow-xs overflow-hidden"
2697       data-controller="datatable-preview"
2698       data-datatable-preview-sort-column-value="name"
2699       data-datatable-preview-sort-direction-value="asc"
2700       data-datatable-preview-page-value="1"
2701       data-datatable-preview-per-page-value="3"
2702       data-datatable-preview-total-value="9">
2703    <table class="w-full text-[10px]">
2704      <thead class="bg-neutral-100 dark:bg-neutral-800">
2705        <tr class="*:py-1 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
2706          <th scope="col"
2707              class="group pl-3 pr-2 cursor-pointer select-none"
2708              data-datatable-preview-target="header"
2709              data-column="name"
2710              data-action="click->datatable-preview#sort">
2711            <div class="inline-flex items-center gap-1">
2712              <span class="font-semibold text-neutral-900 dark:text-neutral-50">Name</span>
2713              
2714<span class="sort-indicator-mini overflow-hidden inline-flex items-center justify-center rounded ring-1 ring-inset ring-black/10 bg-white/50 transition hover:ring-black/20 dark:ring-white/10 dark:bg-neutral-800/50 dark:hover:ring-white/20 text-neutral-900 dark:text-white">
2715  <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5">
2716      <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
2717        <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd"></path>
2718      </svg>
2719  </span>
2720
2721  <span data-datatable-target="loader" class="hidden p-0.5">
2722    <div class="flex items-center justify-center size-2.5">
2723      <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
2724        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
2725        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
2726      </svg>
2727    </div>
2728  </span>
2729</span>
2730
2731
2732            </div>
2733          </th>
2734
2735          <th scope="col"
2736              class="group px-2 cursor-pointer select-none"
2737              data-datatable-preview-target="header"
2738              data-column="role"
2739              data-action="click->datatable-preview#sort">
2740            <div class="inline-flex items-center gap-1">
2741              <span class="font-semibold text-neutral-900 dark:text-neutral-50">Role</span>
2742              
2743<span class="sort-indicator-mini overflow-hidden inline-flex items-center justify-center rounded ring-1 ring-inset ring-black/10 bg-white/50 transition hover:ring-black/20 dark:ring-white/10 dark:bg-neutral-800/50 dark:hover:ring-white/20 text-neutral-400 dark:text-neutral-500">
2744  <span data-datatable-target="indicator" data-datatable-preview-target="indicator" class="p-0.5">
2745      <svg class="size-2.5 opacity-50 group-hover:opacity-100 transition-opacity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
2746        <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path>
2747      </svg>
2748  </span>
2749
2750  <span data-datatable-target="loader" class="hidden p-0.5">
2751    <div class="flex items-center justify-center size-2.5">
2752      <svg class="animate-spin size-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
2753        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
2754        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
2755      </svg>
2756    </div>
2757  </span>
2758</span>
2759
2760
2761            </div>
2762          </th>
2763
2764          <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50">
2765            Status
2766          </th>
2767        </tr>
2768      </thead>
2769      <tbody data-datatable-preview-target="body" class="*:*:py-1">
2770          <tr data-name="Alex Johnson"
2771              data-role="Admin"
2772              data-status-color="green"
2773              data-status="Active"
2774              data-index="0"
2775              class="">
2776            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2777              Alex Johnson
2778            </td>
2779            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2780              Admin
2781            </td>
2782            <td class="pl-2 pr-3">
2783              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2784                Active
2785              </span>
2786            </td>
2787          </tr>
2788          <tr data-name="Sarah Miller"
2789              data-role="Editor"
2790              data-status-color="green"
2791              data-status="Active"
2792              data-index="1"
2793              class="">
2794            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2795              Sarah Miller
2796            </td>
2797            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2798              Editor
2799            </td>
2800            <td class="pl-2 pr-3">
2801              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2802                Active
2803              </span>
2804            </td>
2805          </tr>
2806          <tr data-name="Michael Chen"
2807              data-role="Viewer"
2808              data-status-color="yellow"
2809              data-status="Pending"
2810              data-index="2"
2811              class="">
2812            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2813              Michael Chen
2814            </td>
2815            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2816              Viewer
2817            </td>
2818            <td class="pl-2 pr-3">
2819              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-yellow-50 text-yellow-700 outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
2820                Pending
2821              </span>
2822            </td>
2823          </tr>
2824          <tr data-name="Emily Davis"
2825              data-role="Editor"
2826              data-status-color="green"
2827              data-status="Active"
2828              data-index="3"
2829              class="hidden">
2830            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2831              Emily Davis
2832            </td>
2833            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2834              Editor
2835            </td>
2836            <td class="pl-2 pr-3">
2837              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2838                Active
2839              </span>
2840            </td>
2841          </tr>
2842          <tr data-name="James Wilson"
2843              data-role="Viewer"
2844              data-status-color="green"
2845              data-status="Active"
2846              data-index="4"
2847              class="hidden">
2848            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2849              James Wilson
2850            </td>
2851            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2852              Viewer
2853            </td>
2854            <td class="pl-2 pr-3">
2855              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2856                Active
2857              </span>
2858            </td>
2859          </tr>
2860          <tr data-name="Lisa Anderson"
2861              data-role="Admin"
2862              data-status-color="green"
2863              data-status="Active"
2864              data-index="5"
2865              class="hidden">
2866            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2867              Lisa Anderson
2868            </td>
2869            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2870              Admin
2871            </td>
2872            <td class="pl-2 pr-3">
2873              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2874                Active
2875              </span>
2876            </td>
2877          </tr>
2878          <tr data-name="Robert Brown"
2879              data-role="Viewer"
2880              data-status-color="green"
2881              data-status="Active"
2882              data-index="6"
2883              class="hidden">
2884            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2885              Robert Brown
2886            </td>
2887            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2888              Viewer
2889            </td>
2890            <td class="pl-2 pr-3">
2891              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2892                Active
2893              </span>
2894            </td>
2895          </tr>
2896          <tr data-name="Patricia Taylor"
2897              data-role="Editor"
2898              data-status-color="yellow"
2899              data-status="Pending"
2900              data-index="7"
2901              class="hidden">
2902            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2903              Patricia Taylor
2904            </td>
2905            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2906              Editor
2907            </td>
2908            <td class="pl-2 pr-3">
2909              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-yellow-50 text-yellow-700 outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
2910                Pending
2911              </span>
2912            </td>
2913          </tr>
2914          <tr data-name="David Martinez"
2915              data-role="Admin"
2916              data-status-color="green"
2917              data-status="Active"
2918              data-index="8"
2919              class="hidden">
2920            <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
2921              David Martinez
2922            </td>
2923            <td class="px-2 text-neutral-500 dark:text-neutral-400">
2924              Admin
2925            </td>
2926            <td class="pl-2 pr-3">
2927              <span class="inline-flex items-center rounded-full px-1 py-0.5 text-[9px] font-medium outline bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
2928                Active
2929              </span>
2930            </td>
2931          </tr>
2932      </tbody>
2933    </table>
2934
2935    <div class="border-t border-black/10 dark:border-white/10 px-3 py-1 flex items-center justify-between gap-2">
2936      <p class="text-[9px] text-neutral-500 dark:text-neutral-400" data-datatable-preview-target="info">
2937        1–3 of 9
2938      </p>
2939      <div class="inline-flex items-center gap-1">
2940        <button type="button"
2941                data-datatable-preview-target="prevBtn"
2942                data-action="click->datatable-preview#prevPage"
2943                disabled
2944                class="inline-flex items-center justify-center size-5 rounded border border-black/10 bg-white text-neutral-400 dark:border-white/10 dark:bg-neutral-800 dark:text-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:bg-neutral-50 dark:hover:not-disabled:bg-neutral-700 transition-colors">
2945          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
2946            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
2947          </svg>
2948        </button>
2949        <span class="text-[9px] font-medium text-neutral-700 dark:text-neutral-300 tabular-nums min-w-[2.5rem] text-center" data-datatable-preview-target="pageInfo">
2950          1 / 3
2951        </span>
2952        <button type="button"
2953                data-datatable-preview-target="nextBtn"
2954                data-action="click->datatable-preview#nextPage"
2955                class="inline-flex items-center justify-center size-5 rounded border border-black/10 bg-white dark:border-white/10 dark:bg-neutral-800 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:bg-neutral-50 dark:hover:not-disabled:bg-neutral-700 transition-colors text-neutral-400 dark:text-neutral-500">
2956          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
2957            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
2958          </svg>
2959        </button>
2960      </div>
2961    </div>
2962  </div>
2963</div>
2964
2965    </div>
2966  </div>
2967  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/datatable" data-turbo-frame="_top">
2968    <div class="h-48"></div>
2969    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
2970      Datatable
2971      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
2972    </p>
2973    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
2974  </a>
2975</li>
2976
2977
2978              <li class="relative">
2979  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
2980    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
2981      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
2981k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
2982        <span class="text-xs">?</span>
2983      </button>
2984
2985      <template data-popover-target="content">
2986        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
2987          <div class="space-y-2">
2988            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
2989
2990            <div class="flex items-center gap-1.5 text-xs">
2991              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
2992              <span class="flex grow gap-2">Tailwind CSS</span>
2993            </div>
2994
2995            <div class="flex items-center gap-1.5 text-xs">
2996              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
2996ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
2997                <g class="fill-neutral-800 dark:fill-white">
2998                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
2999                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3000                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3001                </g>
3002              </svg>
3003              <span class="flex grow gap-2">Stimulus</span>
3004            </div>
3005
3006            <div class="flex items-center gap-1.5 text-xs">
3007              <img alt="Air Datepicker" class="size-3.5" src="/assets/air-datepicker-logo-dd6584168d2424bb14484ea9e38af898c268776ac0ecacca5e8937f5c4b5966e.webp" />
3008              <span class="flex grow gap-2">Air Datepicker</span>
3009            </div>
3010
3011            <div class="flex items-center gap-1.5 text-xs">
3012              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
3013              <span class="flex grow gap-2">Floating UI</span>
3014            </div>
3015          </div>
3016        </div>
3017      </template>
3018    </div>
3019
3020    <div data-controller="date-picker" class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center *:w-full">
3021      <div class="w-full flex items-center justify-center relative">
3022        <input class="form-control" readonly data-date-picker-target="input" placeholder="Select date...">
3023        <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center opacity-80">
3024          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M5.75,3.5c-.414,0-.75-.336-.75-.75V.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V2.75c0,.414-.336,.75-.75,.75Z"></path><path d="M12.25,3.5c-.414,0-.75-.336-.75-.75V.75c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V2.75c0,.414-.336,.75-.75,.75Z"></path><path d="M13.75,2H4.25c-1.517,0-2.75,1.233-2.75,2.75V13.25c0,1.517,1.233,2.75,2.75,2.75H13.75c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm0,12.5H4.25c-.689,0-1.25-.561-1.25-1.25V7H15v6.25c0,.689-.561,1.25-1.25,1.25Z"></path></g></svg>
3025        </div>
3026      </div>
3027    </div>
3028
3029  </div>
3030  <a href="/docs/date-picker" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3031    <div class="h-48"></div>
3032    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3033      Date picker
3034      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3035    </p>
3036    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 10 components</p>
3037  </a>
3038</li>
3039
3040
3041              <li class="relative">
3042  <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
3043  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
3044    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
3045      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
3046      New
3047    </div>
3048  </div>
3049</div>
3050
3051
3052  <div class="pointer-events-none absolute inset-0 left-0 top-0">
3053    <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover">
3054      <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
3054k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
3055        <span class="text-xs">?</span>
3056      </button>
3057
3058      <template data-popover-target="content">
3059        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3060          <div class="space-y-2">
3061            <div class="w-full text-center text-xs font-semibold">Dependencies</div>
3062
3063            <div class="flex items-center gap-1.5 text-xs">
3064              <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308 .326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3065              <span>Tailwind CSS</span>
3066            </div>
3067
3068            <div class="flex items-center gap-1.5 text-xs">
3069              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3069ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3070                <g class="fill-neutral-800 dark:fill-white">
3071                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3072                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3073                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3074                </g>
3075              </svg>
3076              <span class="flex grow gap-2">Stimulus</span>
3077            </div>
3078            <div class="flex items-center gap-1.5 text-xs">
3079              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
3080              <span>Floating UI</span>
3081            </div>
3082          </div>
3083        </div>
3084      </template>
3085    </div>
3086
3087    <div class="pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl border border-black/10 bg-white p-4 dark:border-white/20 dark:bg-[#080808]">
3088      <div
3089  data-controller="theme"
3090  data-theme-selected-class="bg-white ring-1 ring-neutral-950/10 dark:bg-neutral-700 dark:text-white dark:ring-white/20"
3091  data-theme-unselected-class="hover:bg-neutral-950/5 dark:hover:bg-white/5">
3092  <div
3093    class="relative z-0 inline-grid grid-cols-3 rounded-full border border-black/10 bg-white/80 p-0.5 text-neutral-950 opacity-0 shadow-xs backdrop-blur-md transition-opacity duration-200 dark:border-white/10 dark:bg-neutral-800/80 dark:text-white"
3094    data-theme-target="picker"
3095    role="radiogroup"
3096    aria-label="Theme selection">
3097    <button
3098      class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
3099      aria-label="System theme"
3100      data-controller="tooltip"
3101      data-tooltip-content="System"
3102      data-tooltip-animation-value="fade origin"
3103      data-tooltip-delay-value="500"
3104      data-theme-target="option"
3105      data-action="click->theme#choose keydown->theme#navigate"
3106      data-theme-mode="system"
3107      type="button"
3108      role="radio"
3109      aria-checked="true"
3110      tabindex="0">
3111      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75"></path><path d="M9 12.75V15.25"></path><path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V10.75C1.75 11.8546 2.64543 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.8546 16.25 10.75V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z"></path></g></svg>
3112    </button>
3113    <button
3114      class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
3115      aria-label="Light theme"
3116      data-controller="tooltip"
3117      data-tooltip-content="Light mode"
3118      data-tooltip-animation-value="fade origin"
3119      data-tooltip-delay-value="500"
3120      data-theme-target="option"
3121      data-action="click->theme#choose keydown->theme#navigate"
3122      data-theme-mode="light"
3123      type="button"
3124      role="radio"
3125      aria-checked="false"
3126      tabindex="-1">
3127      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="1.25" x2="9" y2="2.25"></line><line x1="14.48" y1="3.52" x2="13.773" y2="4.227"></line><line x1="16.75" y1="9" x2="15.75" y2="9"></line><line x1="14.48" y1="14.48" x2="13.773" y2="13.773"></line><line x1="9" y1="16.75" x2="9" y2="15.75"></line><line x1="3.52" y1="14.48" x2="4.227" y2="13.773"></line><line x1="1.25" y1="9" x2="2.25" y2="9"></line><line x1="3.52" y1="3.52" x2="4.227" y2="4.227"></line><circle cx="9" cy="9" r="4.25"></circle></g></svg>
3128    </button>
3129    <button
3130      class="m-0.5 flex items-center justify-center rounded-full p-2 outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/20"
3131      aria-label="Dark theme"
3132      data-controller="tooltip"
3133      data-tooltip-content="Dark mode"
3134      data-tooltip-animation-value="fade origin"
3135      data-tooltip-delay-value="500"
3136      data-theme-target="option"
3137      data-action="click->theme#choose keydown->theme#navigate"
3138      data-theme-mode="dark"
3139      type="button"
3140      role="radio"
3141      aria-checked="false"
3142      tabindex="-1">
3143      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M13,11.75c-3.452,0-6.25-2.798-6.25-6.25,0-1.352,.433-2.599,1.162-3.622-3.364,.628-5.912,3.575-5.912,7.122,0,4.004,3.246,7.25,7.25,7.25,3.372,0,6.198-2.306,7.009-5.424-.95,.583-2.063,.924-3.259,.924Z"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" stroke="none"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" stroke="none"></circle></g></svg>
3144    </button>
3145  </div>
3146</div>
3147
3148    </div>
3149  </div>
3150
3151  <a href="/docs/dark-mode-switcher" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200">
3152    <div class="h-48"></div>
3153    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
3154      Dark Mode Switcher
3155      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 transition-all duration-200 group-hover:w-4" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3156    </p>
3157    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p>
3158  </a>
3159</li>
3160
3161
3162                <li class="sm:hidden col-span-1">
3163                  <div class="relative mt-8 mb-6">
3164  <div class="mx-auto">
3165    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
3166      <div data-controller="newsletter"
3167           class="max-w-xs">
3168        <div data-newsletter-target="form">
3169          <form data-action="submit->newsletter#submit"
3170                class="space-y-3">
3171            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
3172            <input type="email"
3173                  data-newsletter-target="email"
3174                  placeholder="Enter your email..."
3175                  class="form-control"
3176                  
3177                  required>
3178            <div class="flex justify-center">
3179              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
3180            </div>
3181            <button type="submit"
3182                    data-newsletter-target="submitButton"
3183                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
3183k:focus-visible:outline-neutral-200">
3184              Subscribe to the newsletter
3185            </button>
3186          </form>
3187          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
3188            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
3189          </div>
3190        </div>
3191
3192        <div data-newsletter-target="successMessage"
3193             class="text-center py-4"
3194             style="display: none;">
3195          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
3196            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3197              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
3198            </svg>
3199          </div>
3200          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
3201          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
3202        </div>
3203      </div>
3204    </div>
3205  </div>
3206</div>
3207
3208                </li>
3209              <li class="relative">
3210  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3211    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3212      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3213        <span class="text-xs">?</span>
3214      </button>
3215
3216      <template data-popover-target="content">
3217        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3218          <div class="space-y-2">
3219            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3220
3221            <div class="flex items-center gap-1.5 text-xs">
3222              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3223              <span class="flex grow gap-2">Tailwind CSS</span>
3224            </div>
3225
3226            <div class="flex items-center gap-1.5 text-xs">
3227              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3227ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3228                <g class="fill-neutral-800 dark:fill-white">
3229                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3230                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3231                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3232                </g>
3233              </svg>
3234              <span class="flex grow gap-2">Stimulus</span>
3235            </div>
3236
3237            <div class="flex items-center gap-1.5 text-xs">
3238              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
3239              <span class="flex grow gap-2">Floating UI</span>
3240            </div>
3241
3242            <div class="flex items-center gap-1.5 text-xs">
3243              <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c4
324300aafdebbd.webp" />
3244              <span class="flex grow gap-2">Motion.dev</span>
3245            </div>
3246          </div>
3247        </div>
3248      </template>
3249    </div>
3250
3251    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3252
3253
3254      <div class="">
3255        <div class="rounded-xl flex items-center justify-center">
3256          <div class="flex w-fit mx-auto items-center justify-center" data-controller="dock">
3257            <div class="mx-auto hidden h-16 items-end gap-4 rounded-2xl bg-neutral-50 px-4 pb-3 md:flex dark:bg-neutral-950 border border-neutral-200/50 dark:border-neutral-600/50">
3258                <a href="#" class="rounded-full" data-dock-target="icon" data-tooltip="Home" data-tooltip-placement="top" >
3259                  <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50  text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700">
3260                    <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%">
3261                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg>
3262                    </div>
3263                  </div>
3264                </a>
3265                <a href="/?articles=true" class="rounded-full" data-dock-target="icon" data-tooltip="Articles" data-tooltip-placement="top" >
3266                  <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50  text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700">
3267                    <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%">
3268                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.25,12.25v2c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V3.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v1.5"></path><line x1="4.75" y1="5.75" x2="9.25" y2="5.75"></line><line x1="4.75" y1="8.75" x2="7" y2="8.75"></line><line x1="4.75" y1="11.75" x2="6.25" y2="11.75"></line><path d="M12.375,10.625c.444-.444,2.948-2.948,4.216-4.216,.483-.483,.478-1.261-.005-1.745h0c-.483-.483-1.261-.489-1.745-.005-1.268,1.268-3.772,3.772-4.216,4.216-.625,.625-1.125,2.875-1.125,2.875,0,0,2.25-.5,2.875-1.125Z"></path></g></svg>
3269                    </div>
3270                  </div>
3271                </a>
3272                <a href="/?projects=true" class="rounded-full" data-dock-target="icon" data-tooltip="Projects" data-tooltip-placement="top" >
3273                  <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50  text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700">
3274                    <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%">
3275                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="8" cy="5.5" r="3.75"></circle><path d="M1.953,15c1.298-1.958,3.522-3.25,6.047-3.25"></path><path d="M14.925,16.25h-6.175l1.868-4.203c.08-.181,.259-.297,.457-.297h5.406c.362,0,.604,.372,.457,.703l-1.556,3.5c-.08,.181-.259,.297-.457,.297Z"></path><line x1="8.75" y1="16.25" x2="5.75" y2="16.25"></line></g></svg>
3276                    </div>
3277                  </div>
3278                </a>
3279            </div>
3280            <div class="absolute right-5 bottom-17 flex items-end flex-col gap-2 hidden md:hidden" data-dock-target="mobileMenu">
3281                <a href="#" data-tooltip="Home" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dar
3281k:active:bg-neutral-700">
3282                  <span class="text-sm">Home</span>
3283                  <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg></span>
3284                </a>
3285                <a href="/?articles=true" data-tooltip="Articles" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-700">
3286                  <span class="text-sm">Articles</span>
3287                  <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.25,12.25v2c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2V3.75c0-1.105,.895-2,2-2H12.25c1.105,0,2,.895,2,2v1.5"></path><line x1="4.75" y1="5.75" x2="9.25" y2="5.75"></line><line x1="4.75" y1="8.75" x2="7" y2="8.75"></line><line x1="4.75" y1="11.75" x2="6.25" y2="11.75"></line><path d="M12.375,10.625c.444-.444,2.948-2.948,4.216-4.216,.483-.483,.478-1.261-.005-1.745h0c-.483-.483-1.261-.489-1.745-.005-1.268,1.268-3.772,3.772-4.216,4.216-.625,.625-1.125,2.875-1.125,2.875,0,0,2.25-.5,2.875-1.125Z"></path></g></svg></span>
3288                </a>
3289                <a href="/?projects=true" data-tooltip="Projects" class="opacity-0 px-3 no-underline gap-2 w-fit size-10 flex items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-700">
3290                  <span class="text-sm">Projects</span>
3291                  <span class="*:size-5"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="8" cy="5.5" r="3.75"></circle><path d="M1.953,15c1.298-1.958,3.522-3.25,6.047-3.25"></path><path d="M14.925,16.25h-6.175l1.868-4.203c.08-.181,.259-.297,.457-.297h5.406c.362,0,.604,.372,.457,.703l-1.556,3.5c-.08,.181-.259,.297-.457,.297Z"></path><line x1="8.75" y1="16.25" x2="5.75" y2="16.25"></line></g></svg></span>
3292                </a>
3293            </div>
3294            <div class="flex items-center gap-2 md:hidden">
3295              <span class="text-sm max-w-[175px]">The dock is replaced by a drop-up menu on mobile</span>
3296              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="14.25" y1="14.25" x2="3.75" y2="3.75"></line><path d="M8.24,14.25c3.388-1.562,6.01,0,6.01,0,0,0-1.562-2.622,0-6.01"></path></g></svg>
3297            </div>
3298            <div class="absolute right-5 bottom-5 block md:hidden"
3299                data-action="click->dock#toggleMobile">
3300              <button data-dock-target="mobileButton" class="flex h-10 w-10 items-center justify-center border border-neutral-200/50 rounded-full bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-600/50">
3301                <svg class="size-5 rotate-0 text-neutral-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="2.75 11.5 9 5.25 15.25 11.5"></polyline></g></svg>
3302              </button>
3303            </div>
3304          </div>
3305        </div>
3306      </div>
3307
3308    </div>
3309  </div>
3310  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/dock" data-turbo-frame="_top">
3311    <div class="h-48"></div>
3312    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3313      Dock Menu
3314      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3315    </p>
3316    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 1 component</p>
3317  </a>
3318</li>
3319
3320
3321              <li class="relative">
3322    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
3323    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
3324      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
3325        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
33256,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
3326        Pro
3327      </a>
3328    </div>
3329  </div>
3330
3331  <div class="pointer-events-none absolute inset-0 top-0 left-0">
3332    <div class="pointer-events-auto absolute top-4 right-4 z-10 inline-block" data-controller="popover">
3333      <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm leading-5 font-semibold text-neutral-800 hover:text-neutral-900 focus:outline-offset-2 focus:outline-neutral-500 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
3334        <span class="text-xs">?</span>
3335      </button>
3336
3337      <template data-popover-target="content">
3338        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3339          <div class="space-y-2">
3340            <div class="w-full text-center text-xs font-semibold">Dependencies</div>
3341
3342            <div class="flex items-center gap-1.5 text-xs">
3343              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3344              <span class="flex grow gap-2">Tailwind CSS</span>
3345            </div>
3346
3347            <div class="flex items-center gap-1.5 text-xs">
3348              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3348ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3349                <g class="fill-neutral-800 dark:fill-white">
3350                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3351                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3352                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3353                </g>
3354              </svg>
3355              <span class="flex grow gap-2">Stimulus</span>
3356            </div>
3357          </div>
3358        </div>
3359      </template>
3360    </div>
3361
3362    <div class="pointer-events-auto relative flex h-48 items-center justify-center rounded-t-xl border border-black/10 bg-white p-8 md:p-10 dark:border-white/20 dark:bg-black/80">
3363      <div id="drawer-preview" class="group">
3364        <a class="hidden p-1 align-middle group-hover:inline-block" href="#drawer-preview">
3365          <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500" viewBox="0 0 24 24" fill="currentColor">
3366            <path fill-rule="evenodd" d="M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z" clip-rule="evenodd"></path>
3367          </svg>
3368        </a>
3369      </div>
3370      <div class="not-prose">
3371        <div data-controller="drawer" data-drawer-snap-points-value='["auto"]'>
3372          <button data-action="drawer#show:prevent" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Open Drawer</button>
3373
3374          <dialog data-drawer-target="dialog" data-action="mousedown->drawer#backdropClose" class="drawer mx-auto w-full max-w-2xl border-x border-t border-black/10 dark:border-white/10">
3375            <div class="rounded-t-xl bg-white dark:bg-neutral-800">
3376              <div data-drawer-target="handle" class="cursor-grab select-none active:cursor-grabbing group">
3377                <div class="flex h-8 w-full items-center justify-center">
3378                  <div class="mx-auto my-4 h-1.5 w-10 rounded-full bg-neutral-200 group-hover:bg-neutral-300 group-active:bg-neutral-400 dark:bg-neutral-700 dark:group-hover:bg-neutral-600 dar
3378k:group-active:bg-neutral-500"></div>
3379                </div>
3380
3381                <div class="border-b border-neutral-200 px-6 pb-4 dark:border-neutral-700">
3382                  <h2 class="text-xl font-semibold text-neutral-900 dark:text-white">Drawer Example</h2>
3383                </div>
3384              </div>
3385
3386              <div class="px-6 pt-4 pb-6">
3387                <div class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-neutral-200 p-5 dark:border-neutral-700/75">
3388                  <p class="text-sm text-neutral-600 dark:text-neutral-400">Drag down to dismiss or click the button below</p>
3389                </div>
3390                <div class="mt-4 flex gap-2">
3391                  <button data-action="drawer#hide:prevent" type="button" class="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Close Drawer</button>
3392                </div>
3393              </div>
3394            </div>
3395          </dialog>
3396        </div>
3397      </div>
3398    </div>
3399  </div>
3400  <a href="/docs/drawer" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-offset-2 focus:outline-neutral-500 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200">
3401    <div class="h-48"></div>
3402    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
3403      Drawer
3404      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3405    </p>
3406    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 8 components</p>
3407  </a>
3408</li>
3409
3410
3411              <li class="relative">
3412    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
3413    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
3414      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
3415        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
3416        Pro
3417      </a>
3418    </div>
3419  </div>
3420
3421  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3422    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3423      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3423k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3424        <span class="text-xs">?</span>
3425      </button>
3426
3427      <template data-popover-target="content">
3428        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3429          <div class="space-y-2">
3430            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3431
3432            <div class="flex items-center gap-1.5 text-xs">
3433              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3434              <span class="flex grow gap-2">Tailwind CSS</span>
3435            </div>
3436
3437            <div class="flex items-center gap-1.5 text-xs">
3438              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3438ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3439                <g class="fill-neutral-800 dark:fill-white">
3440                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3441                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3442                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3443                </g>
3444              </svg>
3445              <span class="flex grow gap-2">Stimulus</span>
3446            </div>
3447
3448            <div class="flex items-center gap-1.5 text-xs">
3449              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
3450              <span class="flex grow gap-2">Floating UI</span>
3451            </div>
3452          </div>
3453        </div>
3454      </template>
3455    </div>
3456
3457    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3458
3459      <div class="flex gap-1 border-b border-neutral-200 dark:border-neutral-700">
3460        <!-- File Menu -->
3461        <div class="relative" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full">
3462          <button class="mb-1 rounded-md px-2.5 py-1.5 text-sm outline-hidden hover:bg-neutral-100 dar
3462k:hover:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle">Menu</button>
3463
3464          <dialog
3465            class="absolute z-10 w-48 rounded-lg border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100"
3466            data-controller="menu"
3467            data-dropdown-popover-target="menu"
3468            data-action="click@document->dropdown-popover#closeOnClickOutside
3469                          keydown.up->menu#prev keydown.down->menu#next
3470                          keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
3471          >
3472            <div class="flex flex-col p-1" role="menu">
3473              <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">
3474                New File
3475                <span class="ml-auto text-xs text-neutral-500">⌘N</span>
3476              </button>
3477              <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">
3478                Open...
3479                <span class="ml-auto text-xs text-neutral-500">⌘O</span>
3480              </button>
3481              <div class="flex flex-col" role="menu">
3482                <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-auto-close-value="false" data-dropdown-popover-flip-class="translate-y-full">
3483                  <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu">
3484                    Options
3485                    <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12">
3486                      <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g>
3487                    </svg>
3488                  </button>
3489
3490                  <dialog
3491                    class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100"
3492                    data-controller="menu"
3493                    data-dropdown-popover-target="menu"
3494                    data-action="click@document->dropdown-popover#closeOnClickOutside
3495                                  keydown.up->menu#prev keydown.down->menu#next
3496                                  keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
3497                  >
3498                    <div class="flex flex-col p-1.5" role="listbox">
3499                      <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1">
3500                        <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500">
3501                        <span class="text-sm font-normal">Option 1</span>
3502                      </label>
3503                      <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1">
3504                        <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500">
3505                        <span class="text-sm font-normal">Option 2</span>
3506                      </label>
3507                      <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1">
3508                        <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500">
3509                        <span class="text-sm font-normal">Option 3</span>
3510                      </label>
3511                    </div>
3512                  </dialog>
3513                </div>
3514              </div>
3515              <div class="flex flex-col" role="menu">
3516                <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-flip-class="translate-y-full">
3517                  <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu">
3518                    Share
3519                    <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12">
3520                      <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g>
3521                    </svg>
3522                  </button>
3523
3524                  <dialog
3525                    class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100"
3526                    data-controller="menu"
3527                    data-dropdown-popover-target="menu"
3528                    data-action="keydown.up->menu#prev keydown.down->menu#next
3529                                  keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
3530                  >
3531                    <div class="flex flex-col p-1" role="menu">
3532                      <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Email link</button>
3533                      <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Messages</button>
3534                      <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Notes</button>
3535                    </div>
3536                  </dialog>
3537                </div>
3538              </div>
3539              <div class="my-1 border-t border-neutral-100 dark:border-neutral-700"></div>
3540              <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">
3541                Save
3542                <span class="ml-auto text-xs text-neutral-500">⌘S</span>
3543              </button>
3544            </div>
3545          </dialog>
3546        </div>
3547
3548        <!-- Hover Menu -->
3549        <div class="relative hidden md:block" data-controller="dropdown-popover" data-dropdown-popover-flip-class="translate-y-full" data-dropdown-popover-hover-value="true">
3550          <button class="mb-1 rounded-md px-2.5 py-1.5 text-sm outline-hidden hover:bg-neutral-100 dark:hover:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle">Hover</button>
3551
3552          <dialog
3553            class="absolute z-10 w-48 rounded-lg border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100"
3554            data-controller="menu"
3555            data-dropdown-popover-target="menu"
3556            data-action="click@document->dropdown-popover#closeOnClickOutside
3557                          keydown.up->menu#prev keydown.down->menu#next
3558                          keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
3559          >
3560            <div class="flex flex-col p-1" role="menu">
3561              <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">
3562                New File
3563                <span class="ml-auto text-xs text-neutral-500">⌘N</span>
3564              </button>
3565              <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">
3566                Open...
3567                <span class="ml-auto text-xs text-neutral-500">⌘O</span>
3568              </button>
3569              <div class="flex flex-col" role="menu">
3570                <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-hover-value="true" data-dropdown-popover-auto-close-value="false" data-dropdown-popover-flip-class="translate-y-full">
3571                  <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu">
3572                    Options
3573                    <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12">
3574                      <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g>
3575                    </svg>
3576                  </button>
3577
3578                  <dialog
3579                    class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100"
3580                    data-controller="menu"
3581                    data-dropdown-popover-target="menu"
3582                    data-action="click@document->dropdown-popover#closeOnClickOutside
3583                                  keydown.up->menu#prev keydown.down->menu#next
3584                                  keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
3585                  >
3586                    <div class="flex flex-col p-1.5" role="listbox">
3587                      <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dar
3587k:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1">
3588                        <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500">
3589                        <span class="text-sm font-normal">Option 1</span>
3590                      </label>
3591                      <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1">
3592                        <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500">
3593                        <span class="text-sm font-normal">Option 2</span>
3594                      </label>
3595                      <label class="cursor-pointer flex items-center gap-2 rounded-md px-2 py-2 font-normal text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" tabindex="-1">
3596                        <input type="checkbox" class="rounded text-neutral-600 focus:ring-neutral-500">
3597                        <span class="text-sm font-normal">Option 3</span>
3598                      </label>
3599                    </div>
3600                  </dialog>
3601                </div>
3602              </div>
3603              <div class="flex flex-col" role="menu">
3604                <div class="relative w-full" data-controller="dropdown-popover" data-dropdown-popover-nested-value="true" data-dropdown-popover-hover-value="true" data-dropdown-popover-flip-class="translate-y-full">
3605                  <button class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden data-[state=open]:!bg-neutral-400/20 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-dropdown-popover-target="button" data-action="dropdown-popover#toggle" data-menu-target="item" role="menuitem" aria-haspopup="menu">
3606                    Share
3607                    <svg xmlns="http://www.w3.org/2000/svg" class="transform-gpu size-3" width="12" height="12" viewBox="0 0 12 12">
3608                      <g fill="currentColor"><path d="m4.25,11c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061l3.72-3.72-3.72-3.72c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l4.25,4.25c.293.293.293.768,0,1.061l-4.25,4.25c-.146.146-.338.22-.53.22Z" stroke-width="0"></path></g>
3609                    </svg>
3610                  </button>
3611
3612                  <dialog
3613                    class="absolute top-0 left-full z-20 ml-1 w-48 rounded-md border border-neutral-200 bg-white text-neutral-900 opacity-0 shadow-md transition-opacity duration-150 ease-out outline-hidden dark:border-neutral-700/50 dark:bg-neutral-800 dark:text-neutral-100 [&[open]]:scale-100 [&[open]]:opacity-100 scale-100 opacity-100100"
3614                    data-controller="menu"
3615                    data-dropdown-popover-target="menu"
3616                    data-action="keydown.up->menu#prev keydown.down->menu#next
3617                                  keydown.up->menu#preventScroll keydown.down->menu#preventScroll"
3618                  >
3619                    <div class="flex flex-col p-1" role="menu">
3620                      <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Email link</button>
3621                      <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Messages</button>
3622                      <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dar
3622k:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">Notes</button>
3623                    </div>
3624                  </dialog>
3625                </div>
3626              </div>
3627              <div class="my-1 border-t border-neutral-100 dark:border-neutral-700"></div>
3628              <button class="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-neutral-700 data-[highlighted]:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:data-[highlighted]:bg-neutral-700/50" data-menu-target="item" role="menuitem">
3629                Save
3630                <span class="ml-auto text-xs text-neutral-500">⌘S</span>
3631              </button>
3632            </div>
3633          </dialog>
3634        </div>
3635      </div>
3636    </div>
3637  </div>
3638  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/dropdown" data-turbo-frame="_top">
3639    <div class="h-48"></div>
3640    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3641      Dropdown
3642      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3643    </p>
3644    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p>
3645  </a>
3646</li>
3647
3648
3649              <li class="relative">
3650  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3651    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3652      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3652k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3653        <span class="text-xs">?</span>
3654      </button>
3655
3656      <template data-popover-target="content">
3657        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3658          <div class="space-y-2">
3659            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3660
3661            <div class="flex items-center gap-1.5 text-xs">
3662              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3663              <span class="flex grow gap-2">Tailwind CSS</span>
3664            </div>
3665
3666            <div class="flex items-center gap-1.5 text-xs">
3667              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3667ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3668                <g class="fill-neutral-800 dark:fill-white">
3669                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3670                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3671                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3672                </g>
3673              </svg>
3674              <span class="flex grow gap-2">Stimulus</span>
3675            </div>
3676
3677            <div class="flex items-center gap-1.5 text-xs">
3678              <img alt="Emoji Mart by Missive" class="size-3.5" src="/assets/missive-logo-96e2465ff6c400fbfc640f66b1bd8db700e2e9b5115026543035b7afb534a531.webp" />
3679              <span class="flex grow gap-2">Emoji Mart</span>
3680            </div>
3681          </div>
3682        </div>
3683      </template>
3684    </div>
3685
3686    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center *:w-full">
3687
3688     <form action="">
3689        <div data-controller="emoji-picker" data-emoji-picker-auto-submit-value="false">
3690          <div class="flex items-center justify-center">
3691            <button type="button" class="outline-hidden size-8 mr-1 text-xl shrink-0 flex items-center justify-center rounded-md text-neutral-700 hover:bg-neutral-100 hover:text-neutral-800 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-neutral-200" data-action="click->
3691emoji-picker#toggle" data-emoji-picker-target="button">
3692              <svg xmlns="http://www.w3.org/2000/svg" class="size-6" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm-4,7c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Zm4,6c-1.531,0-2.859-1.14-3.089-2.651-.034-.221,.039-.444,.193-.598,.151-.15,.358-.217,.572-.185,1.526,.24,3.106,.24,4.638,.001h0c.217-.032,.428,.036,.583,.189,.153,.153,.225,.373,.192,.589-.229,1.513-1.557,2.654-3.089,2.654Zm3-5c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Z"></path></g></svg>
3693            </button>
3694            <input type="text" name="emoji" class="form-control !hidden" data-emoji-picker-target="input">
3695          </div>
3696          <div data-emoji-picker-target="pickerContainer" class="hidden absolute z-50 mt-2 flex justify-center inset-x-0"></div>
3697        </div>
3698      </form>
3699
3700    </div>
3701  </div>
3702  <a href="/docs/emoji-picker" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3703    <div class="h-48"></div>
3704    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3705      Emoji picker
3706      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3707    </p>
3708    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
3709  </a>
3710</li>
3711
3712
3713              <li class="relative">
3714  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3715    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3716      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3716k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3717        <span class="text-xs">?</span>
3718      </button>
3719
3720      <template data-popover-target="content">
3721        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3722          <div class="space-y-2">
3723            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3724
3725            <div class="flex items-center gap-1.5 text-xs">
3726              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3727              <span class="flex grow gap-2">Tailwind CSS</span>
3728            </div>
3729
3730            <div class="flex items-center gap-1.5 text-xs">
3731              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3731ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3732                <g class="fill-neutral-800 dark:fill-white">
3733                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3734                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3735                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3736                </g>
3737              </svg>
3738              <span class="flex grow gap-2">Stimulus</span>
3739            </div>
3740
3741            <div class="flex items-center gap-1.5 text-xs">
3742              <img alt="Motion.dev" class="size-3.5 rounded" src="/assets/motion-logo-71de01e6dc648733f140f03b8ad7cccea76573339eb6a40f1bf1c400aafdebbd.webp" />
3743              <span class="flex grow gap-2">Motion.dev</span>
3744            </div>
3745          </div>
3746        </div>
3747      </template>
3748    </div>
3749
3750    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3751      <div class="w-full max-w-xs">
3752        <div class="w-fit mx-auto flex items-center justify-center relative" data-controller="feedback" data-feedback-expanded-value="false" data-feedback-position-value="center" data-feedback-target="container">
3753          <!-- Button -->
3754          <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" data-feedback-target="button" data-action="click->
3754feedback#toggle">
3755            <span class="flex items-center gap-1.5" data-feedback-target="buttonText">
3756              Feedback
3757            </span>
3758          </button>
3759
3760          <!-- Form -->
3761          <div class="absolute hidden h-24 w-48 overflow-hidden rounded-lg border border-black/5 bg-neutral-100 p-1 shadow-xs outline-none dark:border-white/10 dark:bg-neutral-800 dark:shadow-neutral-900/50" data-feedback-target="form">
3762            <form class="relative flex h-full flex-col overflow-hidden rounded-lg border border-[#E6E7E8] bg-white dark:border-neutral-600 dark:bg-neutral-700" data-action="submit->feedback#submit">
3763
3764              <textarea class="small-scrollbar text-xs w-full flex-1 resize-none rounded-t-lg bg-white p-3 text-black placeholder-neutral-500 !outline-none dark:bg-neutral-700 dark:text-neutral-100 dark:placeholder-neutral-400"
3765                        required
3766                        placeholder="Tell us what you think..."
3767                        data-feedback-target="textarea"></textarea>
3768
3769              <div class="absolute bottom-1.5 right-1.5">
3770                <button type="submit" class="ml-auto flex items-center justify-center rounded-md bg-neutral-800 py-1 px-2 text-xs font-medium text-white transition-colors duration-200 hover:bg-neutral-700 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100">
3771                  <span>
3772                    Send
3773                  </span>
3774                </button>
3775              </div>
3776
3777            </form>
3778          </div>
3779        </div>
3780      </div>
3781    </div>
3782  </div>
3783  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/feedback" data-turbo-frame="_top">
3784    <div class="h-48"></div>
3785    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3786      Feedback
3787      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3788    </p>
3789    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 9 components</p>
3790  </a>
3791</li>
3792
3793
3794              <li class="relative">
3795  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3796    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3797      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3797k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3798        <span class="text-xs">?</span>
3799      </button>
3800
3801      <template data-popover-target="content">
3802        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3803          <div class="space-y-2">
3804            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3805
3806            <div class="flex items-center gap-1.5 text-xs">
3807              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3808              <span class="flex grow gap-2">Tailwind CSS</span>
3809            </div>
3810
3811          </div>
3812        </div>
3813      </template>
3814    </div>
3815
3816    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3817      <input type="text" placeholder="Enter your name..." class="form-control lg:flex-1">
3818    </div>
3819  </div>
3820  <a href="/docs/forms" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3821    <div class="h-48"></div>
3822    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
3823      Forms
3824      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3825    </p>
3826    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
3827  </a>
3828</li>
3829
3830
3831              <li class="relative">
3832  <div class="pointer-events-none z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
3833  <div class="transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
3834    <div class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:focus-visible:outline-neutral-200">
3835      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none"></path><polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75"></polygon></g></svg>
3836      New
3837    </div>
3838  </div>
3839</div>
3840
3841
3842  <div class="pointer-events-none absolute inset-0 left-0 top-0">
3843    <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover">
3844      <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
3844k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
3845        <span class="text-xs">?</span>
3846      </button>
3847
3848      <template data-popover-target="content">
3849        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3850          <div class="space-y-2">
3851            <div class="w-full text-center text-xs font-semibold">Dependencies</div>
3852
3853            <div class="flex items-center gap-1.5 text-xs">
3854              <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3855              <span>Tailwind CSS</span>
3856            </div>
3857
3858            <div class="flex items-center gap-1.5 text-xs">
3859              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3859ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3860                <g class="fill-neutral-800 dark:fill-white">
3861                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3862                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3863                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3864                </g>
3865              </svg>
3866              <span class="flex grow gap-2">Stimulus</span>
3867            </div>
3868
3869            <div class="flex items-center gap-1.5 text-xs">
3870              <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" />
3871              <span>Pagy</span>
3872            </div>
3873          </div>
3874        </div>
3875      </template>
3876    </div>
3877
3878    <div class="pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl border border-black/10 bg-white p-4 dark:border-white/20 dark:bg-[#080808]">
3879      
3880<div
3881  class="relative h-[9.5rem] w-full max-w-[14rem] overflow-hidden rounded-lg border border-black/10 bg-white shadow-xs dark:border-white/10 dark:bg-neutral-900"
3882  data-controller="infinite-scroll"
3883  data-infinite-scroll-url-value="/docs/infinite-scroll/items?page=2&amp;preview=home"
3884  data-infinite-scroll-scroll-root-value="container"
3885  data-infinite-scroll-root-margin-value="0px 0px 20px"
3886  data-infinite-scroll-manual-value="false"
3887  data-infinite-scroll-loading-label-value="Loading...">
3888  <div class="flex items-center justify-between border-b border-neutral-100 px-3 py-2 dark:border-neutral-800">
3889    <div>
3890      <p class="text-[10px] font-semibold leading-none text-neutral-900 dark:text-white">Recent activity</p>
3891      <p class="mt-1 text-[8px] leading-none text-neutral-400">Workspace updates</p>
3892    </div>
3893    <span class="flex items-center gap-1 rounded-full bg-emerald-50 px-1.5 py-1 text-[7px] font-medium leading-none text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300">
3894      <span class="size-1 rounded-full bg-emerald-500"></span>
3895      Live
3896    </span>
3897  </div>
3898
3899  <div class="small-scrollbar h-[7.35rem] overflow-y-auto overscroll-contain pb-2" data-infinite-scroll-target="viewport">
3900    <div class="divide-y divide-neutral-100 px-2 dark:divide-neutral-800" data-infinite-scroll-target="list">
3901      
3902  <div id="home_preview_activity_1" class="flex items-center gap-2 px-1 py-2">
3903    <span class="size-5 shrink-0 rounded-full bg-violet-100 dark:bg-violet-400/20"></span>
3904    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Olivia shipped a release</p>
3905    <span class="text-[7px] tabular-nums text-neutral-400">2m</span>
3906  </div>
3907  <div id="home_preview_activity_2" class="flex items-center gap-2 px-1 py-2">
3908    <span class="size-5 shrink-0 rounded-full bg-sky-100 dark:bg-sky-400/20"></span>
3909    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Noah left feedback</p>
3910    <span class="text-[7px] tabular-nums text-neutral-400">4m</span>
3911  </div>
3912  <div id="home_preview_activity_3" class="flex items-center gap-2 px-1 py-2">
3913    <span class="size-5 shrink-0 rounded-full bg-amber-100 dark:bg-amber-400/20"></span>
3914    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Mia uploaded files</p>
3915    <span class="text-[7px] tabular-nums text-neutral-400">6m</span>
3916  </div>
3917  <div id="home_preview_activity_4" class="flex items-center gap-2 px-1 py-2">
3918    <span class="size-5 shrink-0 rounded-full bg-emerald-100 dark:bg-emerald-400/20"></span>
3919    <p class="min-w-0 flex-1 truncate text-[8px] font-medium text-neutral-700 dark:text-neutral-200">Ethan completed a task</p>
3920    <span class="text-[7px] tabular-nums text-neutral-400">8m</span>
3921  </div>
3922
3923    </div>
3924
3925    <div class="h-9 [overflow-anchor:none]" data-infinite-scroll-target="sentinel"></div>
3926
3927    <div class="pointer-events-none sticky bottom-1 z-10 -mt-9 flex h-9 items-center justify-center" data-infinite-scroll-target="controls">
3928      <button
3929        type="button"
3930        class="pointer-events-auto inline-flex min-h-6 min-w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-100/75 px-2.5 py-1 text-[8px] font-medium text-neutral-600 opacity-0 shadow-lg shadow-black/10 ring-1 ring-black/10 backdrop-blur-sm backdrop-filter transition-opacity duration-150 ease-out motion-reduce:transition-none disabled:cursor-wait dark:bg-neutral-800/75 dark:text-neutral-300 dark:ring-white/15"
3931        data-infinite-scroll-target="button"
3932        data-action="infinite-scroll#load"
3933        hidden>
3934        <svg hidden data-infinite-scroll-target="spinner" class="size-2.5 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true">
3935          <circle class="opacity-25" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3"></circle>
3936          <path class="opacity-80" fill="currentColor" d="M21 12a9 9 0 0 0-9-9v3a6 6 0 0 1 6 6h3Z"></path>
3937        </svg>
3938        <span class="motion-reduce:animate-none" data-infinite-scroll-target="label">Load more</span>
3939      </button>
3940      <p hidden class="rounded-full bg-neutral-100/75 px-2.5 py-1 text-[8px] text-neutral-500 shadow-lg shadow-black/10 ring-1 ring-black/10 backdrop-blur-sm backdrop-filter dark:bg-neutral-800/75 dark:text-neutral-400 dark:ring-white/15" data-infinite-scroll-target="end">You're all caught up</p>
3941    </div>
3942  </div>
3943
3944  <p class="sr-only" aria-live="polite" data-infinite-scroll-target="status"></p>
3945</div>
3946
3947    </div>
3948  </div>
3949
3950  <a href="/docs/infinite-scroll" data-turbo-frame="_top" class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-all duration-200 hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200">
3951    <div class="h-48"></div>
3952    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
3953      Infinite Scroll
3954      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 transition-all duration-200 group-hover:w-4" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
3955    </p>
3956    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 1 component</p>
3957  </a>
3958</li>
3959
3960
3961              <li class="relative">
3962  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
3963    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
3964      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
3964k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
3965        <span class="text-xs">?</span>
3966      </button>
3967
3968      <template data-popover-target="content">
3969        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
3970          <div class="space-y-2">
3971            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
3972
3973            <div class="flex items-center gap-1.5 text-xs">
3974              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
3975              <span class="flex grow gap-2">Tailwind CSS</span>
3976            </div>
3977
3978            <div class="flex items-center gap-1.5 text-xs">
3979              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
3979ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
3980                <g class="fill-neutral-800 dark:fill-white">
3981                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
3982                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
3983                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
3984                </g>
3985              </svg>
3986              <span class="flex grow gap-2">Stimulus</span>
3987            </div>
3988          </div>
3989        </div>
3990      </template>
3991    </div>
3992
3993    <div data-controller="os-detect" class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
3994      <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
3995        data-controller="tooltip hotkey"
3996        data-tooltip-content="Action performed!"
3997        data-tooltip-placement-value="top"
3998        data-tooltip-trigger-value="focus"
3999        data-action="keydown.meta+shift+o@document->hotkey#click keydown.ctrl+shift+o@document->hotkey#click">
4000        <kbd data-os-detect-target="mac" class="hidden">⌘</kbd>
4001        <kbd data-os-detect-target="nonMac" class="hidden">Ctrl</kbd>
4002        <span>+</span>
4003        <kbd>Shift</kbd>
4004        <span>+</span>
4005        <kbd>O</kbd>
4006      </button>
4007    </div>
4008  </div>
4009  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/kbd" data-turbo-frame="_top">
4010    <div class="h-48"></div>
4011    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4012      KBD & Hotkey
4013      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4014    </p>
4015    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
4016  </a>
4017</li>
4018
4019
4020                <li class="sm:hidden col-span-1">
4021                  <div class="relative mt-8 mb-6">
4022  <div class="mx-auto">
4023    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
4024      <div data-controller="newsletter"
4025           class="max-w-xs">
4026        <div data-newsletter-target="form">
4027          <form data-action="submit->newsletter#submit"
4028                class="space-y-3">
4029            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
4030            <input type="email"
4031                  data-newsletter-target="email"
4032                  placeholder="Enter your email..."
4033                  class="form-control"
4034                  
4035                  required>
4036            <div class="flex justify-center">
4037              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
4038            </div>
4039            <button type="submit"
4040                    data-newsletter-target="submitButton"
4041                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
4042              Subscribe to the newsletter
4043            </button>
4044          </form>
4045          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
4046            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
4047          </div>
4048        </div>
4049
4050        <div data-newsletter-target="successMessage"
4051             class="text-center py-4"
4052             style="display: none;">
4053          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
4054            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4055              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
4056            </svg>
4057          </div>
4058          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
4059          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
4060        </div>
4061      </div>
4062    </div>
4063  </div>
4064</div>
4065
4066                </li>
4067              <li class="relative">
4068  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4069    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4070      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4071        <span class="text-xs">?</span>
4072      </button>
4073
4074      <template data-popover-target="content">
4075        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4076          <div class="space-y-2">
4077            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4078
4079            <div class="flex items-center gap-1.5 text-xs">
4080              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4081              <span class="flex grow gap-2">Tailwind CSS</span>
4082            </div>
4083
4084            <div class="flex items-center gap-1.5 text-xs">
4085              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4085ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4086                <g class="fill-neutral-800 dark:fill-white">
4087                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4088                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4089                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4090                </g>
4091              </svg>
4092              <span class="flex grow gap-2">Stimulus</span>
4093            </div>
4094
4095            <div class="flex items-center gap-1.5 text-xs">
4096              <img alt="PhotoSwipe" class="size-3.5 rounded-sm" src="/assets/photoswipe-logo-b3e92230fc472dfc24be0c4c595b1988efbbfdc9db889d7e9e9fc4f02c5c41c6.webp" />
4097              <span class="flex grow gap-2">PhotoSwipe</span>
4098            </div>
4099          </div>
4100        </div>
4101      </template>
4102    </div>
4103
4104    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-14 md:py-16 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4105      <div data-controller="lightbox" data-lightbox-target="gallery" class="max-w-[150px] flex gap-2 flex-wrap justify-center">
4106        <!-- First 3 visible thumbnails -->
4107        <a href="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe"
4108          data-pswp-src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe"
4109          data-pswp-caption="new-background-v2.png"
4110          class="group relative">
4111          <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400"
4112              alt="Thumbnail 1"
4113              class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all">
4114        </a>
4115
4116        <a href="https://images.unsplash.com/photo-1611162617474-5b21e879e113"
4117          data-pswp-src="https://images.unsplash.com/photo-1611162617474-5b21e879e113"
4118          data-pswp-caption="netflix-logo.png"
4119          class="group relative">
4120          <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=400"
4121              alt="Thumbnail 2"
4122              class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all">
4123        </a>
4124
4125        <a href="https://images.unsplash.com/photo-1551650975-87deedd944c3"
4126          data-pswp-src="https://images.unsplash.com/photo-1551650975-87deedd944c3"
4127          data-pswp-caption="mobile-responsive.png"
4128          class="group relative">
4129          <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=400"
4130              alt="Thumbnail 3"
4131              class="size-12 rounded object-cover ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all">
4132        </a>
4133
4134        <!-- +2 more indicator -->
4135        <a href="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900"
4136          data-pswp-src="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=1600&h=900"
4137          data-pswp-caption="dashboard-analytics.jpg"
4138          class="group relative cursor-pointer">
4139          <div class="size-12 rounded bg-neutral-100 dark:bg-neutral-800 ring-1 ring-neutral-200 dark:ring-neutral-700 group-hover:ring-2 group-hover:ring-neutral-800 dark:hover:ring-neutral-200 transition-all flex items-center justify-center">
4140            <span class="text-base font-medium text-neutral-600 dar
4140k:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">+2</span>
4141          </div>
4142        </a>
4143
4144        <!-- Hidden last image -->
4145        <a href="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900"
4146          data-pswp-src="https://images.unsplash.com/photo-1555421689-491a97ff2040?w=1600&h=900"
4147          data-pswp-caption="person-typing.png"
4148          class="hidden">
4149        </a>
4150      </div>
4151    </div>
4152  </div>
4153  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/lightbox" data-turbo-frame="_top">
4154    <div class="h-48"></div>
4155    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4156      Lightbox
4157      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4158    </p>
4159    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
4160  </a>
4161</li>
4162
4163
4164              <li class="relative">
4165  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4166    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4167      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4167k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4168        <span class="text-xs">?</span>
4169      </button>
4170
4171      <template data-popover-target="content">
4172        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4173          <div class="space-y-2">
4174            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4175
4176            <div class="flex items-center gap-1.5 text-xs">
4177              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4178              <span class="flex grow gap-2">Tailwind CSS</span>
4179            </div>
4180
4181          </div>
4182        </div>
4183      </template>
4184    </div>
4185
4186    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
4187      <div class="flex flex-row">
4188  <div class="flex items-center justify-center p-8">
4189  <svg xmlns="http://www.w3.org/2000/svg" class="rounded-full animate-spin size-8 text-neutral-800 dark:text-neutral-200" width="18" height="18" viewBox="0 0 18 18">
4190    <g fill="currentColor">
4191      <path d="m9,17c-4.4111,0-8-3.5889-8-8S4.5889,1,9,1s8,3.5889,8,8-3.5889,8-8,8Zm0-14.5c-3.584,0-6.5,2.916-6.5,6.5s2.916,6.5,6.5,6.5,6.5-2.916,6.5-6.5-2.916-6.5-6.5-6.5Z" opacity=".4" stroke-width="0"></path>
4192      <path d="m16.25,9.75c-.4141,0-.75-.3359-.75-.75,0-3.584-2.916-6.5-6.5-6.5-.4141,0-.75-.3359-.75-.75s.3359-.75.75-.75c4.4111,0,8,3.5889,8,8,0,.4141-.3359.75-.75.75Z" stroke-width="0"></path>
4193    </g>
4194  </svg>
4195</div>
4196
4197  <div class="flex items-center justify-center p-8">
4198  <svg xmlns="http://www.w3.org/2000/svg" class="size-8 rounded-full animate-[spin_0.8s_steps(8)_infinite]" width="18" height="18" viewBox="0 0 18 18">
4199    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
4200      <line x1="9" y1="1.75" x2="9" y2="4.25" opacity=".13"></line>
4201      <line x1="14.127" y1="3.873" x2="12.359" y2="5.641" opacity=".25"></line>
4202      <line x1="16.25" y1="9" x2="13.75" y2="9" opacity=".38"></line>
4203      <line x1="14.127" y1="14.127" x2="12.359" y2="12.359" opacity=".5"></line>
4204      <line x1="9" y1="16.25" x2="9" y2="13.75" opacity=".63"></line>
4205      <line x1="3.873" y1="14.127" x2="5.641" y2="12.359" opacity=".75"></line>
4206      <line x1="1.75" y1="9" x2="4.25" y2="9" opacity=".88"></line>
4207      <line x1="3.873" y1="3.873" x2="5.641" y2="5.641"></line>
4208    </g>
4209  </svg>
4210</div>
4211
4212  <div class="flex items-center justify-center p-8">
4213  <div class="flex space-x-1.5">
4214    <div class="size-1.5 bg-neutral-800 dark:bg-neutral-200 rounded-full animate-bounce" style="animation-delay: 0ms;"></div>
4215    <div class="size-1.5 bg-neutral-800/80 dark:bg-neutral-200/80 rounded-full animate-bounce" style="animation-delay: 150ms;"></div>
4216    <div class="size-1.5 bg-neutral-800/60 dark:bg-neutral-200/60 rounded-full animate-bounce" style="animation-delay: 300ms;"></div>
4217  </div>
4218</div>
4219
4220</div>
4221
4222    </div>
4223  </div>
4224  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/loading-indicator" data-turbo-frame="_top">
4225    <div class="h-48"></div>
4226    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4227      Loading Indicator
4228      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4229    </p>
4230    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
4231  </a>
4232</li>
4233
4234
4235              <li class="relative">
4236  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4237    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4238      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4238k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4239        <span class="text-xs">?</span>
4240      </button>
4241
4242      <template data-popover-target="content">
4243        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4244          <div class="space-y-2">
4245            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4246
4247            <div class="flex items-center gap-1.5 text-xs">
4248              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4249              <span class="flex grow gap-2">Tailwind CSS</span>
4250            </div>
4251
4252            <div class="flex items-center gap-1.5 text-xs">
4253              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4253ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4254                <g class="fill-neutral-800 dark:fill-white">
4255                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4256                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4257                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4258                </g>
4259              </svg>
4260              <span class="flex grow gap-2">Stimulus</span>
4261            </div>
4262          </div>
4263        </div>
4264      </template>
4265    </div>
4266
4267    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center overflow-hidden">
4268      <div class="w-full">
4269        <div
4270          data-controller="marquee"
4271          data-marquee-speed-value="15"
4272          class="relative overflow-hidden bg-transparent py-4 [--marquee-fade-size:1.25rem] [mask-image:linear-gradient(to_right,transparent,black_var(--marquee-fade-size),black_calc(100%-var(--marquee-fade-size)),transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_var(--marquee-fade-size),black_calc(100%-var(--marquee-fade-size)),transparent)]"
4273          data-action="mouseenter->marquee#pauseAnimation mouseleave->marquee#resumeAnimation"
4274        >
4275          <div data-marquee-target="track" class="relative flex w-full">
4276            <div data-marquee-target="list" class="flex w-full shrink-0 flex-nowrap items-center justify-around ga
4276p-8">
4277              <div class="flex items-center space-x-2">
4278                <svg xmlns="http://www.w3.org/2000/svg" fill="#d30001" viewBox="0 0 235 155" class="h-5">
4279                  <g>
4280                    <path d="M180 17.8c-.9-.5-3.4-1.7-9.7-3.5l-.4 6.6c3.3 1.1 6.5 2.3 9.7 3.6l.4-6.7Z"></path>
4281                    <path d="M124.9 18.9c-29.2 2.6-65 29.1-86 64.1S15 147.6 15 147.6h79s-15.1-68.9 34.9-96.8c10.9-5.3 45.6-25.1 102.4 16.9 1.8-1.5 3.5-2.7 3.5-2.7s-52-51.9-109.9-46.1Z"></path>
4282                    <path d="m54.7 54.7-7.1-6.2c-2.6 2.5-5.1 5-7.4 7.5l7.7 6.6c2.1-2.7 4.4-5.4 6.8-7.9Z"></path>
4283                    <path d="M92.5 25 88 18.1c-2.5 1.3-5.1 2.7-7.8 4.3l4.6 7c2.6-1.6 5.1-3.1 7.7-4.4Z"></path>
4284                    <path d="M24.5 99.4 13 95.2c-1.9 4.3-4 9.3-5 12l11.5 4.2c1.3-3.4 3.4-8.3 5-12Z"></path>
4285                    <path d="M133.1 14.5h1l-2-6.1c-3.1 0-6.3.2-9.6.6l1.9 5.9c2.9-.3 5.8-.4 8.7-.4Z"></path>
4286                    <path d="M97 127.6c.2 5.3.7 9.6 1.2 12.6l12 4.3c-.9-3.9-1.8-8.3-2.4-13L97 127.6Z"></path>
4287                    <path d="m137.9 51.3 2.3 6.9c2.9-1.4 5.8-2.6 8.7-3.5l-2.2-6.6c-3.4 1-6.3 2.1-8.8 3.2Z"></path>
4288                    <path d="M169.7 52c3.3.1 6.6.5 9.9 1.2l.4-6.2c-3.4-.7-6.7-1.1-9.9-1.3l-.4 6.3Z"></path>
4289                    <path d="M101.5 91.2c-1.3 3.7-2.2 7.4-3 11l8.1 6.4c.4-3.9 1.1-7.8 2.1-11.7l-7.2-5.7Z"></path>
4290                    <path d="m113 70 4.8 7.2c1.7-2.5 3.7-4.8 5.9-7.1l-4.5-6.8c-2.3 2.1-4.4 4.4-6.2 6.7Z"></path>
4291                  </g>
4292                </svg>
4293                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Ruby on Rails</span>
4294              </div>
4295              <div class="flex items-center space-x-2">
4296                <svg class="size-4 rounded-sm" width="60" height="60" viewB
4296ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4297                  <g class="fill-neutral-800 dark:fill-white">
4298                    <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4299                    <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4300                    <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4301                  </g>
4302                </svg>
4303                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Stimulus</span>
4304              </div>
4305              <div class="flex items-center space-x-2">
4306                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="h-5"><path fill="#23B2E7" fill-rule="evenodd" d="M10 5Q6 5 5 8.334q1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C11.386 9.041 12.522 10 15 10q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C13.614 5.96 12.479 5 10 5m-5 5q-4 0-5 3.334 1.5-1.668 3.5-1.25c.76.158 1.305.618 1.906 1.127C6.386 14.041 7.521 15 10 15q4 0 5-3.333-1.5 1.667-3.5 1.25c-.76-.159-1.305-.619-1.906-1.128C8.614 10.96 7.478 10 5 10" clip-rule="evenodd"></path></svg>
4307                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Tailwind CSS</span>
4308              </div>
4309              <div class="flex items-center space-x-2">
4310                <img class="size-5" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" />
4311                <span class="text-sm font-medium text-neutral-800 dark:text-neutral-200">Rails Blocks</span>
4312              </div>
4313            </div>
4314          </div>
4315        </div>
4316      </div>
4317    </div>
4318  </div>
4319  <a href="/docs/marquee" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4320    <div class="h-48"></div>
4321    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4322      Marquee
4323      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4324    </p>
4325    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
4326  </a>
4327</li>
4328
4329
4330              <li class="relative">
4331    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
4332    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
4333      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
4334        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
4335        Pro
4336      </a>
4337    </div>
4338  </div>
4339
4340  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4341    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4342      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4342k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4343        <span class="text-xs">?</span>
4344      </button>
4345
4346      <template data-popover-target="content">
4347        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4348          <div class="space-y-2">
4349            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4350
4351            <div class="flex items-center gap-1.5 text-xs">
4352              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4353              <span class="flex grow gap-2">Tailwind CSS</span>
4354            </div>
4355
4356            <div class="flex items-center gap-1.5 text-xs">
4357              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4357ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4358                <g class="fill-neutral-800 dark:fill-white">
4359                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4360                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4361                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4362                </g>
4363              </svg>
4364              <span class="flex grow gap-2">Stimulus</span>
4365            </div>
4366          </div>
4367        </div>
4368      </template>
4369    </div>
4370
4371    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4372      <div class="not-prose">
4373        <div data-controller="modal">
4374          <button data-action="click->
4374modal#open:prevent" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
4375            Open Small Modal
4376          </button>
4377
4378          <dialog class="modal max-w-[100vw-2rem] sm:max-w-sm bg-transparent rounded-xl w-full lg:rounded-2xl z-50 border border-black/10 dark:border-white/10 bg-white dark:bg-neutral-800 small-scrollbar focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200" data-modal-target="dialog" data-action="mousedown->modal#backdropClose">
4379            <div class="sm:max-w-3xl row-start-2 w-full rounded-xl lg:rounded-2xl bg-white p-6 dark:bg-neutral-800 forced-colors:outline">
4380              <button type="button" data-action="modal#close:prevent" class="z-10 p-1.5 absolute right-4 top-5 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden hover:bg-neutral-500/15 active:bg-neutral-500/25 disabled:pointer-events-none">
4381                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
4382                <span class="sr-only">Close</span>
4383              </button>
4384
4385              <p class="mb-2 text-lg font-semibold text-neutral-900 dark:text-white">Are you sure?</p>
4386              <p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
4387                Are you sure you want to do that?
4388              </p>
4389
4390              <div class="flex justify-end items-center flex-wrap gap-2 mt-4">
4391                <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200" data-action="click->modal#close:prevent">
4392                  Close
4393                </button>
4394                <button class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200" data-action="click->modal#close:prevent">
4395                  Continue
4396                </button>
4397              </div>
4398            </div>
4399          </dialog>
4400        </div>
4401      </div>
4402    </div>
4403  </div>
4404  <a href="/docs/modal" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4405    <div class="h-48"></div>
4406    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4407      Modal
4408      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4409    </p>
4410    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 10 components</p>
4411  </a>
4412</li>
4413
4414
4415              <li class="relative">
4416  <div class="absolute left-4 top-4 z-10 text-xs text-neutral-500 dark:text-neutral-400">
4417      <div class="inline relative">
4418    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
4419      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
4420        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
4421        Pro
4422      </a>
4423    </div>
4424  </div>
4425
4426  </div>
4427
4428  <div class="pointer-events-auto absolute right-4 top-4 z-10 inline-block" data-controller="popover">
4429    <button type="button" class="flex size-[1rem] cursor-help items-center justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 focus:outline-neutral-500 focus:outline-offset-2 dark:border-neutral-600 dar
4429k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 dark:focus:outline-neutral-200">
4430      <span class="text-xs">?</span>
4431    </button>
4432
4433    <template data-popover-target="content">
4434      <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4435        <div class="space-y-2">
4436          <div class="w-full text-center text-xs font-semibold">Dependencies</div>
4437
4438          <div class="flex items-center gap-1.5 text-xs">
4439            <svg viewBox="0 0 35 21" class="size-3.5" fill="none" aria-hidden="true"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308 .326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4440            <span>Tailwind CSS</span>
4441          </div>
4442
4443          <div class="flex items-center gap-1.5 text-xs">
4444            <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4444ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4445              <g class="fill-neutral-800 dark:fill-white">
4446                <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4447                <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4448                <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4449              </g>
4450            </svg>
4451            <span class="flex grow gap-2">Stimulus</span>
4452          </div>
4453          <div class="flex items-center gap-1.5 text-xs">
4454            <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
4455            <span>Floating UI</span>
4456          </div>
4457
4458          <div class="flex items-center gap-1.5 text-xs">
4459            <img alt="Number Flow" class="size-3.5 rounded" src="/assets/number-flow-logo-1481f4d9eea3e4ac4b9095aa058736fd961b80f3d38a78225792a19db464308f.webp" />
4460            <span>Number Flow</span>
4461          </div>
4462        </div>
4463      </div>
4464    </template>
4465  </div>
4466
4467  <div class="pointer-events-none absolute inset-0">
4468    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] pointer-events-auto flex h-48 items-center justify-center overflow-hidden rounded-t-xl px-5">
4469      <div class="w-full max-w-[320px]">
4470        
4471<div
4472  class="relative w-full"
4473  data-controller="onboarding-checklist"
4474  data-action="click@window->onboarding-checklist#close keydown.esc@window->onboarding-checklist#escape"
4475  data-onboarding-checklist-data-value="{&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}]}"
4476  data-onboarding-checklist-mode-value="overlay-below"
4477  data-onboarding-checklist-open-value="false"
4478  data-onboarding-checklist-compact-value="true"
4479>
4480  <div data-onboarding-checklist-target="surface" class="relative mx-auto w-full max-w-[280px]">
4481    <div class="relative rounded-2xl border border-black/10 bg-white p-1 shadow-[0_10px_28px_rgb(0_0_0_/_10%)] dark:border-white/15 dark:bg-neutral-900 dark:shadow-[0_14px_36px_rgb(0_0_0_/_35%)]">
4482      <button
4483        type="button"
4484        data-onboarding-checklist-target="trigger"
4485        data-action="click->onboarding-checklist#toggle"
4486        aria-expanded="false"
4487        aria-controls="changelog-onboarding-checklist"
4488        class="flex min-h-13 w-full items-center gap-2.5 rounded-xl px-3 py-2 text-left transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-500 dark:hover:bg-white/5"
4489      >
4490        <span data-onboarding-checklist-target="ready progressVisual" aria-hidden="true" class="relative flex size-9 shrink-0 items-center justify-center opacity-0 transition-opacity duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none">
4491          <span data-onboarding-checklist-target="completionHalo" class="pointer-events-none absolute inset-1 rounded-full bg-emerald-400/35 opacity-0 will-change-transform" aria-hidden="true"></span>
4492          <svg class="size-9 -rotate-90" viewBox="0 0 40 40" aria-hidden="true">
4493            <circle cx="20" cy="20" r="17" fill="none" stroke="currentColor" stroke-width="2.75" class="text-neutral-200 dark:text-neutral-700" />
4494            <circle data-onboarding-checklist-target="ring" cx="20" cy="20" r="17" pathLength="100" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100" class="text-neutral-800 transition-[stroke-dashoffset,color] duration-[480ms] ease-[cubic-bezier(0.65,0,0.35,1)] motion-reduce:transition-none dark:text-neutral-200" />
4495          </svg>
4496          <number-flow data-onboarding-checklist-target="progress" class="absolute text-[8px] font-semibold tabular-nums text-neutral-700 
4496will-change-transform transition-colors duration-300 motion-reduce:transition-none dark:text-neutral-200"></number-flow>
4497        </span>
4498        <span class="min-w-0 flex-1">
4499          <span data-onboarding-checklist-target="title" class="block truncate text-xs font-semibold tracking-[-0.01em] text-neutral-900 dark:text-white">Make Acme yours</span>
4500          <span data-onboarding-checklist-target="summary ready" aria-hidden="true" class="mt-0.5 block truncate text-[10px] text-neutral-500 opacity-0 transition-opacity duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none dark:text-neutral-400"></span>
4501        </span>
4502        <span class="flex size-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
4503          <svg data-onboarding-checklist-target="chevron" class="size-3.5 will-change-transform transition-transform duration-300 ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4.5 7 4.5 4 4.5-4" /></svg>
4504        </span>
4505      </button>
4506    </div>
4507
4508    <div id="changelog-onboarding-checklist" data-onboarding-checklist-target="panel" hidden class="left-0 z-40 w-full overflow-hidden rounded-2xl border border-black/10 bg-white will-change-transform transition-[height,opacity,transform] duration-[450ms] ease-[cubic-bezier(0.35,0.75,0,1)] motion-reduce:transition-none shadow-[0_16px_40px_rgb(0_0_0_/_14%)] dark:border-white/15 dark:bg-neutral-900 dark:shadow-[0_20px_48px_rgb(0_0_0_/_45%)]">
4509      <div class="flex items-start justify-between border-b border-neutral-200/70 px-5 py-4 dark:border-white/8">
4510        <div>
4511          <p data-onboarding-checklist-target="panelTitle" class="text-xs font-semibold text-neutral-900 dark:text-white">Your quick start</p>
4512          <p data-onboarding-checklist-target="panelDescription" class="mt-0.5 text-[10px] text-neutral-500 dark:text-neutral-400">A few small wins, then you’re flying.</p>
4513        </div>
4514      </div>
4515      <ol data-onboarding-checklist-target="taskList"></ol>
4516    </div>
4517  </div>
4518
4519  <p data-onboarding-checklist-target="liveRegion" class="sr-only" aria-live="polite"></p>
4520</div>
4521
4522      </div>
4523    </div>
4524  </div>
4525
4526  <a class="group block rounded-xl border border-black/10 bg-white p-6 shadow-sm transition-colors duration-200 motion-reduce:transition-none hover:bg-neutral-50 focus:outline-neutral-500 focus:outline-offset-2 dark:border-white/10 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:outline-neutral-200" href="/docs/onboarding-checklist" data-turbo-frame="_top">
4527    <div class="h-48"></div>
4528    <p class="flex items-center justify-center gap-1.5 text-center text-lg font-semibold tracking-tight">
4529      Onboarding Checklist
4530      <svg class="w-0 transition-[width] duration-200 motion-reduce:transition-none group-hover:w-4" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 6h9.75M7.75 9.25 11 6 7.75 2.75" /></svg>
4531    </p>
4532    <p class="text-center text-sm font-normal text-neutral-500 dark:text-neutral-400">View 3 components</p>
4533  </a>
4534</li>
4535
4536
4537              <li class="relative">
4538  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4539    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4540      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4540k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4541        <span class="text-xs">?</span>
4542      </button>
4543
4544      <template data-popover-target="content">
4545        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4546          <div class="space-y-2">
4547            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4548
4549            <div class="flex items-center gap-1.5 text-xs">
4550              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4551              <span class="flex grow gap-2">Tailwind CSS</span>
4552            </div>
4553
4554            <div class="flex items-center gap-1.5 text-xs">
4555              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4555ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4556                <g class="fill-neutral-800 dark:fill-white">
4557                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4558                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4559                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4560                </g>
4561              </svg>
4562              <span class="flex grow gap-2">Stimulus</span>
4563            </div>
4564          </div>
4565        </div>
4566      </template>
4567    </div>
4568
4569    <div data-turbo="false" class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center overflow-visible">
4570      <nav class="flex w-fit justify-center" data-controller="navbar">
4571        <div class="relative">
4572          <!-- Menu List -->
4573          <ul data-navbar-target="menu" class="m-0 flex list-none items-center gap-1 rounded-lg border border-neutral-200 bg-white p-1 shadow-sm dark:border-neutral-700 dark:bg-neutral-800">
4574            <li>
4575              <a href="/" class="block rounded-md px-1.5 py-1.5 text-xs font-medium text-neutral-700 no-underline select-none hover:bg-neutral-100 dar
4575k:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
4576                <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855,6.2l-5.25-3.99c-.358-.272-.853-.272-1.21,0L3.145,6.2c-.249,.189-.395,.484-.395,.797v7.254c0,1.105,.895,2,2,2h2.5v-4c0-.552,.448-1,1-1h1.5c.552,0,1,.448,1,1v4h2.5c1.105,0,2-.895,2-2V6.996c0-.313-.146-.607-.395-.797Z"></path></g></svg>
4577              </a>
4578            </li>
4579
4580            <!-- Components Dropdown -->
4581            <li class="relative hidden sm:block">
4582              <button type="button" data-navbar-target="trigger" data-content-id="components-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
4583                Blocks
4584                <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
4585              </button>
4586            </li>
4587
4588            <!-- Resources Dropdown -->
4589            <li class="relative hidden sm:block">
4590              <button type="button" data-navbar-target="trigger" data-content-id="resources-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
4591                Resources
4592                <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
4593              </button>
4594            </li>
4595
4596            <li class="relative sm:hidden">
4597              <button type="button" data-navbar-target="trigger" data-content-id="mobile-menu-content" data-action="click->navbar#toggleMenu pointerenter->navbar#handlePointerEnter pointermove->navbar#handlePointerMove pointerleave->navbar#handlePointerLeave keydown->navbar#handleTriggerKeydown" data-state="closed" class="group flex items-center gap-1 rounded-md px-1.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  dark:focus-visible:outline-neutral-200">
4598                <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9" x2="15.75" y2="9"></line><line x1="2.25" y1="3.75" x2="15.75" y2="3.75"></line><line x1="2.25" y1="14.25" x2="15.75" y2="14.25"></line></g></svg>
4599              </button>
4600            </li>
4601          </ul>
4602
4603          <!-- Viewport Container -->
4604          <div data-navbar-target="viewport" data-action="pointerenter->navbar#cancelClose pointerleave->navbar#handlePointerLeave" data-state="closed" class="absolute top-full z-50 mt-2 origin-top transition-all duration-200 ease-out data-[state=closed]:pointer-events-none data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=closing]:pointer-events-none data-[state=closing]:scale-95 data-[state=closing]:opacity-0 data-[state=open]:pointer-events-auto data-[state=open]:scale-100 data-[state=open]:opacity-100 left-1/2 -translate-x-1/2 sm:left-0 sm:translate-x-0">
4605            <!-- Indicator Arrow -->
4606            <div data-navbar-target="indicator" class="pointer-events-none absolute -top-1 z-10 flex h-2 w-10 items-end justify-center overflow-visible transition-opacity duration-200">
4607              <div class="h-2 w-2 rotate-45 border-t border-l border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800"></div>
4608            </div>
4609
4610            <div data-navbar-target="background" class="relative z-0 rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-800">
4611              <!-- Components Content -->
4612              <div id="components-content" data-navbar-target="content" data-state="closed" class="hidden">
4613                <div class="grid grid-cols-1 gap-1.5 p-4 w-[300px] sm:w-[420px] sm:grid-cols-[0.75fr_1fr]">
4614                  <!-- Featured Callout -->
4615                  <a href="/" class="row-span-3 flex h-full w-full cursor-pointer flex-col justify-end rounded-lg bg-gradient-to-br from-red-400 to-red-600 p-6 no-underline transition-all duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4615k:from-red-500 dark:to-red-800 dark:focus-visible:outline-neutral-200 hover:opacity-90">
4616                    <img class="size-9 mb-4" alt="Rails Blocks Logo" src="/assets/avatar-a5d1ee3f447b7848722bb247deffa13b72e8bf5cd959b0b718eb7b43a75fed2a.webp" />
4617                    <div class="mb-1 text-base font-medium text-white">Rails Blocks</div>
4618                    <p class="m-0 text-xs text-neutral-100">Delightful Rails components.</p>
4619                  </a>
4620
4621                  <!-- Menu Items -->
4622                  <a href="/docs/modal" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4623                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Modal</div>
4624                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Dialog boxes for user interactions and confirmations.</p>
4625                  </a>
4626
4627                  <a href="/docs/dropdown" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4627k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4628                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Dropdown</div>
4629                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Contextual menus with keyboard navigation.</p>
4630                  </a>
4631
4632                  <a href="/docs/tooltip" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4633                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Tooltip</div>
4634                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Helpful hints that appear on hover or focus.</p>
4635                  </a>
4636                </div>
4637              </div>
4638
4639              <!-- Resources Content -->
4640              <div id="resources-content" data-navbar-target="content" data-state="closed" class="hidden">
4641                <div class="grid grid-cols-1 gap-2 p-5 w-[300px] sm:w-[420px] sm:grid-cols-2">
4642                  <a href="/docs/installation" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4642k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4643                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Installation</div>
4644                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Get started with Rails Blocks in your Rails app.</p>
4645                  </a>
4646
4647                  <a href="/docs/authors-note" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4648                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Author's Note</div>
4649                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Learn about the philosophy behind Rails Blocks.</p>
4650                  </a>
4651
4652                  <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" rel="noopener noreferrer" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4652k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4653                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Roadmap</div>
4654                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">See what's coming next and vote on features.</p>
4655                  </a>
4656
4657                  <a href="/changelog" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4658                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Changelog</div>
4659                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Latest updates and new component releases.</p>
4660                  </a>
4661
4662                  <a href="/pro" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4662k:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4663                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Rails Blocks Pro</div>
4664                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">Unlock premium components and features.</p>
4665                  </a>
4666
4667                  <a href="/signup" class="block cursor-pointer rounded-lg p-2 no-underline hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:outline-neutral-200">
4668                    <div class="mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">Create an account</div>
4669                    <p class="m-0 text-xs leading-snug text-neutral-600 dark:text-neutral-400">And get notified when new components are released.</p>
4670                  </a>
4671                </div>
4672              </div>
4673
4674              <!-- Mobile Menu Content -->
4675              <div id="mobile-menu-content" data-navbar-target="content" data-state="closed" class="hidden">
4676                <div class="grid grid-cols-1 gap-1.5 p-4 w-[280px] sm:w-[420px] sm:grid-cols-2">
4677                  <div class="relative">
4678                    <button type="button" data-navbar-target="trigger" data-content-id="components-content" data-action="click->navbar#toggleMenu keydown->navbar#handleTriggerKeydown" data-state="closed" class="w-full group flex items-center justify-between gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4678k:focus-visible:outline-neutral-200">
4679                      Blocks
4680                      <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
4681                    </button>
4682                  </div>
4683
4684                  <!-- Resources Dropdown -->
4685                  <div class="relative">
4686                    <button type="button" data-navbar-target="trigger" data-content-id="resources-content" data-action="click->navbar#toggleMenu keydown->navbar#handleTriggerKeydown" data-state="closed" class="w-full group flex items-center justify-between gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium text-neutral-700 select-none hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4686k:focus-visible:outline-neutral-200">
4687                      Resources
4688                      <svg xmlns="http://www.w3.org/2000/svg" class="size-2.5 transition-transform duration-200 group-data-[state=open]:rotate-180" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="1.75 4.25 6 8.5 10.25 4.25"></polyline></g></svg>
4689                    </button>
4690                  </div>
4691                </div>
4692              </div>
4693            </div>
4694          </div>
4695        </div>
4696      </nav>
4697    </div>
4698  </div>
4699  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/navbar" data-turbo-frame="_top">
4700    <div class="h-48"></div>
4701    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4702      Navbar
4703      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4704    </p>
4705    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p>
4706  </a>
4707</li>
4708
4709
4710              <li class="relative">
4711  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4712    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4713      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4713k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4714        <span class="text-xs">?</span>
4715      </button>
4716
4717      <template data-popover-target="content">
4718        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4719          <div class="space-y-2">
4720            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4721
4722            <div class="flex items-center gap-1.5 text-xs">
4723              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4724              <span class="flex grow gap-2">Tailwind CSS</span>
4725            </div>
4726
4727            <div class="flex items-center gap-1.5 text-xs">
4728              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4728ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4729                <g class="fill-neutral-800 dark:fill-white">
4730                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4731                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4732                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4733                </g>
4734              </svg>
4735              <span class="flex grow gap-2">Stimulus</span>
4736            </div>
4737          </div>
4738        </div>
4739      </template>
4740    </div>
4741
4742    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4743      <div class="w-full max-w-sm">
4744        <div class="relative" data-controller="password">
4745          <input type="password"
4746                 id="preview_password"
4747                 name="password"
4748                 class="form-control !pr-12"
4749                 placeholder="Enter your password"
4750                 value="SecurePass123!"
4751                 data-password-target="input">
4752          <button type="button"
4753                  class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors"
4754                  data-action="click->
4754password#toggle"
4755                  aria-label="Toggle password visibility">
4756            <span data-password-target="toggleIcon">
4757              <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M9 11.75C10.5188 11.75 11.75 10.5188 11.75 9C11.75 7.48122 10.5188 6.25 9 6.25C7.48122 6.25 6.25 7.48122 6.25 9C6.25 10.5188 7.48122 11.75 9 11.75Z"></path> <path d="M15.9557 7.88669C16.3481 8.57939 16.3481 9.42049 15.9557 10.1132C15.0087 11.7849 12.7944 14.4999 9 14.4999C5.2056 14.4999 2.9912 11.7849 2.0443 10.1132C1.6519 9.42049 1.6519 8.57939 2.0443 7.88669C2.9913 6.21499 5.2056 3.5 9 3.5C12.7944 3.5 15.0088 6.21499 15.9557 7.88669Z"></path></g></svg>
4758            </span>
4759          </button>
4760        </div>
4761      </div>
4762    </div>
4763  </div>
4764  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/password" data-turbo-frame="_top">
4765    <div class="h-48"></div>
4766    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4767      Password
4768      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4769    </p>
4770    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
4771  </a>
4772</li>
4773
4774
4775              <li class="relative">
4776  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4777    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4778      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4778k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4779        <span class="text-xs">?</span>
4780      </button>
4781
4782      <template data-popover-target="content">
4783        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4784          <div class="space-y-2">
4785            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4786
4787            <div class="flex items-center gap-1.5 text-xs">
4788              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4789              <span class="flex grow gap-2">Tailwind CSS</span>
4790            </div>
4791
4792            <div class="flex items-center gap-1.5 text-xs">
4793              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4793ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4794                <g class="fill-neutral-800 dark:fill-white">
4795                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4796                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4797                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4798                </g>
4799              </svg>
4800              <span class="flex grow gap-2">Stimulus</span>
4801            </div>
4802
4803            <div class="flex items-center gap-1.5 text-xs">
4804              <img alt="Pagy Gem" class="size-3.5" src="/assets/pagy-logo-25eaf1388f3b9c23a6c151ad16fe75cecd85b65158991d2f013789b351b87aa6.png" />
4805              <span class="flex grow gap-2">Pagy</span>
4806            </div>
4807          </div>
4808        </div>
4809      </template>
4810    </div>
4811
4812    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
4813      
4814<turbo-frame id="pagy-preview" class="inline-flex items-center gap-3 rounded-lg border border-black/10 bg-white px-3 py-2 shadow-xs dark:border-white/10 dark:bg-neutral-900">
4815    <span class="select-none inline-flex items-center gap-1 text-sm font-medium text-neutral-400 cursor-not-allowed dark:text-neutral-600"
4816          aria-label="Previous page (disabled)">
4817      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18">
4818        <g fill="currentColor">
4819          <path d="M11.5607 3.93934C11.9512 4.32986 11.9512 4.96303 11.5607 5.35355L7.91421 9L11.5607 12.6464C11.9512 13.037 11.9512 13.6701 11.5607 14.0607C11.1701 14.4512 10.537 14.4512 10.1464 14.0607L5.79289 9.70711C5.40237 9.31658 5.40237 8.68342 5.79289 8.29289L10.1464 3.93934C10.537 3.54882 11.1701 3.54882 11.5607 3.93934Z" fill="currentColor"></path>
4820        </g>
4821      </svg>
4822      Previous
4823    </span>
4824
4825  <span class="text-sm text-neutral-600 dark:text-neutral-400">
4826    Page <span class="font-medium text-neutral-900 dark:text-white">1</span> of <span class="font-medium text-neutral-900 dark:text-white">3</span>
4827  </span>
4828
4829    <a href="/?preview_page=2"
4830       data-turbo-frame="pagy-preview"
4831       class="select-none inline-flex items-center gap-1 text-sm font-medium text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white"
4832       aria-label="Next page">
4833      Next
4834      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18">
4835        <g fill="currentColor">
4836          <path d="M6.43934 14.0607C6.04882 13.6701 6.04882 13.037 6.43934 12.6464L10.0858 9L6.43934 5.35355C6.04882 4.96303 6.04882 4.32986 6.43934 3.93934C6.82986 3.54882 7.46303 3.54882 7.85355 3.93934L12.2071 8.29289C12.5976 8.68342 12.5976 9.31658 12.2071 9.70711L7.85355 14.0607C7.46303 14.4512 6.82986 14.4512 6.43934 14.0607Z" fill="currentColor"></path>
4837        </g>
4838      </svg>
4839    </a>
4840</turbo-frame>
4841
4842
4843
4844
4845
4846
4847
4848
4849
4850
4851    </div>
4852  </div>
4853  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/pagination" data-turbo-frame="_top">
4854    <div class="h-48"></div>
4855    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4856      Pagination
4857      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4858    </p>
4859    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 4 components</p>
4860  </a>
4861</li>
4862
4863
4864                <li class="sm:hidden col-span-1">
4865                  <div class="relative mt-8 mb-6">
4866  <div class="mx-auto">
4867    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
4868      <div data-controller="newsletter"
4869           class="max-w-xs">
4870        <div data-newsletter-target="form">
4871          <form data-action="submit->newsletter#submit"
4872                class="space-y-3">
4873            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
4874            <input type="email"
4875                  data-newsletter-target="email"
4876                  placeholder="Enter your email..."
4877                  class="form-control"
4878                  
4879                  required>
4880            <div class="flex justify-center">
4881              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
4882            </div>
4883            <button type="submit"
4884                    data-newsletter-target="submitButton"
4885                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
4886              Subscribe to the newsletter
4887            </button>
4888          </form>
4889          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
4890            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
4891          </div>
4892        </div>
4893
4894        <div data-newsletter-target="successMessage"
4895             class="text-center py-4"
4896             style="display: none;">
4897          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
4898            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4899              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
4900            </svg>
4901          </div>
4902          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
4903          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
4904        </div>
4905      </div>
4906    </div>
4907  </div>
4908</div>
4909
4910                </li>
4911              <li class="relative">
4912  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4913    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4914      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4915        <span class="text-xs">?</span>
4916      </button>
4917
4918      <template data-popover-target="content">
4919        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4920          <div class="space-y-2">
4921            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
4922
4923            <div class="flex items-center gap-1.5 text-xs">
4924              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
4925              <span class="flex grow gap-2">Tailwind CSS</span>
4926            </div>
4927
4928            <div class="flex items-center gap-1.5 text-xs">
4929              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
4929ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
4930                <g class="fill-neutral-800 dark:fill-white">
4931                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
4932                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
4933                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
4934                </g>
4935              </svg>
4936              <span class="flex grow gap-2">Stimulus</span>
4937            </div>
4938
4939            <div class="flex items-center gap-1.5 text-xs">
4940              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
4941              <span class="flex grow gap-2">Floating UI</span>
4942            </div>
4943          </div>
4944        </div>
4945      </template>
4946    </div>
4947
4948    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
4949      <div class="inline-block relative" data-controller="popover" data-popover-interactive-value="true" data-popover-animation-value="fade origin">
4950        <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
4950k:focus-visible:outline-neutral-200">
4951          Share
4952        </button>
4953        <template data-popover-target="content">
4954          <div class="p-4">
4955            <div class="flex flex-col gap-3 text-center">
4956              <div class="text-sm font-medium">Share Rails Blocks</div>
4957              <div class="flex flex-wrap justify-center gap-2">
4958                <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Frailsblocks.com&text=Check%20out%20Rails%20Blocks" target="_blank" rel="noopener noreferrer" class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8" aria-label="Share on Twitter"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z"></path></svg></a>
4959                <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Frailsblocks.com" target="_blank" rel="noopener noreferrer" class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4959k:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8" aria-label="Share on Facebook"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M14 13.5H16.5L17.5 9.5H14V7.5C14 6.47062 14 5.5 16 5.5H17.5V2.1401C17.1743 2.09685 15.943 2 14.6429 2C11.9284 2 10 3.65686 10 6.69971V9.5H7V13.5H10V22H14V13.5Z"></path></svg></a>
4960                <a href="mailto:?subject=Check%20out%20Rails%20Blocks&body=I%20thought%20you%20might%20be%20interested%20in%20this%3A%20https%3A%2F%2Frailsblocks.com" class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8" aria-label="Share via email"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8.88,8.827c.074,.042,.166,.042,.24,0l7.777-4.283c-.314-1.173-1.376-2.044-2.647-2.044H3.75c-1.267,0-2.326,.865-2.643,2.033l7.773,4.293Z"></path><path d="M9.845,10.14c-.264,.146-.554,.219-.844,.219s-.582-.073-.846-.22L1,6.188v6.562c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75V6.2l-7.155,3.94Z"></path></g></svg></a>
4961                <button class="rounded-lg bg-neutral-800 p-2 text-sm font-semibold text-white shadow-xs hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
4961k:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200 size-8"
4962                  data-controller="clipboard"
4963                  data-clipboard-text="https://railsblocks.com"
4964                  data-clipboard-show-tooltip-value="false">
4965                  <div data-clipboard-target="copyContent" class="flex items-center gap-2">
4966                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm4.75,10.25H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Zm0-3H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path></g></svg>
4967                  </div>
4968                  <div data-clipboard-target="copiedContent" class="hidden flex items-center gap-2">
4969                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm5.35,5.45l-3.75,5c-.136,.181-.346,.291-.572,.299-.009,0-.019,0-.028,0-.216,0-.422-.093-.564-.256l-1.75-2c-.273-.312-.241-.785,.071-1.058s.785-.242,1.058,.071l1.141,1.303,3.195-4.26c.249-.331,.719-.397,1.05-.15,.331,.249,.398,.719,.15,1.05Z"></path></g></svg>
4970                  </div>
4971                </button>
4972              </div>
4973            </div>
4974          </div>
4975        </template>
4976      </div>
4977    </div>
4978  </div>
4979  <a href="/docs/popover" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4980    <div class="h-48"></div>
4981    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
4982      Popover
4983      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
4984    </p>
4985    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
4986  </a>
4987</li>
4988
4989
4990              <li class="relative">
4991  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
4992    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
4993      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
4993k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
4994        <span class="text-xs">?</span>
4995      </button>
4996
4997      <template data-popover-target="content">
4998        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
4999          <div class="space-y-2">
5000            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5001
5002            <div class="flex items-center gap-1.5 text-xs">
5003              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5004              <span class="flex grow gap-2">Tailwind CSS</span>
5005            </div>
5006
5007          </div>
5008        </div>
5009      </template>
5010    </div>
5011
5012    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5013      <div class="flex items-center gap-x-3">
5014        <input name="radio" type="radio" id="checked-radio">
5015        <label for="checked-radio" class="inline-block select-none">Radio input</label>
5016      </div>
5017    </div>
5018  </div>
5019  <a href="/docs/radio" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5020    <div class="h-48"></div>
5021    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5022      Radio
5023      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5024    </p>
5025    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
5026  </a>
5027</li>
5028
5029
5030              <li class="relative">
5031  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5032    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5033      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5033k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5034        <span class="text-xs">?</span>
5035      </button>
5036
5037      <template data-popover-target="content">
5038        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5039          <div class="space-y-2">
5040            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5041
5042            <div class="flex items-center gap-1.5 text-xs">
5043              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5044              <span class="flex grow gap-2">Tailwind CSS</span>
5045            </div>
5046
5047            <div class="flex items-center gap-1.5 text-xs">
5048              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5048ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5049                <g class="fill-neutral-800 dark:fill-white">
5050                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5051                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5052                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5053                </g>
5054              </svg>
5055              <span class="flex grow gap-2">Stimulus</span>
5056            </div>
5057          </div>
5058        </div>
5059      </template>
5060    </div>
5061
5062    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
5063      <div data-controller="scroll-area" data-scroll-area-target="root" data-action="mouseenter->scroll-area#onRootMouseEnter mouseleave->scroll-area#onRootMouseLeave" class="relative h-32 w-full max-w-[240px] rounded-lg border border-neutral-200 bg-white px-4 py-2.5 dark:border-neutral-700 dark:bg-neutral-800">
5064  <!-- Viewport -->
5065  <div data-scroll-area-target="viewport" data-action="scroll->scroll-area#onViewportScroll" class="h-full overflow-auto scrollbar-hide scroll-fade-y pr-1">
5066    <div class="flex flex-col gap-3 text-xs leading-relaxed text-neutral-900 dark:text-neutral-100">
5067      <p>
5068        Rails Blocks is a modern component library for Ruby on Rails applications. It provides
5069        production-ready UI components that integrate seamlessly with Hotwire, Stimulus, and Tailwind CSS.
5070      </p>
5071      <p>
5072        Built with Rails conventions in mind, each component works perfectly with Turbo Drive,
5073        Turbo Frames, and Turbo Streams. All components are fully responsive and support both
5074        light and dark modes out of the box.
5075      </p>
5076      <p>
5077        Build modern, interactive web applications without extensive JavaScript. The library leverages
5078        Stimulus controllers for interactivity while keeping your Rails application fast and native.
5079      </p>
5080      <p>
5081        Every component is copy-and-paste friendly, giving you full control. Customize styles,
5082        behavior, and markup to fit your needs while maintaining consistency across your application.
5083      </p>
5084    </div>
5085  </div>
5086
5087  <!-- Vertical Scrollbar -->
5088  <div data-scroll-area-target="scrollbar" data-scroll-area-orientation-value="vertical" data-action="click->
5088scroll-area#onScrollbarClick" class="absolute right-2 top-2 bottom-2 flex w-1.5 justify-center rounded-full bg-black/5 backdrop-blur-sm opacity-0 transition-opacity duration-150 delay-300 pointer-events-none data-[hovering]:opacity-100 data-[hovering]:duration-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-100 data-[scrolling]:delay-0 data-[scrolling]:pointer-events-auto dark:bg-white/10">
5089    <!-- Thumb -->
5090    <div data-scroll-area-target="thumb" data-action="mousedown->scroll-area#onThumbMouseDown" class="relative w-full rounded-full bg-neutral-500 transition-opacity duration-100 dark:bg-neutral-400"></div>
5091  </div>
5092</div>
5093
5094    </div>
5095  </div>
5096  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/scroll-area" data-turbo-frame="_top">
5097    <div class="h-48"></div>
5098    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5099      Scroll Area
5100      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5101    </p>
5102    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
5103  </a>
5104</li>
5105
5106
5107              <li class="relative">
5108  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5109    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5110      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5110k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5111        <span class="text-xs">?</span>
5112      </button>
5113
5114      <template data-popover-target="content">
5115        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5116          <div class="space-y-2">
5117            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5118
5119            <div class="flex items-center gap-1.5 text-xs">
5120              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5121              <span class="flex grow gap-2">Tailwind CSS</span>
5122            </div>
5123
5124            <div class="flex items-center gap-1.5 text-xs">
5125              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5125ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5126                <g class="fill-neutral-800 dark:fill-white">
5127                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5128                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5129                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5130                </g>
5131              </svg>
5132              <span class="flex grow gap-2">Stimulus</span>
5133            </div>
5134
5135            <div class="flex items-center gap-1.5 text-xs">
5136              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.25,13H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,16H3.75c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.25c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M14.25,2H3.75c-1.517,0-2.75,1.233-2.75,2.75v2.5c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75v-2.5c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,6.5H3.75c-.689,0-1.25-.561-1.25-1.25v-2.5c0-.689,.561-1.25,1.25-1.25h4.75v5Zm5.833-2.833l-1.25,1.667c-.078,.105-.202,.167-.333,.167s-.255-.062-.333-.167l-1.25-1.667c-.095-.126-.11-.295-.039-.436,.071-.141,.215-.23,.373-.23h2.5c.158,0,.302,.089,.373,.23,.07,.141,.055,.31-.039,.436Z"></path></g></svg>
5137              <span class="flex grow gap-2">Tom select</span>
5138            </div>
5139
5140            <div class="flex items-center gap-1.5 text-xs">
5141              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
5142              <span class="flex grow gap-2">Floating UI</span>
5143            </div>
5144
5145          </div>
5146        </div>
5147      </template>
5148    </div>
5149
5150    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center *:w-full">
5151
5152      <select name="frameworks" id="frameworks" class="w-full max-h-[40px] flex [&amp;&gt;*:first-child]:!cursor-pointer" autocomplete="off" data-controller="select" data-select-dropdown-input-value="false" data-select-disable-typing-value="true" data-select-scroll-buttons-value="true"><option value="">Select an option...</option><option value="rails">Ruby on Rails</option>
5153<option value="laravel">Laravel</option>
5154<option value="django">Django</option>
5155<option value="python">Python</option>
5156<option value="js">JavaScript</option>
5157<option value="php">PHP</option>
5158<option value="java">Java</option>
5159<option value="csharp">C#</option>
5160<option value="go">Go</option>
5161<option value="rust">Rust</option>
5162<option value="cpp">C++</option>
5163<option value="swift">Swift</option>
5164<option value="kotlin">Kotlin</option>
5165<option value="typescript">TypeScript</option></select>
5166
5167    </div>
5168  </div>
5169  <a href="/docs/select" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5170    <div class="h-48"></div>
5171    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5172      Select
5173      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5174    </p>
5175    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
5176  </a>
5177</li>
5178
5179
5180              <li class="relative">
5181  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5182    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5183      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5183k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5184        <span class="text-xs">?</span>
5185      </button>
5186
5187      <template data-popover-target="content">
5188        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5189          <div class="space-y-2">
5190            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5191
5192            <div class="flex items-center gap-1.5 text-xs">
5193              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5194              <span class="flex grow gap-2">Tailwind CSS</span>
5195            </div>
5196
5197            <div class="flex items-center gap-1.5 text-xs">
5198              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5198ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5199                <g class="fill-neutral-800 dark:fill-white">
5200                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5201                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5202                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5203                </g>
5204              </svg>
5205              <span class="flex grow gap-2">Stimulus</span>
5206            </div>
5207          </div>
5208        </div>
5209      </template>
5210    </div>
5211
5212    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
5213      <!-- Note: You will likely need to replace all the min-h-[192px] with a min-h-screen -->
5214
5215<div class="flex h-full w-full flex-col relative" data-controller="sidebar" data-sidebar-storage-key-value="previewSidebar">
5216  <!-- Mobile Sidebar Overlay -->
5217  <div class="absolute inset-0 z-50 md:hidden hidden" data-sidebar-target="mobileSidebar">
5218    <!-- Backdrop -->
5219    <div class="absolute inset-0 bg-black/50 transition-opacity duration-300" data-sidebar-target="mobileBackdrop" data-action="click->
5219sidebar#closeMobile"></div>
5220
5221    <!-- Sidebar Panel -->
5222    <div class="absolute inset-y-0 left-0 w-32 border-r border-neutral-200 dark:border-neutral-800 transition-transform duration-300 ease-out" data-sidebar-target="mobilePanel">
5223      <div data-sidebar-target="sharedContent"></div>
5224    </div>
5225  </div>
5226
5227  <div class="relative z-0 flex h-full w-full">
5228    <div class="relative flex h-full flex-row">
5229      <details class="w-11 open:w-32 group/sidebar relative z-20 h-full shrink-0 overflow-hidden max-md:hidden motion-safe:transition-all motion-safe:duration-300 dark:border-neutral-800" data-sidebar-target="desktopSidebar">
5230        <!-- Tiny Sidebar (shown when closed) -->
5231        <summary class="group-open/sidebar:hidden flex min-h-[192px] h-full cursor-e-resize list-none flex-col items-start pl-2 pr-1.5">
5232          <div class="flex h-13 w-full items-center justify-start">
5233            <button class="cursor-e-resize flex size-7 items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800" data-action="click->sidebar#open">
5234              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.75" x2="6.25" y2="15.25"></line><polyline points="10.25 6.5 12.75 9 10.25 11.5"></polyline><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
5235            </button>
5236          </div>
5237
5238          <div class="flex w-full flex-col items-start">
5239            <a href="javascript:void(0)" aria-label="Dashboard" data-controller="tooltip" data-tooltip-content="Dashboard" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
5240              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg>
5241            </a>
5242            <a href="javascript:void(0)" aria-label="Contacts" data-controller="tooltip" data-tooltip-content="Contacts" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
5243              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="9" cy="4.5" r="2.75"></circle><path d="M13.762,15.516c.86-.271,1.312-1.221,.947-2.045-.97-2.191-3.159-3.721-5.709-3.721s-4.739,1.53-5.709,3.721c-.365,.825,.087,1.7
524374,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg>
5244            </a>
5245            <a href="javascript:void(0)" aria-label="Companies" data-controller="tooltip" data-tooltip-content="Companies" data-tooltip-placement-value="right" data-tooltip-arrow="true" data-tooltip-animation-value="fade origin" data-tooltip-size-value="small" class="flex size-7 items-center justify-center rounded-lg text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
5246              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M7.75 16.25V7.75C7.75 7.198 8.198 6.75 8.75 6.75H14.25C14.802 6.75 15.25 7.198 15.25 7.75V16.25"></path> <path d="M2.75 16.25V4.412C2.75 4.01 2.99 3.64701 3.36 3.49101L7.86 1.58802C8.519 1.30902 9.25 1.79301 9.25 2.50901V3.75001"></path> <path d="M1.75 16.25H16.25"></path> <path d="M10.25 10.25V9.75"></path> <path d="M12.75 10.25V9.75"></path> <path d="M10.25 13.25V12.75"></path> <path d="M12.75 13.25V12.75"></path></g></svg>
5247            </a>
5248          </div>
5249
5250          <div class="grow"></div>
5251
5252          <div class="sticky bottom-0 z-30 bg-white py-1.5 empty:hidden dark:bg-neutral-950">
5253            <button class="w-full flex items-center gap-1.5 rounded-lg px-1 sm:px-1.5 py-1 sm:py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
5254              <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
5255                <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30">
5256                  <img alt="Profile image" class="size-4 shrink-0 object-cover" referrerpolicy="no-referrer" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100&h=100&fit=crop">
5257                </div>
5258              </div>
5259            </button>
5260          </div>
5261        </summary>
5262
5263        <!-- Full Sidebar (shown when open) -->
5264        <div class="h-full w-32 overflow-x-clip overflow-y-auto text-clip whitespace-nowrap" data-sidebar-target="desktopContent">
5265          <!-- Shared Sidebar Content Template -->
5266          <template data-sidebar-target="contentTemplate">
5267            <nav class="min-h-[192px] bg-white dark:bg-neutral-950 relative flex h-full w-full flex-1 flex-col overflow-y-auto select-none">
5268            <div class="sticky top-0 z-30">
5269              <div class="px-1.5 sm:px-2">
5270                <div class="flex h-13 items-center justify-between">
5271                  <a href="javascript:void(0)" aria-label="Home" class="flex size-7 items-center justify-center rounded-lg text-neutral-900 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800">
5272                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 9C1 4.58168 4.58179 1 9 1C13.4182 1 17 4.58168 17 9C17 13.4183 13.4182 17 9 17C4.58179 17 1 13.4183 1 9Z" fill-opacity="0.4"></path></g></svg>
5273                  </a>
5274                  <div class="flex">
5275                    <button class="flex size-7 cursor-w-resize items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 disabled:opacity-50 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800" aria-expanded="true" aria-label="Close sidebar" data-state="closed" data-action="click->sidebar#close">
5276                      <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="11.75" y1="2.75" x2="11.75" y2="15.25"></line><polyline points="7.75 6.5 5.25 9 7.75 11.5"></polyline><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2"></rect></g></svg>
5277                    </button>
5278                  </div>
5279                </div>
5280              </div>
5281            </div>
5282
5283            <aside class="relative px-1.5 last:mb-5 sm:px-2">
5284              <a href="javascript:void(0)" aria-label="Dashboard" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dar
5284k:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
5285                <div class="flex min-w-0 items-center gap-1.5">
5286                  <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
5287                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M14.855 5.95L9.605 1.96C9.247 1.688 8.752 1.688 8.395 1.96L3.145 5.95C2.896 6.139 2.75 6.434 2.75 6.747V14.251C2.75 15.356 3.645 16.251 4.75 16.251H7.25V12.251C7.25 11.699 7.698 11.251 8.25 11.251H9.75C10.302 11.251 10.75 11.699 10.75 12.251V16.251H13.25C14.355 16.251 15.25 15.356 15.25 14.251V6.746C15.25 6.433 15.104 6.14 14.855 5.95Z"></path></g></svg>
5288                  </div>
5289                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
5290                    <div class="truncate">Dashboard</div>
5291                  </div>
5292                </div>
5293                <div class="text-neutral-500 dark:text-neutral-400">
5294                  <div class="hidden sm:block">
5295                    <div class="hidden ml-auto group-hover:flex text-xs">
5296                      ⌘1
5297                    </div>
5298                  </div>
5299                </div>
5300              </a>
5301              <a href="javascript:void(0)" aria-label="Contacts" title="Contacts" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
5302                <div class="flex min-w-0 items-center gap-1.5">
5303                  <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
5304                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="9" cy="4.5" r="2.75"></circle><path d="M13.762,15.516c.86-.271,1.312-1.221,.947-2.045-.97-2.191-3.159-3.721-5.709-3.721s-4.739,1.53-5.709,3.721c-.365,.825,.087,1.7
530474,.947,2.045,1.225,.386,2.846,.734,4.762,.734s3.537-.348,4.762-.734Z"></path></g></svg>
5305                  </div>
5306                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
5307                    <div class="truncate">Contacts</div>
5308                  </div>
5309                </div>
5310                <div class="text-neutral-500 dark:text-neutral-400">
5311                  <div class="hidden sm:block">
5312                    <div class="hidden ml-auto group-hover:flex text-xs">
5313                      ⌘2
5314                    </div>
5315                  </div>
5316                </div>
5317              </a>
5318              <a href="javascript:void(0)" aria-label="Companies" class="group w-full flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
5319                <div class="flex min-w-0 items-center gap-1.5">
5320                  <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
5321                    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M7.75 16.25V7.75C7.75 7.198 8.198 6.75 8.75 6.75H14.25C14.802 6.75 15.25 7.198 15.25 7.75V16.25"></path> <path d="M2.75 16.25V4.412C2.75 4.01 2.99 3.64701 3.36 3.49101L7.86 1.58802C8.519 1.30902 9.25 1.79301 9.25 2.50901V3.75001"></path> <path d="M1.75 16.25H16.25"></path> <path d="M10.25 10.25V9.75"></path> <path d="M12.75 10.25V9.75"></path> <path d="M10.25 13.25V12.75"></path> <path d="M12.75 13.25V12.75"></path></g></svg>
5322                  </div>
5323                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
5324                    <div class="truncate">Companies</div>
5325                  </div>
5326                </div>
5327                <div class="text-neutral-500 dark:text-neutral-400">
5328                  <div class="hidden sm:block">
5329                    <div class="hidden ml-auto group-hover:flex text-xs">
5330                      ⌘3
5331                    </div>
5332                  </div>
5333                </div>
5334              </a>
5335            </aside>
5336
5337            <div class="grow"></div>
5338
5339            <div class="sticky bottom-0 z-30 bg-white p-1.5 empty:hidden sm:p-2 dark:bg-neutral-950">
5340              <button class="w-full flex items-center gap-1.5 rounded-lg px-1 sm:px-1.5 py-1 sm:py-1.5 text-left text-sm text-neutral-700 hover:bg-neutral-100 focus-visible:bg-neutral-100 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-700/50 dark:focus-visible:bg-neutral-700/50">
5341                <div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50">
5342                  <div class="flex size-4 shrink-0 overflow-hidden rounded-md bg-neutral-500/30">
5343                    <img alt="Profile image" class="size-4 shrink-0 object-cover" referrerpolicy="no-referrer" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100&h=100&fit=crop">
5344                  </div>
5345                </div>
5346                <div class="min-w-0">
5347                  <div class="flex min-w-0 grow items-center gap-2.5 group-data-no-contents-gap:gap-0 text-xs">
5348                    <div class="truncate text-xs">John Doe</div>
5349                  </div>
5350                </div>
5351              </button>
5352            </div>
5353          </nav>
5354          </template>
5355        </div>
5356      </details>
5357    </div>
5358
5359    <main class="min-h-[192px] pl-1.5 md:pl-0 py-1.5 pr-1.5 grow h-auto w-auto flex flex-col justify-center items-center relative">
5360      <div class="w-full h-full mb-[2px] flex justify-center items-center relative bg-neutral-50 dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-800">
5361        <div class="w-full absolute top-0 z-10 flex items-center md:hidden p-2">
5362          <button type="button" class="size-7 inline-flex items-center justify-center rounded-md focus:bg-neutral-100 focus:outline-hidden focu
5362s:ring-inset dark:focus:bg-neutral-700/50 active:opacity-50" data-action="click->sidebar#openMobile" aria-label="Open sidebar">
5363            <span class="sr-only">Open sidebar</span>
5364            <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="2.25" y1="9" x2="15.75" y2="9"></line><line x1="2.25" y1="3.75" x2="15.75" y2="3.75"></line><line x1="2.25" y1="14.25" x2="8.25" y2="14.25"></line></g></svg>
5365          </button>
5366        </div>
5367        <div class="px-6 py-4 text-xs">
5368          Your content
5369        </div>
5370      </div>
5371    </main>
5372  </div>
5373</div>
5374
5375    </div>
5376  </div>
5377  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/sidebar" data-turbo-frame="_top">
5378    <div class="h-48"></div>
5379    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5380      Sidebar
5381      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5382    </p>
5383    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
5384  </a>
5385</li>
5386
5387
5388              <li class="relative">
5389  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5390    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5391      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5391k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5392        <span class="text-xs">?</span>
5393      </button>
5394
5395      <template data-popover-target="content">
5396        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5397          <div class="space-y-2">
5398            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5399
5400            <div class="flex items-center gap-1.5 text-xs">
5401              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5402              <span class="flex grow gap-2">Tailwind CSS</span>
5403            </div>
5404
5405          </div>
5406        </div>
5407      </template>
5408    </div>
5409
5410    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5411      <div class="max-w-md w-full flex items-center justify-center">
5412        <div class="animate-pulse max-w-md w-full">
5413  <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-full mb-2"></div>
5414  <div class="h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2"></div>
5415</div>
5416
5417      </div>
5418    </div>
5419  </div>
5420  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/skeleton" data-turbo-frame="_top">
5421    <div class="h-48"></div>
5422    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5423      Skeleton
5424      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5425    </p>
5426    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 6 components</p>
5427  </a>
5428</li>
5429
5430
5431              <li class="relative">
5432    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
5433    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
5434      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
5435        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
54356,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
5436        Pro
5437      </a>
5438    </div>
5439  </div>
5440
5441  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5442    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5443      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5444        <span class="text-xs">?</span>
5445      </button>
5446
5447      <template data-popover-target="content">
5448        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5449          <div class="space-y-2">
5450            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5451
5452            <div class="flex items-center gap-1.5 text-xs">
5453              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5454              <span class="flex grow gap-2">Tailwind CSS</span>
5455            </div>
5456
5457            <div class="flex items-center gap-1.5 text-xs">
5458              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5458ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5459                <g class="fill-neutral-800 dark:fill-white">
5460                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5461                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5462                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5463                </g>
5464              </svg>
5465              <span class="flex grow gap-2">Stimulus</span>
5466            </div>
5467
5468          </div>
5469        </div>
5470      </template>
5471    </div>
5472
5473    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5474      <div id="right-slideover" class="group">
5475        <a class="hidden p-1 align-middle group-hover:inline-block" href="#right-slideover">
5476          <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-500" viewB
5476ox="0 0 24 24" fill="currentColor">
5477            <path fill-rule="evenodd" d="M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z" clip-rule="evenodd"></path>
5478          </svg>
5479        </a>
5480      </div>
5481      <!-- BEGIN lib/jumpstart/app/views/jumpstart/docs/_snippet.html.erb -->
5482      <div class="not-prose">
5483        <!-- BEGIN app/views/components/_slideover.html.erb -->
5484        <div data-controller="slideover">
5485          <button data-action="slideover#show:prevent" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
5486            Open Right Slideover
5487          </button>
5488
5489          <dialog data-slideover-target="dialog" data-action="mousedown->slideover#backdropClose" class="slideover slideover-right fixed inset-0 m-0 ml-auto h-dvh max-h-full border-l border-black/10 outline-hidden dark:border-white/10">
5490            <div class="inset-y-0 flex h-dvh w-80 flex-col bg-white shadow-lg outline-hidden sm:w-96 lg:w-[420px] dark:bg-neutral-800 dark:text-neutral-100 dark:shadow-neutral-950">
5491              <button type="button" data-action="slideover#hide:prevent" class="ring-offset-background absolute top-4 right-4 mt-1 rounded-full p-1.5 opacity-70 transition-opacity hover:bg-neutral-500/15 hover:opacity-100 focus:outline-hidden active:bg-neutral-500/25 disabled:pointer-events-none md:top-5">
5492                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
5493                  <line x1="18" x2="6" y1="6" y2="18"></line>
5494                  <line x1="6" x2="18" y1="6" y2="18"></line>
5495                </svg>
5496                <span class="sr-only">Close</span>
5497              </button>
5498
5499              <p class="mt-0 border-b font-semibold border-neutral-100 p-5 pr-8 text-lg text-neutral-900 md:p-6 md:text-xl dark:border-white/5 dark:text-neutral-100">Right Slideover</p>
5500              <div class="flex grow flex-col overflow-y-auto p-5 md:p-6">
5501                <div class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-neutral-200 p-5 dark:border-neutral-700/75">Content...</div>
5502              </div>
5503              <div class="flex flex-none items-center justify-start gap-2 border-t border-neutral-100 p-5 md:p-6 md:px-7 dark:border-white/5">
5504                <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">Submit</button>
5505                <button data-action="slideover#hide:prevent" type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">Cancel</button>
5506              </div>
5507            </div>
5508          </dialog>
5509        </div>
5510        <!-- END app/views/components/_slideover.html.erb -->
5511      </div>
5512    </div>
5513  </div>
5514  <a href="/docs/slideover" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5515    <div class="h-48"></div>
5516    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5517      Slideover
5518      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5519    </p>
5520    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p>
5521  </a>
5522</li>
5523
5524
5525              <li class="relative">
5526  <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
5527      <div class="inline relative">
5528    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
5529      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
5530        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.3
55306,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
5531        Pro
5532      </a>
5533    </div>
5534  </div>
5535
5536  </div>
5537
5538  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5539    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5540      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5541        <span class="text-xs">?</span>
5542      </button>
5543
5544      <template data-popover-target="content">
5545        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5546          <div class="space-y-2">
5547            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5548
5549            <div class="flex items-center gap-1.5 text-xs">
5550              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5551              <span class="flex grow gap-2">Tailwind CSS</span>
5552            </div>
5553
5554            <div class="flex items-center gap-1.5 text-xs">
5555              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5555ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5556                <g class="fill-neutral-800 dark:fill-white">
5557                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5558                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5559                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5560                </g>
5561              </svg>
5562              <span class="flex grow gap-2">Stimulus</span>
5563            </div>
5564          </div>
5565        </div>
5566      </template>
5567    </div>
5568
5569    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
5570      <div data-controller="stepper"
5571     data-stepper-current-step-value="0"
5572     data-stepper-validate-on-next-value="true"
5573     data-stepper-save-progress-value="false"
5574     data-stepper-cloak-value="true"
5575     data-stepper-animate-entrance-value="true"
5576     style="visibility: hidden; opacity: 0;"
5577     class="w-full max-w-xs mx-auto p-4 mt-10 relative">
5578
5579
5580  <!-- Step Indicators -->
5581  <div class="max-w-24 mx-auto absolute -top-4 inset-x-0">
5582    <ul class="relative flex flex-row gap-x-1">
5583        <li class="group relative shrink flex-1 last:flex-none">
5584          <div class="w-full inline-flex items-center align-middle text-xs">
5585            <div class="relative inline-flex flex-col items-center">
5586              <button type="button" data-stepper-target="indicator" data-action="click->
5586stepper#goToStep" data-step="0" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
5587                <span class="step-number">1</span>
5588                <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg>
5589              </button>
5590            </div>
5591            <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div>
5592          </div>
5593        </li>
5594        <li class="group relative shrink flex-1 last:flex-none">
5595          <div class="w-full inline-flex items-center align-middle text-xs">
5596            <div class="relative inline-flex flex-col items-center">
5597              <button type="button" data-stepper-target="indicator" data-action="click->stepper#goToStep" data-step="1" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
5598                <span class="step-number">2</span>
5599                <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg>
5600              </button>
5601            </div>
5602            <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div>
5603          </div>
5604        </li>
5605        <li class="group relative shrink flex-1 last:flex-none">
5606          <div class="w-full inline-flex items-center align-middle text-xs">
5607            <div class="relative inline-flex flex-col items-center">
5608              <button type="button" data-stepper-target="indicator" data-action="click->
5608stepper#goToStep" data-step="2" class="flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
5609                <span class="step-number">3</span>
5610                <svg xmlns="http://www.w3.org/2000/svg" class="step-check hidden size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="m1.75,6c1.047,1.048,1.803,2.153,2.461,3.579,1.524-3.076,3.659-5.397,6.039-7.158"></path></g></svg>
5611              </button>
5612            </div>
5613            <div data-stepper-target="line" class="flex-1 h-0.5 ml-1 group-last:hidden"></div>
5614          </div>
5615        </li>
5616    </ul>
5617  </div>
5618
5619  <!-- Step 1: Choose Your Plan -->
5620  <div data-stepper-target="step" class="block">
5621    <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Choose Your Plan</h3>
5622
5623    <fieldset class="flex gap-2 justify-center">
5624      <legend class="sr-only">Select a plan</legend>
5625
5626      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5627        <input type="radio" name="preview-plan" value="free" class="sr-only" required>
5628        <div class="flex-1">
5629          <div class="flex items-center justify-between">
5630            <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100">
5631              Free
5632            </p>
5633          </div>
5634        </div>
5635      </label>
5636
5637      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5638        <input type="radio" name="preview-plan" value="lite" class="sr-only" required>
5639        <div class="flex-1">
5640          <div class="flex items-center justify-between">
5641            <p class="flex text-xs font-semibold text-neutral-900 dark:text-neutral-100">
5642              Lite
5643            </p>
5644          </div>
5645        </div>
5646      </label>
5647
5648      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5649        <input type="radio" name="preview-plan" value="basic" class="sr-only" required>
5650        <div class="flex-1">
5651          <div class="flex items-center justify-between">
5652            <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">
5653              Basic
5654            </p>
5655          </div>
5656        </div>
5657      </label>
5658
5659      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5660        <input type="radio" name="preview-plan" value="pro" class="sr-only" required>
5661        <div class="flex-1">
5662          <div class="flex items-center justify-between">
5663            <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">
5664              Pro
5665            </p>
5666          </div>
5667        </div>
5668      </label>
5669    </fieldset>
5670  </div>
5671
5672  <!-- Step 2: What is your role? -->
5673  <div data-stepper-target="step" class="hidden">
5674    <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">What is your role?</h3>
5675
5676    <fieldset class="flex gap-2 justify-center">
5677      <legend class="sr-only">Select your role</legend>
5678
5679      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5680        <input type="radio" name="preview-role" value="ceo" class="sr-only" required>
5681        <div class="flex-1">
5682          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">CEO</p>
5683        </div>
5684      </label>
5685
5686      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5687        <input type="radio" name="preview-role" value="developer" class="sr-only" required>
5688        <div class="flex-1">
5689          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Developer</p>
5690        </div>
5691      </label>
5692
5693      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5694        <input type="radio" name="preview-role" value="designer" class="sr-only" required>
5695        <div class="flex-1">
5696          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Designer</p>
5697        </div>
5698      </label>
5699    </fieldset>
5700  </div>
5701
5702  <!-- Step 3: Where did you learn about us? -->
5703  <div data-stepper-target="step" class="hidden">
5704    <h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2 text-center">Where did you learn about us?</h3>
5705
5706    <fieldset class="flex gap-2 justify-center">
5707      <legend class="sr-only">Select how you found us</legend>
5708
5709      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5710        <input type="radio" name="preview-source" value="search" class="sr-only" required>
5711        <div class="flex-1">
5712          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Search</p>
5713        </div>
5714      </label>
5715
5716      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5717        <input type="radio" name="preview-source" value="social" class="sr-only" required>
5718        <div class="flex-1">
5719          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Social</p>
5720        </div>
5721      </label>
5722
5723      <label class="relative py-2 px-3 flex items-center font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
5724        <input type="radio" name="preview-source" value="referral" class="sr-only" required>
5725        <div class="flex-1">
5726          <p class="text-xs font-semibold text-neutral-900 dark:text-neutral-100">Referral</p>
5727        </div>
5728      </label>
5729    </fieldset>
5730  </div>
5731
5732  <!-- Navigation Buttons -->
5733  <div class="mt-4 flex items-center justify-between gap-2 mx-auto px-8">
5734    <button type="button" data-stepper-target="prevButton" data-action="click->
5734stepper#previous" class="hidden w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-200 bg-white/90 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
5735      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18">
5736        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
5737          <polyline points="11.25 14.25 5.75 9 11.25 3.75"></polyline>
5738        </g>
5739      </svg>
5740      Back
5741    </button>
5742
5743    <button type="button" data-stepper-target="nextButton" data-action="click->stepper#next" class="w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-400/30 bg-neutral-800 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-white shadow-sm select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
5744      Continue
5745      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18">
5746        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
5747          <polyline points="6.75 3.75 12.25 9 6.75 14.25"></polyline>
5748        </g>
5749      </svg>
5750    </button>
5751
5752    <button type="button" data-stepper-target="submitButton" data-action="click->
5752stepper#submit" class="hidden w-full flex items-center justify-center gap-1 rounded-lg border border-neutral-400/30 bg-neutral-800 px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-white shadow-sm select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
5753      Submit
5754      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 18 18">
5755        <g fill="currentColor">
5756          <path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z" fill="currentColor"></path>
5757        </g>
5758      </svg>
5759    </button>
5760  </div>
5761</div>
5762
5763    </div>
5764  </div>
5765  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/stepper" data-turbo-frame="_top">
5766    <div class="h-48"></div>
5767    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5768      Stepper
5769      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5770    </p>
5771    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
5772  </a>
5773</li>
5774
5775
5776                <li class="sm:hidden col-span-1">
5777                  <div class="relative mt-8 mb-6">
5778  <div class="mx-auto">
5779    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
5780      <div data-controller="newsletter"
5781           class="max-w-xs">
5782        <div data-newsletter-target="form">
5783          <form data-action="submit->newsletter#submit"
5784                class="space-y-3">
5785            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
5786            <input type="email"
5787                  data-newsletter-target="email"
5788                  placeholder="Enter your email..."
5789                  class="form-control"
5790                  
5791                  required>
5792            <div class="flex justify-center">
5793              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
5794            </div>
5795            <button type="submit"
5796                    data-newsletter-target="submitButton"
5797                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
5798              Subscribe to the newsletter
5799            </button>
5800          </form>
5801          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
5802            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
5803          </div>
5804        </div>
5805
5806        <div data-newsletter-target="successMessage"
5807             class="text-center py-4"
5808             style="display: none;">
5809          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
5810            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5811              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
5812            </svg>
5813          </div>
5814          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
5815          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
5816        </div>
5817      </div>
5818    </div>
5819  </div>
5820</div>
5821
5822                </li>
5823              <li class="relative">
5824  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5825    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5826      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5827        <span class="text-xs">?</span>
5828      </button>
5829
5830      <template data-popover-target="content">
5831        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5832          <div class="space-y-2">
5833            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5834
5835            <div class="flex items-center gap-1.5 text-xs">
5836              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5837              <span class="flex grow gap-2">Tailwind CSS</span>
5838            </div>
5839
5840          </div>
5841        </div>
5842      </template>
5843    </div>
5844
5845    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5846      <label class="group flex items-center cursor-pointer">
5847        <div class="relative">
5848          <input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch">
5849          <!-- Background element -->
5850          <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dar
5850k:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div>
5851          <!-- Round element with icons inside -->
5852          <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800">
5853            <!-- X icon for unchecked state -->
5854            <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0 dark:text-neutral-500" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g></svg>
5855            <!-- Checkmark icon for checked state -->
5856            <svg xmlns="http://www.w3.org/2000/svg" class="absolute size-4 text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100 dark:text-neutral-100" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline></g></svg>
5857          </div>
5858        </div>
5859      </label>
5860    </div>
5861  </div>
5862  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/switch" data-turbo-frame="_top">
5863    <div class="h-48"></div>
5864    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5865      Switch
5866      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5867    </p>
5868    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 3 components</p>
5869  </a>
5870</li>
5871
5872
5873              <li class="relative">
5874    <div class="z-10 absolute top-4 left-4 text-xs text-neutral-500 dark:text-neutral-400">
5875    <div class="rainbow-button hover:opacity-80 transition-opacity duration-100 ease-in-out" data-controller="rainbow-button" data-rainbow-button-speed-value="2.5" data-rainbow-button-intensity-value="0.7">
5876      <a href="/pro" data-turbo-frame="_top" class="group relative text-red-900 dark:text-red-100 flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white/90 px-1 py-0.5 text-xs font-medium whitespace-nowrap shadow-xs transition-background transition-shadow duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
5877        <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><polyline points="14.983 5.53 9 9 3.017 5.53"></polyline><line x1="9" y1="15.938" x2="9" y2="9"></line><path d="M7.997,2.332L3.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.621,.36,1.386,.36,2.007,0l4.25-2.465c.617-.358,.997-1.017,.997-1.73V6.527c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0Z"></path></g></svg>
5878        Pro
5879      </a>
5880    </div>
5881  </div>
5882
5883  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5884    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5885      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5885k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5886        <span class="text-xs">?</span>
5887      </button>
5888
5889      <template data-popover-target="content">
5890        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5891          <div class="space-y-2">
5892            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5893
5894            <div class="flex items-center gap-1.5 text-xs">
5895              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5896              <span class="flex grow gap-2">Tailwind CSS</span>
5897            </div>
5898
5899            <div class="flex items-center gap-1.5 text-xs">
5900              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
5900ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
5901                <g class="fill-neutral-800 dark:fill-white">
5902                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
5903                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
5904                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
5905                </g>
5906              </svg>
5907              <span class="flex grow gap-2">Stimulus</span>
5908            </div>
5909
5910          </div>
5911        </div>
5912      </template>
5913    </div>
5914
5915    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
5916      <div data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-xs dark:bg-white dark:text-neutral-900 dark:shadow-sm hover:ring-neutral-800 dark:hover:bg-neutral-50 dark:hover:ring-white hover:text-white dark:hover:text-neutral-900" data-tabs-inactive-tab-class="hover:bg-white/75 ring-1 ring-transparent hover:ring-white dark:hover:bg-neutral-700 dark:hover:ring-neutral-600 text-neutral-600 dar
5916k:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200" data-tabs-index-value="0">
5917        <div class="opacity-0 transition-opacity duration-200 relative inline-grid gap-2 items-center justify-center w-full grid-cols-3 p-1 bg-neutral-100 border border-neutral-200 rounded-xl select-none dark:bg-neutral-800 dark:border-neutral-700" data-tabs-target="tabList" role="tablist">
5918          <button
5919            class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"
5920            id="first"
5921            data-tabs-target="tab"
5922            data-action="click->tabs#change:prevent"
5923            role="tab">
5924            <span>Tab 1</span>
5925          </button>
5926          <button
5927            class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dar
5927k:focus-visible:outline-neutral-200"
5928            id="second"
5929            data-tabs-target="tab"
5930            data-action="click->tabs#change:prevent"
5931            role="tab">
5932            <span>Tab 2</span>
5933          </button>
5934          <button
5935            class="rounded-lg whitespace-nowrap text-xs font-medium transition flex gap-x-2 items-center justify-center py-2.5 px-3 w-full text-center text-current hover:text-current dark:text-current dark:hover:text-current focus-visible:outline-offset-2 focus-visible:outline-neutral-600 dark:focus-visible:outline-neutral-200"
5936            id="third"
5937            data-tabs-target="tab"
5938            data-action="click->tabs#change:prevent"
5939            role="tab">
5940            <span>Tab 3</span>
5941          </button>
5942        </div>
5943
5944        <div class="rounded-lg mt-2 py-4 px-4 text-xs text-center border border-neutral-200 dark:border-neutral-700 border-dashed" data-tabs-target="panel" role="tabpanel">
5945          Tab 1 content
5946        </div>
5947        <div class="rounded-lg mt-2 py-4 px-4 text-xs text-center border border-neutral-200 dark:border-neutral-700 border-dashed hidden" data-tabs-target="panel" role="tabpanel">
5948          Tab 2 content
5949        </div>
5950        <div class="rounded-lg mt-2 py-4 px-4 text-xs text-center border border-neutral-200 dark:border-neutral-700 border-dashed hidden" data-tabs-target="panel" role="tabpanel">
5951          Tab 3 content
5952        </div>
5953      </div>
5954    </div>
5955  </div>
5956  <a href="/docs/tabs" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5957    <div class="h-48"></div>
5958    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
5959      Tabs
5960      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
5961    </p>
5962    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p>
5963  </a>
5964</li>
5965
5966
5967
5968
5969              <li class="relative">
5970  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
5971    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
5972      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
5972k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
5973        <span class="text-xs">?</span>
5974      </button>
5975
5976      <template data-popover-target="content">
5977        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
5978          <div class="space-y-2">
5979            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
5980
5981            <div class="flex items-center gap-1.5 text-xs">
5982              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
5983              <span class="flex grow gap-2">Tailwind CSS</span>
5984            </div>
5985
5986          </div>
5987        </div>
5988      </template>
5989    </div>
5990
5991    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] h-48 rounded-t-xl overflow-hidden pointer-events-auto flex items-center justify-center">
5992      <div class="max-w-[18rem] w-full h-full flex items-center justify-center p-4">
5993  <div class="w-full max-w-md bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
5994    <table class="w-full text-[9px]">
5995      <thead class="bg-neutral-100 dark:bg-neutral-800">
5996        <tr class="*:py-1 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
5997          <th scope="col" class="pl-3 pr-2 font-semibold text-neutral-900 dark:text-neutral-50">
5998            Name
5999          </th>
6000          <th scope="col" class="px-2 font-semibold text-neutral-900 dark:text-neutral-50">
6001            Role
6002          </th>
6003          <th scope="col" class="pl-2 pr-3 font-semibold text-neutral-900 dark:text-neutral-50">
6004            Status
6005          </th>
6006        </tr>
6007      </thead>
6008      <tbody class="*:*:py-1">
6009        <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
6010          <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
6011            Alex Johnson
6012          </td>
6013          <td class="px-2 text-neutral-500 dark:text-neutral-400">
6014            Admin
6015          </td>
6016          <td class="pl-2 pr-3">
6017            <span class="inline-flex items-center rounded-full bg-green-50 px-1 py-0.5 text-[9px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
6018              Active
6019            </span>
6020          </td>
6021        </tr>
6022        <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
6023          <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
6024            Sarah Miller
6025          </td>
6026          <td class="px-2 text-neutral-500 dark:text-neutral-400">
6027            Editor
6028          </td>
6029          <td class="pl-2 pr-3">
6030            <span class="inline-flex items-center rounded-full bg-green-50 px-1 py-0.5 text-[9px] font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
6031              Active
6032            </span>
6033          </td>
6034        </tr>
6035        <tr>
6036          <td class="pl-3 pr-2 font-medium text-neutral-900 dark:text-neutral-100">
6037            Michael Chen
6038          </td>
6039          <td class="px-2 text-neutral-500 dark:text-neutral-400">
6040            Viewer
6041          </td>
6042          <td class="pl-2 pr-3">
6043            <span class="inline-flex items-center rounded-full bg-yellow-50 px-1 py-0.5 text-[9px] font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
6044              Pending
6045            </span>
6046          </td>
6047        </tr>
6048      </tbody>
6049    </table>
6050  </div>
6051</div>
6052
6053    </div>
6054  </div>
6055  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/table" data-turbo-frame="_top">
6056    <div class="h-48"></div>
6057    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
6058      Table
6059      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
6060    </p>
6061    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 5 components</p>
6062  </a>
6063</li>
6064
6065
6066              <li class="relative">
6067  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
6068    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
6069      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
6069k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6070        <span class="text-xs">?</span>
6071      </button>
6072
6073      <template data-popover-target="content">
6074        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
6075          <div class="space-y-2">
6076            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
6077
6078            <div class="flex items-center gap-1.5 text-xs">
6079              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
6080              <span class="flex grow gap-2">Tailwind CSS</span>
6081            </div>
6082
6083          </div>
6084        </div>
6085      </template>
6086    </div>
6087
6088    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
6089      <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-4 text-center">
6090        <!-- Star Rating -->
6091        <div class="flex justify-center mb-2">
6092          <div class="flex items-center space-x-1">
6093            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
6094              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
6095            </svg>
6096            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
6097              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
6098            </svg>
6099            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
6100              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
6101            </svg>
6102            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
6103              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
6104            </svg>
6105            <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
6106              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
6107            </svg>
6108          </div>
6109        </div>
6110
6111        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300 mb-2">
6112          "Outstanding quality!"
6113        </blockquote>
6114
6115        <footer>
6116          <div class="flex items-center justify-center">
6117            <img class="size-8 rounded-full object-cover shrink-0" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" alt="Michael Rodriguez">
6118            <div class="ml-3 text-left">
6119              <div class="text-sm font-semibold text-neutral-900 dark:text-white truncate">Michael Rodriguez</div>
6120              <div class="text-xs text-neutral-500 dark:text-neutral-400 truncate">Verified Customer</div>
6121            </div>
6122          </div>
6123        </footer>
6124      </div>
6125    </div>
6126  </div>
6127  <a href="/docs/testimonial" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6128    <div class="h-48"></div>
6129    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
6130      Testimonial
6131      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
6132    </p>
6133    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 8 components</p>
6134  </a>
6135</li>
6136
6137
6138              <li class="relative">
6139  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
6140    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
6141      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
6141k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6142        <span class="text-xs">?</span>
6143      </button>
6144
6145      <template data-popover-target="content">
6146        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
6147          <div class="space-y-2">
6148            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
6149
6150            <div class="flex items-center gap-1.5 text-xs">
6151              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
6152              <span class="flex grow gap-2">Tailwind CSS</span>
6153            </div>
6154
6155            <div class="flex items-center gap-1.5 text-xs">
6156              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6156ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
6157                <g class="fill-neutral-800 dark:fill-white">
6158                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
6159                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
6160                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
6161                </g>
6162              </svg>
6163              <span class="flex grow gap-2">Stimulus</span>
6164            </div>
6165          </div>
6166        </div>
6167      </template>
6168    </div>
6169
6170    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
6171      <div class="flex flex-wrap gap-2 justify-center">
6172        <button
6173          onclick="toast('Toast Notification', { type: 'success' })"
6174          class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
6174k:focus-visible:outline-neutral-200"
6175        >
6176          <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="12" height="12" viewBox="0 0 12 12"><g fill="currentColor"><path d="m10.75,7.5c-.414,0-.75-.336-.75-.75v-2.75c0-2.206-1.794-4-4-4S2,1.794,2,4v2.75c0,.414-.336.75-.75.75s-.75.336-.75.75.336.75.75.75h9.5c.414,0,.75-.336.75-.75s-.336-.75-.75-.75Z" stroke-width="0"></path><path d="m6,12c1.105,0,2-.895,2-2h-4c0,1.105.895,2,2,2Z" stroke-width="0"></path></g></svg>
6177          Show Toast
6178        </button>
6179      </div>
6180    </div>
6181  </div>
6182  <a class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200" href="/docs/toast" data-turbo-frame="_top">
6183    <div class="h-48"></div>
6184    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
6185      Toast
6186      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
6187    </p>
6188    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p>
6189  </a>
6190</li>
6191
6192
6193              <li class="relative">
6194  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
6195    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
6196      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
6196k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6197        <span class="text-xs">?</span>
6198      </button>
6199
6200      <template data-popover-target="content">
6201        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
6202          <div class="space-y-2">
6203            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
6204
6205            <div class="flex items-center gap-1.5 text-xs">
6206              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
6207              <span class="flex grow gap-2">Tailwind CSS</span>
6208            </div>
6209
6210            <div class="flex items-center gap-1.5 text-xs">
6211              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6211ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
6212                <g class="fill-neutral-800 dark:fill-white">
6213                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
6214                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
6215                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
6216                </g>
6217              </svg>
6218              <span class="flex grow gap-2">Stimulus</span>
6219            </div>
6220
6221            <div class="flex items-center gap-1.5 text-xs">
6222              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
6223              <span class="flex grow gap-2">Floating UI</span>
6224            </div>
6225          </div>
6226        </div>
6227      </template>
6228    </div>
6229
6230    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
6231      <button class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dar
6231k:focus-visible:outline-neutral-200"
6232              data-controller="tooltip"
6233              data-tooltip-content="This is a tooltip!"
6234              data-tooltip-placement-value="top"
6235              data-tooltip-animation-value="fade origin"
6236              data-tooltip-arrow-value="true">
6237        Button with tooltip
6238      </button>
6239    </div>
6240  </div>
6241  <a href="/docs/tooltip" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6242    <div class="h-48"></div>
6243    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
6244      Tooltip
6245      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
6246    </p>
6247    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 7 components</p>
6248  </a>
6249</li>
6250
6251
6252              <li class="relative">
6253  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
6254    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
6255      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
6255k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6256        <span class="text-xs">?</span>
6257      </button>
6258
6259      <template data-popover-target="content">
6260        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
6261          <div class="space-y-2">
6262            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
6263
6264            <div class="flex items-center gap-1.5 text-xs">
6265              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
6266              <span class="flex grow gap-2">Tailwind CSS</span>
6267            </div>
6268
6269            <div class="flex items-center gap-1.5 text-xs">
6270              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6270ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
6271                <g class="fill-neutral-800 dark:fill-white">
6272                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
6273                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
6274                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
6275                </g>
6276              </svg>
6277              <span class="flex grow gap-2">Stimulus</span>
6278            </div>
6279
6280            <div class="flex items-center gap-1.5 text-xs">
6281              <img alt="Floating UI" class="size-3.5" src="/assets/floating-ui-logo-bae347c136bfb528676d22bc47bd65d76062683c0849f2da6388092d835d3078.webp" />
6282              <span class="flex grow gap-2">Floating UI</span>
6283            </div>
6284          </div>
6285        </div>
6286      </template>
6287    </div>
6288
6289    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
6290      <div data-controller="tree-view" data-tree-view-animate-value="true" class="w-full h-[200px] min-w-[100px] flex justify-center items-center max-w-md p-2">
6291        <!-- Root folder "app" -->
6292        <div class="flex flex-col gap-y-1 w-full">
6293          <button type="button"
6294                  data-action="click->
6294tree-view#toggle"
6295                  aria-controls="tree-preview-content-app"
6296                  aria-expanded="true"
6297                  data-state="open"
6298                  class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline">
6299            <svg data-tree-view-target="icon" class="shrink-0 size-3 folder-open" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5,14.75h-.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626c1.105,0,2,.895,2,2v1"></path><path d="M16.148,13.27l.843-3.13c.257-.953-.461-1.89-1.448-1.89H6.15c-.678,0-1.272,.455-1.448,1.11l-.942,3.5c-.257,.953,.461,1.89,1.448,1.89H14.217c.904,0,1.696-.607,1.931-1.48Z"></path></g></svg>
6300            <span class="font-medium">app</span>
6301          </button>
6302          <!-- Grid wrapper for smooth animation -->
6303          <div id="tree-preview-content-app"
6304               data-state="open"
6305               role="region"
6306               class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]"
6307               data-tree-view-target="content">
6308            <div class="ml-4 pl-2 border-l border-neutral-200 dark:border-neutral-700 flex flex-col gap-y-1 overflow-hidden min-h-0">
6309              <!-- Folder "components" -->
6310              <div class="flex flex-col gap-y-1">
6311                <button type="button"
6312                        data-action="click->tree-view#toggle"
6313                        aria-controls="tree-preview-content-components"
6314                        aria-expanded="true"
6315                        data-state="open"
6316                        class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline">
6317                  <svg data-tree-view-target="icon" class="shrink-0 size-3 folder-open" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5,14.75h-.75c-1.105,0-2-.895-2-2V4.75c0-1.105,.895-2,2-2h1.825c.587,0,1.144,.258,1.524,.705l1.524,1.795h4.626c1.105,0,2,.895,2,2v1"></path><path d="M16.148,13.27l.843-3.13c.257-.953-.461-1.89-1.448-1.89H6.15c-.678,0-1.272,.455-1.448,1.11l-.942,3.5c-.257,.953,.461,1.89,1.448,1.89H14.217c.904,0,1.696-.607,1.931-1.48Z"></path></g></svg>
6318                  <span class="font-medium">components</span>
6319                </button>
6320                <!-- Grid wrapper for smooth animation -->
6321                <div id="tree-preview-content-components"
6322                     data-state="open"
6323                     role="region"
6324                     class="grid transition-[grid-template-rows] duration-300 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=closed]:grid-rows-[0fr]"
6325                     data-tree-view-target="content">
6326                  <div class="ml-4 pl-2 border-l border-neutral-200 dark:border-neutral-700 flex flex-col gap-y-1 overflow-hidden min-h-0">
6327                    <!-- Files in "components" -->
6328                    <button type="button" data-tree-view-item class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs text-neutral-600 dar
6328k:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline">
6329                      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path></g></svg>
6330                      <span>_header.html.erb</span>
6331                    </button>
6332                    <button type="button" data-tree-view-item class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors duration-150 outline-hidden focus:underline">
6333                      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.16,6.25h-3.41c-.552,0-1-.448-1-1V1.852"></path><path d="M2.75,14.25V3.75c0-1.105,.895-2,2-2h5.586c.265,0,.52,.105,.707,.293l3.914,3.914c.188,.188,.293,.442,.293,.707v7.586c0,1.105-.895,2-2,2H4.75c-1.105,0-2-.895-2-2Z"></path></g></svg>
6334                      <span>_footer.html.erb</span>
6335                    </button>
6336                  </div>
6337                </div>
6338              </div>
6339            </div>
6340          </div>
6341        </div>
6342      </div>
6343    </div>
6344  </div>
6345  <a href="/docs/tree-view" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6346    <div class="h-48"></div>
6347    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
6348      Tree View
6349      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
6350    </p>
6351    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 2 components</p>
6352  </a>
6353</li>
6354
6355
6356              <li class="relative">
6357  <div class="absolute inset-0 top-0 left-0 pointer-events-none">
6358    <div class="inline-block absolute z-10 top-4 right-4 pointer-events-auto" data-controller="popover">
6359      <button type="button" class="cursor-help flex items-center size-[1rem] justify-center rounded-full border border-neutral-200 bg-neutral-50 p-2 text-sm font-semibold leading-5 text-neutral-800 hover:text-neutral-900 dark:border-neutral-600 dar
6359k:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6360        <span class="text-xs">?</span>
6361      </button>
6362
6363      <template data-popover-target="content">
6364        <div class="relative max-w-[280px] px-3 py-2 text-sm text-neutral-700 dark:text-neutral-200">
6365          <div class="space-y-2">
6366            <div class="text-xs font-semibold w-full text-center">Dependencies</div>
6367
6368            <div class="flex items-center gap-1.5 text-xs">
6369              <svg viewBox="0 0 35 21" class="size-3.5" fill="none"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path></svg>
6370              <span class="flex grow gap-2">Tailwind CSS</span>
6371            </div>
6372
6373            <div class="flex items-center gap-1.5 text-xs">
6374              <svg class="size-3.5 rounded-sm" width="60" height="60" viewB
6374ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
6375                <g class="fill-neutral-800 dark:fill-white">
6376                  <path d="M1.76 1.85885e-08H58.2399C58.7016 -6.70275e-05 59.1447 0.181237 59.474 0.50484C59.8032 0.828443 59.9921 1.26844 59.9999 1.73V7.37823C59.9999 7.87239 59.9999 8.11947 59.9038 8.30822C59.8192 8.47424 59.6842 8.60923 59.5182 8.69382C59.3294 8.78999 59.0823 8.78999 58.5882 8.78999H45.92C44.7722 8.83556 43.6502 9.14343 42.64 9.68999L15.64 25.55C14.6261 26.0964 13.5008 26.4042 12.35 26.45H1.41176C0.9176 26.45 0.670518 26.45 0.481773 26.3538C0.315747 26.2692 0.180765 26.1342 0.0961706 25.9682C0 25.7795 0 25.5324 0 25.0382V17.2717C0 16.7776 0 16.5305 0.0961706 16.3418C0.180765 16.1757 0.315747 16.0408 0.481773 15.9562C0.670518 15.86 0.9176 15.86 1.41176 15.86H12.35C13.5001 15.9106 14.6243 16.2181 15.64 16.76L18.64 18.51C19.1037 18.7494 19.6181 18.8743 20.14 18.8743C20.6619 18.8743 21.1762 18.7494 21.64 18.51L25.48 16.25C25.6438 16.1661 25.7812 16.0386 25.8772 15.8815C25.9732 15.7245 26.024 15.544 26.024 15.36C26.024 15.1759 25.9732 14.9955 25.8772 14.8384C25.7812 14.6814 25.6438 14.5539 25.48 14.47L17.4 9.71999C16.3879 9.17798 15.2669 8.8704 14.12 8.81999H1.41176C0.9176 8.81999 0.670518 8.81999 0.481773 8.72382C0.315747 8.63923 0.180765 8.50424 0.0961706 8.33822C0 8.14947 0 7.90239 0 7.40823V1.76C0 1.29322 0.185428 0.845555 0.515492 0.515492C0.845555 0.185428 1.29322 1.85885e-08 1.76 1.85885e-08Z"></path>
6377                  <path d="M47.65 15.8799C46.4998 15.9305 45.3757 16.238 44.36 16.7799L17.36 32.6499C16.3479 33.1919 15.2269 33.4994 14.08 33.5499H1.41176C0.9176 33.5499 0.670518 33.5499 0.481773 33.646C0.315747 33.7306 0.180765 33.8656 0.0961706 34.0316C0 34.2204 0 34.4674 0 34.9616V42.7281C0 43.2222 0 43.4693 0.0961706 43.6581C0.180765 43.8241 0.315747 43.9591 0.481773 44.0437C0.670518 44.1398 0.9176 44.1398 1.41176 44.1398H12.35C13.5001 44.0892 14.6243 43.7817 15.64 43.2398L42.64 27.3699C43.652 26.8278 44.773 26.5203 45.92 26.4699H58.5882C59.0823 26.4699 59.3294 26.4699 59.5182 26.3737C59.6842 26.2891 59.8192 26.1541 59.9038 25.9881C59.9999 25.7993 59.9999 25.5523 59.9999 25.0581V17.2916C59.9999 16.7975 59.9999 16.5504 59.9038 16.3616C59.8192 16.1956 59.6842 16.0606 59.5182 15.976C59.3294 15.8799 59.0823 15.8799 58.5882 15.8799H47.65Z"></path>
6378                  <path d="M47.65 33.56C46.4998 33.6106 45.3757 33.9182 44.36 34.46L17.36 50.32C16.3497 50.8666 15.2277 51.1744 14.08 51.22H1.41176C0.9176 51.22 0.670518 51.22 0.481773 51.3162C0.315747 51.4008 0.180765 51.5358 0.0961706 51.7018C0 51.8905 0 52.1376 0 52.6318V58.28C0.0129646 58.739 0.203789 59.175 0.532182 59.4959C0.860576 59.8168 1.30083 59.9976 1.76 60H58.2399C58.7042 59.9974 59.1488 59.8125 59.4781 59.4852C59.8073 59.1578 59.9947 58.7142 59.9999 58.25V52.6018C59.9999 52.1076 59.9999 51.8605 59.9038 51.6718C59.8192 51.5058 59.6842 51.3708 59.5182 51.2862C59.3294 51.19 59.0823 51.19 58.5882 51.19H45.88C44.7322 51.1444 43.6102 50.8366 42.6 50.29L34.52 45.55C34.3536 45.4671 34.2136 45.3394 34.1157 45.1813C34.0179 45.0232 33.966 44.8409 33.966 44.655C33.966 44.4691 34.0179 44.2868 34.1157 44.1287C34.2136 43.9706 34.3536 43.843 34.52 43.76L38.36 41.51C38.8237 41.2706 39.3381 41.1457 39.86 41.1457C40.3819 41.1457 40.8962 41.2706 41.36 41.51L44.36 43.25C45.3739 43.7964 46.4991 44.1042 47.65 44.15H58.5882C59.0823 44.15 59.3294 44.15 59.5182 44.0538C59.6842 43.9693 59.8192 43.8343 59.9038 43.6682C59.9999 43.4795 59.9999 43.2324 59.9999 42.7383V34.9718C59.9999 34.4776 59.9999 34.2305 59.9038 34.0418C59.8192 33.8758 59.6842 33.7408 59.5182 33.6562C59.3294 33.56 59.0823 33.56 58.5882 33.56H47.65Z"></path>
6379                </g>
6380              </svg>
6381              <span class="flex grow gap-2">Stimulus</span>
6382            </div>
6383
6384          </div>
6385        </div>
6386      </template>
6387    </div>
6388
6389    <div class="relative bg-white border border-black/10 dark:border-white/20 dark:bg-[#080808] p-8 md:p-10 h-48 rounded-t-xl pointer-events-auto flex items-center justify-center">
6390      <div data-controller="two-factor" data-two-factor-autofocus-value="false">
6391        <div class="p-5 sm:p-8 md:p-12">
6392          <svg xmlns="http://www.w3.org/2000/svg" class="size-6 mx-auto mb-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="9" y1="11" x2="9" y2="12"></line><path d="M6.25,7.628v-3.128c0-1.519,1.231-2.75,2.75-2.75h0c1.519,0,2.75,1.231,2.75,2.75v3.129"></path><circle cx="9" cy="11.5" r="4.75"></circle></g></svg>
6393          <form
6394            data-two-factor-target="form"
6395            data-action="submit->two-factor#handleSubmit"
6396            class="space-y-6">
6397            <div class="inline-flex items-center gap-1.5">
6398              <input
6399                data-two-factor-target="digit"
6400                data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste"
6401                type="text"
6402                inputmode="numeric"
6403                id="num1"
6404                name="num1"
6405                maxlength="1"
6406                autocomplete="one-time-code"
6407                class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400">
6408              <input
6409                data-two-factor-target="digit"
6410                data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste"
6411                type="text"
6412                inputmode="numeric"
6413                id="num2"
6414                name="num2"
6415                maxlength="1"
6416                autocomplete="off"
6417                class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400">
6418              <input
6419                data-two-factor-target="digit"
6420                data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste"
6421                type="text"
6422                inputmode="numeric"
6423                id="num3"
6424                name="num3"
6425                maxlength="1"
6426                autocomplete="off"
6427                class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400">
6428              <span class="text-sm text-neutral-400 dark:text-neutral-600">-</span>
6429              <input
6430                data-two-factor-target="digit"
6431                data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste"
6432                type="text"
6433                inputmode="numeric"
6434                id="num4"
6435                name="num4"
6436                maxlength="1"
6437                autocomplete="off"
6438                class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400">
6439              <input
6440                data-two-factor-target="digit"
6441                data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste"
6442                type="text"
6443                inputmode="numeric"
6444                id="num5"
6445                name="num5"
6446                maxlength="1"
6447                autocomplete="off"
6448                class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400">
6449              <input
6450                data-two-factor-target="digit"
6451                data-action="input->two-factor#handleInput keydown->two-factor#handleKeydown paste->two-factor#handlePaste"
6452                type="text"
6453                inputmode="numeric"
6454                id="num6"
6455                name="num6"
6456                maxlength="1"
6457                autocomplete="off"
6458                class="block w-5 sm:w-6 rounded-lg border border-neutral-200 dark:border-neutral-600 px-1 py-0.5 text-center text-base placeholder-neutral-500 focus:outline-neutral-800 focus:border-neutral-800 dark:focus:outline-neutral-50 dark:focus:border-neutral-50 dark:bg-neutral-800 dark:placeholder-neutral-400">
6459            </div>
6460            <div class="flex justify-center">
6461              <button
6462                data-two-factor-target="submitButton"
6463                type="submit"
6464                class="inline-flex min-w-32 justify-center flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
6465                <span>
6465Verify code</span>
6466              </button>
6467            </div>
6468          </form>
6469        </div>
6470      </div>
6471
6472
6473    </div>
6474  </div>
6475  <a href="/docs/two-factor" data-turbo-frame="_top" class="group block p-6 bg-white border border-black/10 rounded-xl shadow-sm hover:bg-neutral-50 dark:bg-neutral-800 dark:border-white/10 dark:hover:bg-neutral-700 transition-all duration-200 focus:outline-offset-2 focus:outline-neutral-500 dark:focus:outline-neutral-200">
6476    <div class="h-48"></div>
6477    <p class="text-lg font-semibold tracking-tight text-center flex items-center justify-center gap-1.5">
6478      Two Factor
6479      <svg xmlns="http://www.w3.org/2000/svg" class="w-0 group-hover:w-4 transition-all duration-200" width="12" height="12" viewBox="0 0 12 12"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="1" y1="6" x2="10.75" y2="6"></line><polyline points="7.75 9.25 11 6 7.75 2.75"></polyline></g></svg>
6480    </p>
6481    <p class="font-normal text-neutral-500 text-sm dark:text-neutral-400 text-center">View 1 component</p>
6482  </a>
6483</li>
6484
6485
6486          </ul>
6487      </div>
6488</turbo-frame>  </div>
6489
6490
6491  <div class="relative mt-24">
6492  <div class="mx-auto">
6493    <div class="text-center max-w-sm mx-auto border bg-white border-black/10 dark:border-white/10 px-8 pt-8 pb-10 rounded-xl dark:bg-neutral-800">
6494      <div data-controller="newsletter"
6495           class="max-w-xs">
6496        <div data-newsletter-target="form">
6497          <form data-action="submit->newsletter#submit"
6498                class="space-y-3">
6499            <h2 class="text-lg sm:text-xl font-bold">Get notified when<br>new components come out</h2>
6500            <input type="email"
6501                  data-newsletter-target="email"
6502                  placeholder="Enter your email..."
6503                  class="form-control"
6504                  
6505                  required>
6506            <div class="flex justify-center">
6507              <div data-controller="turnstile" data-sitekey="0x4AAAAAAB8VraQb1T-uEO28" data-theme="auto" data-size="invisible" data-execution="execute" data-appearance="interaction-only"></div>
6508            </div>
6509            <button type="submit"
6510                    data-newsletter-target="submitButton"
6511                    class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
6512              Subscribe to the newsletter
6513            </button>
6514          </form>
6515          <div class="absolute -mt-6 top-0 inset-x-0 bg-white dark:bg-neutral-800 flex justify-center mx-auto p-2 size-12 items-center border-black/10 dark:border-white/10 border-2 rounded-full animate-[wiggle_1s_ease-in-out_infinite]">
6516            <img class="size-6" alt="Bell icon" src="/assets/bell-3c48d7f64c80b5bf8b4f5c3c1848855d5ee9850fa1b98a543ca20a0ab1249a3d.webp" />
6517          </div>
6518        </div>
6519
6520        <div data-newsletter-target="successMessage"
6521             class="text-center py-4"
6522             style="display: none;">
6523          <div class="inline-flex items-center justify-center w-12 h-12 mx-auto mb-2.5 rounded-full bg-green-100 dark:bg-green-900/50">
6524            <svg class="size-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6525              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
6526            </svg>
6527          </div>
6528          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white mb-1">Thanks for subscribing!</h3>
6529          <p class="text-sm text-neutral-600 dark:text-neutral-300">We'll notify you when new components are released.</p>
6530        </div>
6531      </div>
6532    </div>
6533  </div>
6534</div>
6535
6536
6537  <div class="mt-4 flex flex-col gap-4 items-center">
6538    <a href="https://railsblocks.featurebase.app/roadmap" target="_blank" class="w-fit flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
6539      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="6.25" y1="2.792" x2="6.25" y2="13.292"></line><line x1="11.75" y1="4.708" x2="11.75" y2="15.208"></line><path d="M2.533,3.576l3.432-.763c.186-.041,.38-.029,.559,.036l4.952,1.801c.179,.065,.373,.078,.559,.036l2.998-.666c.625-.139,1.217,.336,1.217,.976V13.448c0,.469-.326,.875-.783,.976l-3.432,.763c-.186,.041-.38,.029-.559-.036l-4.952-1.801c-.179-.065-.373-.078-.559-.036l-2.998,.666c-.625,.139-1.217-.336-1.217-.976V4.552c0-.469,.326-.875,.783-.976Z"></path></g></svg>
6540      Component roadmap
6541    </a>
6542    <a href="/changelog" class="w-fit flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
6543      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.75 1.75V7.25"></path> <path d="M3.75 16.25V10.75"></path> <path d="M14.25 2.75H8.75C8.198 2.75 7.75 3.2 7.75 3.75V6.25C7.75 6.8 8.198 7.25 8.75 7.25H14.25C14.802 7.25 15.25 6.8 15.25 6.25V3.75C15.25 3.2 14.802 2.75 14.25 2.75Z"></path> <path d="M3.75 10.75C4.716 10.75 5.5 9.97 5.5 9C5.5 8.03 4.716 7.25 3.75 7.25C2.784 7.25 2 8.03 2 9C2 9.97 2.784 10.75 3.75 10.75Z"></path> <path d="M14.25 10.75H8.75C8.198 10.75 7.75 11.2 7.75 11.75V14.25C7.75 14.8 8.198 15.25 8.75 15.25H14.25C14.802 15.25 15.25 14.8 15.25 14.25V11.75C15.25 11.2 14.802 10.75 14.25 10.75Z"></path></g></svg>
6544      Changelog
6545    </a>
6546  </div>
6547</div>
6548
6549    </main>
6550    
6551<div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div>
6552
6553<footer class="mt-24 bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700">
6554  <div class="max-w-5xl mx-auto w-full pb-8 pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8">
6555
6556    <!-- Grid -->
6557    <div class="flex flex-col justify-between md:flex-row gap-5 mb-14">
6558
6559      <div>
6560        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Popular Components</h4>
6561
6562        <ul class="grid space-y-2">
6563          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/combobox">Combobox</a></li>
6564          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/toast">Toast</a></li>
6565          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focu
6565s:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/sidebar">Sidebar</a></li>
6566          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/datatable">Datatable</a></li>
6567        </ul>
6568      </div>
6569      <!-- End Col -->
6570
6571      <div>
6572        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Company</h4>
6573
6574        <ul class="grid space-y-2">
6575          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/changelog">Changelog</a></li>
6576            <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/themes">Themes</a></li>
6577          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" target="_blank" href="https://railsblocks.featurebase.app/roadmap">Roadmap</a></li>
6578          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/docs/authors-note">About</a></li>
6579          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://github.com/Rails-Blocks/components" target="_blank">Open Source</a></li>
6580          <li><a class="hidden text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/blog">Blog</a></li>
6581        </ul>
6582      </div>
6583      <!-- End Col -->
6584
6585      <div>
6586        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Pricing</h4>
6587
6588        <ul class="grid space-y-2">
6589          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/pro">Pro Access</a></li>
6590          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/discount">Student Discount</a></li>
6591        </ul>
6592      </div>
6593      <!-- End Col -->
6594
6595      <div>
6596        <h4 class="mb-3 font-medium text-sm text-neutral-800 dark:text-neutral-200">Legal</h4>
6597
6598        <ul class="grid space-y-2">
6599          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/terms">Terms</a></li>
6600          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/privacy">Privacy</a></li>
6601          <li><a class="text-sm text-neutral-500 underline-offset-4 hover:underline hover:text-neutral-800 focus:outline-hidden focus:underline focus:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/lice
6601nse">License</a></li>
6602        </ul>
6603      </div>
6604      <!-- End Col -->
6605    </div>
6606
6607    <div class="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800">
6608      <div class="flex flex-col md:flex-row-reverse md:justify-between md:items-center gap-6 items-center text-center md:text-left">
6609
6610        <nav class="flex flex-col sm:flex-row items-center gap-3">
6611          <div class="flex items-center">
6612            <div class="text-sm group relative bg-neutral-50 text-neutral-700 border border-neutral-200 px-2.5 py-1.5 rounded-md dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-100">
6613              <div class="absolute w-full pr-8 pointer-events-none opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out transform -translate-y-6 group-hover:-translate-y-8">
6614                <img class="rounded-full mx-auto size-8" alt="Sandu" src="/assets/founder-avatar-da341a93ca736fdd7217be943b75af4bdf1bf0c14ee149b5f11324eb98a5c6dc.webp" />
6615              </div>
6616              Built by
6617              <a href="https://alexglv.com" target="_blank" class="text-neutral-700 hover:opacity-80 transition font-semibold dark:text-neutral-50 hover:text-neutral-800 dark:hover:text-neutral-50">
6618                Sandu
6619              </a>
6620              in Paris 🥐
6621            </div>
6622          </div>
6623
6624          <div class="flex items-center gap-3">
6625            <a href="https://x.com/alexandruglv" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my 𝕏 account" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on X (formerly Twitter)">
6626              <span class="sr-only">Follow Sandu on X (formerly Twitter)</span>
6627              <svg class="inline-block size-5 pb-0.5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
6628                <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z">
6629              </svg>
6630            </a>
6631            <a href="https://www.youtube.com/channel/UCNRPTZcDwaEkoPQsLURm6WQ" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Go to my YouTube channel" data-tooltip-delay-value="500" target="_blank" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="Follow Sandu on YouTube">
6632              <span class="sr-only">Follow Sandu on YouTube</span>
6633              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z"></path><circle cx="9" cy="9" r="7.25"></circle></g></svg>
6634            </a>
6635            <a class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Send me an email" data-tooltip-delay-value="500" href="mailto:[email protected]" aria-label="Send me an email">
6636              <span class="sr-only">Send me an email</span>
6637              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733"></path><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
6638            </a>
6639            <a href="/feeds/documentation.xml" target="_blank" data-controller="tooltip" data-tooltip-animation-value="fade origin" data-tooltip-content="Subscribe to RSS feed" data-tooltip-delay-value="500" class="text-neutral-400 hover:text-neutral-800 dark:hover:text-white" aria-label="RSS Feed">
6640              <span class="sr-only">RSS Feed</span>
6641              <svg xmlns="http://www.w3.org/2000/svg" class="size-6 pb-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M3.5 3.5a11 11 0 0 1 11 11M3.5 7.5a7 7 0 0 1 7 7M4.5 13.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path></g></svg>
6642            </a>
6643          </div>
6644        </nav>
6645
6646        <div class="text-sm text-neutral-600 dark:text-neutral-400">
6647          © 2026 Rails Blocks
6648        </div>
6649      </div>
6650    </div>
6651    <!-- End Grid -->
6652  </div>
6653</footer>
6654
6655  
6655<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"dd73a264958e4d48a84300a88963d377","r":1,"spa":2}' crossorigin="anonymous"></script>
6655
6656</body>
6657</html>

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