A design system in a box.
hip-ui.tngl.io/docs/introduction
1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/docs-CrgJx8Z6.js","assets/jsx-runtime-D-oznMWL.js","assets/button-B3FtKFjE.js","assets/typography.stylex-ZkAqsnF0.js","assets/clsx-Dt5TBCCM.js","assets/react-DNjXG-IQ.js","assets/dialog-DGX3aEDV.js","assets/icon-button-BFGSYviR.js","assets/useDialogStyles-TqxL-C9A.js","assets/Dialog-I4SMYRTn.js","assets/useLocalizedStringFormatter-DkD75zZh.js","assets/Separator-vYV6cmuY.js","assets/shim-DbDEk-re.js","assets/SelectionIndicator-D6_3UuYP.js","assets/useEvent-BOpqN9eb.js","assets/Modal-BkSrc0q6.js","assets/x-CY6exMHP.js","assets/Heading-xkVrWlyG.js","assets/flex-oubf-_sd.js","assets/typography-DYed328x.js","assets/copy-to-clipboard-button-Gr6ZKHbo.js","assets/copy-q8QAXVoJ.js","assets/listbox-Clp-j1PB.js","assets/checkbox-DUW1NmBn.js","assets/separator-Da7WLHKG.js","assets/useListBoxItemStyles-Dp7eJMDi.js","assets/ListBox-T58IHUzj.js","assets/useListState-CzdWVnix.js","assets/Virtualizer-F0WUv2oN.js","assets/select-DPWMB9nm.js","assets/search-field-cB5nPedo.js","assets/suffix-icon-B752tq3D.js","assets/circle-x-CoKQt2Z2.js","assets/triangle-alert-B7sf6y2r.js","assets/useInputStyles-BNn_FOM8.js","assets/useTextField-fMnydpon.js","assets/search-BRon3kli.js","assets/Group-EEFEs9r4.js","assets/Input-BzKLqfLq.js","assets/usePopoverStyles-Dfy7mt0T.js","assets/Autocomplete-Bc9WtO7c.js","assets/useFilter-DcdqT13M.js","assets/chevron-down-D6TeByrN.js","assets/intlStrings-GsTGY_cb.js","assets/sidebar-layout-DGc-vn3w.js","assets/drawer-CI2PcwbW.js","assets/sidebar-BxDooHSf.js","assets/text-B77JGejP.js","assets/Disclosure-CPe41War.js","assets/chevron-right-U1T1g-0g.js","assets/table-of-contents-4OHKHUOU.js","assets/main-C54yPR-t.js","assets/preload-helper-DgFuoWHe.js","assets/link-CghA3pO1.js","assets/main-x1XGuNl0.css","assets/UnShiki-EBFEVXkE.js","assets/useLocation-ITrbnl1F.js","assets/introduction-B_G88cIB.js","assets/disclosure-group-D-zRV_WZ.js","assets/disclosure-CpiymKkH.js","assets/ai-DoQmqHiy.js","assets/todo-table-B_c6e9Ix.js","assets/card-BtUPjIPo.js","assets/avatar-BXECDuPC.js","assets/badge-CaJzeTqO.js","assets/kbd-DmC_OkjK.js","assets/menu-CF7cfwmN.js","assets/popover-xeNePzcC.js","assets/table-N-q6wk5u.js","assets/grip-vertical-BJz78KWw.js","assets/useMove-DBbrzXXx.js","assets/arrow-up-Blh-OMGl.js","assets/arrow-right-PPvQbosa.js","assets/chevron-left-DbRnfiOg.js","assets/circle-check-Dvy1zyAo.js","assets/circle-C8wI6NqR.js","assets/ellipsis-CphssYai.js","assets/spotify-Bj_NpGB_.js","assets/grid-Bb7ZbwQJ.js","assets/slider-S4kyNKva.js","assets/Slider-CElqN1CF.js","assets/heart-Ch07Y8t1.js","assets/plus-ej_ZvU7B.js","assets/volume-2-DY0k0MiO.js","assets/music-Ch1DMlRO.js","assets/switch-DEy04ywE.js","assets/tag-group-B2_VeSnm.js","assets/useGridListItem-Cgvld5eh.js","assets/text-field-C7Ly7588.js","assets/TextField-C3kwgWtw.js","assets/toggle-button-BayrYJIp.js","assets/ToggleButton-DcMI3295.js","assets/move-horizontal-CkvRWiF1.js","assets/star-DVIYU0dX.js","assets/llm-D4gbSGQC.js","assets/segmented-control-DXzNVyUx.js","assets/text-area-3nNR1P52.js","assets/download-BLAWaY3f.js","assets/invoice-MVwP9Ygj.js","assets/link-Com2ZV7N.js","assets/Link-sqzhIGUS.js","assets/circle-check-big-DGIvwwMd.js","assets/pin-DOC9fyCL.js","assets/share-BrHiGGpG.js","assets/ecommerce-Dhx0Zjwh.js","assets/color-swatch-CzN5Xcaf.js","assets/intlStrings-_Xq_dlVb.js","assets/Color-DXRjSJbs.js","assets/empty-state-DjidjdIQ.js","assets/file-drop-zone-DBLr82w0.js","assets/useDrop-Dhpp44c-.js","assets/number-field-lxyuEFSa.js","assets/useNumberField-CKXGFxK4.js","assets/useSpinButton-CRCIZxYe.js","assets/toggle-button-group-D_He7boC.js","assets/upload-CjozFIiv.js","assets/canvas-editor-YdEM2Xbr.js","assets/typography-RGnPf_EK.js","assets/Example-DfDcphuv.js","assets/typeramp-DeRce73P.js","assets/theming-B8ge7BHD.js","assets/spacing-Bsbe5bdk.js","assets/spacing-BOI94FCt.js","assets/radius.stylex-D2K5E-79.js","assets/shadow-CfBMdmZx.js","assets/shadow.stylex-shqCPiy0.js","assets/radius-CkL3wCjv.js","assets/colors-v2mQxkSi.js","assets/animations-DJURr-eU.js","assets/toast-CbVaio6j.js","assets/PropDocs-CM9cNaM3.js","assets/info-cj193x5e.js","assets/star-rating-DqS4usKV.js","assets/skeleton-D7ZdR3wU.js","assets/progress-circle-DqFoyEmw.js","assets/progress-bar-CMyA0ICF.js","assets/meter-DXzfY8Ss.js","assets/badge-niLgsiqu.js","assets/alert-Os6ka4um.js","assets/tooltip-j9g3CXtG.js","assets/popover-CtY7k7GN.js","assets/lightbox-Dw6jzRyG.js","assets/hover-card-CpKLRTup.js","assets/drawer-CzPC22U5.js","assets/dialog-CK6_0vt2.js","assets/alert-dialog-DTviM3iE.js","assets/tabs-ozPDjcDv.js","assets/table-of-contents-C114zcEv.js","assets/sidebar-BzD7VWQp.js","assets/sidebar-layout-CnKvfI12.js","assets/content-AzcgfqTh.js","assets/footer-C84s9ktq.js","assets/header-layout-BHV5EqAr.js","assets/navbar-slF73zu5.js","assets/menu-D3uOkN_8.js","assets/pagination-BucyWGYS.js","assets/arrow-left-CHFTWh_c.js","assets/navbar-C9lbWbbD.js","assets/link-BvMZ1QBS.js","assets/header-layout-dziQebPl.js","assets/footer-CU6dizOy.js","assets/disclosure-DHxelhol.js","assets/disclosure-group-DLawefcF.js","assets/breadcrumbs-C7DdQFoI.js","assets/window-splitter-Do2OKM8R.js","assets/toolbar-Cp_KxBYV.js","assets/toolbar-CvoizF7Q.js","assets/Toolbar-Ca3gaTXo.js","assets/page-D5vhxGYz.js","assets/grid-D9aUw6dw.js","assets/flex-Mf7QASWf.js","assets/text-field-CE2GKXJT.js","assets/text-area-s2PFPY9K.js","assets/switch-CuCERCNW.js","assets/slider-D_pdgc1B.js","assets/select-OrhA-b4-.js","assets/search-field-DbdYLesd.js","assets/radio-DZh88k0x.js","assets/number-field-CVJaQWdT.js","assets/label-Bl5gfGi6.js","assets/form-Nw_ORA6K.js","assets/file-drop-zone-DWL990Fl.js","assets/combobox-Ba65NbzE.js","assets/checkbox-BeBtrknX.js","assets/autocomplete-CXqTMCVQ.js","assets/color-wheel-DU_PCJci.js","assets/color-area-ikDmIO2a.js","assets/color-swatch-CBI0xHtH.js","assets/color-swatch-picker-BCaPvXzA.js","assets/color-swatch-picker-kjwIsh4H.js","assets/useColor-D3rJbj9o.js","assets/color-slider-MoN-jhsb.js","assets/color-slider-CN1YfiTL.js","assets/color-picker-Cdtp-nmf.js","assets/color-field-CGYVt30C.js","assets/color-field-jafvBDRg.js","assets/color-area-KOtsxXrr.js","assets/video-04yu7v72.js","assets/typography-giOIOHSO.js","assets/text-CytUVl_O.js","assets/separator-PoVikaXC.js","assets/markdown-content-BNttHj-r.js","assets/kbd-BvvJ1do2.js","assets/image-cropper-BqLKG7Ta.js","assets/empty-state-5vOlO51b.js","assets/editable-text-BD-5kowN.js","assets/editable-text-afkJoGRL.js","assets/content-B4gPr8oR.js","assets/card-DfITAce4.js","assets/avatar-DA2UAsem.js","assets/aspect-ratio-CLmeJwiG.js","assets/tree-bGMdeVXt.js","assets/tree-AFVdnSnG.js","assets/useDragAndDrop-BkW4xaNT.js","assets/tag-group-B9Jd60Bu.js","assets/useListData-D-Cy5ATk.js","assets/table-Cx6w1Aq5.js","assets/menubar-H8gxVcmA.js","assets/menu-CTm1E2hU.js","assets/listbox-O_Af4wiP.js","assets/context-menu-wRfHPSXf.js","assets/command-menu-BYH3rM78.js","assets/toggle-button-BVhJ43ZM.js","assets/toggle-button-group-CFHplqoB.js","assets/segmented-control-DdMTbXW0.js","assets/icon-button-CAtq9IG8.js","assets/settings-H2zLFrdP.js","assets/copy-to-clipboard-button-DEkDE9z4.js","assets/button-DOyQe58u.js","assets/button-group-tTHu3Gta.js","assets/time-field-C5e70i0L.js","assets/DateField-B3yikNy3.js","assets/useDateFormatter-B0HMsDRK.js","assets/range-calendar-CTJsFu8h.js","assets/range-calendar-ojhTQkTB.js","assets/useCalendarStyles-BzFjsdzT.js","assets/date-range-picker-BEpUNG1U.js","assets/calendar-VcjshhDU.js","assets/date-picker-Cc1-pC1K.js","assets/calendar-DgV8Gzix.js","assets/date-field-UT6J0onL.js","assets/date-field-B4-6e4kz.js","assets/calendar-CGAUf6Y4.js"])))=>i.map(i=>d[i]);
2import{i as e,t}from"./jsx-runtime-D-oznMWL.js";import{t as n}from"./react-DNjXG-IQ.js";import{B as r,F as i,T as a,_ as o,c as s,i as c,m as l,n as u,r as ee,t as d,v as f}from"./link-CghA3pO1.js";import{t as p}from"./preload-helper-DgFuoWHe.js";import{a as te,c as m,d as h,f as g,g as _,i as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T}from"./typography-DYed328x.js";import{t as E}from"./link-Com2ZV7N.js";function ne(e){return!!e?.isNotFound}var D=`__root__`;function O(e){if(e.statusCode=e.statusCode||e.code||307,!e._builtLocation&&!e.reloadDocument&&typeof e.href==`string`)try{new URL(e.href),e.reloadDocument=!0}catch{}let t=new Headers(e.headers);e.href&&t.get(`Location`)===null&&t.set(`Location`,e.href);let n=new Response(null,{status:e.statusCode,headers:t});if(n.options=e,e.throw)throw n;return n}function re(e){return e instanceof Response&&!!e.options}function k(e){if(typeof e==`object`&&e&&e.isSerializedRedirect)return O(e)}var A=class{get to(){return this._to}get id(){return this._id}get path(){return this._path}get fullPath(){return this._fullPath}constructor(e){if(this.init=e=>{this.originalIndex=e.originalIndex;let t=this.options,n=!t?.path&&!t?.id;this.parentRoute=this.options.getParentRoute?.(),n?this._path=D:this.parentRoute||a();let r=n?D:t?.path;r&&r!==`/`&&(r=o(r));let i=t?.id||r,s=n?D:l([this.parentRoute.id===`__root__`?``:this.parentRoute.id,i]);r===`__root__`&&(r=`/`),s!==`__root__`&&(s=l([`/`,s]));let c=s===`__root__`?`/`:l([this.parentRoute.fullPath,r]);this._path=r,this._id=s,this._fullPath=c,this._to=f(c)},this.addChildren=e=>this._addFileChildren(e),this._addFileChildren=e=>(Array.isArray(e)&&(this.children=e),typeof e==`object`&&e&&(this.children=Object.values(e)),this),this._addFileTypes=()=>this,this.updateLoader=e=>(Object.assign(this.options,e),this),this.update=e=>(Object.assign(this.options,e),this),this.lazy=e=>(this.lazyFn=e,this),this.redirect=e=>O({from:this.fullPath,...e}),this.options=e||{},this.isRoot=!e?.getParentRoute,e?.id&&e?.path)throw Error(`Route cannot have both an 'id' and a 'path' option.`)}},j=class extends A{constructor(e){super(e)}},M=e(n(),1),N=M.createContext(void 0),P=M.createContext(void 0),F={state:void 0,get:()=>void 0,subscribe:()=>()=>{}};function I(e){let t=c(),n=M.useContext(e.from?P:N),i=e.from??n,o=i?e.from?t.stores.getMatchStoreByRouteId(i):t.stores.activeMatchStoresById.get(i):void 0,s=M.useRef(void 0);return ee(o??F,n=>{if((e.shouldThrow??!0)&&!n&&a(),n===void 0)return;let i=e.select?e.select(n):n;if(e.structuralSharing??t.options.defaultStructuralSharing){let e=r(s.current,i);return s.current=e,e}return i})}function L(e){return I({from:e.from,strict:e.strict,structuralSharing:e.structuralSharing,select:t=>e.select?e.select(t.loaderData):t.loaderData})}function R(e){let{select:t,...n}=e;return I({...n,select:e=>t?t(e.loaderDeps):e.loaderDeps})}function z(e){return I({from:e.from,shouldThrow:e.shouldThrow,structuralSharing:e.structuralSharing,strict:e.strict,select:t=>{let n=e.strict===!1?t.params:t._strictParams;return e.select?e.select(n):n}})}function B(e){return I({from:e.from,strict:e.strict,shouldThrow:e.shouldThrow,structuralSharing:e.structuralSharing,select:t=>e.select?e.select(t.search):t.search})}function V(e){let t=c();return M.useCallback(n=>t.navigate({...n,from:n.from??e?.from}),[e?.from,t])}function H(e){return I({...e,select:t=>e.select?e.select(t.context):t.context})}var U=t(),W=class extends A{constructor(e){super(e),this.useMatch=e=>I({select:e?.select,from:this.id,structuralSharing:e?.structuralSharing}),this.useRouteContext=e=>H({...e,from:this.id}),this.useSearch=e=>B({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useParams=e=>z({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useLoaderDeps=e=>R({...e,from:this.id}),this.useLoaderData=e=>L({...e,from:this.id}),this.useNavigate=()=>V({from:this.fullPath}),this.Link=M.forwardRef((e,t)=>(0,U.jsx)(d,{ref:t,from:this.fullPath,...e}))}};function G(e){return new W(e)}var K=class extends j{constructor(e){super(e),this.useMatch=e=>I({select:e?.select,from:this.id,structuralSharing:e?.structuralSharing}),this.useRouteContext=e=>H({...e,from:this.id}),this.useSearch=e=>B({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useParams=e=>z({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useLoaderDeps=e=>R({...e,from:this.id}),this.useLoaderData=e=>L({...e,from:this.id}),this.useNavigate=()=>V({from:this.fullPath}),this.Link=M.forwardRef((e,t)=>(0,U.jsx)(d,{ref:t,from:this.fullPath,...e}))}};function q(e){return new K(e)}function J(e){return typeof e==`object`?new Y(e,{silent:!0}).createRoute(e):new Y(e,{silent:!0}).createRoute}var Y=class{constructor(e,t){this.path=e,this.createRoute=e=>{let t=G(e);return t.isRoot=!1,t},this.silent=t?.silent}};function X(e,t){let n,r,a,o,c=()=>(n||=e().then(e=>{n=void 0,r=e[t??`default`]}).catch(e=>{if(a=e,i(a)&&a instanceof Error&&typeof window<`u`&&typeof sessionStorage<`u`){let e=`tanstack_router_reload:${a.message}`;sessionStorage.getItem(e)||(sessionStorage.setItem(e,`1`),o=!0)}}),n),l=function(e){if(o)throw window.location.reload(),new Promise(()=>{});if(a)throw a;if(!r)if(s)s(c());else throw c();return M.createElement(r,e)};return l.preload=c,l}var ie=()=>p(()=>import(`./docs-CrgJx8Z6.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56])),ae=u(E),Z={header:{k1K539:`xf4e8qq`,keoZOQ:`x1nymk3d xia44gn`,$$css:!0},defaultMargin:{k1K539:`xtzergm`,keoZOQ:`x130hwy6`,$$css:!0},h2:{k1K539:`xzv3oba`,keoZOQ:`x6uc525`,$$css:!0},h3:{k1K539:`x1jz0usu`,keoZOQ:`x1irnib0`,$$css:!0},h4:{k1K539:`xzv3oba`,keoZOQ:`x1irnib0`,$$css:!0},h5:{k1K539:`xzv3oba`,keoZOQ:`x1irnib0`,$$css:!0},grow:{kzQI83:`x1iyjqo2`,k7Eaqz:`xeuugli`,$$css:!0}};function oe({href:e,...t}){return e&&e.startsWith(`/`)?(0,U.jsx)(ae,{to:`/docs/$`,params:{_splat:e.split(`/`).slice(2).join(`/`)},...t}):(0,U.jsx)(E,{...t,href:e})}var se={h1:({className:e,style:t,...n})=>(0,U.jsx)(S,{...n}),h2:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h2,children:(0,U.jsx)(v,{...n})}),h3:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h3,children:(0,U.jsx)(te,{...n})}),h4:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h4,children:(0,U.jsx)(b,{...n})}),h5:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h5,children:(0,U.jsx)(C,{...n})}),p:({className:e,style:t,...n})=>(0,U.jsx)(y,{...n,style:Z.defaultMargin}),a:({className:e,style:t,...n})=>(0,U.jsx)(oe,{...n}),ul:({className:e,style:t,...n})=>(0,U.jsx)(_,{...n,style:Z.defaultMargin}),ol:({className:e,style:t,...n})=>(0,U.jsx)(g,{...n,style:Z.defaultMargin}),li:({className:e,style:t,...n})=>(0,U.jsx)(h,{...n}),pre:({className:e,style:t,...n})=>(0,U.jsx)(x,{...n,style:Z.defaultMargin}),code:({className:e,style:t,...n})=>(0,U.jsx)(m,{...n}),blockquote:({className:e,style:t,...n})=>(0,U.jsx)(w,{...n,style:Z.defaultMargin})},Q=J(`/docs`)({component:X(ie,`component`)}),ce=[{title:`AI Usage`,description:`How to use AI to enhance building with Hip UI.`,content:`Hip UI interfaces with AI in a few main ways:
3
41. [**llms.txt**](https://hip-ui.tngl.io/llms.txt) - The docs as static markdown files that can be used as context for AI chats like OpenAi or Claude.
52. **MCP server** - A MCP server that AI can use to get guidance on how to use Hip UI.
6
7## MCP Server
8
9The MCP server exposes the following tools:
10
11- **list-sections** - Lists all available Hip UI docs sections.
12- **get-documentation** - Retrieves the full markdown documentation for a given section.
13
14It also exposes some lightweight instructions and rules around using and composing components.
15
16### Setup
17
18To use the MCP server you need to add it to your AI tool of choice.
19
20#### Cursor
21
22\`\`\`json
23{
24 "mcpServers": {
25 "hip-ui": {
26 "command": "npx",
27 "args": ["hip-ui", "mcp"]
28 }
29 }
30}
31\`\`\`
32
33#### VS Code
34
35\`\`\`bash
36code --add-mcp '{"name":"hip-ui","command":"npx","args":["hip-ui", "mcp"]}'
37\`\`\`
38
39#### Claude Code
40
41\`\`\`bash
42claude mcp add hip-ui npx hip-ui mcp
43\`\`\`
44
45#### Codex
46
47\`\`\`yaml
48[mcp_servers.hip-ui]
49command = "npx"
50args = ["hip-ui", "mcp"]
51\`\`\`
52
53#### Gemini CLI
54
55\`\`\`bash
56gemini mcp add hip-ui npx hip-ui mcp
57\`\`\``,_meta:{filePath:`ai.mdx`,fileName:`ai.mdx`,directory:`.`,extension:`mdx`,path:`ai`}},{title:`Button Group`,description:`A group of buttons that work together as a single control.`,content:`import { PropDocs } from "../../../lib/PropDocs";
58import { Example } from "../../../lib/Example";
59import { Basic } from "../../../examples/button-group/basic";
60
61<Example src={Basic} />
62
63## Installation
64
65Run the following command to add the button group component to your project.
66
67\`\`\`bash
68pnpm hip install button-group
69\`\`\`
70
71## Props
72
73This is a custom component built for grouping buttons together. It is built using the [React Aria Group](https://react-spectrum.adobe.com/react-aria/Group.html).
74
75<PropDocs components={["ButtonGroup"]} />
76
77## Related Components
78
79- [Button](/docs/components/buttons/button) - Individual buttons within the group
80- [IconButton](/docs/components/buttons/icon-button) - Icon-only buttons for the group
81- [ToggleButton](/docs/components/buttons/toggle-button) - Toggleable buttons for the group
82- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons specifically`,_meta:{filePath:`components/buttons/button-group.mdx`,fileName:`button-group.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/button-group`}},{title:`Button`,description:`A clickable button component with multiple variants and sizes.`,content:`import { PropDocs } from "../../../lib/PropDocs";
83import { Example } from "../../../lib/Example";
84import { Basic } from "../../../examples/button/basic";
85import { ButtonVariants } from "../../../examples/button/variants";
86import { ButtonSizes } from "../../../examples/button/sizes";
87import { ButtonWithIcons } from "../../../examples/button/with-icons";
88import { ButtonStates } from "../../../examples/button/states";
89import { ButtonLoading } from "../../../examples/button/loading";
90
91<Example src={Basic} />
92
93## Installation
94
95Run the following command to add the button component to your project.
96
97\`\`\`bash
98pnpm hip install button
99\`\`\`
100
101## Features
102
103### Variants
104
105The button comes in four different variants to suit different use cases.
106
107<Example src={ButtonVariants} />
108
109### Sizes
110
111The button supports three different sizes.
112
113<Example src={ButtonSizes} />
114
115### With Icons
116
117Buttons can include icons alongside text for better visual communication.
118
119<Example src={ButtonWithIcons} />
120
121### States
122
123Buttons support different interactive states.
124
125<Example src={ButtonStates} />
126
127### Loading State
128
129Buttons can show a loading state during async operations.
130
131<Example src={ButtonLoading} />
132
133## Props
134
135This component is built using the [React Aria Button](https://react-spectrum.adobe.com/react-aria/Button.html).
136
137<PropDocs components={["Button"]} />
138
139## Related Components
140
141- [IconButton](/docs/components/buttons/icon-button) - For icon-only buttons
142- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable buttons
143- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons together
144- [Link](/docs/components/navigation/link) - For navigation links that look like buttons`,_meta:{filePath:`components/buttons/button.mdx`,fileName:`button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/button`}},{title:`Copy to Clipboard Button`,description:`A button component that copies text to the clipboard when clicked, with visual feedback via a tooltip.`,content:`import { PropDocs } from "../../../lib/PropDocs";
145import { Example } from "../../../lib/Example";
146import { Basic } from "../../../examples/copy-to-clipboard-button/basic";
147import { CustomIcon } from "../../../examples/copy-to-clipboard-button/custom-icon";
148
149<Example src={Basic} />
150
151## Installation
152
153Run the following command to add the copy to clipboard button component to your project.
154
155\`\`\`bash
156pnpm hip install copy-to-clipboard-button
157\`\`\`
158
159## Features
160
161### Custom Icon
162
163You can customize the icon displayed on the button.
164
165<Example src={CustomIcon} />
166
167## Props
168
169<PropDocs components={["CopyToClipboardButton"]} />
170
171## Related Components
172
173- [IconButton](/docs/components/buttons/icon-button) - The base icon button component used by CopyToClipboardButton
174- [Button](/docs/components/buttons/button) - For buttons with text and icons
175- [Tooltip](/docs/components/overlays/tooltip) - For providing context on buttons`,_meta:{filePath:`components/buttons/copy-to-clipboard-button.mdx`,fileName:`copy-to-clipboard-button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/copy-to-clipboard-button`}},{title:`Icon Button`,description:`A button component specifically designed for icons with built-in tooltip support.`,content:`import { PropDocs } from "../../../lib/PropDocs";
176import { Example } from "../../../lib/Example";
177import { Basic } from "../../../examples/icon-button/basic";
178import { IconButtonVariants } from "../../../examples/icon-button/variants";
179import { IconButtonSizes } from "../../../examples/icon-button/sizes";
180
181<Example src={Basic} />
182
183## Installation
184
185Run the following command to add the icon button component to your project.
186
187\`\`\`bash
188pnpm hip install icon-button
189\`\`\`
190
191## Features
192
193### Variants
194
195Icon buttons support the same variants as regular buttons.
196
197<Example src={IconButtonVariants} />
198
199### Sizes
200
201Icon buttons support three different sizes.
202
203<Example src={IconButtonSizes} />
204
205## Props
206
207This component is built using the [React Aria Button](https://react-spectrum.adobe.com/react-aria/Button.html).
208
209<PropDocs components={["IconButton"]} />
210
211## Related Components
212
213- [Button](/docs/components/buttons/button) - For buttons with text and icons
214- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable icon buttons
215- [Tooltip](/docs/components/overlays/tooltip) - For providing context on icon-only buttons
216- [ButtonGroup](/docs/components/buttons/button-group) - For grouping icon buttons together`,_meta:{filePath:`components/buttons/icon-button.mdx`,fileName:`icon-button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/icon-button`}},{title:`Segmented Control`,description:`A segmented control displays a set of mutually exclusive options, allowing users to select one option at a time.`,content:`import { PropDocs } from "../../../lib/PropDocs";
217import { Example } from "../../../lib/Example";
218import { Basic } from "../../../examples/segmented-control/basic";
219import { Size } from "../../../examples/segmented-control/size";
220import { WithIcons } from "../../../examples/segmented-control/with-icons";
221
222<Example src={Basic} />
223
224## Installation
225
226Run the following command to add the segmented control component to your project.
227
228\`\`\`bash
229pnpm hip install segmented-control
230\`\`\`
231
232## Features
233
234### Sizes
235
236Segmented controls support three different sizes: small, medium, and large.
237
238<Example src={Size} />
239
240### With Icons
241
242Segmented control items can include icons alongside text labels.
243
244<Example src={WithIcons} />
245
246## Props
247
248This component is built using [React Aria ToggleButtonGroup](https://react-spectrum.adobe.com/react-aria/ToggleButtonGroup.html).
249
250<PropDocs components={["SegmentedControl", "SegmentedControlItem"]} />
251
252## Related Components
253
254- [Tabs](/docs/components/navigation/tabs) - For organizing content into multiple sections
255- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons together
256- [Radio](/docs/components/form/radio) - For single-selection from multiple options`,_meta:{filePath:`components/buttons/segmented-control.mdx`,fileName:`segmented-control.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/segmented-control`}},{title:`Toggle Button Group`,description:`A group of toggle buttons that work together as a single control.`,content:`import { PropDocs } from "../../../lib/PropDocs";
257import { Example } from "../../../lib/Example";
258
259import { Basic } from "../../../examples/toggle-button-group/basic";
260import { Orientation } from "../../../examples/toggle-button-group/orientation";
261import { Variants } from "../../../examples/toggle-button-group/variants";
262
263<Example src={Basic} />
264
265## Installation
266
267Run the following command to add the toggle button group component to your project.
268
269\`\`\`bash
270pnpm hip install toggle-button-group
271\`\`\`
272
273## Features
274
275### Orientation
276
277The toggle button group component can be oriented horizontally or vertically.
278
279<Example src={Orientation} />
280
281### Variants
282
283The toggle button group component can be grouped or separate.
284
285<Example src={Variants} />
286
287## Props
288
289<PropDocs components={["ToggleButtonGroup"]} />
290
291## Related Components
292
293- [ToggleButton](/docs/components/buttons/toggle-button) - Individual toggle buttons within the group
294- [ButtonGroup](/docs/components/buttons/button-group) - For grouping regular buttons together
295- [Radio](/docs/components/form/radio) - For single-selection from multiple options
296- [Checkbox](/docs/components/form/checkbox) - For multiple-selection options`,_meta:{filePath:`components/buttons/toggle-button-group.mdx`,fileName:`toggle-button-group.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/toggle-button-group`}},{title:`Toggle Button`,description:`A toggle button component that can be pressed to toggle between states.`,content:`import { PropDocs } from "../../../lib/PropDocs";
297import { Example } from "../../../lib/Example";
298import { Basic } from "../../../examples/toggle-button/basic";
299import { Sizes } from "../../../examples/toggle-button/sizes";
300import { Variants } from "../../../examples/toggle-button/variants";
301
302<Example src={Basic} />
303
304## Installation
305
306Run the following command to add the toggle button component to your project.
307
308\`\`\`bash
309pnpm hip install toggle-button
310\`\`\`
311
312## Features
313
314### Sizes
315
316The toggle button component comes in three sizes: small, medium, and large.
317
318<Example src={Sizes} />
319
320### Variants
321
322The toggle button component comes in four variants: primary, secondary, tertiary, and outline.
323
324<Example src={Variants} />
325
326## Props
327
328This component is built using the [React Aria Toggle Button](https://react-spectrum.adobe.com/react-aria/ToggleButton.html).
329
330<PropDocs components={["ToggleButton"]} />
331
332## Related Components
333
334- [Button](/docs/components/buttons/button) - For regular clickable buttons
335- [IconButton](/docs/components/buttons/icon-button) - For icon-only toggle buttons
336- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons together
337- [Switch](/docs/components/form/switch) - For toggle switches with labels`,_meta:{filePath:`components/buttons/toggle-button.mdx`,fileName:`toggle-button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/toggle-button`}},{title:`Command Menu`,description:`A command menu component for displaying a searchable list of commands or actions.`,content:`import { PropDocs } from "../../../lib/PropDocs";
338import { Example } from "../../../lib/Example";
339import { Basic } from "../../../examples/command-menu/basic";
340
341<Example src={Basic} />
342
343## Installation
344
345Run the following command to add the command menu component to your project.
346
347\`\`\`bash
348pnpm hip install command-menu
349\`\`\`
350
351## Props
352
353The command menu is a custom component built using a SearchField, Dialog, and Menu.
354
355<PropDocs
356 components={[
357 "CommandMenu",
358 "CommandMenuItem",
359 "CommandMenuSection",
360 "CommandMenuSectionHeader",
361 "CommandMenuSeparator",
362 ]}
363/>
364
365## Related Components
366
367- [SearchField](/docs/components/form/search-field) - For the search input in command menus
368- [Menu](/docs/components/collections/menu) - The underlying menu component
369- [Dialog](/docs/components/overlays/dialog) - For the modal container
370- [ListBox](/docs/components/collections/listbox) - For displaying command results`,_meta:{filePath:`components/collections/command-menu.mdx`,fileName:`command-menu.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/command-menu`}},{title:`Context Menu`,description:`A context menu component that appears on right-click or long press.`,content:`import { PropDocs } from "../../../lib/PropDocs";
371import { Example } from "../../../lib/Example";
372import { Basic } from "../../../examples/context-menu/basic";
373
374<Example src={Basic} />
375
376## Installation
377
378Run the following command to add the context menu component to your project.
379
380\`\`\`bash
381pnpm hip install context-menu
382\`\`\`
383
384## Props
385
386This is a custom component built using a Menu and a custom logic to position a Popover.
387
388<PropDocs components={["ContextMenu", "ContextMenuTrigger"]} />
389
390## Related Components
391
392- [Menu](/docs/components/collections/menu) - The underlying menu component
393- [Popover](/docs/components/overlays/popover) - For positioning the context menu
394- [CommandMenu](/docs/components/collections/command-menu) - For command palette menus
395- [Button](/docs/components/buttons/button) - For context menu triggers`,_meta:{filePath:`components/collections/context-menu.mdx`,fileName:`context-menu.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/context-menu`}},{title:`List Box`,description:`A list box component for displaying a list of selectable items.`,content:`import { PropDocs } from "../../../lib/PropDocs";
396import { Example } from "../../../lib/Example";
397import { Basic } from "../../../examples/listbox/basic";
398import { Virtualization } from "../../../examples/listbox/virtualization";
399
400<Example src={Basic} />
401
402## Installation
403
404Run the following command to add the list box component to your project.
405
406\`\`\`bash
407pnpm hip install listbox
408\`\`\`
409
410## Features
411
412### Virtualization
413
414The list box supports virtualization by providing the \`isVirtualized\` prop.
415The container must have a fixed height and \`overflow: auto\`.
416
417<Example src={Virtualization} />
418
419## Props
420
421This component is built using the [React Aria ListBox](https://react-spectrum.adobe.com/react-aria/ListBox.html).
422
423<PropDocs
424 components={[
425 "ListBox",
426 "ListBoxItem",
427 "ListBoxSection",
428 "ListBoxSeparator",
429 "ListBoxSectionHeader",
430 ]}
431/>
432
433## Related Components
434
435- [Select](/docs/components/form/select) - For dropdown selection using ListBox
436- [ComboBox](/docs/components/form/combobox) - For searchable selection using ListBox
437- [Tree](/docs/components/collections/tree) - For hierarchical data display
438- [Table](/docs/components/collections/table) - For structured data display`,_meta:{filePath:`components/collections/listbox.mdx`,fileName:`listbox.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/listbox`}},{title:`Menu`,description:`A menu component for displaying a list of actions or options.`,content:`import { PropDocs } from "../../../lib/PropDocs";
439import { Example } from "../../../lib/Example";
440import { Basic } from "../../../examples/menu/basic";
441
442<Example src={Basic} />
443
444## Installation
445
446Run the following command to add the menu component to your project.
447
448\`\`\`bash
449pnpm hip install menu
450\`\`\`
451
452## Props
453
454This component is built using the [React Aria Menu](https://react-spectrum.adobe.com/react-aria/Menu.html).
455
456<PropDocs components={["Menu", "MenuItem", "MenuSection", "SubMenu"]} />
457
458## Related Components
459
460- [ContextMenu](/docs/components/collections/context-menu) - For right-click context menus
461- [CommandMenu](/docs/components/collections/command-menu) - For command palette menus
462- [Popover](/docs/components/overlays/popover) - For menu containers
463- [Button](/docs/components/buttons/button) - For menu triggers`,_meta:{filePath:`components/collections/menu.mdx`,fileName:`menu.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/menu`}},{title:`Menubar`,description:`A menubar component that displays a horizontal row of menu items, typically used for application navigation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
464import { Example } from "../../../lib/Example";
465import { Basic } from "../../../examples/menubar/basic";
466import { Disabled } from "../../../examples/menubar/disabled";
467import { Size } from "../../../examples/menubar/size";
468
469<Example src={Basic} />
470
471## Installation
472
473Run the following command to add the menubar component to your project.
474
475\`\`\`bash
476pnpm hip install menubar
477\`\`\`
478
479## Features
480
481### Disabled State
482
483Menubar items can be disabled to prevent interaction.
484
485<Example src={Disabled} />
486
487### Size
488
489The menubar component supports three sizes: \`sm\`, \`md\`, and \`lg\`.
490
491<Example src={Size} />
492
493## Props
494
495This a custom component that is built using React Aria's [DialogTrigger](https://react-spectrum.adobe.com/react-aria/DialogTrigger.html), [Menu](https://react-spectrum.adobe.com/react-aria/Menu.html), and [Popover](https://react-spectrum.adobe.com/react-aria/Popover.html).
496
497<PropDocs components={["Menubar", "MenubarItem"]} />
498
499## Related Components
500
501- [Menu](/docs/components/collections/menu) - The underlying menu component used in menubar items
502- [Popover](/docs/components/overlays/popover) - For positioning the menu popovers
503- [MenuItem](/docs/components/collections/menu) - Menu items displayed in the menubar menus
504- [SubMenu](/docs/components/collections/menu) - For nested submenus in menubar items`,_meta:{filePath:`components/collections/menubar.mdx`,fileName:`menubar.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/menubar`}},{title:`Table`,description:`A table component for displaying structured data in rows and columns.`,content:`import { PropDocs } from "../../../lib/PropDocs";
505import { Example } from "../../../lib/Example";
506import { Basic } from "../../../examples/table/basic";
507import { Selection } from "../../../examples/table/selection";
508import { ResizableColumns } from "../../../examples/table/resizable-columns";
509import { DisabledRows } from "../../../examples/table/disabled-rows";
510import { Sorting } from "../../../examples/table/sorting";
511import { DragAndDrop } from "../../../examples/table/drag-and-drop";
512import { Virtualization } from "../../../examples/table/virtualization";
513
514<Example src={Basic} />
515
516## Installation
517
518Run the following command to add the table component to your project.
519
520\`\`\`bash
521pnpm hip install table
522\`\`\`
523
524## Features
525
526### Selection
527
528With the \`selectionMode\` prop, you can control the selection behavior of the table.
529The table support both single and multiple selection modes.
530
531<Example src={Selection} />
532
533> NOTE: The table also supports \`replace\` as a \`selectionBehavior\`.
534> Read more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#selection-behavior).
535
536### Resizable Columns
537
538The table supports resizable columns by wrapping the table in a \`ResizableTableContainer\`.
539
540When resizing in enabled the following props are available:
541
542- \`TableColumn.minWidth\` - The minimum width of the column.
543- \`TableColumn.maxWidth\` - The maximum width of the column.
544- \`TableColumn.defaultWidth\` - The default width of the column. (uncontrolled)
545- \`TableColumn.width\` - The width of the column. (controlled)
546- \`TableColumn.hasResizer\` - Whether the column has a resizer.
547
548<Example src={ResizableColumns} />
549
550### Row Actions
551
552A row in the table can take an action when the user clicks on it.
553React more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#row-actions).
554
555### Sorting
556
557The table supports sorting by setting the \`allowsSorting\` prop on the \`TableColumn\` component.
558
559When sorting is enabled the following props are available:
560
561- \`TableColumn.allowsSorting\` - Whether the column allows sorting.
562- \`Table.sortDescriptor\` - The current column that is sorting the table and the direction of the sort.
563- \`Table.onSortChange\` - The function to call when the sort changes.
564
565<Example src={Sorting} />
566
567### Drag and Drop
568
569The table supports drag and drop by providing the \`dragAndDropHooks\` prop to the \`Table\` component.
570React more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#drag-and-drop).
571
572<Example src={DragAndDrop} />
573
574### Disabled rows
575
576A row can be disabled by setting the \`isDisabled\` prop to true.
577
578<Example src={DisabledRows} />
579
580### Virtualization
581
582The table supports virtualization by providing the \`isVirtualized\` prop.
583The container must have a fixed height and \`overflow: auto\`.
584
585<Example src={Virtualization} />
586
587## Props
588
589This component is built using the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table.html).
590
591<PropDocs
592 components={[
593 "Table",
594 "TableHeader",
595 "TableBody",
596 "TableColumn",
597 "TableRow",
598 "TableCell",
599 ]}
600/>
601
602## Related Components
603
604- [ListBox](/docs/components/collections/listbox) - For selectable list data
605- [Tree](/docs/components/collections/tree) - For hierarchical data display
606- [Card](/docs/components/content/card) - For displaying table data in cards
607- [Badge](/docs/components/status/badge) - For status indicators in table cells`,_meta:{filePath:`components/collections/table.mdx`,fileName:`table.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/table`}},{title:`Tag Group`,description:`A tag group component for displaying and managing collections of tags.`,content:`import { PropDocs } from "../../../lib/PropDocs";
608import { Example } from "../../../lib/Example";
609import { Basic } from "../../../examples/tag-group/basic";
610import { Removable } from "../../../examples/tag-group/removable";
611import { Selected } from "../../../examples/tag-group/selected";
612import { WithError } from "../../../examples/tag-group/with-error";
613
614<Example src={Basic} />
615
616## Installation
617
618Run the following command to add the tag group component to your project.
619
620\`\`\`bash
621pnpm hip install tag-group
622\`\`\`
623
624## Features
625
626### Removable Tags
627
628Tags can be made removable with a remove button.
629
630<Example src={Removable} />
631
632### Selection
633
634Tags can be selectable in single or multiple selection modes.
635
636<Example src={Selected} />
637
638### Error State
639
640Tag groups can display error messages for validation feedback.
641
642<Example src={WithError} />
643
644## Props
645
646This component is built using the [React Aria TagGroup](https://react-spectrum.adobe.com/react-aria/TagGroup.html).
647
648<PropDocs components={["TagGroup", "Tag"]} />
649
650## Related Components
651
652- [Badge](/docs/components/status/badge) - For displaying status indicators
653- [Label](/docs/components/form/label) - For form labels and descriptions
654- [Button](/docs/components/buttons/button) - For actions on tags
655- [Select](/docs/components/form/select) - For single item selection`,_meta:{filePath:`components/collections/tag-group.mdx`,fileName:`tag-group.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/tag-group`}},{title:`Tree`,description:`A tree component for displaying hierarchical data with expandable nodes.`,content:`import { PropDocs } from "../../../lib/PropDocs";
656import { Example } from "../../../lib/Example";
657import { Basic } from "../../../examples/tree/basic";
658import { DragAndDrop } from "../../../examples/tree/drag-and-drop";
659import { Virtualization } from "../../../examples/tree/virtualization";
660
661<Example src={Basic} />
662
663## Installation
664
665Run the following command to add the tree component to your project.
666
667\`\`\`bash
668pnpm hip install tree
669\`\`\`
670
671## Features
672
673### Drag and Drop
674
675The tree supports drag and drop by providing the \`dragAndDropHooks\` prop to the \`Tree\` component.
676React more about it [here](https://react-spectrum.adobe.com/react-aria/Tree.html#drag-and-drop).
677
678<Example src={DragAndDrop} />
679
680### Virtualization
681
682The tree supports virtualization by providing the \`isVirtualized\` prop.
683The container must have a fixed height and \`overflow: auto\`.
684
685<Example src={Virtualization} />
686
687## Props
688
689This component is built using the [React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html).
690
691<PropDocs components={["Tree", "TreeItem"]} />
692
693## Related Components
694
695- [ListBox](/docs/components/collections/listbox) - For flat list data
696- [Table](/docs/components/collections/table) - For structured data display
697- [Card](/docs/components/content/card) - For displaying tree data in cards
698- [Menu](/docs/components/collections/menu) - For hierarchical menu structures`,_meta:{filePath:`components/collections/tree.mdx`,fileName:`tree.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/tree`}},{title:`Color Area`,description:`A 2D color selection area for choosing colors across two channels.`,content:`import { PropDocs } from "../../../lib/PropDocs";
699import { Example } from "../../../lib/Example";
700import { Basic } from "../../../examples/color-area/basic";
701import { AspectRatio } from "../../../examples/color-area/aspect-ratio";
702import { Disabled } from "../../../examples/color-area/disabled";
703
704<Example src={Basic} />
705
706## Installation
707
708Run the following command to add the color area component to your project.
709
710\`\`\`bash
711pnpm hip install color-area
712\`\`\`
713
714## Features
715
716### Aspect Ratio
717
718Control the rendered dimensions by setting a custom aspect ratio.
719
720<Example src={AspectRatio} />
721
722## Disabled
723
724The color area can be disabled by setting the \`disabled\` prop to true.
725
726<Example src={Disabled} />
727
728## Props
729
730This component is built using the [React Aria ColorArea](https://react-spectrum.adobe.com/react-aria/ColorArea.html).
731
732<PropDocs components={["ColorArea"]} />
733
734## Related Components
735
736- [ColorField](/docs/components/color/color-field) - For entering color values
737- [ColorSwatch](/docs/components/color/color-swatch) - For displaying selected colors`,_meta:{filePath:`components/color/color-area.mdx`,fileName:`color-area.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-area`}},{title:`Color Field`,description:`A color input component for selecting colors with a color picker.`,content:`import { PropDocs } from "../../../lib/PropDocs";
738import { Example } from "../../../lib/Example";
739import { Basic } from "../../../examples/color-field/basic";
740import { LabelVariant } from "../../../examples/color-field/label-variant";
741import { Validation } from "../../../examples/color-field/validation";
742import { ValidationWarning } from "../../../examples/color-field/validation-warning";
743import { ValidationSuccess } from "../../../examples/color-field/validation-success";
744
745<Example src={Basic} />
746
747## Installation
748
749Run the following command to add the color field component to your project.
750
751\`\`\`bash
752pnpm hip install color-field
753\`\`\`
754
755## Features
756
757### Label Variant
758
759The color field supports two different label variants: vertical and horizontal.
760
761<Example src={LabelVariant} />
762
763### Validation
764
765Use the \`validationState\` prop to indicate when a field has validation errors.
766Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
767
768<Example src={Validation} />
769
770Set \`validationState="warning"\` to show a warning state with a description.
771
772<Example src={ValidationWarning} />
773
774Set \`validationState="valid"\` to show a success state with a description.
775
776<Example src={ValidationSuccess} />
777
778## Props
779
780This component is built using the [React Aria ColorField](https://react-spectrum.adobe.com/react-aria/ColorField.html).
781
782<PropDocs components={["ColorField"]} />
783
784## Related Components
785
786- [ColorSwatch](/docs/components/color/color-swatch) - For displaying color values
787- [TextField](/docs/components/form/text-field) - For general text input
788- [NumberField](/docs/components/form/number-field) - For numeric input
789- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/color/color-field.mdx`,fileName:`color-field.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-field`}},{title:`Color Picker`,description:`Compose color components to create a color picker.`,content:`import { PropDocs } from "../../../lib/PropDocs";
790import { Example } from "../../../lib/Example";
791import { DefaultEditor } from "../../../examples/color-picker/default-editor";
792import { CustomChildren } from "../../../examples/color-picker/custom-children";
793import { Swatches } from "../../../examples/color-picker/swatches";
794import { AlphaChannel } from "../../../examples/color-picker/alpha-channel";
795
796This component provides a \`DefaultColorEditor\` component that contains a basic color picker with support for \`hsb\`, \`hsl\` and \`rgb\` values.
797It simply composes other color components, which you can also easily do yourself to customize the picker.
798
799<Example src={DefaultEditor} />
800
801## Installation
802
803Run the following command to add the color picker to your project.
804
805\`\`\`bash
806pnpm hip install color-picker
807\`\`\`
808
809## Features
810
811### Default Editor
812
813The \`DefaultColorEditor\` composes a \`ColorArea\`, \`Hue\` and \`Alpha\` sliders, a format \`Select\`, and a format-aware \`ColorField\`.
814
815<Example src={DefaultEditor} />
816
817### Custom Children
818
819Compose any color UI you like inside \`ColorPicker\`.
820
821<Example src={CustomChildren} />
822
823### Swatches
824
825You can add swatches to the color picker by passing an array of colors to the \`swatches\` prop.
826
827<Example src={Swatches} />
828
829### Alpha Channel
830
831You can hide the alpha channel by passing \`false\` to the \`hasAlpha\` prop.
832
833<Example src={AlphaChannel} />
834
835## Props
836
837This component is built using the React Aria ColorPicker.
838See the official guide for full behavior and API details.
839
840- Docs: [React Aria ColorPicker](https://react-spectrum.adobe.com/react-aria/ColorPicker.html#reusable-wrappers)
841
842<PropDocs components={["ColorPicker", "DefaultColorEditor"]} />
843
844## Related Components
845
846- [ColorArea](/docs/components/color/color-area)
847- [ColorSlider](/docs/components/color/color-slider)
848- [ColorField](/docs/components/color/color-field)
849- [ColorSwatchPicker](/docs/components/color/color-swatch-picker)`,_meta:{filePath:`components/color/color-picker.mdx`,fileName:`color-picker.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-picker`}},{title:`Color Slider`,description:`A 1D color selection slider for adjusting a single color channel.`,content:`import { PropDocs } from "../../../lib/PropDocs";
850import { Example } from "../../../lib/Example";
851import { Basic } from "../../../examples/color-slider/basic";
852import { Channels } from "../../../examples/color-slider/channels";
853import { HideValueLabel } from "../../../examples/color-slider/hide-value-label";
854import { Disabled } from "../../../examples/color-slider/disabled";
855import { Size } from "../../../examples/color-slider/size";
856
857<Example src={Basic} />
858
859## Installation
860
861Run the following command to add the color slider component to your project.
862
863\`\`\`bash
864pnpm hip install color-slider
865\`\`\`
866
867## Features
868
869### Channels
870
871Adjust different channels such as hue, saturation, lightness, and brightness.
872
873<Example src={Channels} />
874
875### Hide Value Label
876
877The value label can be hidden by setting the \`showValueLabel\` prop to false.
878
879<Example src={HideValueLabel} />
880
881### Disabled
882
883The color slider can be disabled by setting the \`isDisabled\` prop to true.
884
885<Example src={Disabled} />
886
887### Size
888
889The color slider can be sized by setting the \`size\` prop to "sm", "md", or "lg".
890
891<Example src={Size} />
892
893## Props
894
895This component is built using the [React Aria ColorSlider](https://react-spectrum.adobe.com/react-aria/ColorSlider.html).
896
897<PropDocs components={["ColorSlider"]} />
898
899## Related Components
900
901- [ColorArea](/docs/components/color/color-area) - 2D color selection
902- [ColorField](/docs/components/color/color-field) - Entering color values
903- [Slider](/docs/components/form/slider) - Generic numeric slider`,_meta:{filePath:`components/color/color-slider.mdx`,fileName:`color-slider.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-slider`}},{title:`Color Swatch Picker`,description:`A list of color swatches that allows selecting one color.`,content:`import { PropDocs } from "../../../lib/PropDocs";
904import { Example } from "../../../lib/Example";
905import { Basic } from "../../../examples/color-swatch-picker/basic";
906import { Size } from "../../../examples/color-swatch-picker/size";
907import { Layout } from "../../../examples/color-swatch-picker/layout";
908
909<Example src={Basic} />
910
911## Installation
912
913Run the following command to add the color swatch picker to your project.
914
915\`\`\`bash
916pnpm hip install color-swatch-picker
917\`\`\`
918
919## Features
920
921### Size
922
923The \`ColorSwatchPicker\` supports the \`size\` prop to adjust the size of the swatches.
924
925<Example src={Size} />
926
927### Layout
928
929The swatches can be laid out in a stack with \`layout="stack"\`
930
931<Example src={Layout} />
932
933## Props
934
935This component is built using [React Aria ColorSwatchPicker](https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html).
936
937<PropDocs components={["ColorSwatchPicker", "ColorSwatchPickerItem"]} />
938
939## Related Components
940
941- [ColorSwatch](/docs/components/color/color-swatch) - For individual color previews
942- [ColorField](/docs/components/color/color-field) - For color input
943- [Grid](/docs/components/layout/grid) - For arranging swatches`,_meta:{filePath:`components/color/color-swatch-picker.mdx`,fileName:`color-swatch-picker.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-swatch-picker`}},{title:`Color Swatch`,description:`A color swatch component for displaying color values.`,content:`import { PropDocs } from "../../../lib/PropDocs";
944import { Example } from "../../../lib/Example";
945import { Basic } from "../../../examples/color-swatch/basic";
946import { Size } from "../../../examples/color-swatch/size";
947
948<Example src={Basic} />
949
950## Installation
951
952Run the following command to add the color swatch component to your project.
953
954\`\`\`bash
955pnpm hip install color-swatch
956\`\`\`
957
958## Features
959
960### Size
961
962The \`ColorSwatch\` supports the \`size\` prop with values \`sm\`, \`md\`, and \`lg\`.
963
964<Example src={Size} />
965
966## Props
967
968This component is built using the [React Aria ColorSwatch](https://react-spectrum.adobe.com/react-aria/ColorSwatch.html).
969
970<PropDocs components={["ColorSwatch"]} />
971
972## Related Components
973
974- [ColorField](/docs/components/color/color-field) - For color input with color swatches
975- [Card](/docs/components/content/card) - For displaying color swatches in cards
976- [Grid](/docs/components/layout/grid) - For organizing color swatches in grids
977- [Button](/docs/components/buttons/button) - For interactive color swatches`,_meta:{filePath:`components/color/color-swatch.mdx`,fileName:`color-swatch.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-swatch`}},{title:`Color Wheel`,description:`A circular color picker for selecting hue with a draggable thumb.`,content:`import { PropDocs } from "../../../lib/PropDocs";
978import { Example } from "../../../lib/Example";
979import { Basic } from "../../../examples/color-wheel/basic";
980import { Sizes } from "../../../examples/color-wheel/sizes";
981import { Disabled } from "../../../examples/color-wheel/disabled";
982
983<Example src={Basic} />
984
985## Installation
986
987Run the following command to add the color wheel component to your project.
988
989\`\`\`bash
990pnpm hip install color-wheel
991\`\`\`
992
993## Features
994
995### Sizes
996
997The color wheel supports three sizes via the \`size\` prop (sm, md, lg), which adjust the ring thickness and overall radius.
998
999<Example src={Sizes} />
1000
1001### Disabled
1002
1003The color wheel can be disabled using the \`isDisabled\` prop.
1004
1005<Example src={Disabled} />
1006
1007## Props
1008
1009This component is built using the [React Aria ColorWheel](https://react-spectrum.adobe.com/react-aria/ColorWheel.html).
1010
1011<PropDocs components={["ColorWheel"]} />
1012
1013## Related Components
1014
1015- [ColorSlider](/docs/components/color/color-slider) - 1D channel adjustment
1016- [ColorArea](/docs/components/color/color-area) - 2D color selection
1017- [ColorField](/docs/components/color/color-field) - Entering color values`,_meta:{filePath:`components/color/color-wheel.mdx`,fileName:`color-wheel.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-wheel`}},{title:`Aspect Ratio`,description:`A component that allows you to set the aspect ratio of a div, with support for images.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1018import { Example } from "../../../lib/Example";
1019import { Basic } from "../../../examples/aspect-ratio/basic";
1020import { NoImage } from "../../../examples/aspect-ratio/no-image";
1021
1022<Example src={Basic} />
1023
1024## Installation
1025
1026Run the following command to add the aspect ratio component to your project.
1027
1028\`\`\`bash
1029pnpm hip install aspect-ratio
1030\`\`\`
1031
1032## Features
1033
1034### No Image
1035
1036The aspect ratio can be set without an image.
1037
1038<Example src={NoImage} />
1039
1040## Props
1041
1042This is a custom component built for setting aspect ratios.
1043
1044<PropDocs components={["AspectRatio", "AspectRatioImage"]} />
1045
1046## Related Components
1047
1048- [Card](/docs/components/content/card) - For cards with aspect ratio images
1049- [Grid](/docs/components/layout/grid) - For grid layouts with aspect ratio items
1050- [Flex](/docs/components/layout/flex) - For flex layouts with aspect ratio items
1051- [Avatar](/docs/components/content/avatar) - For user avatars with consistent aspect ratios`,_meta:{filePath:`components/content/aspect-ratio.mdx`,fileName:`aspect-ratio.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/aspect-ratio`}},{title:`Avatar`,description:`An image element with a fallback for representing the user.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1052import { Example } from "../../../lib/Example";
1053import { Basic } from "../../../examples/avatar/basic";
1054import { AvatarSizes } from "../../../examples/avatar/sizes";
1055import { AvatarGroup } from "../../../examples/avatar/group";
1056import { AvatarFallbacks } from "../../../examples/avatar/fallbacks";
1057import { AvatarButtonExample } from "../../../examples/avatar/button";
1058
1059<Example src={Basic} />
1060
1061## Installation
1062
1063Run the following command to add the avatar component to your project.
1064
1065\`\`\`bash
1066pnpm hip install avatar
1067\`\`\`
1068
1069## Features
1070
1071### Sizes
1072
1073The avatar comes in the standard sizes along with a custom \`xl\` size.
1074
1075<Example src={AvatarSizes} />
1076
1077### Group
1078
1079Avatars can be displayed in groups to show multiple users.
1080
1081<Example src={AvatarGroup} />
1082
1083### Fallbacks
1084
1085Avatars display fallback content when images fail to load or are not provided.
1086
1087<Example src={AvatarFallbacks} />
1088
1089### Button
1090
1091Avatars can be wrapped in a button component for interactive use. The \`AvatarButton\` component provides hover effects with a fade-in overlay.
1092
1093<Example src={AvatarButtonExample} />
1094
1095## Props
1096
1097This is a custom component built for user representation.
1098
1099<PropDocs components={["Avatar"]} />
1100
1101## Related Components
1102
1103- [Badge](/docs/components/status/badge) - For status indicators on avatars
1104- [Card](/docs/components/content/card) - For cards with user avatars
1105- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining avatar aspect ratios
1106- [Typography](/docs/components/content/typography) - For text alongside avatars`,_meta:{filePath:`components/content/avatar.mdx`,fileName:`avatar.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/avatar`}},{title:`Card`,description:`A flexible container component for grouping related content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1107import { Example } from "../../../lib/Example";
1108import { Basic } from "../../../examples/card/basic";
1109import { CardWithImage } from "../../../examples/card/with-image";
1110import { CardSizes } from "../../../examples/card/sizes";
1111import { CardWithActions } from "../../../examples/card/with-actions";
1112import { CardWithBadges } from "../../../examples/card/with-badges";
1113
1114<Example src={Basic} />
1115
1116## Installation
1117
1118Run the following command to add the card component to your project.
1119
1120\`\`\`bash
1121pnpm hip install card
1122\`\`\`
1123
1124## Features
1125
1126### With Image
1127
1128Cards can include images with customizable aspect ratios.
1129
1130<Example src={CardWithImage} />
1131
1132### With Actions
1133
1134Cards can include header actions for interactive elements.
1135
1136<Example src={CardWithActions} />
1137
1138### With Badges
1139
1140Cards can include badges for status indicators and tags.
1141
1142<Example src={CardWithBadges} />
1143
1144### Sizes
1145
1146The card supports three different sizes that affect padding and spacing.
1147
1148<Example src={CardSizes} />
1149
1150## Props
1151
1152This is a custom component built for grouping related content.
1153
1154<PropDocs
1155 components={[
1156 "Card",
1157 "CardHeader",
1158 "CardTitle",
1159 "CardDescription",
1160 "CardHeaderAction",
1161 "CardBody",
1162 "CardFooter",
1163 "CardImage",
1164 ]}
1165/>
1166
1167## Related Components
1168
1169- [Table](/docs/components/collections/table) - For structured data display
1170- [Badge](/docs/components/status/badge) - For status indicators in cards
1171- [Button](/docs/components/buttons/button) - For card actions
1172- [AspectRatio](/docs/components/content/aspect-ratio) - For card images`,_meta:{filePath:`components/content/card.mdx`,fileName:`card.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/card`}},{title:`Content`,description:`A wrapper component that applies consistent spacing styles to content elements.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1173import { Example } from "../../../lib/Example";
1174import { Basic } from "../../../examples/content/basic";
1175import { WithLists } from "../../../examples/content/with-lists";
1176import { WithBlockquote } from "../../../examples/content/with-blockquote";
1177
1178<Example src={Basic} />
1179
1180## Installation
1181
1182Run the following command to add the content component to your project.
1183
1184\`\`\`bash
1185pnpm hip install content
1186\`\`\`
1187
1188## Features
1189
1190### Automatic Spacing
1191
1192The Content component automatically applies consistent margins to child elements:
1193
1194- **Headings (h1-h5)**: Top and bottom margins for proper vertical rhythm
1195- **Paragraphs**: Spacing between paragraphs, with adjusted spacing when nested in lists or blockquotes
1196- **Blockquotes**: Left border, padding, and zero margins for proper indentation
1197- **Lists**: Proper spacing maintained for list items
1198
1199### With Lists
1200
1201The Content component handles spacing for both ordered and unordered lists:
1202
1203<Example src={WithLists} />
1204
1205### With Blockquotes
1206
1207Blockquotes receive special styling with proper indentation and spacing:
1208
1209<Example src={WithBlockquote} />
1210
1211## Props
1212
1213<PropDocs components={["Content"]} />
1214
1215## Related Components
1216
1217- [MarkdownContent](/docs/components/content/markdown-content) - For rendering markdown content
1218- [Typography](/docs/components/content/typography) - For semantic typography components
1219- [Text](/docs/components/content/text) - For flexible text styling
1220- [Card](/docs/components/content/card) - For grouping content in containers`,_meta:{filePath:`components/content/content.mdx`,fileName:`content.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/content`}},{title:`Editable Text`,description:`An inline editable text component that switches between display and edit modes. By default the component will enter edit mode for a long press.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1221import { Example } from "../../../lib/Example";
1222import { Basic } from "../../../examples/editable-text/basic";
1223import { Composition } from "../../../examples/editable-text/composition";
1224
1225<Example src={Basic} />
1226
1227## Installation
1228
1229Run the following command to add the editable text component to your project.
1230
1231\`\`\`bash
1232pnpm hip install editable-text
1233\`\`\`
1234
1235## Features
1236
1237### Composition
1238
1239The editable text component can be composed with other components.
1240
1241<Example src={Composition} />
1242
1243## Props
1244
1245This component is built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/).
1246
1247<PropDocs components={["EditableText"]} />
1248
1249## Related Components
1250
1251- [TextField](/docs/components/form/text-field) - For standard text input fields
1252- [TextArea](/docs/components/form/text-area) - For multi-line text input
1253- [Text](/docs/components/content/text) - For displaying static text`,_meta:{filePath:`components/content/editable-text.mdx`,fileName:`editable-text.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/editable-text`}},{title:`Empty State`,description:`A component for displaying empty states with image, title, description, and actions.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1254import { Example } from "../../../lib/Example";
1255import { Basic } from "../../../examples/empty-state/basic";
1256import { WithActions } from "../../../examples/empty-state/with-actions";
1257import { Sizes } from "../../../examples/empty-state/sizes";
1258
1259<Example src={Basic} />
1260
1261## Installation
1262
1263Run the following command to add the empty-state component to your project.
1264
1265\`\`\`bash
1266pnpm hip install empty-state
1267\`\`\`
1268
1269## Features
1270
1271### With Actions
1272
1273Empty states can include action buttons to guide users.
1274
1275<Example src={WithActions} />
1276
1277### Sizes
1278
1279The empty state supports three different sizes that affect spacing and image size.
1280
1281<Example src={Sizes} />
1282
1283## Props
1284
1285This is a custom component built for displaying empty states.
1286
1287<PropDocs
1288 components={[
1289 "EmptyState",
1290 "EmptyStateImage",
1291 "EmptyStateTitle",
1292 "EmptyStateDescription",
1293 "EmptyStateActions",
1294 ]}
1295/>
1296
1297## Related Components
1298
1299- [Card](/docs/components/content/card) - For grouping related content
1300- [Button](/docs/components/buttons/button) - For empty state actions
1301- [Text](/docs/components/content/text) - For custom text styling`,_meta:{filePath:`components/content/empty-state.mdx`,fileName:`empty-state.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/empty-state`}},{title:`ImageCropper`,description:`A composable, headless React component for interactive image cropping with zoom, pan, and aspect ratio control.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1302import { Example } from "../../../lib/Example";
1303import { Basic } from "../../../examples/image-cropper/basic";
1304import { DialogExample } from "../../../examples/image-cropper/dialog";
1305import { BlobExample } from "../../../examples/image-cropper/blob";
1306
1307<Example src={Basic} />
1308
1309## Installation
1310
1311Run the following command to add the image-cropper component to your project.
1312
1313\`\`\`bash
1314pnpm hip install image-cropper
1315\`\`\`
1316
1317## Example
1318
1319### Blob Data
1320
1321You can also use the image-cropper component with blob data.
1322This is useful when you want to crop an image that is already loaded into the browser.
1323
1324<Example src={BlobExample} />
1325
1326### In a Dialog
1327
1328<Example src={DialogExample} />
1329
1330## Features
1331
1332### Accessibility
1333
1334The ImageCropper component is designed with accessibility in mind:
1335
1336- **Required Description**: The \`ImageCropper.Description\` component is required for screen reader users
1337- **ARIA Attributes**: Automatically includes proper ARIA attributes
1338- **Keyboard Support**: Full keyboard navigation support
1339
1340## Props
1341
1342<PropDocs
1343 components={[
1344 "ImageCropperRoot",
1345 "ImageCropperImage",
1346 "ImageCropperCropArea",
1347 "ImageCropperDescription",
1348 ]}
1349/>
1350
1351## Related Components
1352
1353- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining aspect ratios in layouts
1354- [Card](/docs/components/content/card) - For grouping content in containers`,_meta:{filePath:`components/content/image-cropper.mdx`,fileName:`image-cropper.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/image-cropper`}},{title:`Kbd`,description:`A keyboard key component for displaying keyboard shortcuts and keys.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1355import { Example } from "../../../lib/Example";
1356import { Basic } from "../../../examples/kbd/basic";
1357import { Shortcuts } from "../../../examples/kbd/shortcuts";
1358import { Inline } from "../../../examples/kbd/inline";
1359import { Navigation } from "../../../examples/kbd/navigation";
1360
1361<Example src={Basic} />
1362
1363## Installation
1364
1365Run the following command to add the kbd component to your project.
1366
1367\`\`\`bash
1368pnpm hip install kbd
1369\`\`\`
1370
1371## Features
1372
1373### Shortcuts
1374
1375Display keyboard shortcuts with a combination of keys using the \`+\` separator.
1376
1377<Example src={Shortcuts} />
1378
1379### Inline Usage
1380
1381The Kbd component can be used inline within text for displaying keyboard shortcuts.
1382
1383<Example src={Inline} />
1384
1385### Navigation Keys
1386
1387Display arrow keys and other navigation keys with proper symbols.
1388
1389<Example src={Navigation} />
1390
1391## Supported Keys
1392
1393The component supports the following special keys:
1394
1395- \`MetaOrCtrl\` - Shows ⌘ on Mac, Ctrl on other platforms
1396- \`Shift\` - Shows ⇧
1397- \`Enter\` - Shows ↵
1398- \`Tab\` - Shows ⇥
1399- \`Backspace\` - Shows ⌫
1400- \`Delete\` - Shows ⌦
1401- \`ArrowLeft\` - Shows ←
1402- \`ArrowRight\` - Shows →
1403- \`ArrowUp\` - Shows ↑
1404- \`ArrowDown\` - Shows ↓
1405- \`Plus\` - Shows +
1406
1407## Props
1408
1409<PropDocs components={["Kbd"]} />
1410
1411## Related Components
1412
1413- [Text](/docs/components/content/text) - For text content around keyboard shortcuts`,_meta:{filePath:`components/content/kbd.mdx`,fileName:`kbd.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/kbd`}},{title:`MarkdownContent`,description:`Renders GitHub-flavored markdown with sanitization to prevent XSS.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1414import { Example } from "../../../lib/Example";
1415import { Basic } from "../../../examples/markdown-content/basic";
1416
1417<Example src={Basic} />
1418
1419## Installation
1420
1421Run the following command to add the markdown-content component to your project.
1422
1423\`\`\`bash
1424pnpm hip install markdown-content
1425\`\`\`
1426
1427## Features
1428
1429### GitHub-Flavored Markdown
1430
1431The component supports GitHub-flavored markdown including tables, strikethrough, and autolinks.
1432
1433### Sanitization
1434
1435Content is sanitized via rehype-sanitize to prevent XSS attacks.
1436
1437## Props
1438
1439<PropDocs components={["MarkdownContent"]} />
1440
1441## Related Components
1442
1443- [Typography](/docs/components/content/typography) - For semantic typography components
1444- [Link](/docs/components/navigation/link) - For links within markdown
1445- [Content](/docs/components/content/content) - For consistent content spacing`,_meta:{filePath:`components/content/markdown-content.mdx`,fileName:`markdown-content.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/markdown-content`}},{title:`Separator`,description:`A visual divider component for separating content sections.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1446import { Example } from "../../../lib/Example";
1447import { Basic } from "../../../examples/separator/basic";
1448import { SeparatorOrientation } from "../../../examples/separator/orientation";
1449
1450<Example src={Basic} />
1451
1452## Installation
1453
1454Run the following command to add the separator component to your project.
1455
1456\`\`\`bash
1457pnpm hip install separator
1458\`\`\`
1459
1460## Features
1461
1462### Orientation
1463
1464Separators can be oriented horizontally or vertically.
1465
1466<Example src={SeparatorOrientation} />
1467
1468## Props
1469
1470This component is built using the [React Aria Separator](https://react-spectrum.adobe.com/react-aria/useSeparator.html#useseparator).
1471
1472<PropDocs components={["Separator"]} />
1473
1474## Related Components
1475
1476- [Flex](/docs/components/layout/flex) - For layouts that use separators
1477- [Card](/docs/components/content/card) - For cards that use separators
1478- [Menu](/docs/components/collections/menu) - For menu items with separators
1479- [Typography](/docs/components/content/typography) - For text sections with separators`,_meta:{filePath:`components/content/separator.mdx`,fileName:`separator.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/separator`}},{title:`Text`,description:`A flexible text component with comprehensive typography controls.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1480import { Example } from "../../../lib/Example";
1481import { TextExample } from "../../../examples/text/basic";
1482import { TextVariants } from "../../../examples/text/variants";
1483import { TextAlignment } from "../../../examples/text/alignment";
1484import { TextStrikethrough } from "../../../examples/text/strikethrough";
1485import { TextTypography } from "../../../examples/text/typography";
1486
1487<Example src={TextExample} />
1488
1489## Installation
1490
1491Run the following command to add the text component to your project.
1492
1493\`\`\`bash
1494pnpm hip install typography
1495\`\`\`
1496
1497## Features
1498
1499### Tokens
1500
1501The Text component gives you direct acces to all of the [typography tokens](/docs/foundations/typography).
1502You can fully customize the \`font\`, \`size\`, \`weight\`, and \`tracking\` properties.
1503
1504> NOTE: By using this component you are not using the [typeramp](/docs/components/content/typography) component.
1505> It could lead to inconsistent typography across your application.
1506
1507### Variants
1508
1509Choose from semantic color variants:
1510
1511<Example src={TextVariants} />
1512
1513### Alignment
1514
1515Control text alignment:
1516
1517<Example src={TextAlignment} />
1518
1519### Strikethrough
1520
1521Add strikethrough decoration to text:
1522
1523<Example src={TextStrikethrough} />
1524
1525## Props
1526
1527<PropDocs components={["Text"]} />
1528
1529## Related Components
1530
1531- [Typography](/docs/components/content/typography) - For semantic typography components
1532- [Label](/docs/components/form/label) - For form labels
1533- [Link](/docs/components/navigation/link) - For text links`,_meta:{filePath:`components/content/text.mdx`,fileName:`text.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/text`}},{title:`Typography`,description:`A collection of text components for consistent typography throughout your application.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1534import { Example } from "../../../lib/Example";
1535import { Headings } from "../../../examples/typography/headings";
1536import { Text } from "../../../examples/typography/text";
1537import { TextVariants } from "../../../examples/typography/variants";
1538import { Lists } from "../../../examples/typography/lists";
1539import { FontFamilies } from "../../../examples/typography/font-families";
1540import { FontWeights } from "../../../examples/typography/font-weights";
1541import { FontSizes } from "../../../examples/typography/font-sizes";
1542import { LineHeights } from "../../../examples/typography/line-heights";
1543import { LetterSpacing } from "../../../examples/typography/letter-spacing";
1544import { Typeramp } from "../../../examples/typography/typeramp";
1545import { BlockquoteExample } from "../../../examples/typography/blockquote";
1546import { InlineCodeExample } from "../../../examples/typography/inline-code";
1547import { LinkedHeadingExample } from "../../../examples/typography/linked-heading";
1548import { PreExample } from "../../../examples/typography/pre";
1549
1550<Example src={Typeramp} />
1551
1552## Installation
1553
1554Run the following command to add the typography component to your project.
1555
1556\`\`\`bash
1557pnpm hip install typography
1558\`\`\`
1559
1560## Typeramp
1561
1562The typeramp is a composed system that combines individual tokens into semantic text styles.
1563Instead of manually combining tokens each time you need styled text, the typeramp provides pre-composed styles for common use cases.
1564
1565### Why Use a Typeramp?
1566
1567A typeramp provides several key benefits when developing applications:
1568
15691. **Consistency**: Ensures all text follows the same visual hierarchy and spacing rules
15702. **Efficiency**: Reduces the need to manually combine tokens for common text patterns
15713. **Maintainability**: Changes to the design system can be made in one place
15724. **Accessibility**: Built-in responsive behavior and proper contrast ratios
15735. **Semantic Meaning**: Styles are named for their purpose rather than their appearance
1574
1575### Responsive Behavior
1576
1577The typeramp includes responsive font sizes that automatically adjust based on screen size. For example, \`heading1\` uses \`fontSize["4xl"]\` on mobile and \`fontSize["5xl"]\` on medium screens and up.
1578
1579## Features
1580
1581### Text Variants
1582
1583The Body and Label components support secondary variants for styling.
1584
1585<Example src={TextVariants} />
1586
1587### Lists
1588
1589Typography also includes list components.
1590
1591<Example src={Lists} />
1592
1593### Blockquote
1594
1595Typography also includes a blockquote component.
1596
1597<Example src={BlockquoteExample} />
1598
1599### Inline Code
1600
1601Typography also includes an inline code component.
1602
1603<Example src={InlineCodeExample} />
1604
1605### Pre
1606
1607Typography also includes a pre component.
1608
1609<Example src={PreExample} />
1610
1611### Linked Heading
1612
1613Typography also includes a linked heading component that adds anchor links and copy-to-clipboard functionality to headings.
1614
1615<Example src={LinkedHeadingExample} />
1616
1617## Props
1618
1619This is a custom component collection built for typography.
1620
1621<PropDocs
1622 components={[
1623 "Heading1",
1624 "Heading2",
1625 "Heading3",
1626 "Heading4",
1627 "Heading5",
1628 "Body",
1629 "SmallBody",
1630 "LabelText",
1631 "SubLabel",
1632 "Blockquote",
1633 "UnorderedList",
1634 "OrderedList",
1635 "ListItem",
1636 "InlineCode",
1637 "Pre",
1638 "LinkedHeading",
1639 ]}
1640/>
1641
1642## Related Components
1643
1644- [Link](/docs/components/navigation/link) - For text links within typography
1645- [Badge](/docs/components/status/badge) - For status indicators in text
1646- [Card](/docs/components/content/card) - For containing typography content
1647- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/content/typography.mdx`,fileName:`typography.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/typography`}},{title:`Video`,description:`A styled video player built with Media Chrome and sensible default controls.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1648import { Example } from "../../../lib/Example";
1649import { Basic } from "../../../examples/video/basic";
1650
1651<Example src={Basic} />
1652
1653## Installation
1654
1655Run the following command to add the video component to your project.
1656
1657\`\`\`bash
1658pnpm hip install video
1659\`\`\`
1660
1661## Features
1662
1663### Default controls
1664
1665The component ships with play, seek, timeline, volume, and fullscreen controls.
1666
1667### Layout stability
1668
1669The player reserves space with an aspect ratio by default.
1670This helps avoid layout shift while the media metadata loads.
1671
1672### Custom controls
1673
1674Pass custom Media Chrome children when you need a different control layout.
1675If you do not pass children, the default control bar is rendered automatically.
1676
1677## Props
1678
1679<PropDocs components={["Video"]} />
1680
1681## Related Components
1682
1683- [Aspect Ratio](/docs/components/content/aspect-ratio) - For reserving space for other media layouts
1684- [Lightbox](/docs/components/overlays/lightbox) - For immersive media presentation patterns`,_meta:{filePath:`components/content/video.mdx`,fileName:`video.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/video`}},{title:`Calendar`,description:`A calendar displays one or more date grids and allows users to select a single date.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1685import { Example } from "../../../lib/Example";
1686import { DefaultCalendar } from "../../../examples/calendar/default";
1687import { UnavailableDates } from "../../../examples/calendar/unavailable-dates";
1688import { MultipleMonths } from "../../../examples/calendar/multiple-months";
1689
1690This component wraps the headless React Aria Calendar with sensible defaults and StyleX tokens.
1691It renders a header with previous/next buttons and a month heading, and a grid of cells.
1692
1693<Example src={DefaultCalendar} />
1694
1695## Installation
1696
1697Run the following command to add the calendar to your project.
1698
1699\`\`\`bash
1700pnpm hip install calendar
1701\`\`\`
1702
1703## Features
1704
1705### Default
1706
1707Basic calendar with month navigation.
1708
1709<Example src={DefaultCalendar} />
1710
1711### Unavailable Dates
1712
1713You can mark dates as unavailable by passing an array of dates to the \`isDateUnavailable\` prop.
1714
1715<Example src={UnavailableDates} />
1716
1717### Multiple Months
1718
1719You can display multiple months by passing the \`visibleDuration\` prop.
1720
1721<Example src={MultipleMonths} />
1722
1723## Props
1724
1725This component is built using the React Aria Calendar.
1726See the official guide for full behavior and API details.
1727
1728- Docs: [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#reusable-wrappers)
1729
1730<PropDocs components={["Calendar"]} />
1731
1732## Related Components
1733
1734- [Range Calendar](/docs/components/date-and-time/range-calendar) - For date range input
1735- [DatePicker](/docs/components/date-and-time/date-picker) - For date input
1736- [DateRangePicker](/docs/components/date-and-time/date-range-picker) - For date range input
1737- [DateField](/docs/components/date-and-time/date-field) - For date input`,_meta:{filePath:`components/date-and-time/calendar.mdx`,fileName:`calendar.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/calendar`}},{title:`Date Field`,description:`A date input component for selecting dates with proper formatting.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1738import { Example } from "../../../lib/Example";
1739import { Basic } from "../../../examples/date-field/basic";
1740import { LabelVariant } from "../../../examples/date-field/label-variant";
1741import { Validation } from "../../../examples/date-field/validation";
1742import { ValidationWarning } from "../../../examples/date-field/validation-warning";
1743import { ValidationSuccess } from "../../../examples/date-field/validation-success";
1744
1745<Example src={Basic} />
1746
1747## Installation
1748
1749Run the following command to add the date field component to your project.
1750
1751\`\`\`bash
1752pnpm hip install date-field
1753\`\`\`
1754
1755## Features
1756
1757### Label Variant
1758
1759The date field supports two different label variants: vertical and horizontal.
1760
1761<Example src={LabelVariant} />
1762
1763### Validation
1764
1765Use the \`validationState\` prop to indicate when a field has validation errors.
1766Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
1767
1768<Example src={Validation} />
1769
1770Set \`validationState="warning"\` to show a warning state with a description.
1771
1772<Example src={ValidationWarning} />
1773
1774Set \`validationState="valid"\` to show a success state with a description.
1775
1776<Example src={ValidationSuccess} />
1777
1778## Props
1779
1780This component is built using the [React Aria DateField](https://react-spectrum.adobe.com/react-aria/DateField.html).
1781
1782<PropDocs components={["DateField"]} />
1783
1784## Related Components
1785
1786- [TimeField](/docs/components/date-and-time/time-field) - For time input
1787- [TextField](/docs/components/form/text-field) - For general text input
1788- [NumberField](/docs/components/form/number-field) - For numeric input
1789- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/date-field.mdx`,fileName:`date-field.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/date-field`}},{title:`Date Picker`,description:`A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1790import { Example } from "../../../lib/Example";
1791import { Basic } from "../../../examples/date-picker/basic";
1792import { LabelVariant } from "../../../examples/date-picker/label-variant";
1793import { Validation } from "../../../examples/date-picker/validation";
1794import { ValidationWarning } from "../../../examples/date-picker/validation-warning";
1795import { ValidationSuccess } from "../../../examples/date-picker/validation-success";
1796
1797<Example src={Basic} />
1798
1799## Installation
1800
1801Run the following command to add the date picker component to your project.
1802
1803\`\`\`bash
1804pnpm hip install date-picker
1805\`\`\`
1806
1807## Features
1808
1809### Label Variant
1810
1811The date picker supports two different label variants: vertical and horizontal.
1812
1813<Example src={LabelVariant} />
1814
1815### Validation
1816
1817Use the \`validationState\` prop to indicate when a field has validation errors.
1818Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
1819
1820<Example src={Validation} />
1821
1822Set \`validationState="warning"\` to show a warning state with a description.
1823
1824<Example src={ValidationWarning} />
1825
1826Set \`validationState="valid"\` to show a success state with a description.
1827
1828<Example src={ValidationSuccess} />
1829
1830## Props
1831
1832This component is built using the [React Aria DatePicker](https://react-spectrum.adobe.com/react-aria/DatePicker.html).
1833
1834<PropDocs components={["DatePicker"]} />
1835
1836## Related Components
1837
1838- [DateField](/docs/components/date-and-time/date-field) - For date input without popover
1839- [Calendar](/docs/components/date-and-time/calendar) - For standalone calendar display
1840- [RangeCalendar](/docs/components/date-and-time/range-calendar) - For date range selection
1841- [TimeField](/docs/components/date-and-time/time-field) - For time input
1842- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/date-picker.mdx`,fileName:`date-picker.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/date-picker`}},{title:`Date Range Picker`,description:`A date range picker combines date inputs and a RangeCalendar popover to allow users to enter or select a date range.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1843import { Example } from "../../../lib/Example";
1844import { Basic } from "../../../examples/date-range-picker/basic";
1845import { LabelVariant } from "../../../examples/date-range-picker/label-variant";
1846import { Validation } from "../../../examples/date-range-picker/validation";
1847import { ValidationWarning } from "../../../examples/date-range-picker/validation-warning";
1848import { ValidationSuccess } from "../../../examples/date-range-picker/validation-success";
1849
1850<Example src={Basic} />
1851
1852## Installation
1853
1854Run the following command to add the date range picker component to your project.
1855
1856\`\`\`bash
1857pnpm hip install date-range-picker
1858\`\`\`
1859
1860## Features
1861
1862### Label Variant
1863
1864The date range picker supports two different label variants: vertical and horizontal.
1865
1866<Example src={LabelVariant} />
1867
1868### Validation
1869
1870Use the \`validationState\` prop to indicate when a field has validation errors.
1871Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
1872
1873<Example src={Validation} />
1874
1875Set \`validationState="warning"\` to show a warning state with a description.
1876
1877<Example src={ValidationWarning} />
1878
1879Set \`validationState="valid"\` to show a success state with a description.
1880
1881<Example src={ValidationSuccess} />
1882
1883## Props
1884
1885This component is built using the [React Aria DateRangePicker](https://react-spectrum.adobe.com/react-aria/DateRangePicker.html).
1886
1887<PropDocs components={["DateRangePicker"]} />
1888
1889## Related Components
1890
1891- [DatePicker](/docs/components/date-and-time/date-picker) - For single date selection
1892- [RangeCalendar](/docs/components/date-and-time/range-calendar) - For standalone range calendar display
1893- [DateField](/docs/components/date-and-time/date-field) - For date input without popover
1894- [TimeField](/docs/components/date-and-time/time-field) - For time input
1895- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/date-range-picker.mdx`,fileName:`date-range-picker.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/date-range-picker`}},{title:`Range Calendar`,description:`A range calendar lets users select a start and end date from one or more month grids.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1896import { Example } from "../../../lib/Example";
1897import { DefaultRangeCalendar } from "../../../examples/range-calendar/default";
1898import { UnavailableRangeDates } from "../../../examples/range-calendar/unavailable-dates";
1899import { MultipleMonthsRange } from "../../../examples/range-calendar/multiple-months";
1900
1901Select a date range using a calendar grid with previous/next navigation.
1902Supports marking dates unavailable and showing multiple months.
1903
1904<Example src={DefaultRangeCalendar} />
1905
1906## Installation
1907
1908Run the following command to add the range calendar to your project.
1909
1910\`\`\`bash
1911pnpm hip install range-calendar
1912\`\`\`
1913
1914## Features
1915
1916### Unavailable Dates
1917
1918Disable dates via \`isDateUnavailable\`.
1919
1920<Example src={UnavailableRangeDates} />
1921
1922### Multiple Months
1923
1924Show multiple months with \`visibleDuration\`.
1925
1926<Example src={MultipleMonthsRange} />
1927
1928## Props
1929
1930This component is built using the React Aria RangeCalendar.
1931See the official guide for full behavior and API details.
1932
1933- Docs: [React Aria RangeCalendar](https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#reusable-wrappers)
1934
1935<PropDocs components={["RangeCalendar"]} />
1936
1937## Related Components
1938
1939- [DateRangePicker](/docs/components/date-and-time/date-range-picker)
1940- [Calendar](/docs/components/date-and-time/calendar)
1941- [DateField](/docs/components/date-and-time/date-field)`,_meta:{filePath:`components/date-and-time/range-calendar.mdx`,fileName:`range-calendar.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/range-calendar`}},{title:`Time Field`,description:`A time input component for selecting times with proper formatting.`,content:`import { PropDocs } from "../../../lib/PropDocs";
1942import { Example } from "../../../lib/Example";
1943import { Basic } from "../../../examples/time-field/basic";
1944import { LabelVariant } from "../../../examples/time-field/label-variant";
1945import { Sizes } from "../../../examples/time-field/sizes";
1946import { Variants } from "../../../examples/time-field/variants";
1947import { Description } from "../../../examples/time-field/description";
1948import { PrefixAndSuffix } from "../../../examples/time-field/prefix-and-suffix";
1949import { Validation } from "../../../examples/time-field/validation";
1950import { ValidationWarning } from "../../../examples/time-field/validation-warning";
1951import { ValidationSuccess } from "../../../examples/time-field/validation-success";
1952
1953<Example src={Basic} />
1954
1955## Installation
1956
1957Run the following command to add the time field component to your project.
1958
1959\`\`\`bash
1960pnpm hip install time-field
1961\`\`\`
1962
1963## Features
1964
1965### Label Variant
1966
1967The time field supports two different label variants: vertical and horizontal.
1968
1969<Example src={LabelVariant} />
1970
1971### Prefix and Suffix
1972
1973The time field component supports a prefix and suffix.
1974
1975<Example src={PrefixAndSuffix} />
1976
1977### Sizes
1978
1979The time field component comes in three sizes: small, medium, and large.
1980
1981<Example src={Sizes} />
1982
1983### Variants
1984
1985The time field component comes in three variants: primary, secondary, and tertiary.
1986
1987<Example src={Variants} />
1988
1989### Description
1990
1991The time field component supports a description.
1992
1993<Example src={Description} />
1994
1995### Validation
1996
1997Use the \`validationState\` prop to indicate when a field has validation errors.
1998Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
1999
2000<Example src={Validation} />
2001
2002Set \`validationState="warning"\` to show a warning state with a description.
2003
2004<Example src={ValidationWarning} />
2005
2006Set \`validationState="valid"\` to show a success state with a description.
2007
2008<Example src={ValidationSuccess} />
2009
2010## Props
2011
2012This component is built using the [React Aria TimeField](https://react-spectrum.adobe.com/react-aria/TimeField.html).
2013
2014<PropDocs components={["TimeField"]} />
2015
2016## Related Components
2017
2018- [DateField](/docs/components/date-and-time/date-field) - For date input
2019- [TextField](/docs/components/form/text-field) - For general text input
2020- [NumberField](/docs/components/form/number-field) - For numeric input
2021- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/time-field.mdx`,fileName:`time-field.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/time-field`}},{title:`AutocompleteInput`,description:`A text input with a dropdown list of suggestions that filters as you type.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2022import { Example } from "../../../lib/Example";
2023import { Basic } from "../../../examples/autocomplete/basic";
2024
2025<Example src={Basic} />
2026
2027## Installation
2028
2029Run the following command to add the AutocompleteInput component to your project.
2030
2031\`\`\`bash
2032pnpm hip install autocomplete
2033\`\`\`
2034
2035The AutocompleteInput component requires the listbox and text-field components.
2036
2037Install them if you have not already.
2038
2039\`\`\`bash
2040pnpm hip install autocomplete listbox text-field
2041\`\`\`
2042
2043## Props
2044
2045This component is built using the [React Aria Autocomplete](https://react-spectrum.adobe.com/react-aria/Autocomplete.html).
2046
2047<PropDocs components={["AutocompleteInput"]} />
2048
2049## Related Components
2050
2051- [ComboBox](/docs/components/form/combobox) - For selecting from a dropdown with search
2052- [SearchField](/docs/components/form/search-field) - For search input with clear button
2053- [TextField](/docs/components/form/text-field) - For general text input
2054- [Select](/docs/components/form/select) - For dropdown selection without search`,_meta:{filePath:`components/form/autocomplete.mdx`,fileName:`autocomplete.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/autocomplete`}},{title:`Checkbox`,description:`A checkbox component for selecting one or more options from a set.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2055import { Example } from "../../../lib/Example";
2056import { Basic } from "../../../examples/checkbox/basic";
2057import { CheckboxStates } from "../../../examples/checkbox/states";
2058import { CheckboxWithDescription } from "../../../examples/checkbox/with-description";
2059
2060<Example src={Basic} />
2061
2062## Installation
2063
2064Run the following command to add the checkbox component to your project.
2065
2066\`\`\`bash
2067pnpm hip install checkbox
2068\`\`\`
2069
2070## Features
2071
2072### States
2073
2074Checkboxes support different states including checked, unchecked, indeterminate, and disabled.
2075
2076<Example src={CheckboxStates} />
2077
2078### With Description
2079
2080Checkboxes can include descriptive text to provide additional context.
2081
2082<Example src={CheckboxWithDescription} />
2083
2084## Props
2085
2086This component is built using the [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html).
2087
2088<PropDocs components={["Checkbox", "CheckboxGroup"]} />
2089
2090## Related Components
2091
2092- [Radio](/docs/components/form/radio) - For single selection from multiple options
2093- [Switch](/docs/components/form/switch) - For binary toggle choices
2094- [Select](/docs/components/form/select) - For dropdown selection
2095- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/checkbox.mdx`,fileName:`checkbox.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/checkbox`}},{title:`Combo Box`,description:`A combo box component that combines a text input with a dropdown list of options.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2096import { Example } from "../../../lib/Example";
2097import { Basic } from "../../../examples/combobox/basic";
2098import { LabelVariant } from "../../../examples/combobox/label-variant";
2099import { Validation } from "../../../examples/combobox/validation";
2100import { ValidationWarning } from "../../../examples/combobox/validation-warning";
2101import { ValidationSuccess } from "../../../examples/combobox/validation-success";
2102import { Virtualization } from "../../../examples/combobox/virtualization";
2103
2104<Example src={Basic} />
2105
2106## Installation
2107
2108Run the following command to add the combo box component to your project.
2109
2110\`\`\`bash
2111pnpm hip install combobox
2112\`\`\`
2113
2114## Features
2115
2116### Label Variant
2117
2118The combo box supports two different label variants: vertical and horizontal.
2119
2120<Example src={LabelVariant} />
2121
2122### Validation
2123
2124Use the \`validationState\` prop to indicate when a field has validation errors.
2125Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
2126
2127<Example src={Validation} />
2128
2129Set \`validationState="warning"\` to show a warning state with a description.
2130
2131<Example src={ValidationWarning} />
2132
2133Set \`validationState="valid"\` to show a success state with a description.
2134
2135<Example src={ValidationSuccess} />
2136
2137### Virtualization
2138
2139The combo box supports virtualization by providing the \`isVirtualized\` prop.
2140The container must have a fixed height and \`overflow: auto\`.
2141
2142<Example src={Virtualization} />
2143
2144## Props
2145
2146This component is built using the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox.html).
2147
2148<PropDocs
2149 components={[
2150 "ComboBox",
2151 "ComboBoxItem",
2152 "ComboBoxSection",
2153 "ComboBoxSectionHeader",
2154 "ComboBoxSeparator",
2155 ]}
2156/>
2157
2158## Related Components
2159
2160- [Select](/docs/components/form/select) - For dropdown selection without search
2161- [AutocompleteInput](/docs/components/form/autocomplete) - For text input with suggestions
2162- [SearchField](/docs/components/form/search-field) - For search input with clear button
2163- [TextField](/docs/components/form/text-field) - For general text input
2164- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/combobox.mdx`,fileName:`combobox.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/combobox`}},{title:`File Drop Zone`,description:`A file drop zone component for drag and drop file uploads.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2165import { Example } from "../../../lib/Example";
2166import { Basic } from "../../../examples/file-drop-zone/basic";
2167import { DefaultTrigger } from "../../../examples/file-drop-zone/default-trigger";
2168
2169<Example src={Basic} />
2170
2171## Installation
2172
2173Run the following command to add the file drop zone component to your project.
2174
2175\`\`\`bash
2176pnpm hip install file-drop-zone
2177\`\`\`
2178
2179## Features
2180
2181### Default Trigger
2182
2183Use \`FileDropDefaultTrigger\` to make the entire drop zone area clickable. The trigger button is positioned absolutely to cover the entire drop zone.
2184
2185<Example src={DefaultTrigger} />
2186
2187## Props
2188
2189This component is built using the [React Aria DropZone](https://react-spectrum.adobe.com/react-aria/DropZone.html) and [React Aria FileTrigger](https://react-spectrum.adobe.com/react-spectrum/FileTrigger.html#filetrigger).
2190
2191<PropDocs components={["FileDropZone"]} />
2192
2193## Related Components
2194
2195- [Button](/docs/components/buttons/button) - For file upload triggers
2196- [Card](/docs/components/content/card) - For containing file drop zones
2197- [Badge](/docs/components/status/badge) - For file upload status indicators
2198- [Typography](/docs/components/content/typography) - For file upload instructions`,_meta:{filePath:`components/form/file-drop-zone.mdx`,fileName:`file-drop-zone.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/file-drop-zone`}},{title:`Form`,description:`A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2199import { Example } from "../../../lib/Example";
2200import { Basic } from "../../../examples/form/basic";
2201import { WithValidation } from "../../../examples/form/with-validation";
2202import { WithSubmitAndReset } from "../../../examples/form/with-submit-and-reset";
2203
2204<Example src={Basic} />
2205
2206## Installation
2207
2208Run the following command to add the form component to your project.
2209
2210\`\`\`bash
2211pnpm hip install form
2212\`\`\`
2213
2214## Features
2215
2216### Server-Side Validation
2217
2218Forms support server-side validation by providing error messages through the \`validationErrors\` prop. The errors are displayed to the user as soon as they are set, and cleared after the user modifies each field's value.
2219
2220<Example src={WithValidation} />
2221
2222### Submit and Reset
2223
2224Forms support both submit and reset functionality. The \`onSubmit\` event is triggered when a user submits the form with the Enter key or by pressing a submit button. The \`onReset\` event is triggered when a user presses a reset button.
2225
2226<Example src={WithSubmitAndReset} />
2227
2228## Props
2229
2230This component is built using [React Aria Form](https://react-spectrum.adobe.com/react-aria/Form.html).
2231
2232<PropDocs components={["Form"]} />
2233
2234## Related Components
2235
2236- [TextField](/docs/components/form/text-field) - For text input fields in forms
2237- [NumberField](/docs/components/form/number-field) - For numeric input fields in forms
2238- [TextArea](/docs/components/form/text-area) - For multi-line text input in forms
2239- [Select](/docs/components/form/select) - For dropdown selection in forms
2240- [Checkbox](/docs/components/form/checkbox) - For checkbox inputs in forms
2241- [Radio](/docs/components/form/radio) - For radio button inputs in forms
2242- [Button](/docs/components/buttons/button) - For submit and reset buttons in forms`,_meta:{filePath:`components/form/form.mdx`,fileName:`form.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/form`}},{title:`Label`,description:`A label component for form elements with optional descriptions.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2243import { Example } from "../../../lib/Example";
2244import { Basic } from "../../../examples/label/basic";
2245import { LabelSizes } from "../../../examples/label/sizes";
2246
2247<Example src={Basic} />
2248
2249## Installation
2250
2251Run the following command to add the label component to your project.
2252
2253\`\`\`bash
2254pnpm hip install label
2255\`\`\`
2256
2257## Features
2258
2259### Sizes
2260
2261Labels support three different sizes.
2262
2263<Example src={LabelSizes} />
2264
2265## Props
2266
2267This component is built using the [React Aria Label](https://react-spectrum.adobe.com/react-aria/Label.html).
2268
2269<PropDocs components={["Label", "Description"]} />
2270
2271## Related Components
2272
2273- [TextField](/docs/components/form/text-field) - Form inputs that use labels
2274- [Checkbox](/docs/components/form/checkbox) - Form controls that use labels
2275- [Radio](/docs/components/form/radio) - Form controls that use labels
2276- [Switch](/docs/components/form/switch) - Form controls that use labels`,_meta:{filePath:`components/form/label.mdx`,fileName:`label.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/label`}},{title:`Number Field`,description:`A number input component with increment/decrement buttons and validation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2277import { Example } from "../../../lib/Example";
2278import { Basic } from "../../../examples/number-field/basic";
2279import { LabelVariant } from "../../../examples/number-field/label-variant";
2280import { Validation } from "../../../examples/number-field/validation";
2281import { ValidationWarning } from "../../../examples/number-field/validation-warning";
2282import { ValidationSuccess } from "../../../examples/number-field/validation-success";
2283
2284<Example src={Basic} />
2285
2286## Installation
2287
2288Run the following command to add the number field component to your project.
2289
2290\`\`\`bash
2291pnpm hip install number-field
2292\`\`\`
2293
2294## Features
2295
2296### Label Variant
2297
2298The number field supports two different label variants: vertical and horizontal.
2299
2300<Example src={LabelVariant} />
2301
2302### Validation
2303
2304Use the \`validationState\` prop to indicate when a field has validation errors.
2305Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
2306
2307<Example src={Validation} />
2308
2309Set \`validationState="warning"\` to show a warning state with a description.
2310
2311<Example src={ValidationWarning} />
2312
2313Set \`validationState="valid"\` to show a success state with a description.
2314
2315<Example src={ValidationSuccess} />
2316
2317## Props
2318
2319This component is built using the [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html).
2320
2321<PropDocs components={["NumberField"]} />
2322
2323## Related Components
2324
2325- [TextField](/docs/components/form/text-field) - For general text input
2326- [TextArea](/docs/components/form/text-area) - For multi-line text input
2327- [SearchField](/docs/components/form/search-field) - For search input with clear button
2328- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/number-field.mdx`,fileName:`number-field.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/number-field`}},{title:`Radio`,description:`A radio button component for selecting a single option from a group.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2329import { Example } from "../../../lib/Example";
2330import { Basic } from "../../../examples/radio/basic";
2331import { RadioWithDescription } from "../../../examples/radio/with-description";
2332import { RadioHorizontal } from "../../../examples/radio/horizontal";
2333
2334<Example src={Basic} />
2335
2336## Installation
2337
2338Run the following command to add the radio component to your project.
2339
2340\`\`\`bash
2341pnpm hip install radio
2342\`\`\`
2343
2344## Features
2345
2346### With Description
2347
2348Radio buttons can include descriptive text to provide additional context.
2349
2350<Example src={RadioWithDescription} />
2351
2352### Horizontal Layout
2353
2354Radio groups can be displayed horizontally for compact layouts.
2355
2356<Example src={RadioHorizontal} />
2357
2358## Props
2359
2360This component is built using the [React Aria Radio](https://react-spectrum.adobe.com/react-aria/Radio.html).
2361
2362<PropDocs components={["Radio", "RadioGroup"]} />
2363
2364## Related Components
2365
2366- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
2367- [Switch](/docs/components/form/switch) - For binary toggle choices
2368- [Select](/docs/components/form/select) - For dropdown selection
2369- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/radio.mdx`,fileName:`radio.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/radio`}},{title:`Search Field`,description:`A search input component with built-in search icon and clear functionality.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2370import { Example } from "../../../lib/Example";
2371import { Basic } from "../../../examples/search-field/basic";
2372import { LabelVariant } from "../../../examples/search-field/label-variant";
2373import { Validation } from "../../../examples/search-field/validation";
2374import { ValidationWarning } from "../../../examples/search-field/validation-warning";
2375import { ValidationSuccess } from "../../../examples/search-field/validation-success";
2376
2377<Example src={Basic} />
2378
2379## Installation
2380
2381Run the following command to add the search field component to your project.
2382
2383\`\`\`bash
2384pnpm hip install search-field
2385\`\`\`
2386
2387## Features
2388
2389### Label Variant
2390
2391The search field supports two different label variants: vertical and horizontal.
2392
2393<Example src={LabelVariant} />
2394
2395### Validation
2396
2397Use the \`validationState\` prop to indicate when a field has validation errors.
2398Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
2399
2400<Example src={Validation} />
2401
2402Set \`validationState="warning"\` to show a warning state with a description.
2403
2404<Example src={ValidationWarning} />
2405
2406Set \`validationState="valid"\` to show a success state with a description.
2407
2408<Example src={ValidationSuccess} />
2409
2410## Props
2411
2412This component is built using the [React Aria SearchField](https://react-spectrum.adobe.com/react-aria/SearchField.html).
2413
2414<PropDocs components={["SearchField"]} />
2415
2416## Related Components
2417
2418- [TextField](/docs/components/form/text-field) - For general text input
2419- [AutocompleteInput](/docs/components/form/autocomplete) - For text input with suggestions
2420- [ComboBox](/docs/components/form/combobox) - For searchable dropdown selection
2421- [CommandMenu](/docs/components/collections/command-menu) - For command palette with search
2422- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/search-field.mdx`,fileName:`search-field.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/search-field`}},{title:`Select`,description:`A select component for choosing from a list of options.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2423import { Example } from "../../../lib/Example";
2424import { Basic } from "../../../examples/select/basic";
2425import { LabelVariant } from "../../../examples/select/label-variant";
2426import { SelectWithDescription } from "../../../examples/select/with-description";
2427import { SelectSizes } from "../../../examples/select/sizes";
2428import { Validation } from "../../../examples/select/validation";
2429import { ValidationWarning } from "../../../examples/select/validation-warning";
2430import { ValidationSuccess } from "../../../examples/select/validation-success";
2431import { Virtualization } from "../../../examples/select/virtualization";
2432
2433<Example src={Basic} />
2434
2435## Installation
2436
2437Run the following command to add the select component to your project.
2438
2439\`\`\`bash
2440pnpm hip install select
2441\`\`\`
2442
2443## Features
2444
2445### Label Variant
2446
2447The select supports two different label variants: vertical and horizontal.
2448
2449<Example src={LabelVariant} />
2450
2451### With Description
2452
2453Select components can include descriptive text to provide additional context.
2454
2455<Example src={SelectWithDescription} />
2456
2457### Sizes
2458
2459Select components support different sizes for various use cases.
2460
2461<Example src={SelectSizes} />
2462
2463### Validation
2464
2465Use the \`validationState\` prop to indicate when a field has validation errors.
2466Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
2467
2468<Example src={Validation} />
2469
2470Set \`validationState="warning"\` to show a warning state with a description.
2471
2472<Example src={ValidationWarning} />
2473
2474Set \`validationState="valid"\` to show a success state with a description.
2475
2476<Example src={ValidationSuccess} />
2477
2478### Virtualization
2479
2480The select supports virtualization by providing the \`isVirtualized\` prop.
2481The container must have a fixed height and \`overflow: auto\`.
2482
2483<Example src={Virtualization} />
2484
2485## Props
2486
2487This component is built using the [React Aria Select](https://react-spectrum.adobe.com/react-aria/Select.html).
2488
2489<PropDocs
2490 components={[
2491 "Select",
2492 "SelectItem",
2493 "SelectSection",
2494 "SelectSectionHeader",
2495 "SelectSeparator",
2496 ]}
2497/>
2498
2499## Related Components
2500
2501- [ComboBox](/docs/components/form/combobox) - For searchable dropdown selection
2502- [Radio](/docs/components/form/radio) - For single selection from multiple options
2503- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
2504- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/select.mdx`,fileName:`select.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/select`}},{title:`Slider`,description:`A range input component for selecting values within a specified range.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2505import { Example } from "../../../lib/Example";
2506import { Basic } from "../../../examples/slider/basic";
2507import { Range } from "../../../examples/slider/range";
2508import { WithLabels } from "../../../examples/slider/with-labels";
2509import { Vertical } from "../../../examples/slider/vertical";
2510import { HideValueLabel } from "../../../examples/slider/hide-value-label";
2511import { ValueFormatting } from "../../../examples/slider/value-formatting";
2512import { Disabled } from "../../../examples/slider/disabled";
2513
2514<Example src={Basic} />
2515
2516## Installation
2517
2518Run the following command to add the slider component to your project.
2519
2520\`\`\`bash
2521pnpm hip install slider
2522\`\`\`
2523
2524## Features
2525
2526### Range Selection
2527
2528For selecting a range of values, provide an array as the \`defaultValue\` prop.
2529
2530<Example src={Range} />
2531
2532### Vertical Orientation
2533
2534The slider can be oriented vertically by setting the \`orientation\` prop to "vertical".
2535
2536<Example src={Vertical} />
2537
2538### With Labels
2539
2540Add descriptive labels to slider thumbs using the \`thumbLabels\` prop for better accessibility.
2541
2542<Example src={WithLabels} />
2543
2544### Hide Value Label
2545
2546The value label can be hidden by setting the \`showValueLabel\` prop to false.
2547
2548<Example src={HideValueLabel} />
2549
2550### Value Formatting
2551
2552The value label can be formatted using the \`formatOptions\` prop.
2553This prop is passed to the \`Intl.NumberFormat\` constructor.
2554
2555<Example src={ValueFormatting} />
2556
2557### Disabled
2558
2559The slider can be disabled by setting the \`disabled\` prop to true.
2560
2561<Example src={Disabled} />
2562
2563## Props
2564
2565This component is built using the [React Aria Slider](https://react-spectrum.adobe.com/react-aria/Slider.html).
2566
2567<PropDocs components={["Slider"]} />
2568
2569## Related Components
2570
2571- [NumberField](/docs/components/form/number-field) - For precise numeric input
2572- [Switch](/docs/components/form/switch) - For binary on/off controls
2573- [Checkbox](/docs/components/form/checkbox) - For boolean selections`,_meta:{filePath:`components/form/slider.mdx`,fileName:`slider.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/slider`}},{title:`Switch`,description:`A toggle switch component for binary choices.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2574import { Example } from "../../../lib/Example";
2575import { Basic } from "../../../examples/switch/basic";
2576import { Disabled } from "../../../examples/switch/disabled";
2577
2578<Example src={Basic} />
2579
2580## Installation
2581
2582Run the following command to add the switch component to your project.
2583
2584\`\`\`bash
2585pnpm hip install switch
2586\`\`\`
2587
2588## Features
2589
2590### Disabled
2591
2592The switch can be disabled by setting the \`disabled\` prop to true.
2593
2594<Example src={Disabled} />
2595
2596## Props
2597
2598This component is built using the [React Aria Switch](https://react-spectrum.adobe.com/react-aria/Switch.html).
2599
2600<PropDocs components={["Switch"]} />
2601
2602## Related Components
2603
2604- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
2605- [Radio](/docs/components/form/radio) - For single selection from multiple options
2606- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable button states
2607- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/switch.mdx`,fileName:`switch.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/switch`}},{title:`Text Area`,description:`A multi-line text input component for longer text content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2608import { Example } from "../../../lib/Example";
2609import { Basic } from "../../../examples/text-area/basic";
2610
2611<Example src={Basic} />
2612
2613## Installation
2614
2615Run the following command to add the text area component to your project.
2616
2617\`\`\`bash
2618pnpm hip install text-area
2619\`\`\`
2620
2621## Props
2622
2623This component is built using the [React Aria TextArea](https://react-spectrum.adobe.com/react-aria/TextArea.html).
2624
2625<PropDocs components={["TextArea"]} />
2626
2627## Related Components
2628
2629- [TextField](/docs/components/form/text-field) - For single-line text input
2630- [NumberField](/docs/components/form/number-field) - For numeric input
2631- [SearchField](/docs/components/form/search-field) - For search input with clear button
2632- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/text-area.mdx`,fileName:`text-area.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/text-area`}},{title:`Text Field`,description:`A text input component with support for labels, descriptions, and validation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2633import { Example } from "../../../lib/Example";
2634import { Basic } from "../../../examples/text-field/basic";
2635import { TextFieldVariants } from "../../../examples/text-field/variants";
2636import { TextFieldSizes } from "../../../examples/text-field/sizes";
2637import { LabelVariant } from "../../../examples/text-field/label-variant";
2638import { PasswordField } from "../../../examples/text-field/password";
2639import { PrefixAndSuffix } from "../../../examples/text-field/prefix-and-suffix";
2640import { Validation } from "../../../examples/text-field/validation";
2641import { ValidationWarning } from "../../../examples/text-field/validation-warning";
2642import { ValidationSuccess } from "../../../examples/text-field/validation-success";
2643
2644<Example src={Basic} />
2645
2646## Installation
2647
2648Run the following command to add the text field component to your project.
2649
2650\`\`\`bash
2651pnpm hip install text-field
2652\`\`\`
2653
2654## Features
2655
2656### Label Variant
2657
2658The text field supports two different label variants: vertical and horizontal.
2659
2660<Example src={LabelVariant} />
2661
2662### Prefix and Suffix
2663
2664The text field supports a prefix and suffix.
2665
2666<Example src={PrefixAndSuffix} />
2667
2668### Variants
2669
2670The text field supports different visual variants.
2671
2672<Example src={TextFieldVariants} />
2673
2674### Sizes
2675
2676The text field supports three different sizes.
2677
2678<Example src={TextFieldSizes} />
2679
2680### Password Field
2681
2682Text fields automatically include password visibility toggle when type is set to "password".
2683
2684<Example src={PasswordField} />
2685
2686### Validation
2687
2688Use the \`validationState\` prop to indicate when a field has validation errors.
2689Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.
2690
2691<Example src={Validation} />
2692
2693Set \`validationState="warning"\` to show a warning state with a description.
2694
2695<Example src={ValidationWarning} />
2696
2697Set \`validationState="valid"\` to show a success state with a description.
2698
2699<Example src={ValidationSuccess} />
2700
2701## Props
2702
2703This component is built using the [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html).
2704
2705<PropDocs components={["TextField"]} />
2706
2707## Related Components
2708
2709- [TextArea](/docs/components/form/text-area) - For multi-line text input
2710- [NumberField](/docs/components/form/number-field) - For numeric input
2711- [SearchField](/docs/components/form/search-field) - For search input with clear button
2712- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/text-field.mdx`,fileName:`text-field.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/text-field`}},{title:`Flex`,description:`A flexible container component for creating flexible layouts.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2713import { Example } from "../../../lib/Example";
2714import { Basic } from "../../../examples/flex/basic";
2715import { FlexDirections } from "../../../examples/flex/directions";
2716import { FlexAlignment } from "../../../examples/flex/alignment";
2717import { FlexWrap } from "../../../examples/flex/wrap";
2718import { FlexGap } from "../../../examples/flex/gap";
2719
2720<Example src={Basic} />
2721
2722## Installation
2723
2724Run the following command to add the flex component to your project.
2725
2726\`\`\`bash
2727pnpm hip install flex
2728\`\`\`
2729
2730## Features
2731
2732### Directions
2733
2734Flex containers can be arranged in different directions.
2735
2736<Example src={FlexDirections} />
2737
2738### Alignment
2739
2740Flex items can be aligned using various justify and align properties.
2741
2742<Example src={FlexAlignment} />
2743
2744### Wrap
2745
2746Flex containers can wrap their children to new lines when needed.
2747
2748<Example src={FlexWrap} />
2749
2750### Gap
2751
2752Flex containers support different gap sizes between items.
2753
2754<Example src={FlexGap} />
2755
2756## Props
2757
2758This is a custom component built for flexible layouts.
2759
2760<PropDocs components={["Flex"]} />
2761
2762## Related Components
2763
2764- [Grid](/docs/components/layout/grid) - For two-dimensional layouts
2765- [Card](/docs/components/content/card) - For grouping content in flex layouts
2766- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons in flex layouts
2767- [Separator](/docs/components/content/separator) - For visual separation in flex layouts`,_meta:{filePath:`components/layout/flex.mdx`,fileName:`flex.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/flex`}},{title:`Grid`,description:`A grid container component for creating two-dimensional layouts.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2768import { Example } from "../../../lib/Example";
2769import { Basic } from "../../../examples/grid/basic";
2770import { GridSpans } from "../../../examples/grid/spans";
2771
2772<Example src={Basic} />
2773
2774## Installation
2775
2776Run the following command to add the grid component to your project.
2777
2778\`\`\`bash
2779pnpm hip install grid
2780\`\`\`
2781
2782## Features
2783
2784### Grid Spans
2785
2786Grid items can span multiple columns and rows.
2787
2788<Example src={GridSpans} />
2789
2790## Props
2791
2792This is a custom component built for grid layouts.
2793
2794<PropDocs components={["Grid", "GridItem"]} />
2795
2796## Related Components
2797
2798- [Flex](/docs/components/layout/flex) - For one-dimensional flexible layouts
2799- [Card](/docs/components/content/card) - For grouping content in grid layouts
2800- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining aspect ratios in grid items
2801- [Table](/docs/components/collections/table) - For structured data in grid layouts`,_meta:{filePath:`components/layout/grid.mdx`,fileName:`grid.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/grid`}},{title:`Page`,description:`A flexible page layout component with small and large variants for headers, titles, and sticky headers/footers.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2802import { Example } from "../../../lib/Example";
2803import { Basic } from "../../../examples/page/basic";
2804import { LargeVariant } from "../../../examples/page/large-variant";
2805import { WithIcon } from "../../../examples/page/with-icon";
2806
2807<Example src={Basic} />
2808
2809## Installation
2810
2811Run the following command to add the page component to your project.
2812
2813\`\`\`bash
2814pnpm hip install page
2815\`\`\`
2816
2817## Features
2818
2819### Small Variant
2820
2821A narrow page layout (max-width 880px) for focused content like forms or detail views.
2822
2823<Example src={Basic} />
2824
2825### Large Variant
2826
2827A full-width page layout with support for icons, descriptions, and action buttons in the header.
2828
2829<Example src={LargeVariant} />
2830
2831### With Icon
2832
2833Add an icon to the large page header for visual hierarchy.
2834
2835<Example src={WithIcon} />
2836
2837## Props
2838
2839<PropDocs
2840 components={[
2841 "PageRoot",
2842 "PageHeader",
2843 "PageBackLink",
2844 "PageTitle",
2845 "PageDescription",
2846 "PageActions",
2847 "PageIcon",
2848 "PageStickyHeader",
2849 "PageStickyFooter",
2850 ]}
2851/>
2852
2853## Related Components
2854
2855- [Flex](/docs/components/layout/flex) - For flexible layouts within page content
2856- [Footer](/docs/components/navigation/footer) - For page footers
2857- [Header Layout](/docs/components/navigation/header-layout) - For app-level headers`,_meta:{filePath:`components/layout/page.mdx`,fileName:`page.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/page`}},{title:`Toolbar`,description:`A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes, with arrow key navigation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2858import { Example } from "../../../lib/Example";
2859import { Basic } from "../../../examples/toolbar/basic";
2860import { Vertical } from "../../../examples/toolbar/vertical";
2861import { WithCheckbox } from "../../../examples/toolbar/with-checkbox";
2862
2863<Example src={Basic} />
2864
2865## Installation
2866
2867Run the following command to add the toolbar component to your project.
2868
2869\`\`\`bash
2870pnpm hip install toolbar
2871\`\`\`
2872
2873## Features
2874
2875### Vertical Orientation
2876
2877Toolbars can be oriented vertically for vertical layouts. The arrow key navigation behavior adapts accordingly.
2878
2879<Example src={Vertical} />
2880
2881### Interactive Controls
2882
2883Toolbars can contain various interactive controls including buttons, toggle buttons, checkboxes, and more.
2884Use the \`ToolbarGroup\` component to group related controls together.
2885
2886<Example src={WithCheckbox} />
2887
2888## Props
2889
2890This component is built using [React Aria Toolbar](https://react-spectrum.adobe.com/react-aria/Toolbar.html).
2891
2892<PropDocs components={["Toolbar", "ToolbarGroup", "ToolbarSeparator"]} />
2893
2894## Related Components
2895
2896- [Button](/docs/components/buttons/button) - For clickable actions in toolbars
2897- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable buttons in toolbars
2898- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons together
2899- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons together`,_meta:{filePath:`components/layout/toolbar.mdx`,fileName:`toolbar.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/toolbar`}},{title:`Window Splitter`,description:`A flexible window splitter component for creating resizable panel layouts.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2900import { Example } from "../../../lib/Example";
2901import { Basic } from "../../../examples/window-splitter/basic";
2902import { Vertical } from "../../../examples/window-splitter/vertical";
2903import { ThreePanels } from "../../../examples/window-splitter/three-panels";
2904
2905<Example src={Basic} />
2906
2907## Installation
2908
2909Run the following command to add the window-splitter component to your project.
2910
2911\`\`\`bash
2912pnpm hip install window-splitter
2913\`\`\`
2914
2915## Features
2916
2917### Vertical Layout
2918
2919Panels can be arranged vertically by setting the \`direction\` prop on \`PanelGroup\`.
2920
2921<Example src={Vertical} />
2922
2923### Multiple Panels
2924
2925You can create layouts with three or more panels by adding multiple \`Panel\` and \`PanelResizer\` components.
2926
2927<Example src={ThreePanels} />
2928
2929## Props
2930
2931This component is built using [@window-splitter/react](https://react-window-splitter-six.vercel.app/docs/install), which follows the [WAI-ARIA Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
2932
2933<PropDocs components={["PanelGroup", "Panel", "PanelResizer"]} />
2934
2935## Related Components
2936
2937- [Flex](/docs/components/layout/flex) - For flexible layouts without resizing
2938- [Grid](/docs/components/layout/grid) - For two-dimensional layouts
2939- [Separator](/docs/components/content/separator) - For visual separation`,_meta:{filePath:`components/layout/window-splitter.mdx`,fileName:`window-splitter.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/window-splitter`}},{title:`Breadcrumbs`,description:`Breadcrumbs display a hierarchy of links to the current page or resource in an application.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2940import { Example } from "../../../lib/Example";
2941import { Basic } from "../../../examples/breadcrumbs/basic";
2942import { Disabled } from "../../../examples/breadcrumbs/disabled";
2943
2944<Example src={Basic} />
2945
2946## Installation
2947
2948Run the following command to add the breadcrumbs component to your project.
2949
2950\`\`\`bash
2951pnpm hip install breadcrumbs
2952\`\`\`
2953
2954## Features
2955
2956### Disabled State
2957
2958Breadcrumbs can be disabled to prevent interaction.
2959
2960<Example src={Disabled} />
2961
2962## Props
2963
2964This component is built using the [React Aria Breadcrumbs](https://react-spectrum.adobe.com/react-aria/Breadcrumbs.html).
2965
2966<PropDocs components={["Breadcrumbs", "Breadcrumb"]} />
2967
2968## Related Components
2969
2970- [Link](/docs/components/navigation/link) - For individual navigation links
2971- [Button](/docs/components/buttons/button) - For action buttons
2972- [IconButton](/docs/components/buttons/icon-button) - For icon-only navigation buttons`,_meta:{filePath:`components/navigation/breadcrumbs.mdx`,fileName:`breadcrumbs.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/breadcrumbs`}},{title:`Disclosure Group`,description:`A grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items.`,content:`import { PropDocs } from "../../../lib/PropDocs";
2973import { Example } from "../../../lib/Example";
2974import { Basic } from "../../../examples/disclosure-group/basic";
2975import { DefaultExpanded } from "../../../examples/disclosure-group/default-expanded";
2976import { MultipleExpanded } from "../../../examples/disclosure-group/multiple-expanded";
2977import { Sizes } from "../../../examples/disclosure-group/sizes";
2978import { Separators } from "../../../examples/disclosure-group/separators";
2979
2980<Example src={Basic} />
2981
2982## Installation
2983
2984Run the following command to add the disclosure-group component to your project.
2985
2986\`\`\`bash
2987pnpm hip install disclosure-group
2988\`\`\`
2989
2990## Features
2991
2992### Default Expanded
2993
2994A DisclosureGroup can have one or more disclosures expanded by default using the \`defaultExpandedKeys\` prop. The keys must match the \`id\` props on the child Disclosure components.
2995
2996<Example src={DefaultExpanded} />
2997
2998### Multiple Expanded
2999
3000By default, DisclosureGroup allows only one disclosure to be expanded at a time (accordion behavior). You can enable multiple expanded items by setting \`allowsMultipleExpanded\` to \`true\`.
3001
3002<Example src={MultipleExpanded} />
3003
3004### Sizes
3005
3006DisclosureGroup supports three different sizes: small, medium, and large. The size prop is passed down to all child Disclosure components via SizeContext.
3007
3008<Example src={Sizes} />
3009
3010### Separators
3011
3012You can add separators between each disclosure by using the \`DisclosureGroupSeparator\` component.
3013
3014<Example src={Separators} />
3015
3016## Props
3017
3018This component is built using [React Aria DisclosureGroup](https://react-spectrum.adobe.com/react-aria/DisclosureGroup.html).
3019
3020<PropDocs components={["DisclosureGroup", "DisclosureGroupSeparator"]} />
3021
3022## Related Components
3023
3024- [Disclosure](/docs/components/navigation/disclosure) - For single collapsible sections
3025- [Dialog](/docs/components/overlays/dialog) - For modal content
3026- [Popover](/docs/components/overlays/popover) - For overlay content`,_meta:{filePath:`components/navigation/disclosure-group.mdx`,fileName:`disclosure-group.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/disclosure-group`}},{title:`Disclosure`,description:`A collapsible section of content composed of a heading that expands and collapses a panel.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3027import { Example } from "../../../lib/Example";
3028import { Basic } from "../../../examples/disclosure/basic";
3029import { Expanded } from "../../../examples/disclosure/expanded";
3030import { Disabled } from "../../../examples/disclosure/disabled";
3031import { Sizes } from "../../../examples/disclosure/sizes";
3032
3033<Example src={Basic} />
3034
3035## Installation
3036
3037Run the following command to add the disclosure component to your project.
3038
3039\`\`\`bash
3040pnpm hip install disclosure
3041\`\`\`
3042
3043## Features
3044
3045### Expanded
3046
3047Disclosure can be expanded by default using the \`defaultExpanded\` prop.
3048
3049<Example src={Expanded} />
3050
3051### Disabled State
3052
3053Disclosure can be disabled to prevent interaction.
3054
3055<Example src={Disabled} />
3056
3057### Sizes
3058
3059Disclosure supports three different sizes: small, medium, and large.
3060
3061<Example src={Sizes} />
3062
3063## Props
3064
3065This component is built using the [React Aria Disclosure](https://react-spectrum.adobe.com/react-aria/Disclosure.html).
3066
3067<PropDocs components={["Disclosure", "DisclosureTitle", "DisclosurePanel"]} />
3068
3069## Related Components
3070
3071- [Disclosure Group](/docs/components/navigation/disclosure-group) - For multiple collapsible sections
3072- [Dialog](/docs/components/overlays/dialog) - For modal content
3073- [Popover](/docs/components/overlays/popover) - For overlay content`,_meta:{filePath:`components/navigation/disclosure.mdx`,fileName:`disclosure.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/disclosure`}},{title:`Footer`,description:`A flexible footer component for displaying site information, navigation links, and social media links.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3074import { Example } from "../../../lib/Example";
3075import { Basic } from "../../../examples/footer/basic";
3076import { WithSocialLinks } from "../../../examples/footer/with-social-links";
3077import { WithSections } from "../../../examples/footer/with-sections";
3078import { Centered } from "../../../examples/footer/centered";
3079import { WithSubscribeVertical } from "../../../examples/footer/with-subscribe-vertical";
3080import { WithSubscribeHorizontal } from "../../../examples/footer/with-subscribe-horizontal";
3081import { Comprehensive } from "../../../examples/footer/comprehensive";
3082
3083<Example src={Comprehensive} noPadding />
3084
3085## Installation
3086
3087Run the following command to add the footer component to your project.
3088
3089\`\`\`bash
3090pnpm hip install footer
3091\`\`\`
3092
3093## Features
3094
3095### Minimal
3096
3097A simple footer with just copyright information.
3098
3099<Example src={Basic} noPadding />
3100
3101### With Sections
3102
3103Organize footer content into sections with optional titles.
3104
3105<Example src={WithSections} noPadding />
3106
3107### With Social Links
3108
3109Add social media links with icons to your footer.
3110
3111<Example src={WithSocialLinks} noPadding />
3112
3113### Centered
3114
3115Use the \`isCentered\` prop to center all footer content.
3116
3117<Example src={Centered} noPadding />
3118
3119### With Subscribe (Vertical)
3120
3121Add a newsletter subscription form with vertical layout.
3122
3123<Example src={WithSubscribeVertical} noPadding />
3124
3125### With Subscribe (Horizontal)
3126
3127Add a newsletter subscription form with horizontal layout.
3128
3129<Example src={WithSubscribeHorizontal} noPadding />
3130
3131## Props
3132
3133This is a custom component built for footer layouts.
3134
3135<PropDocs
3136 components={[
3137 "FooterRoot",
3138 "FooterSection",
3139 "FooterNavSection",
3140 "FooterNavGroup",
3141 "FooterCopyright",
3142 "FooterSocialLinkList",
3143 "FooterSocialLinkItem",
3144 "FooterSubscribe",
3145 "FooterSubscribeTitle",
3146 "FooterSubscribeDescription",
3147 "FooterSubscribeInput",
3148 ]}
3149/>
3150
3151## Related Components
3152
3153- [Link](/docs/components/navigation/link) - For navigation links in footer sections
3154- [Navbar](/docs/components/navigation/navbar) - For site navigation
3155- [Grid](/docs/components/layout/grid) - For multi-column footer layouts
3156- [Flex](/docs/components/layout/flex) - For flexible footer layouts`,_meta:{filePath:`components/navigation/footer.mdx`,fileName:`footer.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/footer`}},{title:`HeaderLayout`,description:`A flexible page layout component with unstyled slots for header, page content, and footer.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3157import { Example } from "../../../lib/Example";
3158import { Basic } from "../../../examples/header-layout/basic";
3159import { WithFooter } from "../../../examples/header-layout/with-footer";
3160import { WithHero } from "../../../examples/header-layout/with-hero";
3161import { Styled } from "../../../examples/header-layout/styled";
3162
3163<Example src={Styled} noPadding />
3164
3165## Installation
3166
3167Run the following command to add the header layout component to your project.
3168
3169\`\`\`bash
3170pnpm hip install header-layout
3171\`\`\`
3172
3173## Features
3174
3175### Basic
3176
3177A simple page layout with header and page content slots.
3178
3179<Example src={Basic} noPadding />
3180
3181### With Footer
3182
3183Add a footer slot to your page layout.
3184
3185<Example src={WithFooter} noPadding />
3186
3187### With Hero
3188
3189Add a hero section with primary color background.
3190
3191<Example src={WithHero} noPadding />
3192
3193## Props
3194
3195This is a custom component built for page layouts with header, content, and footer slots.
3196
3197<PropDocs
3198 components={[
3199 "HeaderLayoutRoot",
3200 "HeaderLayoutHeader",
3201 "HeaderLayoutPage",
3202 "HeaderLayoutFooter",
3203 "HeaderLayoutHero",
3204 ]}
3205/>
3206
3207## Related Components
3208
3209- [Flex](/docs/components/layout/flex) - For flexible layouts within slots
3210- [Grid](/docs/components/layout/grid) - For two-dimensional layouts within slots
3211- [Navbar](/docs/components/navigation/navbar) - For navigation in the header slot
3212- [Footer](/docs/components/navigation/footer) - For footer content in the footer slot`,_meta:{filePath:`components/navigation/header-layout.mdx`,fileName:`header-layout.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/header-layout`}},{title:`Link`,description:`A link component for navigation and external references.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3213import { Example } from "../../../lib/Example";
3214import { Basic } from "../../../examples/link/basic";
3215
3216<Example src={Basic} />
3217
3218## Installation
3219
3220Run the following command to add the link component to your project.
3221
3222\`\`\`bash
3223pnpm hip install link
3224\`\`\`
3225
3226## Props
3227
3228This component is built using the [React Aria Link](https://react-spectrum.adobe.com/react-aria/Link.html).
3229
3230<PropDocs components={["Link"]} />
3231
3232## Related Components
3233
3234- [Button](/docs/components/buttons/button) - For action buttons that look like links
3235- [IconButton](/docs/components/buttons/icon-button) - For icon-only navigation buttons
3236- [Typography](/docs/components/content/typography) - For text styling and hierarchy
3237- [Badge](/docs/components/status/badge) - For status indicators on links`,_meta:{filePath:`components/navigation/link.mdx`,fileName:`link.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/link`}},{title:`Navbar`,description:`A responsive navigation bar component with logo, navigation, and action sections. On mobile, navigation and actions are automatically contained in a hamburger menu overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3238import { Example } from "../../../lib/Example";
3239import { Basic } from "../../../examples/navbar/basic";
3240import { Justify } from "../../../examples/navbar/justify";
3241import { WithActions } from "../../../examples/navbar/with-actions";
3242import { AlwaysVisibleActions } from "../../../examples/navbar/always-visible-actions";
3243import { WithMenus } from "../../../examples/navbar/with-menus";
3244import { ActiveLink } from "../../../examples/navbar/active-link";
3245import { Sticky } from "../../../examples/navbar/sticky";
3246
3247<Example src={Basic} noPadding />
3248
3249## Installation
3250
3251Run the following command to add the navbar component to your project.
3252
3253\`\`\`bash
3254pnpm hip install navbar
3255\`\`\`
3256
3257## Features
3258
3259### Sticky Behavior
3260
3261The \`Navbar\` component can be made sticky by using the \`useAnimatedNavbar\` hook.
3262
3263<Example src={Sticky} />
3264
3265### Active Link
3266
3267You can mark a link as active by setting the \`isActive\` prop to \`true\`.
3268
3269<Example src={ActiveLink} />
3270
3271### Navigation Alignment
3272
3273The \`NavbarNavigation\` component supports different alignment options using the \`justify\` prop.
3274
3275<Example src={Justify} />
3276
3277### With Actions
3278
3279Navbars can include action buttons that are automatically moved to the mobile menu.
3280
3281<Example src={WithActions} />
3282
3283### With Menus
3284
3285Navbars can include menus that are displayed when hovering over a button.
3286
3287<Example src={WithMenus} />
3288
3289## Mobile Behavior
3290
3291On mobile devices (below the \`md\` breakpoint), the \`NavbarNavigation\` and \`NavbarAction\` components are automatically hidden and shown in a hamburger menu overlay. When the hamburger menu is clicked, it overlays the available space and renders the navigation and actions in a vertical stack with a separator between them.
3292
3293### Always Visible Actions
3294
3295The \`NavbarAction\` component can be made always visible on mobile by setting the \`alwaysVisible\` prop to \`true\`.
3296
3297<Example src={AlwaysVisibleActions} />
3298
3299## Props
3300
3301This component is built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html).
3302
3303<PropDocs
3304 components={["Navbar", "NavbarLogo", "NavbarNavigation", "NavbarAction"]}
3305/>
3306
3307## Related Components
3308
3309- [Link](/docs/components/navigation/link) - For navigation links in NavbarNavigation
3310- [Button](/docs/components/buttons/button) - For action buttons in NavbarAction
3311- [IconButton](/docs/components/buttons/icon-button) - For icon-based actions
3312- [Flex](/docs/components/layout/flex) - For layout within navbar sections`,_meta:{filePath:`components/navigation/navbar.mdx`,fileName:`navbar.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/navbar`}},{title:`Pagination`,description:`A pagination component for navigating through multiple pages of content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3313import { Example } from "../../../lib/Example";
3314import { Basic } from "../../../examples/pagination/basic";
3315import { FewPages } from "../../../examples/pagination/few-pages";
3316import { CustomMaxVisiblePages } from "../../../examples/pagination/custom-max-visible-pages";
3317
3318<Example src={Basic} />
3319
3320## Installation
3321
3322Run the following command to add the pagination component to your project.
3323
3324\`\`\`bash
3325pnpm hip install pagination
3326\`\`\`
3327
3328## Features
3329
3330### Few Pages
3331
3332Pagination works well with a small number of pages.
3333
3334<Example src={FewPages} />
3335
3336### Custom Max Visible Pages
3337
3338The component can be configured to show a custom number of pages.
3339
3340<Example src={CustomMaxVisiblePages} />
3341
3342## Props
3343
3344<PropDocs components={["Pagination"]} />
3345
3346## Related Components
3347
3348- [Button](/docs/components/buttons/button) - Used internally for pagination controls
3349- [ButtonGroup](/docs/components/buttons/button-group) - For grouping related buttons`,_meta:{filePath:`components/navigation/pagination.mdx`,fileName:`pagination.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/pagination`}},{title:`SidebarLayout`,description:`A flexible page layout component with unstyled slots for sidebar and page content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3350import { Example } from "../../../lib/Example";
3351import { Basic } from "../../../examples/sidebar-layout/basic";
3352import { WithHeaderLayout } from "../../../examples/sidebar-layout/with-header-layout";
3353import { WithHeaderLayoutWrapper } from "../../../examples/sidebar-layout/with-header-layout-wrapper";
3354import { InconsequentialSidebar } from "../../../examples/sidebar-layout/inconsequential-sidebar";
3355
3356<Example src={Basic} noPadding />
3357
3358## Installation
3359
3360Run the following command to add the sidebar layout component to your project.
3361
3362\`\`\`bash
3363pnpm hip install sidebar-layout
3364\`\`\`
3365
3366## Features
3367
3368### InconsequentialSidebar
3369
3370The \`InconsequentialSidebar\` component is a secondary sidebar for supplementary content that is not critical for navigation or core functionality.
3371
3372Unlike \`NavigationSidebar\`, this component:
3373
3374- Does not include mobile drawer support
3375- Simply hides on smaller screens when space is limited
3376- Is designed for content that can be safely hidden without impacting usability
3377
3378#### Use Cases
3379
3380- **Table of Contents**: Display document structure and quick navigation
3381- **Related Links**: Show related articles, resources, or supplementary content
3382- **Filters & Controls**: Secondary filtering options that aren't critical
3383- **Metadata**: Additional information like tags, categories, or timestamps
3384- **Secondary Navigation**: Additional navigation that complements the main sidebar
3385
3386<Example src={InconsequentialSidebar} noPadding />
3387
3388### With Header Layout
3389
3390You can combine the sidebar layout with the header layout to create a page layout with a sidebar and header.
3391
3392<Example src={WithHeaderLayout} noPadding />
3393
3394You can also wrap the sidebar layout in a header layout.
3395
3396<Example src={WithHeaderLayoutWrapper} noPadding />
3397
3398## Props
3399
3400This is a custom component built for page layouts with sidebar and content slots.
3401
3402<PropDocs
3403 components={[
3404 "SidebarLayoutRoot",
3405 "SidebarLayoutNavigationSidebar",
3406 "SidebarLayoutPage",
3407 "SidebarLayoutInconsequentialSidebar",
3408 ]}
3409/>
3410
3411## Related Components
3412
3413- [Flex](/docs/components/layout/flex) - For flexible layouts within slots
3414- [Grid](/docs/components/layout/grid) - For two-dimensional layouts within slots
3415- [Sidebar](/docs/components/navigation/sidebar) - For navigation in the sidebar slot`,_meta:{filePath:`components/navigation/sidebar-layout.mdx`,fileName:`sidebar-layout.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/sidebar-layout`}},{title:`Sidebar`,description:`A sidebar navigation component with support for sections, groups, and collapsible sections.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3416import { Example } from "../../../lib/Example";
3417import { Basic } from "../../../examples/sidebar/basic";
3418import { WithSections } from "../../../examples/sidebar/with-sections";
3419import { WithGroups } from "../../../examples/sidebar/with-groups";
3420
3421<Example src={Basic} />
3422
3423## Installation
3424
3425Run the following command to add the sidebar component to your project.
3426
3427\`\`\`bash
3428pnpm hip install sidebar
3429\`\`\`
3430
3431## Features
3432
3433### With Sections
3434
3435Organize sidebar items into sections with titles.
3436
3437<Example src={WithSections} />
3438
3439### With Groups
3440
3441Create collapsible groups for organizing content hierarchically.
3442
3443<Example src={WithGroups} />
3444
3445## Components
3446
3447- \`Sidebar\` - The main container component
3448- \`SidebarHeader\` - Header section, can be a link
3449- \`SidebarGroup\` - Collapsible group with disclosure panel
3450- \`SidebarSection\` - Non-collapsible section with title
3451- \`SidebarItem\` - Individual navigation items
3452
3453## Props
3454
3455<PropDocs
3456 components={[
3457 "Sidebar",
3458 "SidebarHeader",
3459 "SidebarGroup",
3460 "SidebarSection",
3461 "SidebarItem",
3462 ]}
3463/>
3464
3465## Related Components
3466
3467- [Link](/docs/components/navigation/link) - For navigation links
3468- [Button](/docs/components/buttons/button) - Used in SidebarGroup
3469- [Flex](/docs/components/layout/flex) - For layout`,_meta:{filePath:`components/navigation/sidebar.mdx`,fileName:`sidebar.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/sidebar`}},{title:`TableOfContents`,description:`A table of contents component that displays a navigation tree based on document headings and automatically highlights the currently visible section.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3470import { Example } from "../../../lib/Example";
3471import { Basic } from "../../../examples/table-of-contents/basic";
3472
3473<Example src={Basic} noPadding />
3474
3475## Installation
3476
3477Run the following command to add the table of contents component to your project.
3478
3479\`\`\`bash
3480pnpm hip install table-of-contents
3481\`\`\`
3482
3483## Props
3484
3485<PropDocs components={["TableOfContents"]} />
3486
3487## Related Components
3488
3489- [Sidebar](/docs/components/navigation/sidebar) - For navigation menus
3490- [Breadcrumbs](/docs/components/navigation/breadcrumbs) - For showing navigation path
3491- [Link](/docs/components/navigation/link) - For navigation links
3492- [Content](/docs/components/content/content) - For document content layout`,_meta:{filePath:`components/navigation/table-of-contents.mdx`,fileName:`table-of-contents.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/table-of-contents`}},{title:`Tabs`,description:`Tabs organize content into multiple sections and allow users to navigate between them.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3493import { Example } from "../../../lib/Example";
3494import { Basic } from "../../../examples/tabs/basic";
3495import { Disabled } from "../../../examples/tabs/disabled";
3496import { Size } from "../../../examples/tabs/size";
3497import { Orientation } from "../../../examples/tabs/orientation";
3498
3499<Example src={Basic} />
3500
3501## Installation
3502
3503Run the following command to add the tabs component to your project.
3504
3505\`\`\`bash
3506pnpm hip install tabs
3507\`\`\`
3508
3509## Features
3510
3511### Disabled State
3512
3513Tabs can be disabled to prevent interaction.
3514
3515<Example src={Disabled} />
3516
3517### Sizes
3518
3519Tabs support three different sizes: small, medium, and large.
3520
3521<Example src={Size} />
3522
3523### Orientation
3524
3525Tabs can be displayed horizontally or vertically.
3526
3527<Example src={Orientation} />
3528
3529## Props
3530
3531This component is built using [React Aria Tabs](https://react-spectrum.adobe.com/react-aria/Tabs.html).
3532
3533<PropDocs components={["Tabs", "TabList", "Tab", "TabPanel"]} />
3534
3535## Related Components
3536
3537- [Segmented Control](/docs/components/buttons/segmented-control) - For mutually exclusive options
3538- [Menu](/docs/components/collections/menu) - For dropdown navigation
3539- [Disclosure](/docs/components/navigation/disclosure) - For collapsible content sections`,_meta:{filePath:`components/navigation/tabs.mdx`,fileName:`tabs.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/tabs`}},{title:`Alert Dialog`,description:`A modal dialog component specifically designed for critical actions and confirmations.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3540import { Example } from "../../../lib/Example";
3541import { Basic } from "../../../examples/alert-dialog/basic";
3542
3543<Example src={Basic} />
3544
3545## Installation
3546
3547Run the following command to add the alert dialog component to your project.
3548
3549\`\`\`bash
3550pnpm hip install alert-dialog
3551\`\`\`
3552
3553## Props
3554
3555This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html) with the \`alertdialog\` role.
3556
3557<PropDocs
3558 components={[
3559 "AlertDialog",
3560 "AlertDialogHeader",
3561 "AlertDialogDescription",
3562 "AlertDialogFooter",
3563 "AlertDialogCancelButton",
3564 "AlertDialogActionButton",
3565 ]}
3566/>
3567
3568## Related Components
3569
3570- [Dialog](/docs/components/overlays/dialog) - For general modal dialogs
3571- [Button](/docs/components/buttons/button) - For dialog action buttons
3572- [Popover](/docs/components/overlays/popover) - For non-modal overlays
3573- [Tooltip](/docs/components/overlays/tooltip) - For contextual help`,_meta:{filePath:`components/overlays/alert-dialog.mdx`,fileName:`alert-dialog.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/alert-dialog`}},{title:`Dialog`,description:`A modal dialog component for displaying content in an overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3574import { Example } from "../../../lib/Example";
3575import { Basic } from "../../../examples/dialog/basic";
3576import { DialogForm } from "../../../examples/dialog/form";
3577import { LongContentDialog } from "../../../examples/dialog/long-content";
3578import { DialogSizes } from "../../../examples/dialog/sizes";
3579
3580<Example src={Basic} />
3581
3582### Long Content
3583
3584Dialogs can handle long-form content inside the body while keeping the surrounding chrome usable.
3585
3586<Example src={LongContentDialog} />
3587
3588## Installation
3589
3590Run the following command to add the dialog component to your project.
3591
3592\`\`\`bash
3593pnpm hip install dialog
3594\`\`\`
3595
3596## Features
3597
3598### Form Dialog
3599
3600Dialogs can contain forms for data collection and user input.
3601
3602<Example src={DialogForm} />
3603
3604### Sizes
3605
3606Dialogs support different sizes to accommodate various content types.
3607
3608<Example src={DialogSizes} />
3609
3610## Props
3611
3612This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).
3613
3614<PropDocs
3615 components={["Dialog", "DialogHeader", "DialogDescription", "DialogFooter"]}
3616/>
3617
3618## Related Components
3619
3620- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
3621- [Popover](/docs/components/overlays/popover) - For non-modal overlays
3622- [Button](/docs/components/buttons/button) - For dialog action buttons
3623- [Form](/docs/components/form/form) - For forms within dialogs`,_meta:{filePath:`components/overlays/dialog.mdx`,fileName:`dialog.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/dialog`}},{title:`Drawer`,description:`A modal drawer component that slides in from the side for displaying content in an overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3624import { Example } from "../../../lib/Example";
3625import { Basic } from "../../../examples/drawer/basic";
3626import { DrawerSizes } from "../../../examples/drawer/sizes";
3627import { DrawerDirections } from "../../../examples/drawer/directions";
3628import { DrawerNonModal } from "../../../examples/drawer/non-modal";
3629
3630<Example src={Basic} />
3631
3632## Installation
3633
3634Run the following command to add the drawer component to your project.
3635
3636\`\`\`bash
3637pnpm hip install drawer
3638\`\`\`
3639
3640## Features
3641
3642### Sizes
3643
3644Drawers support different sizes to accommodate various content types.
3645
3646<Example src={DrawerSizes} />
3647
3648### Directions
3649
3650Drawers can be positioned in four different directions: left, right, top, and bottom.
3651
3652<Example src={DrawerDirections} />
3653
3654### Non-Modal
3655
3656If you need the page to be interactive while the drawer is open, you can set the \`isNonModal\` prop to \`true\`.
3657
3658<Example src={DrawerNonModal} />
3659
3660## Props
3661
3662This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).
3663
3664<PropDocs
3665 components={[
3666 "Drawer",
3667 "DrawerHeader",
3668 "DrawerDescription",
3669 "DrawerBody",
3670 "DrawerFooter",
3671 ]}
3672/>
3673
3674## Related Components
3675
3676- [Dialog](/docs/components/overlays/dialog) - For centered modal dialogs
3677- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
3678- [Popover](/docs/components/overlays/popover) - For non-modal overlays
3679- [Button](/docs/components/buttons/button) - For drawer action buttons
3680- [Form](/docs/components/form/form) - For forms within drawers`,_meta:{filePath:`components/overlays/drawer.mdx`,fileName:`drawer.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/drawer`}},{title:`Hover Card`,description:`A hover card component that displays content when hovering over a trigger element.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3681import { Example } from "../../../lib/Example";
3682import { Basic } from "../../../examples/hover-card/basic";
3683import { WithRichContent } from "../../../examples/hover-card/with-rich-content";
3684
3685<Example src={Basic} />
3686
3687## Installation
3688
3689Run the following command to add the hover card component to your project.
3690
3691\`\`\`bash
3692pnpm hip install hover-card
3693\`\`\`
3694
3695## Features
3696
3697### With Rich Content
3698
3699Hover cards can display complex content like user profiles or detailed information.
3700
3701<Example src={WithRichContent} />
3702
3703## Accessibility Considerations
3704
3705A hover card acts different depending on the input modality.
3706
3707- \`mouse\` - The hover card is displayed when the mouse hovers over the trigger element.
3708- \`touch\` - The hover card is displayed when the touch device is touched over the trigger element.
3709- \`keyboard\` - The hover card is displayed when the keyboard is focused and the enter key is pressed on the trigger element.
3710
3711## Props
3712
3713This component is built using the [React Aria Components](https://react-spectrum.adobe.com/react-aria/).
3714
3715<PropDocs components={["HoverCard"]} />
3716
3717## Related Components
3718
3719- [Popover](/docs/components/overlays/popover) - For click-triggered overlays
3720- [Tooltip](/docs/components/overlays/tooltip) - For simple contextual help
3721- [Dialog](/docs/components/overlays/dialog) - For modal overlays`,_meta:{filePath:`components/overlays/hover-card.mdx`,fileName:`hover-card.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/hover-card`}},{title:`Lightbox`,description:`A full-screen overlay for viewing images with navigation between multiple images.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3722import { Example } from "../../../lib/Example";
3723import { Basic } from "../../../examples/lightbox/basic";
3724
3725<Example src={Basic} />
3726
3727## Installation
3728
3729Run the following command to add the lightbox component to your project.
3730
3731\`\`\`bash
3732pnpm hip install lightbox
3733\`\`\`
3734
3735## Features
3736
3737### Controlled
3738
3739The lightbox is controlled via \`isOpen\` and \`onOpenChange\`.
3740Use a button or other trigger to open it and set \`onOpenChange(false)\` to close.
3741
3742### Keyboard navigation
3743
3744When multiple images are provided, use Arrow Left and Arrow Right to navigate.
3745
3746### Click to dismiss
3747
3748Click the backdrop or press Escape to close the lightbox.
3749
3750## Props
3751
3752<PropDocs components={["Lightbox"]} />
3753
3754## Related Components
3755
3756- [Dialog](/docs/components/overlays/dialog) - For modal content overlays
3757- [ImageCropper](/docs/components/content/image-cropper) - For cropping images`,_meta:{filePath:`components/overlays/lightbox.mdx`,fileName:`lightbox.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/lightbox`}},{title:`Popover`,description:`A popover component for displaying content in an overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3758import { Example } from "../../../lib/Example";
3759import { Basic } from "../../../examples/popover/basic";
3760
3761<Example src={Basic} />
3762
3763## Installation
3764
3765Run the following command to add the popover component to your project.
3766
3767\`\`\`bash
3768pnpm hip install popover
3769\`\`\`
3770
3771## Props
3772
3773This component is built using the [React Aria Popover](https://react-spectrum.adobe.com/react-aria/Popover.html).
3774
3775{/* <PropDocs components={["Popover"]} /> */}
3776
3777## Related Components
3778
3779- [Dialog](/docs/components/overlays/dialog) - For modal overlays
3780- [Tooltip](/docs/components/overlays/tooltip) - For contextual help overlays
3781- [Menu](/docs/components/collections/menu) - For dropdown menus
3782- [ContextMenu](/docs/components/collections/context-menu) - For right-click context menus`,_meta:{filePath:`components/overlays/popover.mdx`,fileName:`popover.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/popover`}},{title:`Tooltip`,description:`A tooltip component that displays helpful information on hover.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3783import { Example } from "../../../lib/Example";
3784import { Basic } from "../../../examples/tooltip/basic";
3785import { TooltipPlacements } from "../../../examples/tooltip/placements";
3786
3787<Example src={Basic} />
3788
3789## Installation
3790
3791Run the following command to add the tooltip component to your project.
3792
3793\`\`\`bash
3794pnpm hip install tooltip
3795\`\`\`
3796
3797## Features
3798
3799### Placements
3800
3801Tooltips can be positioned in different directions around the trigger element.
3802
3803<Example src={TooltipPlacements} />
3804
3805## Usage Guidelines
3806
3807When using tooltips, follow these best practices:
3808
3809### Do
3810
3811- Use tooltips to provide additional context for UI elements that may be unclear
3812- Keep tooltip content brief and focused
3813- Use tooltips for icon-only buttons or truncated text that needs clarification
3814- Use tooltips for supplementary information that's not critical for basic task completion
3815
3816### Don't
3817
3818- Put essential information only in tooltips - critical content should be visible by default
3819- Use tooltips for complex interactive content (use a popover or modal instead)
3820- Place tooltips on disabled elements (users can't hover/focus them)
3821- Nest tooltips within other tooltips
3822- Use tooltips for content that needs to be persistent or copied
3823- Make tooltips too long - keep them concise and scannable
3824
3825## Props
3826
3827This component is built using the [React Aria Tooltip](https://react-spectrum.adobe.com/react-aria/Tooltip.html).
3828
3829<PropDocs components={["Tooltip"]} />
3830
3831## Related Components
3832
3833- [Popover](/docs/components/overlays/popover) - For more complex overlay content
3834- [IconButton](/docs/components/buttons/icon-button) - Often used with tooltips for context
3835- [Button](/docs/components/buttons/button) - Can be enhanced with tooltips
3836- [Badge](/docs/components/status/badge) - Can be enhanced with tooltips for additional info`,_meta:{filePath:`components/overlays/tooltip.mdx`,fileName:`tooltip.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/tooltip`}},{title:`Alert`,description:`An Alert displays important information to users in a prominent way, typically used for notifications, warnings, or feedback.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3837import { Example } from "../../../lib/Example";
3838import { Basic } from "../../../examples/alert/basic";
3839import { Variants } from "../../../examples/alert/variants";
3840import { TitleOnly } from "../../../examples/alert/title-only";
3841import { WithAction } from "../../../examples/alert/with-action";
3842import { WithActionTitleOnly } from "../../../examples/alert/with-action-title-only";
3843import { Dismissible } from "../../../examples/alert/dismissible";
3844import { TitleOnlyDismissible } from "../../../examples/alert/title-only-dismissible";
3845import { CustomIcon } from "../../../examples/alert/custom-icon";
3846
3847<Example src={Basic} />
3848
3849## Installation
3850
3851Run the following command to add the alert component to your project.
3852
3853\`\`\`bash
3854pnpm hip install alert
3855\`\`\`
3856
3857## Features
3858
3859### Variants
3860
3861Alerts can be one of the following variants:
3862
3863- \`info\` (default) - For informational messages
3864- \`success\` - For successful operations or positive feedback
3865- \`warning\` - For warnings that need attention
3866- \`critical\` - For errors or critical issues
3867
3868Each variant has a distinct color scheme and default icon.
3869
3870<Example src={Variants} />
3871
3872### Title Only
3873
3874Alerts can be displayed with just a title, without a description.
3875
3876<Example src={TitleOnly} />
3877
3878### With Actions
3879
3880Alerts can include action elements such as buttons. On smaller screens, the action area moves to a separate row below the content.
3881
3882<Example src={WithAction} />
3883
3884Title-only alerts can also include actions.
3885
3886<Example src={WithActionTitleOnly} />
3887
3888### Dismissible
3889
3890Alerts can be made dismissible by providing an \`onDismiss\` callback. When \`onDismiss\` is provided, a close button will automatically be displayed.
3891
3892<Example src={Dismissible} />
3893
3894Title-only alerts can also be dismissible.
3895
3896<Example src={TitleOnlyDismissible} />
3897
3898### Custom Icons
3899
3900You can provide a custom icon to override the default icon for each variant.
3901
3902<Example src={CustomIcon} />
3903
3904## Props
3905
3906<PropDocs components={["Alert"]} />
3907
3908## Related Components
3909
3910- [Badge](/docs/components/status/badge) - For small status indicators
3911- [Toast](/docs/components/status/toast) - For temporary notifications
3912- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations`,_meta:{filePath:`components/status/alert.mdx`,fileName:`alert.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/alert`}},{title:`Badge`,description:`A small status indicator component for highlighting information.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3913import { Example } from "../../../lib/Example";
3914import { Basic } from "../../../examples/badge/basic";
3915import { BadgeVariants } from "../../../examples/badge/variants";
3916import { BadgeSizes } from "../../../examples/badge/sizes";
3917import { BadgeWithIcons } from "../../../examples/badge/with-icons";
3918import { BadgeDismissible } from "../../../examples/badge/dismissible";
3919
3920<Example src={Basic} />
3921
3922## Installation
3923
3924Run the following command to add the badge component to your project.
3925
3926\`\`\`bash
3927pnpm hip install badge
3928\`\`\`
3929
3930## Features
3931
3932### Variants
3933
3934The badge comes in five different variants to convey different types of information.
3935
3936<Example src={BadgeVariants} />
3937
3938### Sizes
3939
3940The badge supports two different sizes.
3941
3942<Example src={BadgeSizes} />
3943
3944### With Icons
3945
3946Badges can include icons to enhance their visual meaning.
3947
3948<Example src={BadgeWithIcons} />
3949
3950### Dismissible
3951
3952Badges can be made dismissible for user interaction.
3953
3954<Example src={BadgeDismissible} />
3955
3956## Props
3957
3958This is a custom component built for status indicators.
3959
3960<PropDocs components={["Badge"]} />
3961
3962## Related Components
3963
3964- [Avatar](/docs/components/content/avatar) - For user avatars with status badges
3965- [Card](/docs/components/content/card) - For cards with status badges
3966- [Table](/docs/components/collections/table) - For table cells with status badges
3967- [Button](/docs/components/buttons/button) - For buttons with notification badges`,_meta:{filePath:`components/status/badge.mdx`,fileName:`badge.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/badge`}},{title:`Meter`,description:`A gauge component for displaying scalar measurements within a known range.`,content:`import { PropDocs } from "../../../lib/PropDocs";
3968import { Example } from "../../../lib/Example";
3969import { Basic } from "../../../examples/meter/basic";
3970import { WithoutValueLabel } from "../../../examples/meter/without-value-label";
3971import { Sizes } from "../../../examples/meter/sizes";
3972import { Variants } from "../../../examples/meter/variants";
3973import { CustomRange } from "../../../examples/meter/custom-range";
3974import { ValueFormatting } from "../../../examples/meter/value-formatting";
3975import { CustomValueLabel } from "../../../examples/meter/custom-value-label";
3976
3977<Example src={Basic} />
3978
3979## Installation
3980
3981Run the following command to add the meter component to your project.
3982
3983\`\`\`bash
3984pnpm hip install meter
3985\`\`\`
3986
3987## Features
3988
3989### Sizes
3990
3991The meter supports three different sizes that affect both the bar height and label font size.
3992
3993<Example src={Sizes} />
3994
3995### Variants
3996
3997The meter supports five different variants that affect the color of the bar.
3998
3999<Example src={Variants} />
4000
4001### Custom Range
4002
4003Specify custom min and max values to represent any range of measurements.
4004
4005<Example src={CustomRange} />
4006
4007### Without Value Label
4008
4009The value label can be hidden by setting the \`showValueLabel\` prop to false.
4010
4011<Example src={WithoutValueLabel} />
4012
4013### Value Formatting
4014
4015The value label can be formatted using the \`formatOptions\` prop.
4016This prop is passed to the \`Intl.NumberFormat\` constructor.
4017
4018<Example src={ValueFormatting} />
4019
4020### Custom Value Label
4021
4022The value label can be customized by passing a custom component to the \`valueLabel\` prop.
4023
4024<Example src={CustomValueLabel} />
4025
4026## Props
4027
4028This component is built using the [React Aria Meter](https://react-spectrum.adobe.com/react-aria/Meter.html).
4029
4030<PropDocs components={["Meter"]} />
4031
4032## Related Components
4033
4034- [ProgressBar](/docs/components/status/progress-bar) - For showing completion status
4035- [Slider](/docs/components/form/slider) - For interactive value selection
4036- [Label](/docs/components/form/label) - For form labels`,_meta:{filePath:`components/status/meter.mdx`,fileName:`meter.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/meter`}},{title:`Progress Bar`,description:`A progress indicator component for showing completion status.`,content:`import { PropDocs } from "../../../lib/PropDocs";
4037import { Example } from "../../../lib/Example";
4038import { Basic } from "../../../examples/progress-bar/basic";
4039import { WithoutValueLabel } from "../../../examples/progress-bar/without-value-label";
4040import { WithoutLabel } from "../../../examples/progress-bar/without-label";
4041import { Indeterminate } from "../../../examples/progress-bar/indeterminate";
4042import { Sizes } from "../../../examples/progress-bar/sizes";
4043
4044<Example src={Basic} />
4045
4046## Installation
4047
4048Run the following command to add the progress bar component to your project.
4049
4050\`\`\`bash
4051pnpm hip install progress-bar
4052\`\`\`
4053
4054## Features
4055
4056### Without Value Label
4057
4058The value label can be hidden by setting the \`showValueLabel\` prop to false.
4059
4060<Example src={WithoutValueLabel} />
4061
4062### Without Labels
4063
4064The label is optional and can be omitted for a minimal progress indicator.
4065
4066<Example src={WithoutLabel} />
4067
4068### Indeterminate
4069
4070If your progress is not known, you can omit the \`value\` prop and provide the \`isIndeterminate\` prop to true.
4071
4072<Example src={Indeterminate} />
4073
4074### Sizes
4075
4076The progress bar supports three different sizes.
4077
4078<Example src={Sizes} />
4079
4080## Props
4081
4082This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).
4083
4084<PropDocs components={["ProgressBar"]} />
4085
4086## Related Components
4087
4088- [Slider](/docs/components/form/slider) - For interactive value selection
4089- [Badge](/docs/components/status/badge) - For status indicators
4090- [Label](/docs/components/form/label) - For form labels`,_meta:{filePath:`components/status/progress-bar.mdx`,fileName:`progress-bar.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/progress-bar`}},{title:`Progress Circle`,description:`A circular progress indicator component for showing completion status.`,content:`import { PropDocs } from "../../../lib/PropDocs";
4091import { Example } from "../../../lib/Example";
4092import { Basic } from "../../../examples/progress-circle/basic";
4093import { WithLabel } from "../../../examples/progress-circle/with-label";
4094import { Indeterminate } from "../../../examples/progress-circle/indeterminate";
4095import { Sizes } from "../../../examples/progress-circle/sizes";
4096
4097<Example src={Basic} />
4098
4099## Installation
4100
4101Run the following command to add the progress circle component to your project.
4102
4103\`\`\`bash
4104pnpm hip install progress-circle
4105\`\`\`
4106
4107## Features
4108
4109### With Label
4110
4111The label is optional and can be omitted for a minimal progress indicator.
4112
4113<Example src={WithLabel} />
4114
4115### Indeterminate
4116
4117If your progress is not known, you can omit the \`value\` prop and provide the \`isIndeterminate\` prop to true.
4118This is commonly known as a \`Spinner\`.
4119
4120<Example src={Indeterminate} />
4121
4122### Sizes
4123
4124The progress circle supports three different sizes.
4125
4126<Example src={Sizes} />
4127
4128## Props
4129
4130This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).
4131
4132<PropDocs components={["ProgressCircle"]} />
4133
4134## Related Components
4135
4136- [Progress Bar](/docs/components/status/progress-bar) - For linear progress indicators
4137- [Meter](/docs/components/status/meter) - For displaying values within a range
4138- [Label](/docs/components/form/label) - For form labels`,_meta:{filePath:`components/status/progress-circle.mdx`,fileName:`progress-circle.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/progress-circle`}},{title:`Skeleton`,description:`A loading placeholder component with circle and rectangle variants.`,content:`import { PropDocs } from "../../../lib/PropDocs";
4139import { Example } from "../../../lib/Example";
4140import { Basic } from "../../../examples/skeleton/basic";
4141import { Variants } from "../../../examples/skeleton/variants";
4142import { CircleSizes } from "../../../examples/skeleton/circle-sizes";
4143import { RectangleHeight } from "../../../examples/skeleton/rectangle-height";
4144
4145<Example src={Basic} />
4146
4147## Installation
4148
4149Run the following command to add the skeleton component to your project.
4150
4151\`\`\`bash
4152pnpm hip install skeleton
4153\`\`\`
4154
4155## Features
4156
4157### Variants
4158
4159The skeleton supports two variants: circle and rectangle.
4160
4161<Example src={Variants} />
4162
4163### Circle Sizes
4164
4165When using the circle variant, you must provide a size prop. The skeleton supports three sizes: sm, md, and lg.
4166
4167<Example src={CircleSizes} />
4168
4169### Rectangle Height
4170
4171When using the rectangle variant, you can optionally specify a height. If no height is provided, the skeleton will take the full width of its container.
4172
4173<Example src={RectangleHeight} />
4174
4175## Props
4176
4177This is a custom component built for loading placeholders.
4178
4179<PropDocs components={["Skeleton", "SkeletonGroup"]} />
4180
4181## Related Components
4182
4183- [Progress Circle](/docs/components/status/progress-circle) - For loading indicators
4184- [ProgressBar](/docs/components/status/progress-bar) - For progress indicators`,_meta:{filePath:`components/status/skeleton.mdx`,fileName:`skeleton.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/skeleton`}},{title:`Star Rating`,description:`A rating component with half-star support.`,content:`import { PropDocs } from "../../../lib/PropDocs";
4185import { Example } from "../../../lib/Example";
4186import { Basic } from "../../../examples/star-rating/basic";
4187import { Interactive } from "../../../examples/star-rating/interactive";
4188import { Sizes } from "../../../examples/star-rating/sizes";
4189
4190<Example src={Basic} />
4191
4192## Installation
4193
4194Run the following command to add the star-rating component to your project.
4195
4196\`\`\`bash
4197pnpm hip install star-rating
4198\`\`\`
4199
4200## Features
4201
4202### Interactive
4203
4204Use \`StarRatingInput\` for user-selectable ratings.
4205Supports click, hover preview, and keyboard (arrow keys).
4206Use \`value\` and \`onChange\` for controlled mode, or \`defaultValue\` for uncontrolled.
4207
4208<Example src={Interactive} />
4209
4210### Half-star support
4211
4212The component supports decimal ratings from 0 to 5.
4213Values between 0.25 and 0.74 display a half star.
4214Values of 0.75 and above round up to a full star.
4215
4216### Sizes
4217
4218The \`size\` prop controls the star icon size in pixels (default 16).
4219Both read-only and interactive variants support custom sizes.
4220
4221<Example src={Sizes} />
4222
4223### Review count
4224
4225Optionally display the number of reviews next to the rating.
4226
4227## Props
4228
4229<PropDocs components={["StarRating", "StarRatingInput"]} />
4230
4231## Related Components
4232
4233- [Badge](/docs/components/status/badge) - For status indicators
4234- [Meter](/docs/components/status/meter) - For numeric gauges and progress
4235- [ProgressBar](/docs/components/status/progress-bar) - For completion status`,_meta:{filePath:`components/status/star-rating.mdx`,fileName:`star-rating.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/star-rating`}},{title:`Toast`,description:`A Toast displays a brief, temporary notification of actions, errors, or other events in an application.`,content:`import { PropDocs } from "../../../lib/PropDocs";
4236import { Example } from "../../../lib/Example";
4237import { Basic } from "../../../examples/toast/basic";
4238import { Actions } from "../../../examples/toast/actions";
4239import { Icons } from "../../../examples/toast/icons";
4240
4241<Example src={Basic} />
4242
4243## Installation
4244
4245Run the following command to add the toast component to your project.
4246
4247\`\`\`bash
4248pnpm hip install toast
4249\`\`\`
4250
4251## Features
4252
4253### Actions
4254
4255Toasts can include an action button to perform an action when the user clicks on it.
4256
4257<Example src={Actions} />
4258
4259### Variants and Icons
4260
4261Toasts can be one of the following variants:
4262
4263- \`success\`
4264- \`warning\`
4265- \`critical\`
4266
4267Each variant can include an icon to display alongside the title and description.
4268
4269<Example src={Icons} />
4270
4271## Props
4272
4273This component is built using [React Aria Toast](https://react-spectrum.adobe.com/react-aria/Toast.html).
4274
4275<PropDocs
4276 components={[
4277 "ToastRegion",
4278 "Toast",
4279 "ToastContent",
4280 "ToastTitle",
4281 "ToastDescription",
4282 "ToastClose",
4283 ]}
4284/>
4285
4286## Related Components
4287
4288- [Dialog](/docs/components/overlays/dialog) - For modal dialogs
4289- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
4290- [Popover](/docs/components/overlays/popover) - For non-modal overlays
4291- [Button](/docs/components/buttons/button) - For triggering toasts`,_meta:{filePath:`components/status/toast.mdx`,fileName:`toast.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/toast`}},{title:`Animations`,description:`A shared set of animations for the UI.`,content:`import {
4292 AnimationDurations,
4293 AnimationTimingFunctions,
4294 AllAnimations,
4295} from "../../examples/foundations/animations";
4296
4297Animations provide smooth transitions and visual feedback throughout the UI.
4298Our animation system includes predefined keyframe animations, duration tokens, and timing function tokens that ensure consistent motion across your application.
4299
4300## Usage
4301
4302To use animations, import them from the animations theme file:
4303
4304\`\`\`tsx
4305import {
4306 animations,
4307 animationDuration,
4308 animationTimingFunction,
4309} from "@/components/theme/animations.stylex";
4310
4311const styles = stylex.create({
4312 animated: {
4313 animationName: animations.fadeIn,
4314 animationDuration: animationDuration.default,
4315 animationTimingFunction: animationTimingFunction.easeInOut,
4316 },
4317});
4318\`\`\`
4319
4320## Animation Duration
4321
4322Animation duration tokens control how long an animation takes to complete.
4323Use these tokens to maintain consistent timing across your application.
4324
4325- **fast**: 100ms - For quick, subtle animations
4326- **default**: 150ms - The standard duration for most animations
4327- **slow**: 200ms - For more noticeable transitions
4328- **verySlow**: 300ms - For prominent, attention-grabbing animations
4329- **extremelySlow**: 500ms - For very slow animations
4330
4331<AnimationDurations />
4332
4333## Animation Timing Functions
4334
4335Timing functions control the acceleration and deceleration of animations, creating different motion feels.
4336
4337- **linear**: Constant speed throughout the animation
4338- **easeIn**: Starts slow and accelerates (cubic-bezier curve)
4339- **easeOut**: Starts fast and decelerates (cubic-bezier curve)
4340- **easeInOut**: Slow start, fast middle, slow end (cubic-bezier curve)
4341- **easeElasticOut**: Elastic out (cubic-bezier curve)
4342- **easeElasticIn**: Elastic in (cubic-bezier curve)
4343- **easeElasticInOut**: Elastic in and out (cubic-bezier curve)
4344- **easeSpring**: Spring-like easing (linear curve)
4345
4346<AnimationTimingFunctions />
4347
4348## Animations
4349
4350The following keyframe animations are available for use in your components.
4351Click on any animation box to see it in action.
4352
4353- **fadeIn/fadeOut**: Fades an element in from transparent to opaque
4354- **zoomIn/zoomOut**: Scales an element from 80% to 100% size
4355- **slideInRight/slideOutRight**: Slides in from the right
4356- **slideInLeft/slideOutLeft**: Slides in from the left
4357- **slideInTop/slideOutTop**: Slides in from the top
4358- **slideInBottom/slideOutBottom**: Slides in from the bottom
4359
4360<AllAnimations />`,_meta:{filePath:`foundations/animations.mdx`,fileName:`animations.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/animations`}},{title:`Colors`,description:`An accessible semantic color palette.`,content:`import { GrayColors, UiColors } from "../../examples/foundations/color";
4361
4362## Apprach
4363
4364We use a semantic color palette approach to define our colors.
4365Each color has an intended use case and is named accordingly.
4366
4367Read more about the approach in the [Radix Color Docs](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale).
4368
4369## Base Colors
4370
4371The UI is built on top of the Radix Color palette.
4372There are two type of colors you'll work with:
4373
4374### Gray Colors
4375
4376The gray color is used to style the background and borders of the UI.
4377Each one of these colors matches the tone of a particular UI color.
4378Read more about [componsing a color palette](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette).
4379
4380<GrayColors />
4381
4382### UI Colors
4383
4384These colors are used to style the "primary" state of the UI.
4385This typically matches your brand color.
4386
4387<UiColors />
4388
4389### Scale
4390
4391Each color is a scale of 12 colors.
4392Every color has a specific use:
4393
4394- \`bg\` - App background color
4395- \`bgSubtle\` - Subtle background color
4396- \`component1\` - UI Element background
4397- \`component2\` - Hovered UI Element background
4398- \`component3\` - Active/Selected UI Element background
4399- \`border1\` - Subtle border color
4400- \`border2\` - UI Element border color and focus rings
4401- \`border3\` - Solid border color
4402- \`solid1\` - Solid color
4403- \`solid2\` - Hovered solid color
4404- \`text1\` - Low contrast text color
4405- \`text2\` - High contrast text color
4406
4407## Semantic Colors
4408
4409For the most part you should not work with the base colors directly.
4410Instead, use the semantic colors that are defined in the \`semantic-color.stylex.tsx\` file.
4411
4412Each of these colors represent speficic use cases.
4413You can edit the semantic colors to any of the included base colors to esaily update the base theme.
4414
4415There are four semantic colors:
4416
4417- \`ui\` - The color of the application UI.
4418- \`primary\` - The primary color used for the main brand.
4419- \`success\` - The color of the successful actions.
4420- \`warning\` - The color of the warning actions.
4421- \`critical\` - The color of the error actions.
4422
4423### Usage
4424
4425Use the semantic colors to style your components.
4426
4427\`\`\`tsx
4428import { uiColor } from "@/components/theme/color.stylex";
4429import * as stylex from "@stylexjs/stylex";
4430
4431const styles = stylex.create({
4432 container: {
4433 backgroundColor: uiColor.bg,
4434 color: uiColor.text1,
4435 },
4436});
4437\`\`\`
4438
4439## Semantic Color Classes
4440
4441For convenience, we also provide semantic color classes that you can use to style your components.
4442
4443\`\`\`tsx
4444import { ui } from "@/components/theme/semantic-color.stylex";
4445import { Flex } from "@/components/flex";
4446
4447export function MyComponent() {
4448 return <Flex style={[ui.bg, ui.text1]}>My Component</Flex>;
4449}
4450\`\`\`
4451
4452### List of classes
4453
4454Each color includes 2 sets of classes.
4455
4456#### Utility
4457
4458For each step in the scale, we include a utility class that makes sense for the color.
4459
4460For example:
4461
4462- \`ui.bg\` => sets the background color to \`uiColor.bg\`
4463- \`ui.borderDim\` => sets the border color to \`uiColor.border1\`
4464
4465#### Pattern
4466
4467We also include some classes that compose multiple steps in the scale for hover and active states.
4468
4469- \`borderInteractive\`
4470- \`bgGhost\`
4471- \`bgUi\`
4472- \`bgAction\`
4473- \`bgSolidAction\``,_meta:{filePath:`foundations/colors.mdx`,fileName:`colors.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/colors`}},{title:`Radius`,description:`Foundations for consistent radius values.`,content:`import { Radius } from "../../examples/foundations/spacing";
4474
4475## Usage
4476
4477To use the radius, you can use the \`radius\` object.
4478
4479\`\`\`tsx
4480import { radius } from "@/components/theme/radius.stylex";
4481
4482const styles = stylex.create({
4483 example: {
4484 borderRadius: radius.md,
4485 },
4486});
4487\`\`\`
4488
4489## Scale
4490
4491The following is the default scale of radius.
4492It can be customized by editing the \`radius\` object in the \`radius.stylex.tsx\` file.
4493
4494<Radius />`,_meta:{filePath:`foundations/radius.mdx`,fileName:`radius.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/radius`}},{title:`Shadow`,description:`Use elevation to create a sense of depth in the UI.`,content:`import { Shadow } from "../../examples/foundations/shadow";
4495
4496## Usage
4497
4498To use the shadow, you can use the \`shadow\` object.
4499
4500\`\`\`tsx
4501import { shadow } from "@/components/theme/shadow.stylex";
4502
4503const styles = stylex.create({
4504 example: {
4505 boxShadow: shadow["sm"],
4506 },
4507});
4508\`\`\`
4509
4510## Scale
4511
4512The following is the default scale of shadow.
4513It can be customized by editing the \`shadow\` object in the \`shadow.stylex.tsx\` file.
4514
4515<Shadow />`,_meta:{filePath:`foundations/shadow.mdx`,fileName:`shadow.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/shadow`}},{title:`Spacing`,description:`Build upon consistent spacing to create a consistent design system.`,content:`import {
4516 Gap,
4517 HorizontalSpace,
4518 Size,
4519 VerticalSpace,
4520} from "../../examples/foundations/spacing";
4521
4522## Usage
4523
4524Use semantic spacing tokens in component styles.
4525Semantic tokens make intent clearer than raw numeric spacing values.
4526Use directional and purpose-specific groups for layout:
4527
4528- \`horizontalSpace\` for left and right spacing.
4529- \`verticalSpace\` for top and bottom spacing.
4530- \`gap\` for flex and grid gaps.
4531- \`size\` for width and height sizing.
4532
4533\`\`\`tsx
4534import {
4535 gap,
4536 horizontalSpace,
4537 size,
4538 verticalSpace,
4539} from "@/components/theme/semantic-spacing.stylex";
4540
4541const styles = stylex.create({
4542 example: {
4543 gap: gap.md,
4544 paddingLeft: horizontalSpace.lg,
4545 paddingTop: verticalSpace.md,
4546 minHeight: size.lg,
4547 },
4548});
4549\`\`\`
4550
4551The primitive \`spacing\` scale is still the foundation layer.
4552Most component styles should consume semantic spacing tokens instead of raw spacing keys.
4553
4554## Semantic Spacing Tokens
4555
4556### Horizontal Space
4557
4558<HorizontalSpace />
4559
4560### Vertical Space
4561
4562<VerticalSpace />
4563
4564### Gap
4565
4566<Gap />
4567
4568### Size
4569
4570<Size />`,_meta:{filePath:`foundations/spacing.mdx`,fileName:`spacing.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/spacing`}},{title:`Theming`,description:`Easily theme your entire application or just a part of it.`,content:`import { Example } from "../../lib/Example";
4571import { ThemingExample } from "../../examples/foundations/theming";
4572
4573Any of the foundations can be easily themed to match your brand.
4574
4575This example renders the same card with the default tokens and then with a theme override.
4576
4577<Example src={ThemingExample} />
4578
4579## Semantic Spacing Tokens
4580
4581Use semantic spacing tokens in component styles instead of primitive spacing values.
4582Semantic spacing keeps intent clear and makes global spacing changes safer.
4583
4584\`\`\`tsx
4585import {
4586 gap,
4587 horizontalSpace,
4588 size,
4589 verticalSpace,
4590} from "@/components/theme/semantic-spacing.stylex";
4591
4592const styles = stylex.create({
4593 root: {
4594 gap: gap.md,
4595 paddingLeft: horizontalSpace.lg,
4596 paddingTop: verticalSpace.md,
4597 minHeight: size.lg,
4598 },
4599});
4600\`\`\`
4601
4602When a theme needs different rhythm, override the semantic spacing tokens first.
4603This preserves component intent while allowing global spacing adjustments.
4604
4605## Creating a Theme
4606
4607To start theming your application fist import the tokens you want to theme.
4608
4609\`\`\`tsx
4610import {
4611 primaryColor,
4612 uiColor,
4613} from "@/components/theme/semantic-color.stylex";
4614\`\`\`
4615
4616Then you can set the tokens to your desired values.
4617
4618\`\`\`tsx
4619import * as stylex from "@stylexjs/stylex";
4620
4621import {
4622 primaryColor,
4623 uiColor,
4624} from "@/components/theme/semantic-color.stylex";
4625import { purple } from "@/components/theme/colors/purple.stylex";
4626import { mauve } from "@/components/theme/colors/mauve.stylex";
4627
4628export const myPrimaryColorTheme = stylex.createTheme(primaryColor, {
4629 bg: purple.bg1,
4630 bgSubtle: purple.bg2,
4631 bgDim: purple.component1,
4632 bgSecondary: purple.component2,
4633 bgActive: purple.component3,
4634 borderDim: purple.border1,
4635 border: purple.border2,
4636 borderInteractive: purple.border3,
4637 bgSolid: purple.solid1,
4638 bgSolidDark: purple.solid2,
4639 textDim: purple.text1,
4640 text: purple.text2,
4641 textContrast: purple.textContrast,
4642});
4643
4644export const myUiColorTheme = stylex.createTheme(uiColor, {
4645 bg: mauve.bg1,
4646 bgSubtle: mauve.bg2,
4647 bgDim: mauve.component1,
4648 bgSecondary: mauve.component2,
4649 bgActive: mauve.component3,
4650 borderDim: mauve.border1,
4651 border: mauve.border2,
4652 borderInteractive: mauve.border3,
4653 bgSolid: mauve.solid1,
4654 bgSolidDark: mauve.solid2,
4655 textDim: mauve.text1,
4656 text: mauve.text2,
4657 textContrast: mauve.textContrast,
4658});
4659\`\`\`
4660
4661## Applying a Theme
4662
4663After that all you need to do is apply the theme to your application.
4664
4665\`\`\`tsx
4666import { myPrimaryColorTheme, myUiColorTheme } from "./theme";
4667import * as stylex from "@stylexjs/stylex";
4668
4669export function MyApp() {
4670 return (
4671 <div {...stylex.props(myPrimaryColorTheme, myUiColorTheme)}>
4672 <App />
4673 </div>
4674 );
4675}
4676\`\`\`
4677
4678> NOTE: you can apply a theme to any part of your application, not just the root component.`,_meta:{filePath:`foundations/theming.mdx`,fileName:`theming.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/theming`}},{title:`Typography`,description:`Create consistent and readable typography.`,content:`import { Example } from "../../lib/Example";
4679import { FontFamilies } from "../../examples/typography/font-families";
4680import { FontWeights } from "../../examples/typography/font-weights";
4681import { FontSizes } from "../../examples/typography/font-sizes";
4682import { LineHeights } from "../../examples/typography/line-heights";
4683import { LetterSpacing } from "../../examples/typography/letter-spacing";
4684import { Typeramp } from "../../examples/typography/typeramp";
4685
4686Typography is a fundamental design system component that ensures consistent and readable text across your application.
4687Our typography system is built on a foundation of design tokens and composed into semantic type styles.
4688
4689This page documents the tokens that compose the typography system.
4690In most cases you will not need to use the tokens directly, but instead use the [Typography Components](/docs/components/content/typography) or the [Text Component](/docs/components/content/text) to create styled text.
4691
4692## Tokens
4693
4694Design tokens are the atomic building blocks of our typography system.
4695They provide consistent values for font properties that can be used throughout your application.
4696
4697### Font Family
4698
4699The font family tokens define the typefaces available in the system:
4700
4701- **title**: The font used for headings and titles
4702- **sans**: Inter font family for body text and UI elements
4703- **serif**: Georgia serif font for emphasis, special content or headings
4704- **mono**: Monaco monospace font for code and technical content
4705
4706<Example src={FontFamilies} />
4707
4708### Font Weight
4709
4710We provide the full scale of font weights from thin to black.
4711In general you should avoid using the lighter weights, as they can harm the readability of the text.
4712
4713<Example src={FontWeights} />
4714
4715### Font Size
4716
4717Font size tokens create a harmonious scale from small text to large headings:
4718
4719<Example src={FontSizes} />
4720
4721### Line Height
4722
4723Line height tokens ensure optimal readability by providing appropriate spacing between lines:
4724
4725<Example src={LineHeights} />
4726
4727### Letter Spacing (Tracking)
4728
4729Letter spacing tokens control the space between characters:
4730
4731<Example src={LetterSpacing} />
4732
4733## Related
4734
4735- [Typography Components](/docs/components/content/typography) - Learn about the typography components and using the typeramp
4736- [Spacing](/docs/foundations/spacing) - Understand spacing tokens used in typography`,_meta:{filePath:`foundations/typography.mdx`,fileName:`typography.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/typography`}},{title:`Introduction`,description:`Bootstrap your project and design system with Hip UI.`,content:`import { Technology } from "../examples/introduction";
4737
4738Hip UI is a design system for building modern web applications.
4739It provides a set of components and tokens that help you build your application quickly and efficiently with a consistent design system.
4740
4741Hip 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 [shadcn/ui](https://ui.shadcn.com/docs)).
4742This gives you as much or as little control as you need to build your application.
4743You can use the components and tokens as is, or you can customize them to your liking.
4744
4745The main difference between Hip UI and shadcn/ui is that Hip UI is built on two different technologies:
4746
4747<Technology />
4748
4749Beyond that we've taken extra care to include all the component you might need to render full applications.
4750Whether thats navbars, footer, or page layouts, Hip UI has you covered.
4751
4752## Installation
4753
4754To get started with hip you can either install all the components at once:
4755
4756\`\`\`bash
4757pnpm dlx hip-ui install --all
4758\`\`\`
4759
4760Or add a few core building blocks one by one.
4761In 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.
4762
4763\`\`\`bash
4764pnpm dlx hip-ui install theme
4765pnpm dlx hip-ui install flex
4766pnpm dlx hip-ui install typography
4767pnpm dlx hip-ui install button
4768\`\`\`
4769
4770## Navigating the docs
4771
4772The docs are organized into the following categories:
4773
4774- **Foundations** - The tokens that are use to build the design system and style your UI
4775- **Components** - All the available components in Hip UI, organized by category
4776
4777## Showcases
4778
4779Here is a list of some site that use Hip UI:
4780
4781- [Hip UI Website](https://hip-ui.tngl.io) - The docs you're reading right now!
4782- [kich.io](https://kich.io) - A tool managing your kitchen.`,_meta:{filePath:`introduction.mdx`,fileName:`introduction.mdx`,directory:`.`,extension:`mdx`,path:`introduction`}},{title:`Canvas Editor`,description:`An example showing what building a canvas editor looks like with Hip.`,content:`import { CanvasEditorClientOnly } from "../../showcases/canvas-editor-client-only";
4783
4784<CanvasEditorClientOnly />`,_meta:{filePath:`showcase/canvas-editor.mdx`,fileName:`canvas-editor.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/canvas-editor`}},{title:`Ecommerce App`,description:`An example showing what building an ecommerce app looks like with Hip.`,content:`import { EcommerceApp } from "../../showcases/ecommerce";
4785
4786<EcommerceApp />`,_meta:{filePath:`showcase/ecommerce.mdx`,fileName:`ecommerce.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/ecommerce`}},{title:`Invoice App`,description:`An example showing what building an invoice app looks like with Hip.`,content:`import { InvoiceApp } from "../../showcases/invoice";
4787
4788<InvoiceApp />`,_meta:{filePath:`showcase/invoice.mdx`,fileName:`invoice.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/invoice`}},{title:`LLM App`,description:`An example showing what building an LLM app looks like with Hip.`,content:`import { LLMApp } from "../../showcases/llm";
4789
4790<LLMApp />`,_meta:{filePath:`showcase/llm.mdx`,fileName:`llm.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/llm`}},{title:`Music Cards`,description:`A collection of music-related cards built with Hip components.`,content:`import { MusicCards } from "../../showcases/music";
4791
4792<MusicCards />`,_meta:{filePath:`showcase/music.mdx`,fileName:`music.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/music`}},{title:`Spotify App`,description:`A Spotify-style streaming app showcase built with Hip components.`,content:`import { SpotifyApp } from "../../showcases/spotify";
4793
4794<SpotifyApp />`,_meta:{filePath:`showcase/spotify.mdx`,fileName:`spotify.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/spotify`}},{title:`Todo Table`,description:`A table component for displaying a list of todos.`,content:`import { TodoTable } from "../../showcases/todo-table";
4795
4796<TodoTable />`,_meta:{filePath:`showcase/todo-table.mdx`,fileName:`todo-table.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/todo-table`}}],$={"/docs/introduction":p(()=>import(`./introduction-B_G88cIB.js`),__vite__mapDeps([57,1,58,2,3,4,5,48,14,59,42,18,19,20,7,21,47])),"/docs/ai":p(()=>import(`./ai-DoQmqHiy.js`),__vite__mapDeps([60,1])),"/docs/showcase/todo-table":p(()=>import(`./todo-table-B_c6e9Ix.js`),__vite__mapDeps([61,1,62,2,3,4,5,63,64,18,7,65,19,20,21,22,23,13,11,12,14,24,25,26,27,28,66,39,9,10,49,67,30,31,32,33,34,35,36,16,37,38,29,40,41,42,43,68,69,70,71,47,72,73,74,75,76])),"/docs/showcase/spotify":p(()=>import(`./spotify-Bj_NpGB_.js`),__vite__mapDeps([77,1,62,2,3,4,5,63,64,18,78,7,30,31,32,33,34,10,13,11,12,14,35,36,16,37,38,24,44,45,8,9,15,17,46,47,48,49,79,80,70,76,81,82,83])),"/docs/showcase/music":p(()=>import(`./music-Ch1DMlRO.js`),__vite__mapDeps([84,1,62,2,3,4,5,23,18,13,11,12,14,78,7,19,20,21,24,79,80,70,85,86,10,87,69,26,27,16,88,31,32,33,34,38,89,35,37,90,91,47,81,92,93,83])),"/docs/showcase/llm":p(()=>import(`./llm-D4gbSGQC.js`),__vite__mapDeps([94,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,22,23,24,25,26,27,28,66,39,49,67,95,91,29,30,31,32,33,34,35,36,37,38,40,41,42,43,79,80,70,96,89,88,47,21,97])),"/docs/showcase/invoice":p(()=>import(`./invoice-MVwP9Ygj.js`),__vite__mapDeps([98,1,62,2,3,4,5,63,64,23,18,13,11,12,14,78,7,99,19,20,21,100,22,24,25,26,27,28,66,39,9,10,49,85,88,31,32,33,34,38,89,35,37,90,91,47,71,101,74,76,102,82,103,16])),"/docs/showcase/ecommerce":p(()=>import(`./ecommerce-Dhx0Zjwh.js`),__vite__mapDeps([104,1,62,2,3,4,5,63,64,105,10,106,107,108,109,9,7,11,12,13,14,110,38,43,18,78,99,19,20,21,100,22,23,24,25,26,27,28,111,31,32,33,34,112,113,35,92,82,37,30,36,16,29,39,40,41,42,96,89,88,114,91,90,47,115])),"/docs/showcase/canvas-editor":p(()=>import(`./canvas-editor-YdEM2Xbr.js`),__vite__mapDeps([116,1,52,5])),"/docs/foundations/typography":p(()=>import(`./typography-RGnPf_EK.js`),__vite__mapDeps([117,1,118,62,2,3,4,5,20,7,21,18,55,48,14,119,78,19,24,11,12,47])),"/docs/foundations/theming":p(()=>import(`./theming-B8ge7BHD.js`),__vite__mapDeps([120,1,118,62,2,3,4,5,20,7,21,18,55,48,14,78,47])),"/docs/foundations/spacing":p(()=>import(`./spacing-Bsbe5bdk.js`),__vite__mapDeps([121,1,122,78,3,123,47,5])),"/docs/foundations/shadow":p(()=>import(`./shadow-CfBMdmZx.js`),__vite__mapDeps([124,1,18,3,78,125,47])),"/docs/foundations/radius":p(()=>import(`./radius-CkL3wCjv.js`),__vite__mapDeps([126,1,122,78,3,123,47,5])),"/docs/foundations/colors":p(()=>import(`./colors-v2mQxkSi.js`),__vite__mapDeps([127,1,18,3,78,51,52,2,4,5,53,12,54,47])),"/docs/foundations/animations":p(()=>import(`./animations-DJURr-eU.js`),__vite__mapDeps([128,1,62,2,3,4,5,18,22,23,13,11,12,14,24,25,26,27,28,47])),"/docs/components/status/toast":p(()=>import(`./toast-CbVaio6j.js`),__vite__mapDeps([129,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,131,101,32,16])),"/docs/components/status/star-rating":p(()=>import(`./star-rating-DqS4usKV.js`),__vite__mapDeps([132,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,93])),"/docs/components/status/skeleton":p(()=>import(`./skeleton-D7ZdR3wU.js`),__vite__mapDeps([133,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/progress-circle":p(()=>import(`./progress-circle-DqFoyEmw.js`),__vite__mapDeps([134,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/progress-bar":p(()=>import(`./progress-bar-CMyA0ICF.js`),__vite__mapDeps([135,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/meter":p(()=>import(`./meter-DXzfY8Ss.js`),__vite__mapDeps([136,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/badge":p(()=>import(`./badge-niLgsiqu.js`),__vite__mapDeps([137,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,64,131,101,32])),"/docs/components/status/alert":p(()=>import(`./alert-Os6ka4um.js`),__vite__mapDeps([138,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,131,74,33,16])),"/docs/components/overlays/tooltip":p(()=>import(`./tooltip-j9g3CXtG.js`),__vite__mapDeps([139,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/overlays/popover":p(()=>import(`./popover-CtY7k7GN.js`),__vite__mapDeps([140,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,67])),"/docs/components/overlays/lightbox":p(()=>import(`./lightbox-Dw6jzRyG.js`),__vite__mapDeps([141,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,15,73,49,16])),"/docs/components/overlays/hover-card":p(()=>import(`./hover-card-CpKLRTup.js`),__vite__mapDeps([142,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,63])),"/docs/components/overlays/drawer":p(()=>import(`./drawer-CzPC22U5.js`),__vite__mapDeps([143,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,45,8,15,16,17])),"/docs/components/overlays/dialog":p(()=>import(`./dialog-CK6_0vt2.js`),__vite__mapDeps([144,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,6,8,15,16,17,88,31,32,33,34,38,89,35,37])),"/docs/components/overlays/alert-dialog":p(()=>import(`./alert-dialog-DTviM3iE.js`),__vite__mapDeps([145,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,8,15,16,17])),"/docs/components/navigation/tabs":p(()=>import(`./tabs-ozPDjcDv.js`),__vite__mapDeps([146,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,27])),"/docs/components/navigation/table-of-contents":p(()=>import(`./table-of-contents-C114zcEv.js`),__vite__mapDeps([147,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,50])),"/docs/components/navigation/sidebar":p(()=>import(`./sidebar-BzD7VWQp.js`),__vite__mapDeps([148,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100,46,49,17])),"/docs/components/navigation/sidebar-layout":p(()=>import(`./sidebar-layout-CnKvfI12.js`),__vite__mapDeps([149,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,150,151,88,31,32,33,34,38,89,35,37,100,152,153,24,154,16,44,45,8,15,17,46,49,50])),"/docs/components/navigation/pagination":p(()=>import(`./pagination-BucyWGYS.js`),__vite__mapDeps([155,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,156,72,73,49,76])),"/docs/components/navigation/navbar":p(()=>import(`./navbar-C9lbWbbD.js`),__vite__mapDeps([157,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,153,24,100,154,16,53,42,36])),"/docs/components/navigation/link":p(()=>import(`./link-BvMZ1QBS.js`),__vite__mapDeps([158,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100])),"/docs/components/navigation/header-layout":p(()=>import(`./header-layout-dziQebPl.js`),__vite__mapDeps([159,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,151,88,31,32,33,34,38,89,35,37,100,152,153,24,154,16])),"/docs/components/navigation/footer":p(()=>import(`./footer-CU6dizOy.js`),__vite__mapDeps([160,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,151,88,31,32,33,34,38,89,35,37,100,99])),"/docs/components/navigation/disclosure":p(()=>import(`./disclosure-DHxelhol.js`),__vite__mapDeps([161,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,59,42])),"/docs/components/navigation/disclosure-group":p(()=>import(`./disclosure-group-DLawefcF.js`),__vite__mapDeps([162,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,58,59,42])),"/docs/components/navigation/breadcrumbs":p(()=>import(`./breadcrumbs-C7DdQFoI.js`),__vite__mapDeps([163,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100,49])),"/docs/components/layout/window-splitter":p(()=>import(`./window-splitter-Do2OKM8R.js`),__vite__mapDeps([164,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/layout/toolbar":p(()=>import(`./toolbar-Cp_KxBYV.js`),__vite__mapDeps([165,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,166,37,167,75])),"/docs/components/layout/page":p(()=>import(`./page-D5vhxGYz.js`),__vite__mapDeps([168,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,53,156])),"/docs/components/layout/grid":p(()=>import(`./grid-D9aUw6dw.js`),__vite__mapDeps([169,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,78])),"/docs/components/layout/flex":p(()=>import(`./flex-Mf7QASWf.js`),__vite__mapDeps([170,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/form/text-field":p(()=>import(`./text-field-CE2GKXJT.js`),__vite__mapDeps([171,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,88,31,32,33,34,38,89,35,37,101])),"/docs/components/form/text-area":p(()=>import(`./text-area-s2PFPY9K.js`),__vite__mapDeps([172,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,96,34,89,35,37,38])),"/docs/components/form/switch":p(()=>import(`./switch-CuCERCNW.js`),__vite__mapDeps([173,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,85])),"/docs/components/form/slider":p(()=>import(`./slider-D_pdgc1B.js`),__vite__mapDeps([174,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,79,80])),"/docs/components/form/select":p(()=>import(`./select-OrhA-b4-.js`),__vite__mapDeps([175,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27,29,30,31,32,33,34,35,36,16,37,38,40,41,42])),"/docs/components/form/search-field":p(()=>import(`./search-field-DbdYLesd.js`),__vite__mapDeps([176,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,30,31,32,33,34,35,36,16,37,38])),"/docs/components/form/radio":p(()=>import(`./radio-DZh88k0x.js`),__vite__mapDeps([177,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/form/number-field":p(()=>import(`./number-field-CVJaQWdT.js`),__vite__mapDeps([178,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,111,31,32,33,34,112,113,35,92,82,37,38])),"/docs/components/form/label":p(()=>import(`./label-Bl5gfGi6.js`),__vite__mapDeps([179,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,88,31,32,33,34,38,89,35,37])),"/docs/components/form/form":p(()=>import(`./form-Nw_ORA6K.js`),__vite__mapDeps([180,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,88,31,32,33,34,38,89,35,37])),"/docs/components/form/file-drop-zone":p(()=>import(`./file-drop-zone-DWL990Fl.js`),__vite__mapDeps([181,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,109,110,38])),"/docs/components/form/combobox":p(()=>import(`./combobox-Ba65NbzE.js`),__vite__mapDeps([182,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27,31,32,33,34,41,35,42,37,38])),"/docs/components/form/checkbox":p(()=>import(`./checkbox-BeBtrknX.js`),__vite__mapDeps([183,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/form/autocomplete":p(()=>import(`./autocomplete-CXqTMCVQ.js`),__vite__mapDeps([184,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27,88,31,32,33,34,38,89,35,37,40,41])),"/docs/components/color/color-wheel":p(()=>import(`./color-wheel-DU_PCJci.js`),__vite__mapDeps([185,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,186,106,107])),"/docs/components/color/color-swatch":p(()=>import(`./color-swatch-CBI0xHtH.js`),__vite__mapDeps([187,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,105,106,107])),"/docs/components/color/color-swatch-picker":p(()=>import(`./color-swatch-picker-BCaPvXzA.js`),__vite__mapDeps([188,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,189,105,106,107,26,27,190])),"/docs/components/color/color-slider":p(()=>import(`./color-slider-MoN-jhsb.js`),__vite__mapDeps([191,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,192,186,106,107,80])),"/docs/components/color/color-picker":p(()=>import(`./color-picker-Cdtp-nmf.js`),__vite__mapDeps([193,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,186,106,107,194,31,32,33,34,113,112,35,190,37,38,192,80,189,105,26,27,22,24,25,29,30,36,16,40,41,42])),"/docs/components/color/color-field":p(()=>import(`./color-field-jafvBDRg.js`),__vite__mapDeps([195,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,194,31,32,33,34,113,112,35,107,190,37,38])),"/docs/components/color/color-area":p(()=>import(`./color-area-KOtsxXrr.js`),__vite__mapDeps([196,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,186,106,107])),"/docs/components/content/video":p(()=>import(`./video-04yu7v72.js`),__vite__mapDeps([197,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/content/typography":p(()=>import(`./typography-giOIOHSO.js`),__vite__mapDeps([198,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,119,78,24])),"/docs/components/content/text":p(()=>import(`./text-CytUVl_O.js`),__vite__mapDeps([199,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/content/separator":p(()=>import(`./separator-PoVikaXC.js`),__vite__mapDeps([200,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,24])),"/docs/components/content/markdown-content":p(()=>import(`./markdown-content-BNttHj-r.js`),__vite__mapDeps([201,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100])),"/docs/components/content/kbd":p(()=>import(`./kbd-BvvJ1do2.js`),__vite__mapDeps([202,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,65])),"/docs/components/content/image-cropper":p(()=>import(`./image-cropper-BqLKG7Ta.js`),__vite__mapDeps([203,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,6,8,15,16,17,79,80])),"/docs/components/content/empty-state":p(()=>import(`./empty-state-5vOlO51b.js`),__vite__mapDeps([204,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,108,82,33])),"/docs/components/content/editable-text":p(()=>import(`./editable-text-BD-5kowN.js`),__vite__mapDeps([205,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,206,38,89,35,37,22,24,25,26,27])),"/docs/components/content/content":p(()=>import(`./content-B4gPr8oR.js`),__vite__mapDeps([207,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,150])),"/docs/components/content/card":p(()=>import(`./card-DfITAce4.js`),__vite__mapDeps([208,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,64,76,81,103])),"/docs/components/content/avatar":p(()=>import(`./avatar-DA2UAsem.js`),__vite__mapDeps([209,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,63])),"/docs/components/content/aspect-ratio":p(()=>import(`./aspect-ratio-CLmeJwiG.js`),__vite__mapDeps([210,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,115])),"/docs/components/collections/tree":p(()=>import(`./tree-bGMdeVXt.js`),__vite__mapDeps([211,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,212,25,87,49,213,110])),"/docs/components/collections/tag-group":p(()=>import(`./tag-group-B9Jd60Bu.js`),__vite__mapDeps([214,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,86,87,26,27,16,215])),"/docs/components/collections/table":p(()=>import(`./table-Cx6w1Aq5.js`),__vite__mapDeps([216,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,213,110,215])),"/docs/components/collections/menubar":p(()=>import(`./menubar-H8gxVcmA.js`),__vite__mapDeps([217,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,65,22,24,25,26,27,66,49,167])),"/docs/components/collections/menu":p(()=>import(`./menu-CTm1E2hU.js`),__vite__mapDeps([218,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,66,22,24,25,26,27,49])),"/docs/components/collections/listbox":p(()=>import(`./listbox-O_Af4wiP.js`),__vite__mapDeps([219,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27])),"/docs/components/collections/context-menu":p(()=>import(`./context-menu-wRfHPSXf.js`),__vite__mapDeps([220,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,66,22,24,25,26,27,49])),"/docs/components/collections/command-menu":p(()=>import(`./command-menu-BYH3rM78.js`),__vite__mapDeps([221,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,66,22,24,25,26,27,49,30,31,32,33,34,35,36,16,37,38,8,40,41,15])),"/docs/components/buttons/toggle-button":p(()=>import(`./toggle-button-BVhJ43ZM.js`),__vite__mapDeps([222,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,102])),"/docs/components/buttons/toggle-button-group":p(()=>import(`./toggle-button-group-CFHplqoB.js`),__vite__mapDeps([223,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/buttons/segmented-control":p(()=>import(`./segmented-control-DdMTbXW0.js`),__vite__mapDeps([224,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,95])),"/docs/components/buttons/icon-button":p(()=>import(`./icon-button-CAtq9IG8.js`),__vite__mapDeps([225,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,81,82,226,93])),"/docs/components/buttons/copy-to-clipboard-button":p(()=>import(`./copy-to-clipboard-button-DEkDE9z4.js`),__vite__mapDeps([227,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/buttons/button":p(()=>import(`./button-DOyQe58u.js`),__vite__mapDeps([228,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,97,226,115])),"/docs/components/buttons/button-group":p(()=>import(`./button-group-tTHu3Gta.js`),__vite__mapDeps([229,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,154,37])),"/docs/components/date-and-time/time-field":p(()=>import(`./time-field-C5e70i0L.js`),__vite__mapDeps([230,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,31,32,33,34,231,232,113,41,37,38])),"/docs/components/date-and-time/range-calendar":p(()=>import(`./range-calendar-CTJsFu8h.js`),__vite__mapDeps([233,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,234,235,232,73,49,17])),"/docs/components/date-and-time/date-range-picker":p(()=>import(`./date-range-picker-BEpUNG1U.js`),__vite__mapDeps([236,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,234,235,232,73,49,17,31,32,33,34,231,113,41,37,38,237])),"/docs/components/date-and-time/date-picker":p(()=>import(`./date-picker-Cc1-pC1K.js`),__vite__mapDeps([238,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,239,22,24,25,26,27,29,30,31,32,33,34,35,36,16,37,38,40,41,42,235,232,73,49,240,231,113,237])),"/docs/components/date-and-time/date-field":p(()=>import(`./date-field-B4-6e4kz.js`),__vite__mapDeps([241,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,240,31,32,33,34,231,232,113,41,37,38])),"/docs/components/date-and-time/calendar":p(()=>import(`./calendar-CGAUf6Y4.js`),__vite__mapDeps([242,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,239,22,24,25,26,27,29,30,31,32,33,34,35,36,16,37,38,40,41,42,235,232,73,49]))},le={"/docs/introduction":(0,M.lazy)(()=>$[`/docs/introduction`]),"/docs/ai":(0,M.lazy)(()=>$[`/docs/ai`]),"/docs/showcase/todo-table":(0,M.lazy)(()=>$[`/docs/showcase/todo-table`]),"/docs/showcase/spotify":(0,M.lazy)(()=>$[`/docs/showcase/spotify`]),"/docs/showcase/music":(0,M.lazy)(()=>$[`/docs/showcase/music`]),"/docs/showcase/llm":(0,M.lazy)(()=>$[`/docs/showcase/llm`]),"/docs/showcase/invoice":(0,M.lazy)(()=>$[`/docs/showcase/invoice`]),"/docs/showcase/ecommerce":(0,M.lazy)(()=>$[`/docs/showcase/ecommerce`]),"/docs/showcase/canvas-editor":(0,M.lazy)(()=>$[`/docs/showcase/canvas-editor`]),"/docs/foundations/typography":(0,M.lazy)(()=>$[`/docs/foundations/typography`]),"/docs/foundations/theming":(0,M.lazy)(()=>$[`/docs/foundations/theming`]),"/docs/foundations/spacing":(0,M.lazy)(()=>$[`/docs/foundations/spacing`]),"/docs/foundations/shadow":(0,M.lazy)(()=>$[`/docs/foundations/shadow`]),"/docs/foundations/radius":(0,M.lazy)(()=>$[`/docs/foundations/radius`]),"/docs/foundations/colors":(0,M.lazy)(()=>$[`/docs/foundations/colors`]),"/docs/foundations/animations":(0,M.lazy)(()=>$[`/docs/foundations/animations`]),"/docs/components/status/toast":(0,M.lazy)(()=>$[`/docs/components/status/toast`]),"/docs/components/status/star-rating":(0,M.lazy)(()=>$[`/docs/components/status/star-rating`]),"/docs/components/status/skeleton":(0,M.lazy)(()=>$[`/docs/components/status/skeleton`]),"/docs/components/status/progress-circle":(0,M.lazy)(()=>$[`/docs/components/status/progress-circle`]),"/docs/components/status/progress-bar":(0,M.lazy)(()=>$[`/docs/components/status/progress-bar`]),"/docs/components/status/meter":(0,M.lazy)(()=>$[`/docs/components/status/meter`]),"/docs/components/status/badge":(0,M.lazy)(()=>$[`/docs/components/status/badge`]),"/docs/components/status/alert":(0,M.lazy)(()=>$[`/docs/components/status/alert`]),"/docs/components/overlays/tooltip":(0,M.lazy)(()=>$[`/docs/components/overlays/tooltip`]),"/docs/components/overlays/popover":(0,M.lazy)(()=>$[`/docs/components/overlays/popover`]),"/docs/components/overlays/lightbox":(0,M.lazy)(()=>$[`/docs/components/overlays/lightbox`]),"/docs/components/overlays/hover-card":(0,M.lazy)(()=>$[`/docs/components/overlays/hover-card`]),"/docs/components/overlays/drawer":(0,M.lazy)(()=>$[`/docs/components/overlays/drawer`]),"/docs/components/overlays/dialog":(0,M.lazy)(()=>$[`/docs/components/overlays/dialog`]),"/docs/components/overlays/alert-dialog":(0,M.lazy)(()=>$[`/docs/components/overlays/alert-dialog`]),"/docs/components/navigation/tabs":(0,M.lazy)(()=>$[`/docs/components/navigation/tabs`]),"/docs/components/navigation/table-of-contents":(0,M.lazy)(()=>$[`/docs/components/navigation/table-of-contents`]),"/docs/components/navigation/sidebar":(0,M.lazy)(()=>$[`/docs/components/navigation/sidebar`]),"/docs/components/navigation/sidebar-layout":(0,M.lazy)(()=>$[`/docs/components/navigation/sidebar-layout`]),"/docs/components/navigation/pagination":(0,M.lazy)(()=>$[`/docs/components/navigation/pagination`]),"/docs/components/navigation/navbar":(0,M.lazy)(()=>$[`/docs/components/navigation/navbar`]),"/docs/components/navigation/link":(0,M.lazy)(()=>$[`/docs/components/navigation/link`]),"/docs/components/navigation/header-layout":(0,M.lazy)(()=>$[`/docs/components/navigation/header-layout`]),"/docs/components/navigation/footer":(0,M.lazy)(()=>$[`/docs/components/navigation/footer`]),"/docs/components/navigation/disclosure":(0,M.lazy)(()=>$[`/docs/components/navigation/disclosure`]),"/docs/components/navigation/disclosure-group":(0,M.lazy)(()=>$[`/docs/components/navigation/disclosure-group`]),"/docs/components/navigation/breadcrumbs":(0,M.lazy)(()=>$[`/docs/components/navigation/breadcrumbs`]),"/docs/components/layout/window-splitter":(0,M.lazy)(()=>$[`/docs/components/layout/window-splitter`]),"/docs/components/layout/toolbar":(0,M.lazy)(()=>$[`/docs/components/layout/toolbar`]),"/docs/components/layout/page":(0,M.lazy)(()=>$[`/docs/components/layout/page`]),"/docs/components/layout/grid":(0,M.lazy)(()=>$[`/docs/components/layout/grid`]),"/docs/components/layout/flex":(0,M.lazy)(()=>$[`/docs/components/layout/flex`]),"/docs/components/form/text-field":(0,M.lazy)(()=>$[`/docs/components/form/text-field`]),"/docs/components/form/text-area":(0,M.lazy)(()=>$[`/docs/components/form/text-area`]),"/docs/components/form/switch":(0,M.lazy)(()=>$[`/docs/components/form/switch`]),"/docs/components/form/slider":(0,M.lazy)(()=>$[`/docs/components/form/slider`]),"/docs/components/form/select":(0,M.lazy)(()=>$[`/docs/components/form/select`]),"/docs/components/form/search-field":(0,M.lazy)(()=>$[`/docs/components/form/search-field`]),"/docs/components/form/radio":(0,M.lazy)(()=>$[`/docs/components/form/radio`]),"/docs/components/form/number-field":(0,M.lazy)(()=>$[`/docs/components/form/number-field`]),"/docs/components/form/label":(0,M.lazy)(()=>$[`/docs/components/form/label`]),"/docs/components/form/form":(0,M.lazy)(()=>$[`/docs/components/form/form`]),"/docs/components/form/file-drop-zone":(0,M.lazy)(()=>$[`/docs/components/form/file-drop-zone`]),"/docs/components/form/combobox":(0,M.lazy)(()=>$[`/docs/components/form/combobox`]),"/docs/components/form/checkbox":(0,M.lazy)(()=>$[`/docs/components/form/checkbox`]),"/docs/components/form/autocomplete":(0,M.lazy)(()=>$[`/docs/components/form/autocomplete`]),"/docs/components/color/color-wheel":(0,M.lazy)(()=>$[`/docs/components/color/color-wheel`]),"/docs/components/color/color-swatch":(0,M.lazy)(()=>$[`/docs/components/color/color-swatch`]),"/docs/components/color/color-swatch-picker":(0,M.lazy)(()=>$[`/docs/components/color/color-swatch-picker`]),"/docs/components/color/color-slider":(0,M.lazy)(()=>$[`/docs/components/color/color-slider`]),"/docs/components/color/color-picker":(0,M.lazy)(()=>$[`/docs/components/color/color-picker`]),"/docs/components/color/color-field":(0,M.lazy)(()=>$[`/docs/components/color/color-field`]),"/docs/components/color/color-area":(0,M.lazy)(()=>$[`/docs/components/color/color-area`]),"/docs/components/content/video":(0,M.lazy)(()=>$[`/docs/components/content/video`]),"/docs/components/content/typography":(0,M.lazy)(()=>$[`/docs/components/content/typography`]),"/docs/components/content/text":(0,M.lazy)(()=>$[`/docs/components/content/text`]),"/docs/components/content/separator":(0,M.lazy)(()=>$[`/docs/components/content/separator`]),"/docs/components/content/markdown-content":(0,M.lazy)(()=>$[`/docs/components/content/markdown-content`]),"/docs/components/content/kbd":(0,M.lazy)(()=>$[`/docs/components/content/kbd`]),"/docs/components/content/image-cropper":(0,M.lazy)(()=>$[`/docs/components/content/image-cropper`]),"/docs/components/content/empty-state":(0,M.lazy)(()=>$[`/docs/components/content/empty-state`]),"/docs/components/content/editable-text":(0,M.lazy)(()=>$[`/docs/components/content/editable-text`]),"/docs/components/content/content":(0,M.lazy)(()=>$[`/docs/components/content/content`]),"/docs/components/content/card":(0,M.lazy)(()=>$[`/docs/components/content/card`]),"/docs/components/content/avatar":(0,M.lazy)(()=>$[`/docs/components/content/avatar`]),"/docs/components/content/aspect-ratio":(0,M.lazy)(()=>$[`/docs/components/content/aspect-ratio`]),"/docs/components/collections/tree":(0,M.lazy)(()=>$[`/docs/components/collections/tree`]),"/docs/components/collections/tag-group":(0,M.lazy)(()=>$[`/docs/components/collections/tag-group`]),"/docs/components/collections/table":(0,M.lazy)(()=>$[`/docs/components/collections/table`]),"/docs/components/collections/menubar":(0,M.lazy)(()=>$[`/docs/components/collections/menubar`]),"/docs/components/collections/menu":(0,M.lazy)(()=>$[`/docs/components/collections/menu`]),"/docs/components/collections/listbox":(0,M.lazy)(()=>$[`/docs/components/collections/listbox`]),"/docs/components/collections/context-menu":(0,M.lazy)(()=>$[`/docs/components/collections/context-menu`]),"/docs/components/collections/command-menu":(0,M.lazy)(()=>$[`/docs/components/collections/command-menu`]),"/docs/components/buttons/toggle-button":(0,M.lazy)(()=>$[`/docs/components/buttons/toggle-button`]),"/docs/components/buttons/toggle-button-group":(0,M.lazy)(()=>$[`/docs/components/buttons/toggle-button-group`]),"/docs/components/buttons/segmented-control":(0,M.lazy)(()=>$[`/docs/components/buttons/segmented-control`]),"/docs/components/buttons/icon-button":(0,M.lazy)(()=>$[`/docs/components/buttons/icon-button`]),"/docs/components/buttons/copy-to-clipboard-button":(0,M.lazy)(()=>$[`/docs/components/buttons/copy-to-clipboard-button`]),"/docs/components/buttons/button":(0,M.lazy)(()=>$[`/docs/components/buttons/button`]),"/docs/components/buttons/button-group":(0,M.lazy)(()=>$[`/docs/components/buttons/button-group`]),"/docs/components/date-and-time/time-field":(0,M.lazy)(()=>$[`/docs/components/date-and-time/time-field`]),"/docs/components/date-and-time/range-calendar":(0,M.lazy)(()=>$[`/docs/components/date-and-time/range-calendar`]),"/docs/components/date-and-time/date-range-picker":(0,M.lazy)(()=>$[`/docs/components/date-and-time/date-range-picker`]),"/docs/components/date-and-time/date-picker":(0,M.lazy)(()=>$[`/docs/components/date-and-time/date-picker`]),"/docs/components/date-and-time/date-field":(0,M.lazy)(()=>$[`/docs/components/date-and-time/date-field`]),"/docs/components/date-and-time/calendar":(0,M.lazy)(()=>$[`/docs/components/date-and-time/calendar`])};export{se as a,J as c,re as d,k as f,ne as h,Q as i,q as l,D as m,le as n,Z as o,O as p,ce as r,X as s,$ as t,N as u};