A design system in a box.
hip-ui.tngl.io/docs/introduction
1<!DOCTYPE html><html lang="en"><head><meta charSet="utf8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Introduction | Hip UI</title><link rel="modulepreload" href="/assets/main-C54yPR-t.js"/><link rel="modulepreload" href="/assets/jsx-runtime-D-oznMWL.js"/><link rel="modulepreload" href="/assets/_virtual_content-FazmLmqR.js"/><link rel="modulepreload" href="/assets/preload-helper-DgFuoWHe.js"/><link rel="modulepreload" href="/assets/button-B3FtKFjE.js"/><link rel="modulepreload" href="/assets/typography.stylex-ZkAqsnF0.js"/><link rel="modulepreload" href="/assets/link-CghA3pO1.js"/><link rel="modulepreload" href="/assets/react-DNjXG-IQ.js"/><link rel="modulepreload" href="/assets/docs-CrgJx8Z6.js"/><link rel="modulepreload" href="/assets/dialog-DGX3aEDV.js"/><link rel="modulepreload" href="/assets/flex-oubf-_sd.js"/><link rel="modulepreload" href="/assets/icon-button-BFGSYviR.js"/><link rel="modulepreload" href="/assets/typography-DYed328x.js"/><link rel="modulepreload" href="/assets/listbox-Clp-j1PB.js"/><link rel="modulepreload" href="/assets/select-DPWMB9nm.js"/><link rel="modulepreload" href="/assets/sidebar-layout-DGc-vn3w.js"/><link rel="modulepreload" href="/assets/sidebar-BxDooHSf.js"/><link rel="modulepreload" href="/assets/table-of-contents-4OHKHUOU.js"/><link rel="modulepreload" href="/assets/text-B77JGejP.js"/><link rel="modulepreload" href="/assets/UnShiki-EBFEVXkE.js"/><link rel="modulepreload" href="/assets/useLocation-ITrbnl1F.js"/><link rel="modulepreload" href="/assets/docs._-BlcaOkeD.js"/><link rel="modulepreload" href="/assets/copy-q8QAXVoJ.js"/><link rel="icon" type="image/svg+xml" href="/favicon.svg"/><link rel="preconnect" href="https://rsms.me/"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><link rel="stylesheet" href="/assets/main-x1XGuNl0.css#" type="text/css"/></head><body class="x1hkkgoz x1errvku x35y5w8 x1ghz6dp x28mwtm x22mkj7 x1ydry50 x1qu3rb3 xzqqsqy xzhpmvt xeg1evf xsrqwli x133xgf5 x1ivp3gu x1jymrsr x1ecjzft xlgo0sd x1gkleh6 x1qenwvp x1wwpy88 xe12gv0 x14xnieg x1atn885 x1sc3ac7 xbitb2r x1i63ep6 xu9m9yn x127dqk7 x19ev3s5 xvafp6z x1i3ay83 xz6xf6v xrjt5cq x1qv8i2l x117llg9 x1g2bo58 x12r7922 xvdpi6d xc0kyli x10djsmo xerpi9c xqgnz3e x10pni5u x1ltryfy xxjigmc x1v0c26y x91cy9h xzrae5y xj1xwct x19as7ww xk7esdy xp08f8v x1koy5ky x1w8ywdz x1x07oa2 x9i8p6r x8co2na x142qatw x18rtztd x1exbl2s x1mcird3 xzmulj x15iwxt0 x13kv74e xone9k4 xjllr0u xv4bh4h x19zk2cf xmixorq xzh9fzc x1hcp7en x1vvs4cd x1ssib8w xh4r0tq x1xa0tjc x1an1nx4" style="--x---x1aturvj:var(--x1n528pn);--x---x1i13xn6:var(--x1mpyqq4);--x---xrqvod2:var(--xtxfo4u);--x---xpnxlzk:var(--xtt3xrg);--x---xhtfb9k:var(--x163pqsf);--x---x1gfz7lw:var(--xc7pozc);--x---xdhoy4z:var(--x6mbboe);--x---x1fv6rtg:var(--x1g4d7h1);--x---xs64gu4:var(--xnml5dw);--x---x1crx5cu:var(--x18ysvn2);--x---xpii5us:var(--xc8qq5i);--x---x1xyma3f:var(--x19ugcnu);--x---x1yrls9:var(--x1666hkf);--x---x123awk4:var(--x10de7xc);--x---x1ojhc7k:var(--x1a7uq4w);--x---xx7wvuk:var(--x1xtgv0u);--x---x11hgl6v:var(--xxun9c);--x---x11as8pt:var(--x1ou56ct);--x---xxsd9i2:var(--x11ehql8);--x---x1be1b4q:var(--x1829piz);--x---x1qgqpcr:var(--xpvfd0f);--x---xkcrude:var(--xr05uen);--x---x45q57k:var(--xcyj1p7);--x---xelq0bc:var(--x1xrfgux);--x---xohqlzf:var(--x1gz57vd);--x---x1h1eurh:var(--x11dcdlm);--x---x50hgqv:var(--x18wxa31);--x---x16vpvfb:var(--xuxjkz7);--x---x16f4t7r:var(--x7kb0je);--x---xcc23vl:var(--x175hrv5);--x---x1hmtawr:var(--x1je3mby);--x---x8zrzci:var(--x1trjljt);--x---x1r678bi:var(--x1nujcs6);--x---x1o3inj8:var(--x1t8lgxh);--x---x1pbhz26:var(--x1qxj8ty);--x---xoi766n:var(--xctof0l);--x---x1drn8y1:var(--x1l89o2a);--x---xn5r12v:var(--xlq589s);--x---x17z0c80:var(--xoam46d);--x---xl2jk9r:var(--xptpg9x);--x---x156ikib:var(--x1bpgk6h);--x---xkgv7eh:var(--x1m6eoqc);--x---x1yq3app:var(--x1s07flx);--x---x1587jaz:var(--x3z2k3q);--x---x6wzzll:var(--x10d61hv);--x---x1ubhs74:var(--x1ks7zzp);--x---x1s275lk:var(--x1hos2s0);--x---x1kg2ygz:var(--xasqimf);--x---xbgkqvh:var(--x6re758);--x---x1obn2uh:var(--x415v6g);--x---x1e4ihis:var(--xp4d679);--x---x1bs37nf:var(--xk9ahtj);--x---xzgtcz2:var(--x4u0l1k);--x---x1a33rbf:var(--x1rbpmds);--x---x8tqwsr:var(--xfem4zx);--x---x1cxb3of:var(--x1hu3pnx);--x---x14k0c5u:var(--x162hmff);--x---xvobw7z:var(--x1dlve8z);--x---xw4mcn1:var(--x13j7ndk);--x---x1u4qfl5:var(--xpa4mfl);--x---x47z3hi:var(--xyifsjz);--x---x1u2qu9m:var(--x2tkz45);--x---x16ucms1:var(--xaivliz);--x---x18xvsux:var(--xgxkwj6);--x---xi8u5z9:var(--x3872c4);--x---xptzz2t:var(--x51i60m);--x---x1cklt06:var(--x1lnuyuh);--x---x1wagwp:var(--xqf689p);--x---x1uwop3o:var(--x1m6a25n);--x---xepqutl:var(--x1o05zwi);--x---x1umfgwa:var(--x3r7y46);--x---x1l5nls6:var(--x11v4dhp)"><script>
2 const localtColorScheme = localStorage.getItem("hip-ui-color-scheme");
3
4 if (localtColorScheme) {
5 document.body.style.colorScheme = localtColorScheme;
6 }
7 </script><!--$--><div class="x10it0e x1n2onr6 xync3js" data-sidebar-layout="true"><div class="xxfwru6 x12h1iku x78zum5 x1q0g3np x8x9d4c xack27t xpwcr2h x34d25u xh8yej3"><aside class="xysyzu8 xish69e x9f619 x1s85apg x75r9am x2lah0s x7wzq59 xphed22 x32b0ac xs1s249 xqapb23 x6ikm8r x1odjw0f x13vifvy"><nav class="x1i9je09 x78zum5 xdt5ytf x99yv9f x1bp8bri xjlt9zd xg83hwy x1l9o2wk" aria-labelledby="_R_ala_"><header class="x6s0dn4 x78zum5 x1qughib x1ahid4x xe7n5k2 x15zyuyl x1ust0yu" id="_R_ala_"><span class="x1cy9fcg xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh" style="--x-w3kco5:var(--x1nz9syw);--x-19zvkyr:var(--x4z03mz)">Hip UI</span><div class="x78zum5 x6s0dn4 x1pidvrl" style="--x-gap:var(--xj1jitr)"><button data-size="md" class="xjbqb8w x1k54vhn x159fi32 x1oqui1x x9r1u3d x2jrfov x1mbmhvu x1errvku x12am5j0 xm1heco x18zhcp5 x177qail x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xijokvz xaqnwrm x13zvrfm xs2xxs2 xz4gly6 x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6" data-rac="" type="button" tabindex="0" aria-expanded="false" id="react-aria-_R_1jalaH1_" data-react-aria-pressable="true" aria-label="Theme"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><div><div class="xnxfpsy x6s0dn4 xwvo3h1 x1tlr9ck xl8spv7" style="--x-backgroundColor:var(--xnml5dw)"></div></div></span></button><button data-size="md" class="x1yjn231 x1k54vhn x159fi32 x1x3xvgv x1gtd9xt x8jtdce x1mh5goc x1errvku x12am5j0 xm1heco x18zhcp5 x177qail x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xijokvz xaqnwrm x13zvrfm xs2xxs2 xz4gly6 x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria-_R_ejala_"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></span></button></div></header><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><ul class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 x9f619 x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3 xqmuo7y x1sqr39f x15khubo xv6fsrn x10z08ww" href="/docs/introduction" data-status="active" aria-current="page" data-react-aria-pressable="true" data-pressed="false" data-active="true">Introduction</a></li><li class="xe8uvvx"><a href="/docs/ai" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">AI Usage</a></li></ul></div><div class="x78zum5 xdt5ytf" data-rac="" data-expanded="true"><h3 class="xat24cr xj3b58b x1yf7rl7 xdj266r"><button id="react-aria-_R_lalaH1_" class="x18d9i69 x1uhho1l xc342km x1xpa7k xoa3wnu xexx8yu x6s0dn4 xjbqb8w x1errvku x78zum5 x35y5w8 xix0i5d x19y5jzl xdpxx8g xxztver xh8yej3" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-expanded="true" aria-controls="react-aria-_R_lalaH2_" slot="trigger"><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="lucide lucide-chevron-right xkxqpla x1gcftaf x18ellfx" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>Foundations</button></h3><div data-sidebar-group="true" class="x7giv3 x1hhud1w xw1j4dc xxdp216" data-rac="" id="react-aria-_R_lalaH2_" role="group" aria-labelledby="react-aria-_R_lalaH1_" aria-hidden="false"><div class="x6lm0cs x78zum5 xdt5ytf x1e1v5or"><li class="xe8uvvx"><a href="/docs/foundations/animations" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Animations</a></li><li class="xe8uvvx"><a href="/docs/foundations/colors" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Colors</a></li><li class="xe8uvvx"><a href="/docs/foundations/radius" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Radius</a></li><li class="xe8uvvx"><a href="/docs/foundations/shadow" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Shadow</a></li><li class="xe8uvvx"><a href="/docs/foundations/spacing" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Spacing</a></li><li class="xe8uvvx"><a href="/docs/foundations/theming" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Theming</a></li><li class="xe8uvvx"><a href="/docs/foundations/typography" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Typography</a></li></div></div></div><div class="x78zum5 xdt5ytf" data-rac="" data-expanded="true"><h3 class="xat24cr xj3b58b x1yf7rl7 xdj266r"><button id="react-aria-_R_talaH1_" class="x18d9i69 x1uhho1l xc342km x1xpa7k xoa3wnu xexx8yu x6s0dn4 xjbqb8w x1errvku x78zum5 x35y5w8 xix0i5d x19y5jzl xdpxx8g xxztver xh8yej3" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-expanded="true" aria-controls="react-aria-_R_talaH2_" slot="trigger"><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="lucide lucide-chevron-right xkxqpla x1gcftaf x18ellfx" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>Components</button></h3><div data-sidebar-group="true" class="x7giv3 x1hhud1w xw1j4dc xxdp216" data-rac="" id="react-aria-_R_talaH2_" role="group" aria-labelledby="react-aria-_R_talaH1_" aria-hidden="false"><div class="x6lm0cs x78zum5 xdt5ytf x1e1v5or"><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_qtala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Buttons</span></div><ul aria-labelledby="_R_qtala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/buttons/button" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Button</a></li><li class="xe8uvvx"><a href="/docs/components/buttons/button-group" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Button Group</a></li><li class="xe8uvvx"><a href="/docs/components/buttons/copy-to-clipboard-button" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Copy to Clipboard Button</a></li><li class="xe8uvvx"><a href="/docs/components/buttons/icon-button" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Icon Button</a></li><li class="xe8uvvx"><a href="/docs/components/buttons/segmented-control" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Segmented Control</a></li><li class="xe8uvvx"><a href="/docs/components/buttons/toggle-button" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Toggle Button</a></li><li class="xe8uvvx"><a href="/docs/components/buttons/toggle-button-group" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Toggle Button Group</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_1atala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Collections</span></div><ul aria-labelledby="_R_1atala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/collections/command-menu" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Command Menu</a></li><li class="xe8uvvx"><a href="/docs/components/collections/context-menu" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Context Menu</a></li><li class="xe8uvvx"><a href="/docs/components/collections/listbox" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">List Box</a></li><li class="xe8uvvx"><a href="/docs/components/collections/menu" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Menu</a></li><li class="xe8uvvx"><a href="/docs/components/collections/menubar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Menubar</a></li><li class="xe8uvvx"><a href="/docs/components/collections/table" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Table</a></li><li class="xe8uvvx"><a href="/docs/components/collections/tag-group" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Tag Group</a></li><li class="xe8uvvx"><a href="/docs/components/collections/tree" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Tree</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_1qtala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Color</span></div><ul aria-labelledby="_R_1qtala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/color/color-area" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Color Area</a></li><li class="xe8uvvx"><a href="/docs/components/color/color-field" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Color Field</a></li><li class="xe8uvvx"><a href="/docs/components/color/color-picker" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Color Picker</a></li><li class="xe8uvvx"><a href="/docs/components/color/color-slider" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Color Slider</a></li><li class="xe8uvvx"><a href="/docs/components/color/color-swatch" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Color Swatch</a></li><li class="xe8uvvx"><a href="/docs/components/color/color-swatch-picker" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Color Swatch Picker</a></li><li class="xe8uvvx"><a href="/docs/components/color/color-wheel" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Color Wheel</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_2atala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Content</span></div><ul aria-labelledby="_R_2atala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/content/aspect-ratio" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Aspect Ratio</a></li><li class="xe8uvvx"><a href="/docs/components/content/avatar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Avatar</a></li><li class="xe8uvvx"><a href="/docs/components/content/card" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Card</a></li><li class="xe8uvvx"><a href="/docs/components/content/content" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Content</a></li><li class="xe8uvvx"><a href="/docs/components/content/editable-text" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Editable Text</a></li><li class="xe8uvvx"><a href="/docs/components/content/empty-state" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Empty State</a></li><li class="xe8uvvx"><a href="/docs/components/content/image-cropper" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">ImageCropper</a></li><li class="xe8uvvx"><a href="/docs/components/content/kbd" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Kbd</a></li><li class="xe8uvvx"><a href="/docs/components/content/markdown-content" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">MarkdownContent</a></li><li class="xe8uvvx"><a href="/docs/components/content/separator" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Separator</a></li><li class="xe8uvvx"><a href="/docs/components/content/text" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Text</a></li><li class="xe8uvvx"><a href="/docs/components/content/typography" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Typography</a></li><li class="xe8uvvx"><a href="/docs/components/content/video" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Video</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_2qtala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Date-and-time</span></div><ul aria-labelledby="_R_2qtala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/date-and-time/calendar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Calendar</a></li><li class="xe8uvvx"><a href="/docs/components/date-and-time/date-field" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Date Field</a></li><li class="xe8uvvx"><a href="/docs/components/date-and-time/date-picker" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Date Picker</a></li><li class="xe8uvvx"><a href="/docs/components/date-and-time/date-range-picker" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Date Range Picker</a></li><li class="xe8uvvx"><a href="/docs/components/date-and-time/range-calendar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Range Calendar</a></li><li class="xe8uvvx"><a href="/docs/components/date-and-time/time-field" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Time Field</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_3atala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Form</span></div><ul aria-labelledby="_R_3atala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/form/autocomplete" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">AutocompleteInput</a></li><li class="xe8uvvx"><a href="/docs/components/form/checkbox" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Checkbox</a></li><li class="xe8uvvx"><a href="/docs/components/form/combobox" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Combo Box</a></li><li class="xe8uvvx"><a href="/docs/components/form/file-drop-zone" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">File Drop Zone</a></li><li class="xe8uvvx"><a href="/docs/components/form/form" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Form</a></li><li class="xe8uvvx"><a href="/docs/components/form/label" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Label</a></li><li class="xe8uvvx"><a href="/docs/components/form/number-field" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Number Field</a></li><li class="xe8uvvx"><a href="/docs/components/form/radio" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Radio</a></li><li class="xe8uvvx"><a href="/docs/components/form/search-field" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Search Field</a></li><li class="xe8uvvx"><a href="/docs/components/form/select" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Select</a></li><li class="xe8uvvx"><a href="/docs/components/form/slider" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Slider</a></li><li class="xe8uvvx"><a href="/docs/components/form/switch" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Switch</a></li><li class="xe8uvvx"><a href="/docs/components/form/text-area" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Text Area</a></li><li class="xe8uvvx"><a href="/docs/components/form/text-field" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Text Field</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_3qtala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Layout</span></div><ul aria-labelledby="_R_3qtala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/layout/flex" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Flex</a></li><li class="xe8uvvx"><a href="/docs/components/layout/grid" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Grid</a></li><li class="xe8uvvx"><a href="/docs/components/layout/page" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Page</a></li><li class="xe8uvvx"><a href="/docs/components/layout/toolbar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Toolbar</a></li><li class="xe8uvvx"><a href="/docs/components/layout/window-splitter" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Window Splitter</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_4atala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Navigation</span></div><ul aria-labelledby="_R_4atala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/navigation/breadcrumbs" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Breadcrumbs</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/disclosure" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Disclosure</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/disclosure-group" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Disclosure Group</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/footer" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Footer</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/header-layout" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">HeaderLayout</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/link" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Link</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/navbar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Navbar</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/pagination" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Pagination</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/sidebar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Sidebar</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/sidebar-layout" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">SidebarLayout</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/table-of-contents" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">TableOfContents</a></li><li class="xe8uvvx"><a href="/docs/components/navigation/tabs" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Tabs</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_4qtala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Overlays</span></div><ul aria-labelledby="_R_4qtala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/overlays/alert-dialog" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Alert Dialog</a></li><li class="xe8uvvx"><a href="/docs/components/overlays/dialog" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Dialog</a></li><li class="xe8uvvx"><a href="/docs/components/overlays/drawer" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Drawer</a></li><li class="xe8uvvx"><a href="/docs/components/overlays/hover-card" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Hover Card</a></li><li class="xe8uvvx"><a href="/docs/components/overlays/lightbox" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Lightbox</a></li><li class="xe8uvvx"><a href="/docs/components/overlays/popover" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Popover</a></li><li class="xe8uvvx"><a href="/docs/components/overlays/tooltip" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Tooltip</a></li></ul></div><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1b2p375)"><div class="xijxuy5 xm1heco x177qail x1qmhiwf"><span id="_R_5atala_" class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-w3kco5:var(--x1vekvjh);--x-19zvkyr:var(--x1vaen13)">Status</span></div><ul aria-labelledby="_R_5atala_" class="xat24cr xj3b58b x1yf7rl7 xdj266r x18d9i69 x1uhho1l x6lm0cs x1xpa7k x78zum5 xexx8yu xdt5ytf"><li class="xe8uvvx"><a href="/docs/components/status/alert" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Alert</a></li><li class="xe8uvvx"><a href="/docs/components/status/badge" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Badge</a></li><li class="xe8uvvx"><a href="/docs/components/status/meter" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Meter</a></li><li class="xe8uvvx"><a href="/docs/components/status/progress-bar" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Progress Bar</a></li><li class="xe8uvvx"><a href="/docs/components/status/progress-circle" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Progress Circle</a></li><li class="xe8uvvx"><a href="/docs/components/status/skeleton" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Skeleton</a></li><li class="xe8uvvx"><a href="/docs/components/status/star-rating" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Star Rating</a></li><li class="xe8uvvx"><a href="/docs/components/status/toast" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Toast</a></li></ul></div></div></div></div><div class="x78zum5 xdt5ytf" data-rac="" data-expanded="true"><h3 class="xat24cr xj3b58b x1yf7rl7 xdj266r"><button id="react-aria-_R_15alaH1_" class="x18d9i69 x1uhho1l xc342km x1xpa7k xoa3wnu xexx8yu x6s0dn4 xjbqb8w x1errvku x78zum5 x35y5w8 xix0i5d x19y5jzl xdpxx8g xxztver xh8yej3" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-expanded="true" aria-controls="react-aria-_R_15alaH2_" slot="trigger"><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="lucide lucide-chevron-right xkxqpla x1gcftaf x18ellfx" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>Showcases</button></h3><div data-sidebar-group="true" class="x7giv3 x1hhud1w xw1j4dc xxdp216" data-rac="" id="react-aria-_R_15alaH2_" role="group" aria-labelledby="react-aria-_R_15alaH1_" aria-hidden="false"><div class="x6lm0cs x78zum5 xdt5ytf x1e1v5or"><li class="xe8uvvx"><a href="/docs/showcase/canvas-editor" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Canvas Editor</a></li><li class="xe8uvvx"><a href="/docs/showcase/ecommerce" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Ecommerce App</a></li><li class="xe8uvvx"><a href="/docs/showcase/invoice" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Invoice App</a></li><li class="xe8uvvx"><a href="/docs/showcase/llm" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">LLM App</a></li><li class="xe8uvvx"><a href="/docs/showcase/music" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Music Cards</a></li><li class="xe8uvvx"><a href="/docs/showcase/spotify" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Spotify App</a></li><li class="xe8uvvx"><a href="/docs/showcase/todo-table" data-react-aria-pressable="true" data-pressed="false" data-active="false" class="xkspq83 xc342km xa22041 x1hl2dhg x6s0dn4 xjbqb8w xgdln6g xy4szoh x9f619 x1errvku x78zum5 x12am5j0 x13zvrfm x15406qy xf3guki xz4gly6 x16gd8bs xm1heco x177qail xh8yej3">Todo Table</a></li></div></div></div></nav></aside><button data-size="md" class="x1gtd9xt x8jtdce xjbqb8w x1k54vhn x159fi32 x1oqui1x x1errvku xabsx6j x12am5j0 xm1heco x18zhcp5 x177qail x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x2lah0s x35y5w8 x19y5jzl xl56j7k xijokvz xaqnwrm x13zvrfm xs2xxs2 xz4gly6 x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6 x78zum5 x140ccqg x10l6tqk x1wnuhrt x4mn71o" data-rac="" type="button" tabindex="0" aria-expanded="false" id="react-aria-_R_ilaH1_" data-react-aria-pressable="true"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-from-line" aria-hidden="true"><path d="M3 5v14"></path><path d="M21 12H7"></path><path d="m15 18 6-6-6-6"></path></svg></span></button><main class="x1hkkgoz x9f619 x12h1iku x1iyjqo2 x2lwn1j xeuugli x1nqmiyk x9swrr4 xevdksg x62cg0y x13vcs9l x1mbo3m1 xjlt9zd xnequbl xmwp558 xztfz04 x4hdnc6 x4do6cm x1a8oato xur0jxz xh8yej3"><!--$--><div class="x78zum5 xdt5ytf x1pidvrl xf4e8qq x1nymk3d xia44gn" style="--x-gap:var(--x17t66sh)"><div class="x78zum5 x6s0dn4 x1pidvrl" style="--x-gap:var(--xr40q1o)"><h1 class="x1b2iylo xwgcxoh xat24cr xj3b58b x1cy9fcg x1yf7rl7 xnbwokl xtab9a1 xdj266r x1xzit3g xs866ns x10ejoos x1gs8bp x1iyjqo2 xeuugli">Introduction</h1><div class="x78zum5 xl56j7k x6s0dn4"><button data-size="sm" class="xjbqb8w x1k54vhn x159fi32 x1oqui1x x9r1u3d x2jrfov x1mbmhvu x1errvku x1qdgydv xe7n5k2 x15zyuyl x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xijokvz xaqnwrm x13zvrfm xs2xxs2 xz4gly6 x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria-_R_r5cla_"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></span></button><a href="/docs/introduction.md" target="_blank" rel="noopener noreferrer" class="x10l6tqk x8knxv4 x3m8u43 x13vifvy"></a></div></div><span class="x35y5w8 xww4jgc undefinedundefinedundefinedundefined x1b2iylo xwgcxoh xlnu9vm" style="--x-19zvkyr:var(--x1vzl7l6)">Bootstrap your project and design system with Hip UI.</span></div><p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">Hip UI is a design system for building modern web applications.
8It provides a set of components and tokens that help you build your application quickly and efficiently with a consistent design system.</p>
9<p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">Hip UI itself is not a library that you install, rather it is a ready made design system that you copy directly into your project (like <a class="x131ushd xtj37it xfg5xm8 xdd3hwi x1pknxud x1hl2dhg x6s0dn4 xv6fsrn xx3mchb xnprwmv x1ypdohk x3nfvp2 x35y5w8 x1jko7k2 x1n2onr6 xeaeg1s x1k0f6z9 x1hfhjwi x1s928wv xhkezso x1eokf9 x2q1x1w x1j6awrg x1s7hwzf x3cntg4 x17cx49 xnbfe2x x4eaejv" data-rac="" href="https://ui.shadcn.com/docs" tabindex="0" data-react-aria-pressable="true">shadcn/ui</a>).
10This gives you as much or as little control as you need to build your application.
11You can use the components and tokens as is, or you can customize them to your liking.</p>
12<p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">The main difference between Hip UI and shadcn/ui is that Hip UI is built on two different technologies:</p>
13<div data-size="md" class="x78zum5 xdt5ytf" data-rac=""><div data-size="md" class="x78zum5 xdt5ytf" data-rac=""><button id="react-aria-_R_4uclaH1_" class="x1wn6net x15pojd x1dodnav x677x2r xf8yz2i xkim31w xkspq83 x1ncolw7 x1spimxk xg4hzd4 xc342km xl1woqs x1trv2qp x1lwwobs xa22041 x1pknxud x6s0dn4 xjbqb8w xgdln6g xy4szoh xlnu9vm x78zum5 x35y5w8 xs02ue2 x1fcv2b2 x1wnjc9i x19y5jzl x1qughib xdpxx8g x13zvrfm x15406qy xf3guki xz4gly6 xh8yej3" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-expanded="false" aria-controls="react-aria-_R_4uclaH2_" slot="trigger"><span class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined x1b2iylo xwgcxoh x1errvku" style="--x-w3kco5:var(--xi6lnv8)"><span class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined x1b2iylo xwgcxoh" style="--x-w3kco5:var(--x1nz9syw)">StyleX</span> for styling instead of tailwindcss</span><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="lucide lucide-chevron-down xr2178u xw1j4dc x1errvku x2lah0s x1gcftaf xufvh4u" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div class="x7giv3 xs02ue2 x1fcv2b2 x1wnjc9i xndv0t3 xua3uq3 xz4gly6 xxdp216" data-rac="" id="react-aria-_R_4uclaH2_" role="group" aria-labelledby="react-aria-_R_4uclaH1_" aria-hidden="true" hidden=""><div class="x1wn6net x15pojd x1dodnav x677x2r xf8yz2i xkim31w x1ncolw7 x1spimxk xg4hzd4 xl1woqs x1trv2qp x1lwwobs"><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1y2a4pn)"><p class="x1b2iylo xwgcxoh xat24cr xj3b58b x35y5w8 x1yf7rl7 xix0i5d xdj266r x10ejoos">While tailwindcss is a great tool for styling, it is not great when trying to maintain a design system. If you look at other tools like Hip UI that rely on tailwindcss, you'll notice that the output is very hard to understand and extend.</p><p class="x1b2iylo xwgcxoh xat24cr xj3b58b x35y5w8 x1yf7rl7 xix0i5d xdj266r x10ejoos">On the other hand, StyleX is a great tool for styling and is very easy to understand and extend. It is also built for creating design systems and is very easy to use and very easy to scale to large projects. It also has great suuport for design tokens and theming.</p></div></div></div></div><div data-size="md" class="x78zum5 xdt5ytf" data-rac=""><button id="react-aria-_R_8uclaH1_" class="x1wn6net x15pojd x1dodnav x677x2r xf8yz2i xkim31w xkspq83 x1ncolw7 x1spimxk xg4hzd4 xc342km xl1woqs x1trv2qp x1lwwobs xa22041 x1pknxud x6s0dn4 xjbqb8w xgdln6g xy4szoh xlnu9vm x78zum5 x35y5w8 xs02ue2 x1fcv2b2 x1wnjc9i x19y5jzl x1qughib xdpxx8g x13zvrfm x15406qy xf3guki xz4gly6 xh8yej3" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-expanded="false" aria-controls="react-aria-_R_8uclaH2_" slot="trigger"><span class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined x1b2iylo xwgcxoh x1errvku" style="--x-w3kco5:var(--xi6lnv8)"><span class="x35y5w8 xz6mkdo undefinedundefinedundefinedundefined x1b2iylo xwgcxoh" style="--x-w3kco5:var(--x1nz9syw)">React Aria</span> for accessibility and behavior rather than Radix UI</span><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="lucide lucide-chevron-down xr2178u xw1j4dc x1errvku x2lah0s x1gcftaf xufvh4u" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div class="x7giv3 xs02ue2 x1fcv2b2 x1wnjc9i xndv0t3 xua3uq3 xz4gly6 xxdp216" data-rac="" id="react-aria-_R_8uclaH2_" role="group" aria-labelledby="react-aria-_R_8uclaH1_" aria-hidden="true" hidden=""><div class="x1wn6net x15pojd x1dodnav x677x2r xf8yz2i xkim31w x1ncolw7 x1spimxk xg4hzd4 xl1woqs x1trv2qp x1lwwobs"><div class="x78zum5 xdt5ytf x1pidvrl" style="--x-gap:var(--x1y2a4pn)"><p class="x1b2iylo xwgcxoh xat24cr xj3b58b x35y5w8 x1yf7rl7 xix0i5d xdj266r x10ejoos">Radix UI paved the way for what we consider a industry cleass headless component libarary. However over the years the management of the project has fallen through the cracks, most of the team left the company after the aquisition, and the remaing team is working on a new headless component libarary.</p><p class="x1b2iylo xwgcxoh xat24cr xj3b58b x35y5w8 x1yf7rl7 xix0i5d xdj266r x10ejoos">Given the state of the project, we decided to go for what seems like the new gold standard for headless component libararies, React Aria. React Aria supports most of the things Radix UI does, plus a whole host of other useful component patterns. It truly is an accessible primitive layer that most web UI can be built upon.</p></div></div></div></div></div>
14<p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">Beyond that we've taken extra care to include all the component you might need to render full applications.
15Whether thats navbars, footer, or page layouts, Hip UI has you covered.</p>
16<div data-heading-link="true" class="x78zum5 x1q0g3np x6s0dn4 x1pidvrl xzv3oba x6uc525" style="--x-gap:var(--x1rt2kup)"><a href="#installation" class="x1hl2dhg x1heor9g"><h2 id="installation" class="x1b2iylo xwgcxoh xat24cr xj3b58b x1cy9fcg x1yf7rl7 x12va9g9 xyxybcd xdj266r x1kqs2hx xs866ns xx9g4rq x1gs8bp xso031l">Installation</h2></a><button data-size="sm" class="xjbqb8w x1k54vhn x159fi32 x1oqui1x x9r1u3d x2jrfov x1mbmhvu x1errvku x1qdgydv xe7n5k2 x15zyuyl x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xaqnwrm x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6 xg01cxk x127iuxr x16f5e4v x13zvrfm x19991ni x4wkmsb xz4gly6" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria-_R_1pecla_"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></span></button></div>
17<p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">To get started with hip you can either install all the components at once:</p>
18<pre tabindex="0" class="x183gvl0 xkspq83 x1y0btm7 xmkeg23 xa22041 x78zum5 x1n2onr6 xtzergm x130hwy6" data-testid="code"><code class="xysyzu8 xz7tkgb x111w1zd x9sojv3 x121u6vh xh8yej3"><span class="line"><span style="color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> dlx</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> hip-ui</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> install</span><span style="color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"> --all</span></span></code><button data-size="sm" class="xjbqb8w x1k54vhn x159fi32 x1oqui1x x9r1u3d x2jrfov x1mbmhvu x1errvku x1qdgydv xe7n5k2 x15zyuyl x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xijokvz xaqnwrm x13zvrfm xs2xxs2 xz4gly6 x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6 x10l6tqk xu0ooai x1u0q5ln" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria-_R_1pucla_"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></span></button></pre>
19<p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">Or add a few core building blocks one by one.
20In this situation it makes sense to install hip-ui as a dev dependency so as you install components they come from the same version of the library.</p>
21<pre tabindex="0" class="x183gvl0 xkspq83 x1y0btm7 xmkeg23 xa22041 x78zum5 x1n2onr6 xtzergm x130hwy6" data-testid="code"><code class="xysyzu8 xz7tkgb x111w1zd x9sojv3 x121u6vh xh8yej3"><span class="line"><span style="color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> dlx</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> hip-ui</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> install</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> theme</span></span>
22<span class="line"><span style="color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> dlx</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> hip-ui</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> install</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> flex</span></span>
23<span class="line"><span style="color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> dlx</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> hip-ui</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> install</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> typography</span></span>
24<span class="line"><span style="color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> dlx</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> hip-ui</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> install</span><span style="color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"> button</span></span></code><button data-size="sm" class="xjbqb8w x1k54vhn x159fi32 x1oqui1x x9r1u3d x2jrfov x1mbmhvu x1errvku x1qdgydv xe7n5k2 x15zyuyl x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xijokvz xaqnwrm x13zvrfm xs2xxs2 xz4gly6 x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6 x10l6tqk xu0ooai x1u0q5ln" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria-_R_1qecla_"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></span></button></pre>
25<div data-heading-link="true" class="x78zum5 x1q0g3np x6s0dn4 x1pidvrl xzv3oba x6uc525" style="--x-gap:var(--x1rt2kup)"><a href="#navigating-the-docs" class="x1hl2dhg x1heor9g"><h2 id="navigating-the-docs" class="x1b2iylo xwgcxoh xat24cr xj3b58b x1cy9fcg x1yf7rl7 x12va9g9 xyxybcd xdj266r x1kqs2hx xs866ns xx9g4rq x1gs8bp xso031l">Navigating the docs</h2></a><button data-size="sm" class="xjbqb8w x1k54vhn x159fi32 x1oqui1x x9r1u3d x2jrfov x1mbmhvu x1errvku x1qdgydv xe7n5k2 x15zyuyl x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xaqnwrm x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6 xg01cxk x127iuxr x16f5e4v x13zvrfm x19991ni x4wkmsb xz4gly6" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria-_R_1qmcla_"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></span></button></div>
26<p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">The docs are organized into the following categories:</p>
27<ul class="x1e972vs x78zum5 xdt5ytf xtaz4m5 xj3b58b x1yf7rl7 x1lb63r1 xtzergm x130hwy6">
28<li class="x35y5w8 xix0i5d x10ejoos x1k1nxsf"><strong>Foundations</strong> - The tokens that are use to build the design system and style your UI</li>
29<li class="x35y5w8 xix0i5d x10ejoos x1k1nxsf"><strong>Components</strong> - All the available components in Hip UI, organized by category</li>
30</ul>
31<div data-heading-link="true" class="x78zum5 x1q0g3np x6s0dn4 x1pidvrl xzv3oba x6uc525" style="--x-gap:var(--x1rt2kup)"><a href="#showcases" class="x1hl2dhg x1heor9g"><h2 id="showcases" class="x1b2iylo xwgcxoh xat24cr xj3b58b x1cy9fcg x1yf7rl7 x12va9g9 xyxybcd xdj266r x1kqs2hx xs866ns xx9g4rq x1gs8bp xso031l">Showcases</h2></a><button data-size="sm" class="xjbqb8w x1k54vhn x159fi32 x1oqui1x x9r1u3d x2jrfov x1mbmhvu x1errvku x1qdgydv xe7n5k2 x15zyuyl x1b2iylo xwgcxoh x1cv439p x1y0btm7 xmkeg23 xa22041 x6lm0cs x6s0dn4 x9f619 x3nfvp2 x2lah0s x35y5w8 x19y5jzl xl56j7k xaqnwrm x87ps6o xuxw1ft x1vnanun x19fw6na xuek838 xrmc3dw x18657mr x3yz4hb x1izor3m xeshb7z xy4j8m9 x1grc5a6 xg01cxk x127iuxr x16f5e4v x13zvrfm x19991ni x4wkmsb xz4gly6" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria-_R_1recla_"><span class="x1b2iylo xwgcxoh x1pknxud x6s0dn4 x78zum5 xl56j7k x13zvrfm x19991ni xz4gly6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></span></button></div>
32<p class="x1b2iylo xwgcxoh xj3b58b x35y5w8 x1yf7rl7 xix0i5d x10ejoos xtzergm x130hwy6">Here is a list of some site that use Hip UI:</p>
33<ul class="x1e972vs x78zum5 xdt5ytf xtaz4m5 xj3b58b x1yf7rl7 x1lb63r1 xtzergm x130hwy6">
34<li class="x35y5w8 xix0i5d x10ejoos x1k1nxsf"><a class="x131ushd xtj37it xfg5xm8 xdd3hwi x1pknxud x1hl2dhg x6s0dn4 xv6fsrn xx3mchb xnprwmv x1ypdohk x3nfvp2 x35y5w8 x1jko7k2 x1n2onr6 xeaeg1s x1k0f6z9 x1hfhjwi x1s928wv xhkezso x1eokf9 x2q1x1w x1j6awrg x1s7hwzf x3cntg4 x17cx49 xnbfe2x x4eaejv" data-rac="" href="https://hip-ui.tngl.io" tabindex="0" data-react-aria-pressable="true">Hip UI Website</a> - The docs you're reading right now!</li>
35<li class="x35y5w8 xix0i5d x10ejoos x1k1nxsf"><a class="x131ushd xtj37it xfg5xm8 xdd3hwi x1pknxud x1hl2dhg x6s0dn4 xv6fsrn xx3mchb xnprwmv x1ypdohk x3nfvp2 x35y5w8 x1jko7k2 x1n2onr6 xeaeg1s x1k0f6z9 x1hfhjwi x1s928wv xhkezso x1eokf9 x2q1x1w x1j6awrg x1s7hwzf x3cntg4 x17cx49 xnbfe2x x4eaejv" data-rac="" href="https://kich.io" tabindex="0" data-react-aria-pressable="true">kich.io</a> - A tool managing your kitchen.</li>
36</ul><!--/$--></main><aside class="xysyzu8 xish69e x1y8v6su x2lah0s x7wzq59 x1yekkrb x13vifvy x1s85apg x75r9am"><nav class="x1pknxud xysyzu8 x9f619 x78zum5 xdt5ytf x2lah0s xk21aj5 x18x98pp xafpxmx"><ul class="xat24cr xj3b58b xe8uvvx x1yf7rl7 xdj266r x1uhho1l"><li><a href="#installation" class="x1hl2dhg x6s0dn4 xjbqb8w xuo3b4b x7lk91o xlnu9vm x78zum5 x12am5j0 x1n2onr6 x13zvrfm xghmlwh x4wkmsb xz4gly6 x122m1v9 x19ypqd9 xe0pwq x16gd8bs x10tli2e x1hmns74 xhq5o37 x1wlytlt x1y3wzot x1vgi0k x13e46o5" style="--x-paddingLeft:calc(var(--xey3y24) * 1)">Installation</a></li><li><a href="#navigating-the-docs" class="x1hl2dhg x6s0dn4 xjbqb8w xuo3b4b x7lk91o xlnu9vm x78zum5 x12am5j0 x1n2onr6 x13zvrfm xghmlwh x4wkmsb xz4gly6 x122m1v9 x19ypqd9 xe0pwq x16gd8bs x10tli2e x1hmns74 xhq5o37 x1wlytlt x1y3wzot x1vgi0k x13e46o5" style="--x-paddingLeft:calc(var(--xey3y24) * 1)">Navigating the docs</a></li><li><a href="#showcases" class="x1hl2dhg x6s0dn4 xjbqb8w xuo3b4b x7lk91o xlnu9vm x78zum5 x12am5j0 x1n2onr6 x13zvrfm xghmlwh x4wkmsb xz4gly6 x122m1v9 x19ypqd9 xe0pwq x16gd8bs x10tli2e x1hmns74 xhq5o37 x1wlytlt x1y3wzot x1vgi0k x13e46o5" style="--x-paddingLeft:calc(var(--xey3y24) * 1)">Showcases</a></li></ul></nav></aside></div></div><script>(function(t){let s;try{s=JSON.parse(sessionStorage.getItem(t.storageKey)||"{}")}catch(e){console.error(e);return}const c=t.key||window.history.state?.__TSR_key,r=c?s[c]:void 0;if(t.shouldScrollRestoration&&r&&typeof r=="object"&&Object.keys(r).length>0){for(const e in r){const o=r[e];if(!o||typeof o!="object")continue;const l=o.scrollX,i=o.scrollY;if(!(!Number.isFinite(l)||!Number.isFinite(i))){if(e==="window")window.scrollTo({top:i,left:l,behavior:t.behavior});else if(e){let n;try{n=document.querySelector(e)}catch{continue}n&&(n.scrollLeft=l,n.scrollTop=i)}}}return}const a=window.location.hash.split("#",2)[1];if(a){const e=window.history.state?.__hashScrollIntoViewOptions??!0;if(e){const o=document.getElementById(a);o&&o.scrollIntoView(e)}return}window.scrollTo({top:0,left:0,behavior:t.behavior})})({"storageKey":"tsr-scroll-restoration-v1_3","shouldScrollRestoration":true});document.currentScript.remove()</script><!--/$--><div style="position:absolute"></div><script class="$tsr" id="$tsr-stream-barrier">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]};$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/main-C54yPR-t.js","/assets/jsx-runtime-D-oznMWL.js","/assets/_virtual_content-FazmLmqR.js","/assets/preload-helper-DgFuoWHe.js","/assets/button-B3FtKFjE.js","/assets/typography.stylex-ZkAqsnF0.js","/assets/link-CghA3pO1.js","/assets/react-DNjXG-IQ.js"],assets:$R[5]=[$R[6]={tag:"link",attrs:$R[7]={rel:"stylesheet",href:"/assets/main-x1XGuNl0.css#",type:"text/css"}},$R[8]={tag:"script",attrs:$R[9]={type:"module",async:!0},children:"import(\"/assets/main-C54yPR-t.js\")"}]},"/docs":$R[10]={preloads:$R[11]=["/assets/docs-CrgJx8Z6.js","/assets/dialog-DGX3aEDV.js","/assets/flex-oubf-_sd.js","/assets/icon-button-BFGSYviR.js","/assets/typography-DYed328x.js","/assets/listbox-Clp-j1PB.js","/assets/select-DPWMB9nm.js","/assets/sidebar-layout-DGc-vn3w.js","/assets/sidebar-BxDooHSf.js","/assets/table-of-contents-4OHKHUOU.js","/assets/text-B77JGejP.js","/assets/UnShiki-EBFEVXkE.js","/assets/useLocation-ITrbnl1F.js"]},"/docs/$":$R[12]={preloads:$R[13]=["/assets/docs._-BlcaOkeD.js","/assets/copy-q8QAXVoJ.js"]}}},matches:$R[14]=[$R[15]={i:"__root__ ",u:1774940781099,s:"success",ssr:!0},$R[16]={i:" docs docs",u:1774940781102,s:"success",ssr:!0},$R[17]={i:" docs $ docs introduction",u:1774940781102,s:"success",l:$R[18]={isMarkdown:!1,docPath:"/docs/introduction",title:"Introduction",toc:$R[19]=[$R[20]={depth:2,value:"Installation",id:"installation"},$R[21]={depth:2,value:"Navigating the docs",id:"navigating-the-docs"},$R[22]={depth:2,value:"Showcases",id:"showcases"}]},ssr:!0}],lastMatchId:" docs $ docs introduction"})($R["tsr"]);$_TSR.e();document.currentScript.remove()</script><script type="module" async="">import("/assets/main-C54yPR-t.js")</script></body></html>